feat(core): support for Tiptap V3

docs/package.json

@@ -35,11 +35,11 @@
     "@fumadocs/mdx-remote": "1.3.0",
     "@headlessui/react": "^1.7.19",
     "@heroicons/react": "^2.2.0",
-    "@liveblocks/client": "^3",
-    "@liveblocks/react": "^3",
-    "@liveblocks/react-blocknote": "^3",
-    "@liveblocks/react-tiptap": "^3",
-    "@liveblocks/react-ui": "^3",
+    "@liveblocks/client": "3.7.1-tiptap3",
+    "@liveblocks/react": "3.7.1-tiptap3",
+    "@liveblocks/react-blocknote": "3.7.1-tiptap3",
+    "@liveblocks/react-tiptap": "3.7.1-tiptap3",
+    "@liveblocks/react-ui": "3.7.1-tiptap3",
     "@mantine/core": "^7.17.3",
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
@@ -54,7 +54,7 @@
     "@shikijs/langs-precompiled": "^3.2.1",
     "@shikijs/themes": "^3.2.1",
     "@shikijs/types": "^3.2.1",
-    "@tiptap/core": "^2.26.1",
+    "@tiptap/core": "^3.4.3",
     "@uppy/core": "^3.13.1",
     "@uppy/dashboard": "^3.9.1",
     "@uppy/drag-drop": "^3.1.1",

examples/07-collaboration/02-liveblocks/.bnexample.json

@@ -4,11 +4,11 @@
   "author": "yousefed",
   "tags": ["Advanced", "Saving/Loading", "Collaboration"],
   "dependencies": {
-    "@liveblocks/client": "^3",
-    "@liveblocks/react": "^3",
-    "@liveblocks/react-blocknote": "^3",
-    "@liveblocks/react-tiptap": "^3",
-    "@liveblocks/react-ui": "^3",
+    "@liveblocks/client": "3.7.1-tiptap3",
+    "@liveblocks/react": "3.7.1-tiptap3",
+    "@liveblocks/react-blocknote": "3.7.1-tiptap3",
+    "@liveblocks/react-tiptap": "3.7.1-tiptap3",
+    "@liveblocks/react-ui": "3.7.1-tiptap3",
     "yjs": "^13.6.27"
   }
 }

examples/07-collaboration/02-liveblocks/package.json

@@ -17,11 +17,11 @@
     "@blocknote/shadcn": "latest",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@liveblocks/client": "^3",
-    "@liveblocks/react": "^3",
-    "@liveblocks/react-blocknote": "^3",
-    "@liveblocks/react-tiptap": "^3",
-    "@liveblocks/react-ui": "^3",
+    "@liveblocks/client": "3.7.1-tiptap3",
+    "@liveblocks/react": "3.7.1-tiptap3",
+    "@liveblocks/react-blocknote": "3.7.1-tiptap3",
+    "@liveblocks/react-tiptap": "3.7.1-tiptap3",
+    "@liveblocks/react-ui": "3.7.1-tiptap3",
     "yjs": "^13.6.27"
   },
   "devDependencies": {

examples/08-extensions/01-tiptap-arrow-conversion/.bnexample.json

@@ -5,6 +5,6 @@
   "tags": ["Extension"],
   "pro": true,
   "dependencies": {
-    "@tiptap/core": "^2.26.1"
+    "@tiptap/core": "^3.4.3"
   }
 }

examples/08-extensions/01-tiptap-arrow-conversion/package.json

@@ -17,7 +17,7 @@
     "@blocknote/shadcn": "latest",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@tiptap/core": "^2.26.1"
+    "@tiptap/core": "^3.4.3"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",

package.json

@@ -33,7 +33,10 @@
       "msw",
       "nx",
       "unrs-resolver"
-    ]
+    ],
+    "patchedDependencies": {
+      "y-prosemirror": "patches/y-prosemirror.patch"
+    }
   },
   "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad",
   "private": true,

packages/core/package.json

@@ -81,21 +81,19 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@shikijs/types": "3.2.1",
-    "@tiptap/core": "^2.26.1",
-    "@tiptap/extension-bold": "^2.26.1",
-    "@tiptap/extension-code": "^2.26.1",
-    "@tiptap/extension-gapcursor": "^2.26.1",
-    "@tiptap/extension-history": "^2.26.1",
-    "@tiptap/extension-horizontal-rule": "^2.26.1",
-    "@tiptap/extension-italic": "^2.26.1",
-    "@tiptap/extension-link": "^2.26.1",
-    "@tiptap/extension-paragraph": "^2.26.1",
-    "@tiptap/extension-strike": "^2.26.1",
-    "@tiptap/extension-table-cell": "^2.26.1",
-    "@tiptap/extension-table-header": "^2.26.1",
-    "@tiptap/extension-text": "^2.26.1",
-    "@tiptap/extension-underline": "^2.26.1",
-    "@tiptap/pm": "^2.26.1",
+    "@tiptap/core": "^3.4.3",
+    "@tiptap/extension-bold": "^3",
+    "@tiptap/extension-code": "^3",
+    "@tiptap/extension-gapcursor": "^3",
+    "@tiptap/extension-history": "^3",
+    "@tiptap/extension-horizontal-rule": "^3",
+    "@tiptap/extension-italic": "^3",
+    "@tiptap/extension-link": "^3",
+    "@tiptap/extension-paragraph": "^3",
+    "@tiptap/extension-strike": "^3",
+    "@tiptap/extension-text": "^3",
+    "@tiptap/extension-underline": "^3",
+    "@tiptap/pm": "^3.4.3",
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3",
     "hast-util-from-dom": "^5.0.1",

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/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -60,23 +60,38 @@ export function serializeInlineContentExternalHTML<
 
   for (const node of nodes) {
     // Check if this is a custom inline content node with toExternalHTML
-    if (editor.schema.inlineContentSchema[node.type.name]) {
+    if (
+      node.type.name !== "text" &&
+      editor.schema.inlineContentSchema[node.type.name]
+    ) {
       const inlineContentImplementation =
         editor.schema.inlineContentSpecs[node.type.name].implementation;
 
-      if (inlineContentImplementation?.toExternalHTML) {
+      if (inlineContentImplementation) {
         // Convert the node to inline content format
         const inlineContent = nodeToCustomInlineContent(
           node,
           editor.schema.inlineContentSchema,
           editor.schema.styleSchema,
         );
 
-        // Use the custom toExternalHTML method
-        const output = inlineContentImplementation.toExternalHTML(
-          inlineContent as any,
-          editor as any,
-        );
+        // Use the custom toExternalHTML method or fallback to `render`
+        const output = inlineContentImplementation.toExternalHTML
+          ? inlineContentImplementation.toExternalHTML(
+              inlineContent as any,
+              editor as any,
+            )
+          : inlineContentImplementation.render.call(
+              {
+                renderType: "dom",
+                props: undefined,
+              },
+              inlineContent as any,
+              () => {
+                // No-op
+              },
+              editor as any,
+            );
 
         if (output) {
           fragment.appendChild(output.dom);
@@ -93,14 +108,40 @@ export function serializeInlineContentExternalHTML<
           continue;
         }
       }
-    }
+    } else if (node.type.name === "text") {
+      // We serialize text nodes manually as we need to serialize the styles/
+      // marks using `styleSpec.implementation.render`. When left up to
+      // ProseMirror, it'll use `toDOM` which is incorrect.
+      let dom: globalThis.Node | Text = document.createTextNode(
+        node.textContent,
+      );
+      // Reverse the order of marks to maintain the correct priority.
+      for (const mark of node.marks.toReversed()) {
+        if (mark.type.name in editor.schema.styleSpecs) {
+          const newDom = (
+            editor.schema.styleSpecs[mark.type.name].implementation
+              .toExternalHTML ??
+            editor.schema.styleSpecs[mark.type.name].implementation.render
+          )(mark.attrs["stringValue"], editor);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        } else {
+          const domOutputSpec = mark.type.spec.toDOM!(mark, true);
+          const newDom = DOMSerializer.renderSpec(document, domOutputSpec);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        }
+      }
 
-    // Fall back to default serialization for this node
-    const nodeFragment = serializer.serializeFragment(
-      Fragment.from([node]),
-      options,
-    );
-    fragment.appendChild(nodeFragment);
+      fragment.appendChild(dom);
+    } else {
+      // Fall back to default serialization for this node
+      const nodeFragment = serializer.serializeFragment(
+        Fragment.from([node]),
+        options,
+      );
+      fragment.appendChild(nodeFragment);
+    }
   }
 
   if (

packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -48,7 +48,6 @@ export function serializeInlineContentInternalHTML<
     // Check if this is a custom inline content node with toExternalHTML
     if (
       node.type.name !== "text" &&
-      node.type.name !== "link" &&
       editor.schema.inlineContentSchema[node.type.name]
     ) {
       const inlineContentImplementation =
@@ -90,14 +89,38 @@ export function serializeInlineContentInternalHTML<
           continue;
         }
       }
-    }
+    } else if (node.type.name === "text") {
+      // We serialize text nodes manually as we need to serialize the styles/
+      // marks using `styleSpec.implementation.render`. When left up to
+      // ProseMirror, it'll use `toDOM` which is incorrect.
+      let dom: globalThis.Node | Text = document.createTextNode(
+        node.textContent,
+      );
+      // Reverse the order of marks to maintain the correct priority.
+      for (const mark of node.marks.toReversed()) {
+        if (mark.type.name in editor.schema.styleSpecs) {
+          const newDom = editor.schema.styleSpecs[
+            mark.type.name
+          ].implementation.render(mark.attrs["stringValue"], editor);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        } else {
+          const domOutputSpec = mark.type.spec.toDOM!(mark, true);
+          const newDom = DOMSerializer.renderSpec(document, domOutputSpec);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        }
+      }
 
-    // Fall back to default serialization for this node
-    const nodeFragment = serializer.serializeFragment(
-      Fragment.from([node]),
-      options,
-    );
-    fragment.appendChild(nodeFragment);
+      fragment.appendChild(dom);
+    } else {
+      // Fall back to default serialization for this node
+      const nodeFragment = serializer.serializeFragment(
+        Fragment.from([node]),
+        options,
+      );
+      fragment.appendChild(nodeFragment);
+    }
   }
 
   return fragment;