@blocknote/core 0.36.1 → 0.38.0

package/src/api/positionMapping.test.ts

@@ -1,23 +1,14 @@
-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;
-
-  beforeEach(() => {
-    editor = BlockNoteEditor.create();
-    editor.mount(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    editor.mount(undefined);
-    editor._tiptapEditor.destroy();
-  });
-
   describe("mount and unmount", () => {
     it("should register transaction handler on creation", () => {
+      const editor = BlockNoteEditor.create();
+      editor.mount(document.createElement("div"));
+
       editor._tiptapEditor.on = vi.fn();
       trackPosition(editor, 0);
 
@@ -25,24 +16,42 @@ describe("PositionStorage with local editor", () => {
         "transaction",
         expect.any(Function),
       );
+
+      editor.mount(undefined);
+      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.mount(undefined);
+      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.mount(undefined);
+      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(
       [
@@ -79,9 +88,15 @@ describe("PositionStorage with local editor", () => {
 
     // Position should be updated according to mapping
     expect(getPos()).toBe(14);
+
+    editor.mount(undefined);
+    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 +132,15 @@ describe("PositionStorage with local editor", () => {
 
     // Position should not be updated
     expect(getPos()).toBe(10);
+
+    editor.mount(undefined);
+    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 +163,15 @@ 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.mount(undefined);
+    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 +199,9 @@ 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.mount(undefined);
+    editor._tiptapEditor.destroy();
   });
 });
 
@@ -202,16 +232,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 +247,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 +258,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 +286,42 @@ 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.mount(undefined);
+      localEditor._tiptapEditor.destroy();
+      remoteEditor.mount(undefined);
+      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 +353,42 @@ 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.mount(undefined);
+      localEditor._tiptapEditor.destroy();
+      remoteEditor.mount(undefined);
+      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 +416,42 @@ 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.mount(undefined);
+      localEditor._tiptapEditor.destroy();
+      remoteEditor.mount(undefined);
+      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 +479,13 @@ 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.mount(undefined);
+      localEditor._tiptapEditor.destroy();
+      remoteEditor.mount(undefined);
+      remoteEditor._tiptapEditor.destroy();
     });
   });
 });

package/src/api/positionMapping.ts

@@ -88,7 +88,7 @@ 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,
   );
@@ -109,6 +109,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/AudioBlockContent/AudioBlockContent.ts

@@ -69,7 +69,6 @@ export const audioRender = (
     block,
     editor,
     { dom: audio },
-    editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement,
   );
 };

package/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts

@@ -4,7 +4,6 @@ import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
 export const createAddFileButton = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  buttonText?: string,
   buttonIcon?: HTMLElement,
 ) => {
   const addFileButton = document.createElement("div");
@@ -23,7 +22,9 @@ export const createAddFileButton = (
   const addFileButtonText = document.createElement("p");
   addFileButtonText.className = "bn-add-file-button-text";
   addFileButtonText.innerHTML =
-    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+    block.type in editor.dictionary.file_blocks.add_button_text
+      ? editor.dictionary.file_blocks.add_button_text[block.type]
+      : editor.dictionary.file_blocks.add_button_text["file"];
   addFileButton.appendChild(addFileButtonText);
 
   // Prevents focus from moving to the button.

package/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts

@@ -15,7 +15,6 @@ export const createFileBlockWrapper = (
     any
   >,
   element?: { dom: HTMLElement; destroy?: () => void },
-  buttonText?: string,
   buttonIcon?: HTMLElement,
 ) => {
   const wrapper = document.createElement("div");
@@ -24,12 +23,7 @@ export const createFileBlockWrapper = (
   // Show the add file button if the file has not been uploaded yet. Change to
   // show a loader if a file upload for the block begins.
   if (block.props.url === "") {
-    const addFileButton = createAddFileButton(
-      block,
-      editor,
-      buttonText,
-      buttonIcon,
-    );
+    const addFileButton = createAddFileButton(block, editor, buttonIcon);
     wrapper.appendChild(addFileButton.dom);
 
     const destroyUploadStartHandler = editor.onUploadStart((blockId) => {

package/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts

@@ -7,17 +7,16 @@ export const createResizableFileBlockWrapper = (
   editor: BlockNoteEditor<any, any, any>,
   element: { dom: HTMLElement; destroy?: () => void },
   resizeHandlesContainerElement: HTMLElement,
-  buttonText: string,
-  buttonIcon: HTMLElement,
+  buttonIcon?: HTMLElement,
 ): { dom: HTMLElement; destroy: () => void } => {
   const { dom, destroy } = createFileBlockWrapper(
     block,
     editor,
     element,
-    buttonText,
     buttonIcon,
   );
   const wrapper = dom;
+  wrapper.style.position = "relative";
   if (block.props.url && block.props.showPreview) {
     if (block.props.previewWidth) {
       wrapper.style.width = `${block.props.previewWidth}px`;
@@ -33,6 +32,15 @@ export const createResizableFileBlockWrapper = (
   rightResizeHandle.className = "bn-resize-handle";
   rightResizeHandle.style.right = "4px";
 
+  // This element ensures `mousemove` and `mouseup` events are captured while
+  // resizing when the cursor is over the wrapper content. This is because
+  // embeds are treated as separate HTML documents, so if the content is an
+  // embed, the events will only fire within that document.
+  const eventCaptureElement = document.createElement("div");
+  eventCaptureElement.style.position = "absolute";
+  eventCaptureElement.style.height = "100%";
+  eventCaptureElement.style.width = "100%";
+
   // Temporary parameters set when the user begins resizing the element, used to
   // calculate the new width of the element.
   let resizeParams:
@@ -46,7 +54,7 @@ export const createResizableFileBlockWrapper = (
 
   // Updates the element width with an updated width depending on the cursor X
   // offset from when the resize began, and which resize handle is being used.
-  const windowMouseMoveHandler = (event: MouseEvent) => {
+  const windowMouseMoveHandler = (event: MouseEvent | TouchEvent) => {
     if (!resizeParams) {
       if (
         !editor.isEditable &&
@@ -62,27 +70,26 @@ export const createResizableFileBlockWrapper = (
 
     let newWidth: number;
 
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+
     if (block.props.textAlignment === "center") {
       if (resizeParams.handleUsed === "left") {
         newWidth =
           resizeParams.initialWidth +
-          (resizeParams.initialClientX - event.clientX) * 2;
+          (resizeParams.initialClientX - clientX) * 2;
       } else {
         newWidth =
           resizeParams.initialWidth +
-          (event.clientX - resizeParams.initialClientX) * 2;
+          (clientX - resizeParams.initialClientX) * 2;
       }
     } else {
       if (resizeParams.handleUsed === "left") {
         newWidth =
-          resizeParams.initialWidth +
-          resizeParams.initialClientX -
-          event.clientX;
+          resizeParams.initialWidth + resizeParams.initialClientX - clientX;
       } else {
         newWidth =
-          resizeParams.initialWidth +
-          event.clientX -
-          resizeParams.initialClientX;
+          resizeParams.initialWidth + clientX - resizeParams.initialClientX;
       }
     }
 
@@ -99,7 +106,7 @@ export const createResizableFileBlockWrapper = (
   };
   // Stops mouse movements from resizing the element and updates the block's
   // `width` prop to the new value.
-  const windowMouseUpHandler = (event: MouseEvent) => {
+  const windowMouseUpHandler = (event: MouseEvent | TouchEvent) => {
     // Hides the drag handles if the cursor is no longer over the element.
     if (
       (!event.target ||
@@ -118,6 +125,10 @@ export const createResizableFileBlockWrapper = (
 
     resizeParams = undefined;
 
+    if (wrapper.contains(eventCaptureElement)) {
+      wrapper.removeChild(eventCaptureElement);
+    }
+
     editor.updateBlock(block, {
       props: {
         previewWidth: width,
@@ -158,54 +169,90 @@ export const createResizableFileBlockWrapper = (
 
   // Sets the resize params, allowing the user to begin resizing the element by
   // moving the cursor left or right.
-  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
+  const leftResizeHandleMouseDownHandler = (event: MouseEvent | TouchEvent) => {
     event.preventDefault();
 
+    if (!wrapper.contains(eventCaptureElement)) {
+      wrapper.appendChild(eventCaptureElement);
+    }
+
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+
     resizeParams = {
       handleUsed: "left",
       initialWidth: wrapper.clientWidth,
-      initialClientX: event.clientX,
+      initialClientX: clientX,
     };
   };
-  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
+  const rightResizeHandleMouseDownHandler = (
+    event: MouseEvent | TouchEvent,
+  ) => {
     event.preventDefault();
 
+    if (!wrapper.contains(eventCaptureElement)) {
+      wrapper.appendChild(eventCaptureElement);
+    }
+
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+
     resizeParams = {
       handleUsed: "right",
       initialWidth: wrapper.clientWidth,
-      initialClientX: event.clientX,
+      initialClientX: clientX,
     };
   };
 
   window.addEventListener("mousemove", windowMouseMoveHandler);
+  window.addEventListener("touchmove", windowMouseMoveHandler);
   window.addEventListener("mouseup", windowMouseUpHandler);
+  window.addEventListener("touchend", windowMouseUpHandler);
   wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
   wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
   leftResizeHandle.addEventListener(
     "mousedown",
     leftResizeHandleMouseDownHandler,
   );
+  leftResizeHandle.addEventListener(
+    "touchstart",
+    leftResizeHandleMouseDownHandler,
+  );
   rightResizeHandle.addEventListener(
     "mousedown",
     rightResizeHandleMouseDownHandler,
   );
+  rightResizeHandle.addEventListener(
+    "touchstart",
+    rightResizeHandleMouseDownHandler,
+  );
 
   return {
     dom: wrapper,
     destroy: () => {
       destroy?.();
       window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("touchmove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
+      window.removeEventListener("touchend", windowMouseUpHandler);
       wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
       wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
       leftResizeHandle.removeEventListener(
         "mousedown",
         leftResizeHandleMouseDownHandler,
       );
+      leftResizeHandle.removeEventListener(
+        "touchstart",
+        leftResizeHandleMouseDownHandler,
+      );
       rightResizeHandle.removeEventListener(
         "mousedown",
         rightResizeHandleMouseDownHandler,
       );
+      rightResizeHandle.removeEventListener(
+        "touchstart",
+        rightResizeHandleMouseDownHandler,
+      );
     },
   };
 };

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -80,7 +80,6 @@ export const imageRender = (
     editor,
     { dom: imageWrapper },
     imageWrapper,
-    editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement,
   );
 };

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -170,11 +170,8 @@ const TableParagraph = createStronglyTypedTiptapNode({
     ];
   },
 
-  renderHTML({ node, HTMLAttributes }) {
-    // Insert a line break if there is no content, in order to preserve the
-    // correct cell height. Otherwise, the cell will have a height of zero +
-    // padding.
-    return ["p", HTMLAttributes, node.childCount ? 0 : ["br"]];
+  renderHTML({ HTMLAttributes }) {
+    return ["p", HTMLAttributes, 0];
   },
 });
 

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -80,7 +80,6 @@ export const videoRender = (
     editor,
     { dom: videoWrapper },
     videoWrapper,
-    editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement,
   );
 };