special node approach

Author: nperez0111

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

@@ -2,11 +2,62 @@ import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
+import { useEffect } from "react";
 
 export default function App() {
-  // Creates a new editor instance.
+  // Creates a new editor instance with a default empty paragraph.
   const editor = useCreateBlockNote();
 
+  // After the editor is created, replace its document with a ProseMirror
+  // structure that includes a specialNode 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(
+        {
+          backgroundColor: "default",
+          textAlignment: "left",
+          textColor: "default",
+        },
+        [editor.pmSchema.text("Hello from specialNode!")],
+      );
+      const specialNode = nodes.specialNode.create(null, [specialParagraph]);
+
+      // Build the main blockContent paragraph
+      const mainParagraph = nodes.paragraph.create(
+        {
+          backgroundColor: "default",
+          textAlignment: "left",
+          textColor: "default",
+        },
+        [editor.pmSchema.text("Hello from blockContainer!")],
+      );
+
+      // Build the blockContainer with specialNode before blockContent
+      //
+      // Target structure:
+      //   doc
+      //     └─ blockGroup
+      //          └─ blockContainer
+      //               ├─ specialNode
+      //               │   └─ paragraph("Hello from specialNode!")
+      //               └─ paragraph("Hello from blockContainer!")
+      const blockContainer = nodes.blockContainer.create(
+        { id: "block-1" },
+        [specialNode, mainParagraph],
+      );
+
+      const blockGroup = nodes.blockGroup.create(null, [blockContainer]);
+      const newDoc = nodes.doc.create(null, [blockGroup]);
+
+      tr.replaceWith(0, tr.doc.content.size, newDoc.content);
+    });
+  }, [editor]);
+
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;
 }

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

@@ -38,7 +38,12 @@ import {
   TextColorExtension,
   UniqueID,
 } from "../../../extensions/tiptap-extensions/index.js";
-import { BlockContainer, BlockGroup, Doc } from "../../../pm-nodes/index.js";
+import {
+  BlockContainer,
+  BlockGroup,
+  Doc,
+  SpecialNode,
+} from "../../../pm-nodes/index.js";
 import type {
   BlockNoteEditor,
   BlockNoteEditorOptions,
@@ -114,6 +119,10 @@ 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) => {

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

@@ -13,6 +13,88 @@ 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
  */
@@ -23,7 +105,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: "blockContent blockGroup?",
+  content: "bnSpecialNode? blockContent bnSpecialNode? blockGroup?",
   // Ensures content-specific keyboard handlers trigger first.
   priority: 50,
   defining: true,