feat: add option to set html id (#1078)

* feat: add option to set html id

* add unit test and rename option

* undo example change

---------

Co-authored-by: yousefed <yousefdardiry@gmail.com>

Author: m-risto

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

@@ -1,7 +1,7 @@
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
 
 export default function App() {
   // Creates a new editor instance.

packages/core/src/editor/BlockNoteEditor.test.ts

@@ -57,3 +57,16 @@ it("immediately replaces doc", async () => {
     ]
   `);
 });
+
+it("adds id attribute when requested", async () => {
+  const editor = BlockNoteEditor.create({
+    setIdAttribute: true,
+  });
+  const blocks = await editor.tryParseMarkdownToBlocks(
+    "This is a normal text\n\n# And this is a large heading"
+  );
+  editor.replaceBlocks(editor.document, blocks);
+  expect(
+    await editor.blocksToFullHTML(editor.document)
+  ).toMatchInlineSnapshot(`"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading" data-level="1"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`);
+});

packages/core/src/editor/BlockNoteEditor.ts

@@ -166,6 +166,16 @@ export type BlockNoteEditorOptions<
    * You probably don't need to set this manually, but use the `server-util` package instead that uses this option internally
    */
   _headless: boolean;
+
+  /**
+   * A flag indicating whether to set an HTML ID for every block
+   *
+   * When set to `true`, on each block an id attribute will be set with the block id
+   * Otherwise, the HTML ID attribute will not be set.
+   *
+   * (note that the id is always set on the `data-id` attribute)
+   */
+  setIdAttribute?: boolean;
 };
 
 const blockNoteTipTapOptions = {
@@ -339,6 +349,7 @@ export class BlockNoteEditor<
       collaboration: newOptions.collaboration,
       trailingBlock: newOptions.trailingBlock,
       disableExtensions: newOptions.disableExtensions,
+      setIdAttribute: newOptions.setIdAttribute,
     });
 
     const blockNoteUIExtension = Extension.create({

packages/core/src/editor/BlockNoteExtensions.ts

@@ -12,8 +12,8 @@ import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import * as Y from "yjs";
 import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
-import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
 import { createDropFileExtension } from "../api/parsers/fileDropExtension";
+import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
@@ -55,6 +55,7 @@ export const getBlockNoteExtensions = <
     renderCursor?: (user: any) => HTMLElement;
   };
   disableExtensions: string[] | undefined;
+  setIdAttribute?: boolean;
 }) => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
@@ -69,6 +70,7 @@ export const getBlockNoteExtensions = <
     // DropCursor,
     UniqueID.configure({
       types: ["blockContainer"],
+      setIdAttribute: opts.setIdAttribute,
     }),
     HardBreak.extend({ priority: 10 }),
     // Comments,
@@ -197,5 +199,5 @@ export const getBlockNoteExtensions = <
   }
 
   const disableExtensions: string[] = opts.disableExtensions || [];
-  return ret.filter(ex => !disableExtensions.includes(ex.name));
+  return ret.filter((ex) => !disableExtensions.includes(ex.name));
 };

packages/core/src/extensions/UniqueID/UniqueID.ts

@@ -50,6 +50,7 @@ const UniqueID = Extension.create({
     return {
       attributeName: "id",
       types: [],
+      setIdAttribute: false,
       generateID: () => {
         // Use mock ID if tests are running.
         if (typeof window !== "undefined" && (window as any).__TEST_OPTIONS) {
@@ -77,10 +78,20 @@ const UniqueID = Extension.create({
             default: null,
             parseHTML: (element) =>
               element.getAttribute(`data-${this.options.attributeName}`),
-            renderHTML: (attributes) => ({
-              [`data-${this.options.attributeName}`]:
-                attributes[this.options.attributeName],
-            }),
+            renderHTML: (attributes) => {
+              const defaultIdAttributes = {
+                [`data-${this.options.attributeName}`]:
+                  attributes[this.options.attributeName],
+              };
+              if (this.options.setIdAttribute) {
+                return {
+                  ...defaultIdAttributes,
+                  id: attributes[this.options.attributeName],
+                };
+              } else {
+                return defaultIdAttributes;
+              }
+            },
           },
         },
       },