implement blocknote snapshot for example

Author: ianmacartney

example/convex/example.ts

@@ -6,6 +6,8 @@ import { getSchema } from "@tiptap/core";
 import { Transform, Step } from "@tiptap/pm/transform";
 import { EditorState } from "@tiptap/pm/state";
 import { extensions } from "../src/extensions";
+import { Schema } from "@tiptap/pm/model";
+import { BlockNoteEditor } from "@blocknote/core";
 
 const prosemirrorSync = new ProsemirrorSync(components.prosemirrorSync);
 export const {
@@ -27,10 +29,22 @@ export const {
     // ...do something with the snapshot, like store a copy in another table,
     // save a text version of the document for text search, or generate
     // embeddings for vector search.
-    const node = getSchema(extensions).nodeFromJSON(JSON.parse(snapshot));
+    const snapshotJSON = JSON.parse(snapshot);
+    let schema: Schema;
+    // A hack for our demo which uses both BlockNote and Tiptap.
+    if (id.endsWith("-blocknote")) {
+      // Parse the snapshot from BlockNote.
+      const editor = BlockNoteEditor.create({ _headless: true });
+      schema = editor.pmSchema;
+    } else {
+      // Fetching the content from Tiptap, using your extensions.
+      schema = getSchema(extensions);
+    }
+    const node = schema.nodeFromJSON(snapshotJSON);
+    const content = node.textContent;
     await ctx.scheduler.runAfter(0, internal.example.updateDocSearchIndex, {
       id,
-      content: node.textContent,
+      content,
     });
   },
 });

example/package-lock.json

@@ -26,9 +26,9 @@ function App(props: { id: string }) {
       <div className="card">
         <strong>{editor}</strong>
         {useBlockNote ? (
-          <BlockNoteExample id={props.id} />
+          <BlockNoteExample id={props.id + "-blocknote"} />
         ) : (
-          <TipTapExample id={props.id} />
+          <TipTapExample id={props.id + "-tiptap"} />
         )}
       </div>
       <footer>