feat: preliminary support for tiptap v3

packages/core/package.json

@@ -69,24 +69,24 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@shikijs/types": "3.2.1",
-    "@tiptap/core": "^2.11.5",
-    "@tiptap/extension-bold": "^2.11.5",
-    "@tiptap/extension-code": "^2.11.5",
-    "@tiptap/extension-collaboration": "^2.11.5",
-    "@tiptap/extension-collaboration-cursor": "^2.11.5",
-    "@tiptap/extension-gapcursor": "^2.11.5",
-    "@tiptap/extension-history": "^2.11.5",
-    "@tiptap/extension-horizontal-rule": "^2.11.5",
-    "@tiptap/extension-italic": "^2.11.5",
-    "@tiptap/extension-link": "^2.11.5",
-    "@tiptap/extension-paragraph": "^2.11.5",
-    "@tiptap/extension-strike": "^2.11.5",
-    "@tiptap/extension-table-cell": "^2.11.5",
-    "@tiptap/extension-table-header": "^2.11.5",
-    "@tiptap/extension-table-row": "^2.11.5",
-    "@tiptap/extension-text": "^2.11.5",
-    "@tiptap/extension-underline": "^2.11.5",
-    "@tiptap/pm": "^2.11.5",
+    "@tiptap/core": "3.0.0-next.7",
+    "@tiptap/extension-bold": "3.0.0-next.7",
+    "@tiptap/extension-code": "3.0.0-next.7",
+    "@tiptap/extension-collaboration": "3.0.0-next.7",
+    "@tiptap/extension-collaboration-caret": "3.0.0-next.7",
+    "@tiptap/extension-gapcursor": "3.0.0-next.7",
+    "@tiptap/extensions": "3.0.0-next.7",
+    "@tiptap/extension-hard-break": "3.0.0-next.7",
+    "@tiptap/extension-history": "3.0.0-next.7",
+    "@tiptap/extension-horizontal-rule": "3.0.0-next.7",
+    "@tiptap/extension-italic": "3.0.0-next.7",
+    "@tiptap/extension-link": "3.0.0-next.7",
+    "@tiptap/extension-paragraph": "3.0.0-next.7",
+    "@tiptap/extension-strike": "3.0.0-next.7",
+    "@tiptap/extension-table": "3.0.0-next.7",
+    "@tiptap/extension-text": "3.0.0-next.7",
+    "@tiptap/extension-underline": "3.0.0-next.7",
+    "@tiptap/pm": "3.0.0-next.7",
     "emoji-mart": "^5.6.0",
     "hast-util-from-dom": "^5.0.1",
     "prosemirror-dropcursor": "^1.8.1",
@@ -111,6 +111,7 @@
     "yjs": "^13.6.15"
   },
   "devDependencies": {
+    "@hocuspocus/provider": "^2.15.2",
     "@types/emoji-mart": "^3.0.14",
     "@types/hast": "^3.0.0",
     "@types/uuid": "^8.3.4",
@@ -141,5 +142,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "overrides": {
+    "@tiptap/y-tiptap": "[email protected]",
+    "y-prosemirror": "1.2.17"
+  },
   "gitHead": "37614ab348dcc7faa830a9a88437b37197a2162d"
 }

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

@@ -193,7 +193,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/blocks/TableBlockContent/TableBlockContent.ts

@@ -1,6 +1,4 @@
-import { TableCell } from "@tiptap/extension-table-cell";
-import { TableHeader } from "@tiptap/extension-table-header";
-import { TableRow } from "@tiptap/extension-table-row";
+import { TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 import { Node as PMNode } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
 

packages/core/src/editor/BlockNoteEditor.ts

@@ -625,6 +625,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 ||
@@ -634,17 +642,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 = {
@@ -693,15 +693,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(this, 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,6 +1,5 @@
-import { AnyExtension, Extension, extensions } from "@tiptap/core";
-import { Gapcursor } from "@tiptap/extension-gapcursor";
-import { History } from "@tiptap/extension-history";
+import { Gapcursor, UndoRedo } from "@tiptap/extensions";
+import { /*AnyExtension,*/ Extension, extensions } from "@tiptap/core";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import { Plugin } from "prosemirror-state";
@@ -163,7 +162,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 +275,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;