@blocknote/core 0.38.0 → 0.39.1-capitol

package/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -1,8 +1,9 @@
-import { DOMSerializer, Fragment } from "prosemirror-model";
+import { DOMSerializer, Fragment, Node } from "prosemirror-model";
 
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
 import {
+  BlockImplementation,
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
@@ -12,6 +13,7 @@ import {
   inlineContentToNodes,
   tableContentToNodes,
 } from "../../../nodeConversions/blockToNode.js";
+import { nodeToCustomInlineContent } from "../../../nodeConversions/nodeToBlock.js";
 
 function addAttributesAndRemoveClasses(element: HTMLElement) {
   // Removes all BlockNote specific class names.
@@ -37,7 +39,7 @@ export function serializeInlineContentExternalHTML<
   serializer: DOMSerializer,
   options?: { document?: Document },
 ) {
-  let nodes: any;
+  let nodes: Node[];
 
   // TODO: reuse function from nodeconversions?
   if (!blockContent) {
@@ -52,16 +54,104 @@ export function serializeInlineContentExternalHTML<
     throw new UnreachableCaseError(blockContent.type);
   }
 
-  // We call the prosemirror serializer here because it handles Marks and Inline Content nodes nicely.
-  // If we'd want to support custom serialization or externalHTML for Inline Content, we'd have to implement
-  // a custom serializer here.
-  const dom = serializer.serializeFragment(Fragment.from(nodes), options);
+  // Check if any of the nodes are custom inline content with toExternalHTML
+  const doc = options?.document ?? document;
+  const fragment = doc.createDocumentFragment();
+
+  for (const node of nodes) {
+    // Check if this is a custom inline content node with toExternalHTML
+    if (
+      node.type.name !== "text" &&
+      editor.schema.inlineContentSchema[node.type.name]
+    ) {
+      const inlineContentImplementation =
+        editor.schema.inlineContentSpecs[node.type.name].implementation;
+
+      if (inlineContentImplementation) {
+        // Convert the node to inline content format
+        const inlineContent = nodeToCustomInlineContent(
+          node,
+          editor.schema.inlineContentSchema,
+          editor.schema.styleSchema,
+        );
+
+        // 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);
+
+          // If contentDOM exists, render the inline content into it
+          if (output.contentDOM) {
+            const contentFragment = serializer.serializeFragment(
+              node.content,
+              options,
+            );
+            output.contentDOM.dataset.editable = "";
+            output.contentDOM.appendChild(contentFragment);
+          }
+          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;
+        }
+      }
+
+      fragment.appendChild(dom);
+    } else {
+      // Fall back to default serialization for this node
+      const nodeFragment = serializer.serializeFragment(
+        Fragment.from([node]),
+        options,
+      );
+      fragment.appendChild(nodeFragment);
+    }
+  }
 
-  if (dom.nodeType === 1 /* Node.ELEMENT_NODE */) {
-    addAttributesAndRemoveClasses(dom as HTMLElement);
+  if (
+    fragment.childNodes.length === 1 &&
+    fragment.firstChild?.nodeType === 1 /* Node.ELEMENT_NODE */
+  ) {
+    addAttributesAndRemoveClasses(fragment.firstChild as HTMLElement);
   }
 
-  return dom;
+  return fragment;
 }
 
 /**
@@ -85,16 +175,13 @@ function serializeBlock<
   const doc = options?.document ?? document;
   const BC_NODE = editor.pmSchema.nodes["blockContainer"];
 
-  let props = block.props;
   // set default props in case we were passed a partial block
-  if (!block.props) {
-    props = {};
-    for (const [name, spec] of Object.entries(
-      editor.schema.blockSchema[block.type as any].propSchema,
-    )) {
-      if (spec.default !== undefined) {
-        (props as any)[name] = spec.default;
-      }
+  const props = block.props || {};
+  for (const [name, spec] of Object.entries(
+    editor.schema.blockSchema[block.type as any].propSchema,
+  )) {
+    if (!(name in props) && spec.default !== undefined) {
+      (props as any)[name] = spec.default;
     }
   }
 
@@ -112,15 +199,26 @@ function serializeBlock<
   // we should change toExternalHTML so that this is not necessary
   const attrs = Array.from(bc.dom.attributes);
 
-  const ret = editor.blockImplementations[
-    block.type as any
-  ].implementation.toExternalHTML({ ...block, props } as any, editor as any);
+  const blockImplementation = editor.blockImplementations[block.type as any]
+    .implementation as BlockImplementation;
+  const ret =
+    blockImplementation.toExternalHTML?.call(
+      {},
+      { ...block, props } as any,
+      editor as any,
+    ) ||
+    blockImplementation.render.call(
+      {},
+      { ...block, props } as any,
+      editor as any,
+    );
 
   const elementFragment = doc.createDocumentFragment();
-  if (ret.dom.classList.contains("bn-block-content")) {
+
+  if ((ret.dom as HTMLElement).classList.contains("bn-block-content")) {
     const blockContentDataAttributes = [
       ...attrs,
-      ...Array.from(ret.dom.attributes),
+      ...Array.from((ret.dom as HTMLElement).attributes),
     ].filter(
       (attr) =>
         attr.name.startsWith("data") &&
@@ -129,7 +227,6 @@ function serializeBlock<
         attr.name !== "data-node-view-wrapper" &&
         attr.name !== "data-node-type" &&
         attr.name !== "data-id" &&
-        attr.name !== "data-index" &&
         attr.name !== "data-editable",
     );
 
@@ -166,14 +263,17 @@ function serializeBlock<
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
 
-      if (listType === "OL" && props?.start && props?.start !== 1) {
+      if (
+        listType === "OL" &&
+        "start" in props &&
+        props.start &&
+        props?.start !== 1
+      ) {
         list.setAttribute("start", props.start + "");
       }
       fragment.append(list);
     }
-    const li = doc.createElement("li");
-    li.append(elementFragment);
-    fragment.lastChild!.appendChild(li);
+    fragment.lastChild!.appendChild(elementFragment);
   } else {
     fragment.append(elementFragment);
   }

package/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -1,4 +1,4 @@
-import { DOMSerializer, Fragment } from "prosemirror-model";
+import { DOMSerializer, Fragment, Node } from "prosemirror-model";
 
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
@@ -13,6 +13,7 @@ import {
   tableContentToNodes,
 } from "../../../nodeConversions/blockToNode.js";
 
+import { nodeToCustomInlineContent } from "../../../nodeConversions/nodeToBlock.js";
 export function serializeInlineContentInternalHTML<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -24,7 +25,7 @@ export function serializeInlineContentInternalHTML<
   blockType?: string,
   options?: { document?: Document },
 ) {
-  let nodes: any;
+  let nodes: Node[];
 
   // TODO: reuse function from nodeconversions?
   if (!blockContent) {
@@ -39,12 +40,90 @@ export function serializeInlineContentInternalHTML<
     throw new UnreachableCaseError(blockContent.type);
   }
 
-  // We call the prosemirror serializer here because it handles Marks and Inline Content nodes nicely.
-  // If we'd want to support custom serialization or externalHTML for Inline Content, we'd have to implement
-  // a custom serializer here.
-  const dom = serializer.serializeFragment(Fragment.from(nodes), options);
+  // Check if any of the nodes are custom inline content with toExternalHTML
+  const doc = options?.document ?? document;
+  const fragment = doc.createDocumentFragment();
+
+  for (const node of nodes) {
+    // Check if this is a custom inline content node with toExternalHTML
+    if (
+      node.type.name !== "text" &&
+      editor.schema.inlineContentSchema[node.type.name]
+    ) {
+      const inlineContentImplementation =
+        editor.schema.inlineContentSpecs[node.type.name].implementation;
+
+      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.render.call(
+          {
+            renderType: "dom",
+            props: undefined,
+          },
+          inlineContent as any,
+          () => {
+            // No-op
+          },
+          editor as any,
+        );
+
+        if (output) {
+          fragment.appendChild(output.dom);
+
+          // If contentDOM exists, render the inline content into it
+          if (output.contentDOM) {
+            const contentFragment = serializer.serializeFragment(
+              node.content,
+              options,
+            );
+            output.contentDOM.dataset.editable = "";
+            output.contentDOM.appendChild(contentFragment);
+          }
+          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;
+        }
+      }
 
-  return dom;
+      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;
 }
 
 function serializeBlock<
@@ -55,36 +134,29 @@ function serializeBlock<
   editor: BlockNoteEditor<BSchema, I, S>,
   block: PartialBlock<BSchema, I, S>,
   serializer: DOMSerializer,
-  listIndex: number,
   options?: { document?: Document },
 ) {
   const BC_NODE = editor.pmSchema.nodes["blockContainer"];
 
-  let props = block.props;
   // set default props in case we were passed a partial block
-  if (!block.props) {
-    props = {};
-    for (const [name, spec] of Object.entries(
-      editor.schema.blockSchema[block.type as any].propSchema,
-    )) {
-      if (spec.default !== undefined) {
-        (props as any)[name] = spec.default;
-      }
+  const props = block.props || {};
+  for (const [name, spec] of Object.entries(
+    editor.schema.blockSchema[block.type as any].propSchema,
+  )) {
+    if (!(name in props) && spec.default !== undefined) {
+      (props as any)[name] = spec.default;
     }
   }
 
   const impl = editor.blockImplementations[block.type as any].implementation;
-  const ret = impl.toInternalHTML({ ...block, props } as any, editor as any);
-
-  if (block.type === "numberedListItem") {
-    // This is a workaround to make sure there's a list index set.
-    // Normally, this is set on the internal prosemirror nodes by the NumberedListIndexingPlugin,
-    // but:
-    // - (a) this information is not available on the Blocks passed to the serializer. (we only have access to BlockNote Blocks)
-    // - (b) the NumberedListIndexingPlugin might not even have run, because we can manually call blocksToFullHTML
-    //       with blocks that are not part of the active document
-    ret.dom.setAttribute("data-index", listIndex.toString());
-  }
+  const ret = impl.render.call(
+    {
+      renderType: "dom",
+      props: undefined,
+    },
+    { ...block, props } as any,
+    editor as any,
+  );
 
   if (ret.contentDOM && block.content) {
     const ic = serializeInlineContentInternalHTML(
@@ -147,20 +219,8 @@ function serializeBlocks<
   const doc = options?.document ?? document;
   const fragment = doc.createDocumentFragment();
 
-  let listIndex = 0;
   for (const block of blocks) {
-    if (block.type === "numberedListItem") {
-      listIndex++;
-    } else {
-      listIndex = 0;
-    }
-    const blockDOM = serializeBlock(
-      editor,
-      block,
-      serializer,
-      listIndex,
-      options,
-    );
+    const blockDOM = serializeBlock(editor, block, serializer, options);
     fragment.appendChild(blockDOM);
   }
 

package/src/api/pmUtil.ts

@@ -1,7 +1,7 @@
 import type { Node, Schema } from "prosemirror-model";
 import { Transform } from "prosemirror-transform";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
-import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
 import type { BlockSchema } from "../schema/blocks/types.js";
 import type { InlineContentSchema } from "../schema/inlineContent/types.js";
 import type { StyleSchema } from "../schema/styles/types.js";

package/src/api/positionMapping.test.ts

@@ -17,7 +17,21 @@ describe("PositionStorage with local editor", () => {
         expect.any(Function),
       );
 
-      editor.mount(undefined);
+      editor._tiptapEditor.destroy();
+    });
+
+    it("should register transaction handler on creation & mount", () => {
+      const editor = BlockNoteEditor.create();
+      // editor.mount(document.createElement("div"));
+
+      editor._tiptapEditor.on = vi.fn();
+      trackPosition(editor, 0);
+
+      expect(editor._tiptapEditor.on).toHaveBeenCalledWith(
+        "transaction",
+        expect.any(Function),
+      );
+
       editor._tiptapEditor.destroy();
     });
   });
@@ -31,7 +45,6 @@ describe("PositionStorage with local editor", () => {
 
       expect(getPos()).toBe(10);
 
-      editor.mount(undefined);
       editor._tiptapEditor.destroy();
     });
 
@@ -43,7 +56,6 @@ describe("PositionStorage with local editor", () => {
 
       expect(getPos()).toBe(10);
 
-      editor.mount(undefined);
       editor._tiptapEditor.destroy();
     });
   });
@@ -89,7 +101,49 @@ describe("PositionStorage with local editor", () => {
     // Position should be updated according to mapping
     expect(getPos()).toBe(14);
 
-    editor.mount(undefined);
+    editor._tiptapEditor.destroy();
+  });
+
+  it("should update mapping for local transactions before the position (unmounted)", () => {
+    const editor = BlockNoteEditor.create();
+
+    // Set initial content
+    editor.insertBlocks(
+      [
+        {
+          id: "1",
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Hello World",
+              styles: {},
+            },
+          ],
+        },
+      ],
+      editor.document[0],
+      "before",
+    );
+
+    // Start tracking
+    const getPos = trackPosition(editor, 10);
+
+    // Move the cursor to the start of the document
+    editor.setTextCursorPosition(editor.document[0], "start");
+
+    // Insert text at the start of the document
+    editor.insertInlineContent([
+      {
+        type: "text",
+        text: "Test",
+        styles: {},
+      },
+    ]);
+
+    // Position should be updated according to mapping
+    expect(getPos()).toBe(14);
+
     editor._tiptapEditor.destroy();
   });
 
@@ -133,7 +187,6 @@ describe("PositionStorage with local editor", () => {
     // Position should not be updated
     expect(getPos()).toBe(10);
 
-    editor.mount(undefined);
     editor._tiptapEditor.destroy();
   });
 
@@ -164,7 +217,6 @@ describe("PositionStorage with local editor", () => {
     expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
     expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
 
-    editor.mount(undefined);
     editor._tiptapEditor.destroy();
   });
 
@@ -200,7 +252,6 @@ describe("PositionStorage with local editor", () => {
     expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
     expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
 
-    editor.mount(undefined);
     editor._tiptapEditor.destroy();
   });
 });
@@ -289,9 +340,7 @@ describe("PositionStorage with remote editor", () => {
 
       ydoc.destroy();
       remoteYdoc.destroy();
-      localEditor.mount(undefined);
       localEditor._tiptapEditor.destroy();
-      remoteEditor.mount(undefined);
       remoteEditor._tiptapEditor.destroy();
     });
 
@@ -356,9 +405,7 @@ describe("PositionStorage with remote editor", () => {
 
       ydoc.destroy();
       remoteYdoc.destroy();
-      localEditor.mount(undefined);
       localEditor._tiptapEditor.destroy();
-      remoteEditor.mount(undefined);
       remoteEditor._tiptapEditor.destroy();
     });
 
@@ -419,9 +466,7 @@ describe("PositionStorage with remote editor", () => {
 
       ydoc.destroy();
       remoteYdoc.destroy();
-      localEditor.mount(undefined);
       localEditor._tiptapEditor.destroy();
-      remoteEditor.mount(undefined);
       remoteEditor._tiptapEditor.destroy();
     });
 
@@ -482,9 +527,7 @@ describe("PositionStorage with remote editor", () => {
 
       ydoc.destroy();
       remoteYdoc.destroy();
-      localEditor.mount(undefined);
       localEditor._tiptapEditor.destroy();
-      remoteEditor.mount(undefined);
       remoteEditor._tiptapEditor.destroy();
     });
   });

package/src/api/positionMapping.ts

@@ -61,9 +61,7 @@ export function trackPosition(
    */
   side: "left" | "right" = "left",
 ): () => number {
-  const ySyncPluginState = ySyncPluginKey.getState(
-    editor._tiptapEditor.state,
-  ) as {
+  const ySyncPluginState = ySyncPluginKey.getState(editor.prosemirrorState) as {
     doc: Y.Doc;
     binding: ProsemirrorBinding;
   };
@@ -95,7 +93,7 @@ export function trackPosition(
 
   return () => {
     const curYSyncPluginState = ySyncPluginKey.getState(
-      editor._tiptapEditor.state,
+      editor.prosemirrorState,
     ) as typeof ySyncPluginState;
     const pos = relativePositionToAbsolutePosition(
       curYSyncPluginState.doc,