@blocknote/core 0.37.0 → 0.39.0

package/src/api/positionMapping.test.ts

@@ -1,23 +1,29 @@
-import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import * as Y from "yjs";
 import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
 import { trackPosition } from "./positionMapping.js";
 
 describe("PositionStorage with local editor", () => {
-  let editor: BlockNoteEditor;
+  describe("mount and unmount", () => {
+    it("should register transaction handler on creation", () => {
+      const editor = BlockNoteEditor.create();
+      editor.mount(document.createElement("div"));
 
-  beforeEach(() => {
-    editor = BlockNoteEditor.create();
-    editor.mount(document.createElement("div"));
-  });
+      editor._tiptapEditor.on = vi.fn();
+      trackPosition(editor, 0);
 
-  afterEach(() => {
-    editor.mount(undefined);
-    editor._tiptapEditor.destroy();
-  });
+      expect(editor._tiptapEditor.on).toHaveBeenCalledWith(
+        "transaction",
+        expect.any(Function),
+      );
+
+      editor._tiptapEditor.destroy();
+    });
+
+    it("should register transaction handler on creation & mount", () => {
+      const editor = BlockNoteEditor.create();
+      // editor.mount(document.createElement("div"));
 
-  describe("mount and unmount", () => {
-    it("should register transaction handler on creation", () => {
       editor._tiptapEditor.on = vi.fn();
       trackPosition(editor, 0);
 
@@ -25,24 +31,82 @@ describe("PositionStorage with local editor", () => {
         "transaction",
         expect.any(Function),
       );
+
+      editor._tiptapEditor.destroy();
     });
   });
 
   describe("set and get positions", () => {
     it("should store and retrieve positions without Y.js", () => {
+      const editor = BlockNoteEditor.create();
+      editor.mount(document.createElement("div"));
+
       const getPos = trackPosition(editor, 10);
 
       expect(getPos()).toBe(10);
+
+      editor._tiptapEditor.destroy();
     });
 
     it("should handle right side positions", () => {
+      const editor = BlockNoteEditor.create();
+      editor.mount(document.createElement("div"));
+
       const getPos = trackPosition(editor, 10, "right");
 
       expect(getPos()).toBe(10);
+
+      editor._tiptapEditor.destroy();
     });
   });
 
   it("should update mapping for local transactions before the position", () => {
+    const editor = BlockNoteEditor.create();
+    editor.mount(document.createElement("div"));
+
+    // 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();
+  });
+
+  it("should update mapping for local transactions before the position (unmounted)", () => {
+    const editor = BlockNoteEditor.create();
+
     // Set initial content
     editor.insertBlocks(
       [
@@ -79,9 +143,14 @@ describe("PositionStorage with local editor", () => {
 
     // Position should be updated according to mapping
     expect(getPos()).toBe(14);
+
+    editor._tiptapEditor.destroy();
   });
 
   it("should not update mapping for local transactions after the position", () => {
+    const editor = BlockNoteEditor.create();
+    editor.mount(document.createElement("div"));
+
     // Set initial content
     editor.insertBlocks(
       [
@@ -117,9 +186,14 @@ describe("PositionStorage with local editor", () => {
 
     // Position should not be updated
     expect(getPos()).toBe(10);
+
+    editor._tiptapEditor.destroy();
   });
 
   it("should track positions on each side", () => {
+    const editor = BlockNoteEditor.create();
+    editor.mount(document.createElement("div"));
+
     editor.replaceBlocks(editor.document, [
       {
         type: "paragraph",
@@ -142,9 +216,14 @@ describe("PositionStorage with local editor", () => {
     expect(getStartRightPos()).toBe(8); // 3 + 5 ("Test " length)
     expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
     expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
+
+    editor._tiptapEditor.destroy();
   });
 
   it("should handle multiple transactions", () => {
+    const editor = BlockNoteEditor.create();
+    editor.mount(document.createElement("div"));
+
     editor.replaceBlocks(editor.document, [
       {
         type: "paragraph",
@@ -172,6 +251,8 @@ describe("PositionStorage with local editor", () => {
     expect(getStartRightPos()).toBe(8); // 3 + 5 ("Test " length)
     expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
     expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
+
+    editor._tiptapEditor.destroy();
   });
 });
 
@@ -202,16 +283,12 @@ describe("PositionStorage with remote editor", () => {
   }
 
   describe("remote editor", () => {
-    let localEditor: BlockNoteEditor;
-    let remoteEditor: BlockNoteEditor;
-    let ydoc: Y.Doc;
-    let remoteYdoc: Y.Doc;
-
-    beforeEach(() => {
-      ydoc = new Y.Doc();
-      remoteYdoc = new Y.Doc();
+    it("should update the local position when collaborating", () => {
+      const ydoc = new Y.Doc();
+      const remoteYdoc = new Y.Doc();
+
       // Create a mock editor
-      localEditor = BlockNoteEditor.create({
+      const localEditor = BlockNoteEditor.create({
         collaboration: {
           fragment: ydoc.getXmlFragment("doc"),
           user: { color: "#ff0000", name: "Local User" },
@@ -221,7 +298,7 @@ describe("PositionStorage with remote editor", () => {
       const div = document.createElement("div");
       localEditor.mount(div);
 
-      remoteEditor = BlockNoteEditor.create({
+      const remoteEditor = BlockNoteEditor.create({
         collaboration: {
           fragment: remoteYdoc.getXmlFragment("doc"),
           user: { color: "#ff0000", name: "Remote User" },
@@ -232,18 +309,7 @@ describe("PositionStorage with remote editor", () => {
       const remoteDiv = document.createElement("div");
       remoteEditor.mount(remoteDiv);
       setupTwoWaySync(ydoc, remoteYdoc);
-    });
-
-    afterEach(() => {
-      ydoc.destroy();
-      remoteYdoc.destroy();
-      localEditor.mount(undefined);
-      localEditor._tiptapEditor.destroy();
-      remoteEditor.mount(undefined);
-      remoteEditor._tiptapEditor.destroy();
-    });
 
-    it("should update the local position when collaborating", () => {
       localEditor.replaceBlocks(localEditor.document, [
         {
           type: "paragraph",
@@ -271,9 +337,40 @@ describe("PositionStorage with remote editor", () => {
       expect(getStartRightPos()).toBe(8); // 3 + 5 ("Test " length)
       expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
       expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
+
+      ydoc.destroy();
+      remoteYdoc.destroy();
+      localEditor._tiptapEditor.destroy();
+      remoteEditor._tiptapEditor.destroy();
     });
 
     it("should handle multiple transactions when collaborating", () => {
+      const ydoc = new Y.Doc();
+      const remoteYdoc = new Y.Doc();
+
+      // Create a mock editor
+      const localEditor = BlockNoteEditor.create({
+        collaboration: {
+          fragment: ydoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Local User" },
+          provider: undefined,
+        },
+      });
+      const div = document.createElement("div");
+      localEditor.mount(div);
+
+      const remoteEditor = BlockNoteEditor.create({
+        collaboration: {
+          fragment: remoteYdoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Remote User" },
+          provider: undefined,
+        },
+      });
+
+      const remoteDiv = document.createElement("div");
+      remoteEditor.mount(remoteDiv);
+      setupTwoWaySync(ydoc, remoteYdoc);
+
       localEditor.replaceBlocks(localEditor.document, [
         {
           type: "paragraph",
@@ -305,9 +402,40 @@ describe("PositionStorage with remote editor", () => {
       expect(getStartRightPos()).toBe(8); // 3 + 5 ("Test " length)
       expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
       expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
+
+      ydoc.destroy();
+      remoteYdoc.destroy();
+      localEditor._tiptapEditor.destroy();
+      remoteEditor._tiptapEditor.destroy();
     });
 
     it("should update the local position from a remote transaction", () => {
+      const ydoc = new Y.Doc();
+      const remoteYdoc = new Y.Doc();
+
+      // Create a mock editor
+      const localEditor = BlockNoteEditor.create({
+        collaboration: {
+          fragment: ydoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Local User" },
+          provider: undefined,
+        },
+      });
+      const div = document.createElement("div");
+      localEditor.mount(div);
+
+      const remoteEditor = BlockNoteEditor.create({
+        collaboration: {
+          fragment: remoteYdoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Remote User" },
+          provider: undefined,
+        },
+      });
+
+      const remoteDiv = document.createElement("div");
+      remoteEditor.mount(remoteDiv);
+      setupTwoWaySync(ydoc, remoteYdoc);
+
       remoteEditor.replaceBlocks(remoteEditor.document, [
         {
           type: "paragraph",
@@ -335,9 +463,40 @@ describe("PositionStorage with remote editor", () => {
       expect(getStartRightPos()).toBe(8); // 3 + 5 ("Test " length)
       expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
       expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
+
+      ydoc.destroy();
+      remoteYdoc.destroy();
+      localEditor._tiptapEditor.destroy();
+      remoteEditor._tiptapEditor.destroy();
     });
 
     it("should update the remote position from a remote transaction", () => {
+      const ydoc = new Y.Doc();
+      const remoteYdoc = new Y.Doc();
+
+      // Create a mock editor
+      const localEditor = BlockNoteEditor.create({
+        collaboration: {
+          fragment: ydoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Local User" },
+          provider: undefined,
+        },
+      });
+      const div = document.createElement("div");
+      localEditor.mount(div);
+
+      const remoteEditor = BlockNoteEditor.create({
+        collaboration: {
+          fragment: remoteYdoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Remote User" },
+          provider: undefined,
+        },
+      });
+
+      const remoteDiv = document.createElement("div");
+      remoteEditor.mount(remoteDiv);
+      setupTwoWaySync(ydoc, remoteYdoc);
+
       remoteEditor.replaceBlocks(remoteEditor.document, [
         {
           type: "paragraph",
@@ -365,6 +524,11 @@ describe("PositionStorage with remote editor", () => {
       expect(getStartRightPos()).toBe(8); // 3 + 5 ("Test " length)
       expect(getPosAfterPos()).toBe(9); // 4 + 5 ("Test " length)
       expect(getPosAfterRightPos()).toBe(9); // 4 + 5 ("Test " length)
+
+      ydoc.destroy();
+      remoteYdoc.destroy();
+      localEditor._tiptapEditor.destroy();
+      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;
   };
@@ -88,14 +86,14 @@ export function trackPosition(
 
   const relativePosition = absolutePositionToRelativePosition(
     // Track the position after the position if we are on the right side
-    position + (side === "right" ? 1 : 0),
+    position + (side === "right" ? 1 : -1),
     ySyncPluginState.binding.type,
     ySyncPluginState.binding.mapping,
   );
 
   return () => {
     const curYSyncPluginState = ySyncPluginKey.getState(
-      editor._tiptapEditor.state,
+      editor.prosemirrorState,
     ) as typeof ySyncPluginState;
     const pos = relativePositionToAbsolutePosition(
       curYSyncPluginState.doc,
@@ -109,6 +107,6 @@ export function trackPosition(
       throw new Error("Position not found, cannot track positions");
     }
 
-    return pos + (side === "right" ? -1 : 0);
+    return pos + (side === "right" ? -1 : 1);
   };
 }

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,
+    });
+  }
+}