chore: migrate to new versions of prosemirror packages (#2854)

* refactor: upgrade prosemirror packages to new typescript versions

* refactor: migrate to new typings from prosemirror

* style: fix linting issues

* style: fix linting issues

* style: fix linting issues

* fix(ci): fix build process by reimplement filterTransaction

* fix(extension-test): fix broken build because of wrong output file names

* fix: fix prosemirror-tables not being bundled correctly for ES6

* fix: move to prosemirror-tables-contently until es6 build is working

* fix: fix tests for youtube

* fix: fix youtube test

* fix(demos): fix demos build

packages/core/src/Editor.ts

@@ -198,7 +198,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    */
   public registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void {
     const plugins = isFunction(handlePlugins)
-      ? handlePlugins(plugin, this.state.plugins)
+      ? handlePlugins(plugin, [...this.state.plugins])
       : [...this.state.plugins, plugin]
 
     const state = this.state.reconfigure({ plugins })
@@ -271,7 +271,7 @@ export class Editor extends EventEmitter<EditorEvents> {
       dispatchTransaction: this.dispatchTransaction.bind(this),
       state: EditorState.create({
         doc,
-        selection,
+        selection: selection || undefined,
       }),
     })
 

packages/core/src/InputRule.ts

@@ -188,7 +188,7 @@ export function inputRulesPlugin(props: { editor: Editor, rules: InputRule[] }):
         return null
       },
       apply(tr, prev) {
-        const stored = tr.getMeta(this)
+        const stored = tr.getMeta(plugin)
 
         if (stored) {
           return stored

packages/core/src/NodeView.ts

@@ -49,11 +49,11 @@ export class NodeView<
     return
   }
 
-  get dom(): Element | null {
-    return null
+  get dom(): HTMLElement {
+    return this.editor.view.dom as HTMLElement
   }
 
-  get contentDOM(): Element | null {
+  get contentDOM(): HTMLElement | null {
     return null
   }
 

packages/core/src/PasteRule.ts

@@ -191,7 +191,7 @@ export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }):
           },
 
           paste: (view, event) => {
-            const html = event.clipboardData?.getData('text/html')
+            const html = (event as ClipboardEvent).clipboardData?.getData('text/html')
 
             isPastedFromProseMirror = !!html?.includes('data-pm-slice')
 

packages/core/src/extensions/tabindex.ts

@@ -10,13 +10,7 @@ export const Tabindex = Extension.create({
       new Plugin({
         key: new PluginKey('tabindex'),
         props: {
-          attributes: () => {
-            if (this.editor.isEditable) {
-              return {
-                tabindex: '0',
-              }
-            }
-          },
+          attributes: this.editor.isEditable ? { tabindex: '0' } : {},
         },
       }),
     ]

packages/core/src/helpers/createChainableState.ts

@@ -11,10 +11,11 @@ export function createChainableState(config: {
 
   return {
     ...state,
-    schema: state.schema,
-    plugins: state.plugins,
     apply: state.apply.bind(state),
     applyTransaction: state.applyTransaction.bind(state),
+    filterTransaction: state.filterTransaction,
+    plugins: state.plugins,
+    schema: state.schema,
     reconfigure: state.reconfigure.bind(state),
     toJSON: state.toJSON.bind(state),
     get storedMarks() {

packages/core/src/helpers/getMarkRange.ts

@@ -40,7 +40,7 @@ export function getMarkRange(
     return
   }
 
-  const mark = findMarkInSet(start.node.marks, type, attributes)
+  const mark = findMarkInSet([...start.node.marks], type, attributes)
 
   if (!mark) {
     return
@@ -51,7 +51,7 @@ export function getMarkRange(
   let endIndex = startIndex + 1
   let endPos = startPos + start.node.nodeSize
 
-  findMarkInSet(start.node.marks, type, attributes)
+  findMarkInSet([...start.node.marks], type, attributes)
 
   while (startIndex > 0 && mark.isInSet($pos.parent.child(startIndex - 1).marks)) {
     startIndex -= 1
@@ -60,7 +60,7 @@ export function getMarkRange(
 
   while (
     endIndex < $pos.parent.childCount
-    && isMarkInSet($pos.parent.child(endIndex).marks, type, attributes)
+    && isMarkInSet([...$pos.parent.child(endIndex).marks], type, attributes)
   ) {
     endPos += $pos.parent.child(endIndex).nodeSize
     endIndex += 1

packages/core/src/helpers/getTextBetween.ts

@@ -27,13 +27,15 @@ export function getTextBetween(
         separated = true
       }
 
-      text += textSerializer({
-        node,
-        pos,
-        parent,
-        index,
-        range,
-      })
+      if (parent) {
+        text += textSerializer({
+          node,
+          pos,
+          parent,
+          index,
+          range,
+        })
+      }
     } else if (node.isText) {
       text += node?.text?.slice(Math.max(from, pos) - pos, to - pos) // eslint-disable-line
       separated = false

packages/core/src/helpers/getTextContentFromNodes.ts

@@ -1,6 +1,6 @@
 import { ResolvedPos } from 'prosemirror-model'
 
-export const getTextContentFromNodes = ($from: ResolvedPos<any>, maxMatch = 500) => {
+export const getTextContentFromNodes = ($from: ResolvedPos, maxMatch = 500) => {
   let textBefore = ''
 
   $from.parent.nodesBetween(