try suggestion-node prefix approach

Author: nperez0111

examples/01-basic/01-minimal/src/App.tsx

@@ -9,23 +9,23 @@ export default function App() {
   const editor = useCreateBlockNote();
 
   // After the editor is created, replace its document with a ProseMirror
-  // structure that includes a specialNode before the blockContainer's paragraph.
+  // structure that includes a suggestion-paragraph before the blockContainer's paragraph.
   useEffect(() => {
     // Use editor.transact to dispatch a ProseMirror transaction that replaces
     // the entire document content.
     editor.transact((tr) => {
       const { nodes } = editor.pmSchema;
 
-      // Build the specialNode containing a paragraph
-      const specialParagraph = nodes.paragraph.create(
+      // Build the suggestion-paragraph (shadow node for suggestions)
+      const suggestionParagraph = nodes["suggestion-paragraph"].create(
         {
           backgroundColor: "default",
           textAlignment: "left",
           textColor: "default",
+          __suggestionData: "true",
         },
-        [editor.pmSchema.text("Hello from specialNode!")],
+        [editor.pmSchema.text("Hello from suggestion-paragraph!")],
       );
-      const specialNode = nodes.specialNode.create(null, [specialParagraph]);
 
       // Build the main blockContent paragraph
       const mainParagraph = nodes.paragraph.create(
@@ -37,18 +37,17 @@ export default function App() {
         [editor.pmSchema.text("Hello from blockContainer!")],
       );
 
-      // Build the blockContainer with specialNode before blockContent
+      // Build the blockContainer with suggestion-paragraph before blockContent
       //
       // Target structure:
       //   doc
       //     └─ blockGroup
       //          └─ blockContainer
-      //               ├─ specialNode
-      //               │   └─ paragraph("Hello from specialNode!")
+      //               ├─ suggestion-paragraph("Hello from suggestion-paragraph!")
       //               └─ paragraph("Hello from blockContainer!")
       const blockContainer = nodes.blockContainer.create(
         { id: "block-1" },
-        [specialNode, mainParagraph],
+        [suggestionParagraph, mainParagraph],
       );
 
       const blockGroup = nodes.blockGroup.create(null, [blockContainer]);

packages/core/src/editor/managers/ExtensionManager/extensions.ts

@@ -42,7 +42,6 @@ import {
   BlockContainer,
   BlockGroup,
   Doc,
-  SpecialNode,
 } from "../../../pm-nodes/index.js";
 import type {
   BlockNoteEditor,
@@ -119,10 +118,6 @@ export function getDefaultTiptapExtensions(
     BlockGroup.configure({
       domAttributes: options.domAttributes,
     }),
-    SpecialNode.configure({
-      editor: editor,
-      domAttributes: options.domAttributes,
-    }),
     ...Object.values(editor.schema.inlineContentSpecs)
       .filter((a) => a.config !== "link" && a.config !== "text")
       .map((inlineContentSpec) => {
@@ -142,6 +137,16 @@ export function getDefaultTiptapExtensions(
               }),
             ]
           : []),
+        // suggestion shadow node (same block, no parseHTML, different group)
+        ...("suggestionNode" in blockSpec.implementation &&
+        blockSpec.implementation.suggestionNode
+          ? [
+              (blockSpec.implementation.suggestionNode as Node).configure({
+                editor: editor,
+                domAttributes: options.domAttributes,
+              }),
+            ]
+          : []),
       ];
     }),
     createCopyToClipboardExtension(editor),

packages/core/src/pm-nodes/BlockContainer.ts

@@ -13,88 +13,6 @@ const BlockAttributes: Record<string, string> = {
   depthChange: "data-depth-change",
 };
 
-/**
- * The main "Block node" documents consist of
- */
-export const SpecialNode = Node.create<{
-  domAttributes?: BlockNoteDOMAttributes;
-  editor: BlockNoteEditor<any, any, any>;
-}>({
-  name: "specialNode",
-  group: "blockGroupChild bnBlock bnSpecialNode",
-  // A block always contains content, and optionally a blockGroup which contains nested blocks
-  content: "blockContent blockGroup?",
-  // Ensures content-specific keyboard handlers trigger first.
-  priority: 50,
-  defining: true,
-  marks: "y-attributed-insert y-attributed-format y-attributed-delete",
-  addAttributes() {
-    return {
-      XYZ: {
-        isRequired: true,
-        type: "string",
-      },
-    };
-  },
-  parseHTML() {
-    return [
-      // TODO not sure whether this rule is needed or not
-      // {
-      //   tag: "div[data-node-type=" + this.name + "]",
-      //   getAttrs: (element) => {
-      //     if (typeof element === "string") {
-      //       return false;
-      //     }
-
-      //     const attrs: Record<string, string> = {};
-      //     for (const [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
-      //       if (element.getAttribute(HTMLAttr)) {
-      //         attrs[nodeAttr] = element.getAttribute(HTMLAttr)!;
-      //       }
-      //     }
-
-      //     return attrs;
-      //   },
-      // },
-      // Ignore `blockOuter` divs, but parse the `blockContainer` divs inside them.
-      {
-        tag: `div[data-node-type="specialNodeOuter"]`,
-        skip: true,
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const specialNodeOuter = document.createElement("div");
-    specialNodeOuter.className = "bn-block-outer";
-    specialNodeOuter.setAttribute("data-node-type", "specialNodeOuter");
-    for (const [attribute, value] of Object.entries(HTMLAttributes)) {
-      if (attribute !== "class") {
-        specialNodeOuter.setAttribute(attribute, value);
-      }
-    }
-
-    const blockHTMLAttributes = {
-      ...(this.options.domAttributes?.block || {}),
-      ...HTMLAttributes,
-    };
-    const block = document.createElement("div");
-    block.className = mergeCSSClasses("bn-block", blockHTMLAttributes.class);
-    block.setAttribute("data-node-type", this.name);
-    for (const [attribute, value] of Object.entries(blockHTMLAttributes)) {
-      if (attribute !== "class") {
-        block.setAttribute(attribute, value);
-      }
-    }
-
-    specialNodeOuter.appendChild(block);
-
-    return {
-      dom: specialNodeOuter,
-      contentDOM: block,
-    };
-  },
-});
 /**
  * The main "Block node" documents consist of
  */
@@ -105,7 +23,7 @@ export const BlockContainer = Node.create<{
   name: "blockContainer",
   group: "blockGroupChild bnBlock",
   // A block always contains content, and optionally a blockGroup which contains nested blocks
-  content: "bnSpecialNode? blockContent bnSpecialNode? blockGroup?",
+  content: "suggestionBlockContent? blockContent suggestionBlockContent? blockGroup?",
   // Ensures content-specific keyboard handlers trigger first.
   priority: 50,
   defining: true,