@blocknote/core 0.38.0 → 0.39.0

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,

package/src/blocks/Audio/block.ts

@@ -0,0 +1,174 @@
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import {
+  BlockFromConfig,
+  createBlockConfig,
+  createBlockSpec,
+} from "../../schema/index.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
+import { parseFigureElement } from "../File/helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "../File/helpers/render/createFileBlockWrapper.js";
+import { createFigureWithCaption } from "../File/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../File/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseAudioElement } from "./parseAudioElement.js";
+
+export const FILE_AUDIO_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
+
+export interface AudioOptions {
+  icon?: string;
+}
+
+export type AudioBlockConfig = ReturnType<typeof createAudioBlockConfig>;
+
+export const createAudioBlockConfig = createBlockConfig(
+  (_ctx: AudioOptions) =>
+    ({
+      type: "audio" as const,
+      propSchema: {
+        backgroundColor: defaultProps.backgroundColor,
+        // File name.
+        name: {
+          default: "" as const,
+        },
+        // File url.
+        url: {
+          default: "" as const,
+        },
+        // File caption.
+        caption: {
+          default: "" as const,
+        },
+
+        showPreview: {
+          default: true,
+        },
+      },
+      content: "none",
+    }) as const,
+);
+
+export const audioParse =
+  (_config: AudioOptions = {}) =>
+  (element: HTMLElement) => {
+    if (element.tagName === "AUDIO") {
+      // Ignore if parent figure has already been parsed.
+      if (element.closest("figure")) {
+        return undefined;
+      }
+
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseAudioElement(element as HTMLAudioElement),
+        backgroundColor,
+      };
+    }
+
+    if (element.tagName === "FIGURE") {
+      const parsedFigure = parseFigureElement(element, "audio");
+      if (!parsedFigure) {
+        return undefined;
+      }
+
+      const { targetElement, caption } = parsedFigure;
+
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseAudioElement(targetElement as HTMLAudioElement),
+        backgroundColor,
+        caption,
+      };
+    }
+
+    return undefined;
+  };
+
+export const audioRender =
+  (config: AudioOptions = {}) =>
+  (
+    block: BlockFromConfig<ReturnType<typeof createAudioBlockConfig>, any, any>,
+    editor: BlockNoteEditor<
+      Record<"audio", ReturnType<typeof createAudioBlockConfig>>,
+      any,
+      any
+    >,
+  ) => {
+    const icon = document.createElement("div");
+    icon.innerHTML = config.icon ?? FILE_AUDIO_ICON_SVG;
+
+    const audio = document.createElement("audio");
+    audio.className = "bn-audio";
+    if (editor.resolveFileUrl) {
+      editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+        audio.src = downloadUrl;
+      });
+    } else {
+      audio.src = block.props.url;
+    }
+    audio.controls = true;
+    audio.contentEditable = "false";
+    audio.draggable = false;
+
+    return createFileBlockWrapper(
+      block,
+      editor,
+      { dom: audio },
+      icon.firstElementChild as HTMLElement,
+    );
+  };
+
+export const audioToExternalHTML =
+  (_config: AudioOptions = {}) =>
+  (
+    block: BlockFromConfig<ReturnType<typeof createAudioBlockConfig>, any, any>,
+    _editor: BlockNoteEditor<
+      Record<"audio", ReturnType<typeof createAudioBlockConfig>>,
+      any,
+      any
+    >,
+  ) => {
+    if (!block.props.url) {
+      const div = document.createElement("p");
+      div.textContent = "Add audio";
+
+      return {
+        dom: div,
+      };
+    }
+
+    let audio;
+    if (block.props.showPreview) {
+      audio = document.createElement("audio");
+      audio.src = block.props.url;
+    } else {
+      audio = document.createElement("a");
+      audio.href = block.props.url;
+      audio.textContent = block.props.name || block.props.url;
+    }
+
+    if (block.props.caption) {
+      if (block.props.showPreview) {
+        return createFigureWithCaption(audio, block.props.caption);
+      } else {
+        return createLinkWithCaption(audio, block.props.caption);
+      }
+    }
+
+    return {
+      dom: audio,
+    };
+  };
+
+export const createAudioBlockSpec = createBlockSpec(
+  createAudioBlockConfig,
+  (config) => ({
+    meta: {
+      fileBlockAccept: ["audio/*"],
+    },
+    parse: audioParse(config),
+    render: audioRender(config),
+    toExternalHTML: audioToExternalHTML(config),
+    runsBefore: ["file"],
+  }),
+);

package/src/blocks/BlockNoteSchema.ts

@@ -0,0 +1,59 @@
+import {
+  BlockSchema,
+  BlockSchemaFromSpecs,
+  BlockSpecs,
+  CustomBlockNoteSchema,
+  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
+  StyleSchema,
+  StyleSchemaFromSpecs,
+  StyleSpecs,
+} from "../schema/index.js";
+import {
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+} from "./defaultBlocks.js";
+
+export class BlockNoteSchema<
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema,
+> extends CustomBlockNoteSchema<BSchema, ISchema, SSchema> {
+  public static create<
+    BSpecs extends BlockSpecs | undefined = undefined,
+    ISpecs extends InlineContentSpecs | undefined = undefined,
+    SSpecs extends StyleSpecs | undefined = undefined,
+  >(options?: {
+    /**
+     * A list of custom block types that should be available in the editor.
+     */
+    blockSpecs?: BSpecs;
+    /**
+     * A list of custom InlineContent types that should be available in the editor.
+     */
+    inlineContentSpecs?: ISpecs;
+    /**
+     * A list of custom Styles that should be available in the editor.
+     */
+    styleSpecs?: SSpecs;
+  }): BlockNoteSchema<
+    BSpecs extends undefined
+      ? BlockSchemaFromSpecs<typeof defaultBlockSpecs>
+      : BlockSchemaFromSpecs<NonNullable<BSpecs>>,
+    ISpecs extends undefined
+      ? InlineContentSchemaFromSpecs<typeof defaultInlineContentSpecs>
+      : InlineContentSchemaFromSpecs<NonNullable<ISpecs>>,
+    SSpecs extends undefined
+      ? StyleSchemaFromSpecs<typeof defaultStyleSpecs>
+      : StyleSchemaFromSpecs<NonNullable<SSpecs>>
+  > {
+    return new BlockNoteSchema<any, any, any>({
+      blockSpecs: options?.blockSpecs ?? defaultBlockSpecs,
+      inlineContentSpecs:
+        options?.inlineContentSpecs ?? defaultInlineContentSpecs,
+      styleSpecs: options?.styleSpecs ?? defaultStyleSpecs,
+    });
+  }
+}