feat: preliminary support for tiptap v3

Author: nperez0111

packages/core/package.json

@@ -70,7 +70,7 @@
     "@tiptap/extension-collaboration-cursor": "^2.11.5",
     "@tiptap/extension-gapcursor": "^2.11.5",
     "@tiptap/extension-hard-break": "^2.11.5",
-    "@tiptap/extension-history": "^2.11.5",
+    "@tiptap/extension-undo-redo": "^2.11.5",
     "@tiptap/extension-horizontal-rule": "^2.11.5",
     "@tiptap/extension-italic": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",

packages/core/src/api/blockManipulation/setupTestEnv.ts

@@ -13,7 +13,6 @@ export function setupTestEnv() {
   });
 
   afterAll(() => {
-    editor.mount(undefined);
     editor._tiptapEditor.destroy();
     editor = undefined as any;
   });

packages/core/src/api/clipboard/clipboardExternal.test.ts

@@ -69,7 +69,6 @@ describe("Test external clipboard HTML", () => {
   });
 
   afterAll(() => {
-    editor.mount(undefined);
     editor._tiptapEditor.destroy();
     editor = undefined as any;
 

packages/core/src/api/clipboard/clipboardInternal.test.ts

@@ -283,7 +283,6 @@ describe("Test ProseMirror selection clipboard HTML", () => {
   });
 
   afterAll(() => {
-    editor.mount(undefined);
     editor._tiptapEditor.destroy();
     editor = undefined as any;
 

packages/core/src/api/exporters/html/htmlConversion.test.ts

@@ -86,7 +86,6 @@ describe("Test HTML conversion", () => {
       });
 
       afterEach(() => {
-        editor.mount(undefined);
         editor._tiptapEditor.destroy();
         editor = undefined as any;
 

packages/core/src/api/exporters/markdown/markdownExporter.test.ts

@@ -62,7 +62,6 @@ describe("markdownExporter", () => {
       });
 
       afterEach(() => {
-        editor.mount(undefined);
         editor._tiptapEditor.destroy();
         editor = undefined as any;
 

packages/core/src/api/nodeConversions/nodeConversions.test.ts

@@ -64,7 +64,6 @@ describe("Test BlockNote-Prosemirror conversion", () => {
       });
 
       afterEach(() => {
-        editor.mount(undefined);
         editor._tiptapEditor.destroy();
         editor = undefined as any;
 

packages/core/src/api/parsers/html/parseHTML.test.ts

@@ -55,7 +55,7 @@ async function parseHTMLAndCompareSnapshots(
   pastedBlocks.pop(); // trailing paragraph
   expect(pastedBlocks).toStrictEqual(blocks);
 
-  editor.mount(undefined);
+  editor.unmount();
 }
 
 describe("Parse HTML", () => {

packages/core/src/api/parsers/markdown/parseMarkdown.test.ts

@@ -27,7 +27,7 @@ async function parseMarkdownAndCompareSnapshots(
     pastedSnapshotPath
   );
 
-  editor.mount(undefined);
+  editor.unmount();
 }
 
 describe("Parse Markdown", () => {

packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -163,7 +163,11 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
         const language = (event.target as HTMLSelectElement).value;
 
         editor.commands.command(({ tr }) => {
-          tr.setNodeAttribute(getPos(), "language", language);
+          const pos = getPos();
+          if (!pos) {
+            return false;
+          }
+          tr.setNodeAttribute(pos, "language", language);
 
           return true;
         });

packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -227,11 +227,13 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
           return;
         }
 
+        const pos = getPos();
+
         // TODO: test
-        if (typeof getPos !== "boolean") {
+        if (pos) {
           const beforeBlockContainerPos = getNearestBlockPos(
             editor.state.doc,
-            getPos()
+            pos
           );
 
           if (beforeBlockContainerPos.node.type.name !== "blockContainer") {
@@ -266,12 +268,14 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         this.options.domAttributes?.inlineContent || {}
       );
 
-      if (typeof getPos !== "boolean") {
+      const pos = getPos();
+
+      if (pos) {
         // Since `node` is a blockContent node, we have to get the block ID from
         // the parent blockContainer node. This means we can't add the label in
         // `renderHTML` as we can't use `getPos` and therefore can't get the
         // parent blockContainer node.
-        const blockID = this.editor.state.doc.resolve(getPos()).node().attrs.id;
+        const blockID = this.editor.state.doc.resolve(pos).node().attrs.id;
         const label = "label-" + blockID;
         checkbox.setAttribute("aria-labelledby", label);
         contentDOM.id = label;

packages/core/src/editor/BlockNoteEditor.ts

@@ -612,6 +612,14 @@ export class BlockNoteEditor<
 
     const tiptapExtensions = [
       ...Object.entries(this.extensions).map(([key, ext]) => {
+        if ("plugin" in ext) {
+          // "blocknote" extensions (prosemirror plugins)
+          return Extension.create({
+            name: key,
+            addProseMirrorPlugins: () => [ext.plugin],
+          });
+        }
+
         if (
           ext instanceof Extension ||
           ext instanceof TipTapNode ||
@@ -621,17 +629,9 @@ export class BlockNoteEditor<
           return ext;
         }
 
-        if (!ext.plugin) {
-          throw new Error(
-            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property"
-          );
-        }
-
-        // "blocknote" extensions (prosemirror plugins)
-        return Extension.create({
-          name: key,
-          addProseMirrorPlugins: () => [ext.plugin],
-        });
+        throw new Error(
+          "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property"
+        );
       }),
     ];
     const tiptapOptions: BlockNoteTipTapEditorOptions = {
@@ -680,15 +680,19 @@ export class BlockNoteEditor<
   };
 
   /**
-   * Mount the editor to a parent DOM element. Call mount(undefined) to clean up
+   * Mount the editor to a parent DOM element.
    *
    * @warning Not needed to call manually when using React, use BlockNoteView to take care of mounting
    */
-  public mount = (
-    parentElement?: HTMLElement | null,
-    contentComponent?: any
-  ) => {
-    this._tiptapEditor.mount(parentElement, contentComponent);
+  public mount = (parentElement: HTMLElement) => {
+    this._tiptapEditor.mount(parentElement);
+  };
+
+  /**
+   * Unmount the editor from the DOM element it is bound to
+   */
+  public unmount = () => {
+    this._tiptapEditor.unmount();
   };
 
   /**

packages/core/src/editor/BlockNoteExtensions.ts

@@ -1,7 +1,7 @@
-import { AnyExtension, Extension, extensions } from "@tiptap/core";
+import { /*AnyExtension,*/ Extension, extensions } from "@tiptap/core";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { HardBreak } from "@tiptap/extension-hard-break";
-import { History } from "@tiptap/extension-history";
+import { UndoRedo } from "@tiptap/extension-undo-redo";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import { Plugin } from "prosemirror-state";
@@ -163,7 +163,8 @@ const getTipTapExtensions = <
 >(
   opts: ExtensionOptions<BSchema, I, S>
 ) => {
-  const tiptapExtensions: AnyExtension[] = [
+  // TODO just for now
+  const tiptapExtensions: any[] = [
     extensions.ClipboardTextSerializer,
     extensions.Commands,
     extensions.Editable,
@@ -275,7 +276,7 @@ const getTipTapExtensions = <
     tiptapExtensions.push(...createCollaborationExtensions(opts.collaboration));
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
-    tiptapExtensions.push(History);
+    tiptapExtensions.push(UndoRedo);
   }
 
   return tiptapExtensions;

packages/core/src/editor/BlockNoteTipTapEditor.ts

@@ -4,8 +4,6 @@ import { Editor as TiptapEditor } from "@tiptap/core";
 
 import { Node } from "@tiptap/pm/model";
 
-import { EditorView } from "@tiptap/pm/view";
-
 import { EditorState, Transaction } from "@tiptap/pm/state";
 import { blockToNode } from "../api/nodeConversions/blockToNode.js";
 import { PartialBlock } from "../blocks/defaultBlocks.js";
@@ -22,46 +20,20 @@ export type BlockNoteTipTapEditorOptions = Partial<
  * the creation of the view from the constructor.
  */
 export class BlockNoteTipTapEditor extends TiptapEditor {
-  private _state: EditorState;
-
   public static create = (
     options: BlockNoteTipTapEditorOptions,
     styleSchema: StyleSchema
   ) => {
-    // because we separate the constructor from the creation of the view,
-    // we need to patch setTimeout to prevent this code from having any effect:
-    // https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117
-    const oldSetTimeout = globalThis?.window?.setTimeout;
-    if (typeof globalThis?.window?.setTimeout !== "undefined") {
-      globalThis.window.setTimeout = (() => {
-        return 0;
-      }) as any;
-    }
-    try {
-      return new BlockNoteTipTapEditor(options, styleSchema);
-    } finally {
-      if (oldSetTimeout) {
-        globalThis.window.setTimeout = oldSetTimeout;
-      }
-    }
+    return new BlockNoteTipTapEditor(options, styleSchema);
   };
 
   protected constructor(
     options: BlockNoteTipTapEditorOptions,
     styleSchema: StyleSchema
   ) {
-    // possible fix for next.js server side rendering
-    // const d = globalThis.document;
-    // const w = globalThis.window;
-    // if (!globalThis.document) {
-    //   globalThis.document = {
-    //     createElement: () => {},
-    //   };
-    // }
-
     // options.injectCSS = false
 
-    super({ ...options, content: undefined });
+    super({ ...options, content: undefined, element: null });
     // try {
     //   globalThis.window = w;
     //   } catch(e) {}
@@ -120,100 +92,16 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       );
     }
 
-    // Create state immediately, so that it's available independently from the View,
-    // the way Prosemirror "intends it to be". This also makes sure that we can access
-    // the state before the view is created / mounted.
-    this._state = EditorState.create({
-      doc,
-      schema: this.schema,
-      // selection: selection || undefined,
-    });
-  }
-
-  get state() {
-    if (this.view) {
-      this._state = this.view.state;
-    }
-    return this._state;
+    // Leverage the fact that we know the view is not created yet, and quickly set the initial state
+    this.view.updateState(
+      EditorState.create({
+        doc,
+        schema: this.schema,
+      })
+    );
   }
 
   dispatch(tr: Transaction) {
-    if (this.view) {
-      this.view.dispatch(tr);
-    } else {
-      // before view has been initialized
-      this._state = this.state.apply(tr);
-    }
-  }
-
-  /**
-   * Replace the default `createView` method with a custom one - which we call on mount
-   */
-  private createViewAlternative(contentComponent?: any) {
-    (this as any).contentComponent = contentComponent;
-
-    const markViews: any = {};
-    this.extensionManager.extensions.forEach((extension) => {
-      if (extension.type === "mark" && extension.config.addMarkView) {
-        // Note: migrate to using `addMarkView` from tiptap as soon as this lands
-        // (currently tiptap doesn't support markviews)
-        markViews[extension.name] = extension.config.addMarkView;
-      }
-    });
-
-    this.view = new EditorView(
-      { mount: this.options.element as any }, // use mount option so that we reuse the existing element instead of creating a new one
-      {
-        ...this.options.editorProps,
-        // @ts-ignore
-        dispatchTransaction: this.dispatchTransaction.bind(this),
-        state: this.state,
-        markViews,
-      }
-    );
-
-    // `editor.view` is not yet available at this time.
-    // Therefore we will add all plugins and node views directly afterwards.
-    const newState = this.state.reconfigure({
-      plugins: this.extensionManager.plugins,
-    });
-
-    this.view.updateState(newState);
-
-    this.createNodeViews();
-
-    // emit the created event, call here manually because we blocked the default call in the constructor
-    // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
-    this.commands.focus(
-      this.options.autofocus ||
-        this.options.element.getAttribute("data-bn-autofocus") === "true",
-      { scrollIntoView: false }
-    );
-    this.emit("create", { editor: this });
-    this.isInitialized = true;
+    this.view.dispatch(tr);
   }
-
-  /**
-   * Mounts / unmounts the editor to a dom element
-   *
-   * @param element DOM element to mount to, ur null / undefined to destroy
-   */
-  public mount = (element?: HTMLElement | null, contentComponent?: any) => {
-    if (!element) {
-      this.destroy();
-    } else {
-      this.options.element = element;
-      this.createViewAlternative(contentComponent);
-    }
-  };
 }
-
-(BlockNoteTipTapEditor.prototype as any).createView = function () {
-  // no-op
-  // Disable default call to `createView` in the Editor constructor.
-  // We should call `createView` manually only when a DOM element is available
-
-  // additional fix because onPaste and onDrop depend on installing plugins in constructor which we don't support
-  // (note: can probably be removed after tiptap upgrade fixed in 2.8.0)
-  this.options.onPaste = this.options.onDrop = undefined;
-};