@blocknote/core 0.18.0 → 0.19.0

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -12,12 +12,8 @@ import {
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
 import { initializeESMDependencies } from "../../util/esmDependencies.js";
-import {
-  dragStart,
-  getDraggableBlockFromElement,
-  unsetDragImage,
-} from "./dragging.js";
-
+import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
+import { dragStart, unsetDragImage } from "./dragging.js";
 export type SideMenuState<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -27,13 +23,45 @@ export type SideMenuState<
   block: Block<BSchema, I, S>;
 };
 
-const getBlockFromMousePos = (
+const PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP = 0.1;
+
+function getBlockFromCoords(
+  view: EditorView,
+  coords: { left: number; top: number },
+  adjustForColumns = true
+) {
+  const elements = view.root.elementsFromPoint(coords.left, coords.top);
+
+  for (const element of elements) {
+    if (!view.dom.contains(element)) {
+      // probably a ui overlay like formatting toolbar etc
+      continue;
+    }
+    if (adjustForColumns) {
+      const column = element.closest("[data-node-type=columnList]");
+      if (column) {
+        return getBlockFromCoords(
+          view,
+          {
+            left: coords.left + 50, // bit hacky, but if we're inside a column, offset x position to right to account for the width of sidemenu itself
+            top: coords.top,
+          },
+          false
+        );
+      }
+    }
+    return getDraggableBlockFromElement(element, view);
+  }
+  return undefined;
+}
+
+function getBlockFromMousePos(
   mousePos: {
     x: number;
     y: number;
   },
   view: EditorView
-): { node: HTMLElement; id: string } | undefined => {
+): { node: HTMLElement; id: string } | undefined {
   // Editor itself may have padding or other styling which affects
   // size/position, so we get the boundingRect of the first child (i.e. the
   // blockGroup that wraps all blocks in the editor) for more accurate side
@@ -50,22 +78,41 @@ const getBlockFromMousePos = (
 
   // Gets block at mouse cursor's vertical position.
   const coords = {
-    left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
+    left: mousePos.x,
     top: mousePos.y,
   };
 
-  const elements = view.root.elementsFromPoint(coords.left, coords.top);
-  let block = undefined;
+  const mouseLeftOfEditor = coords.left < editorBoundingBox.left;
+  const mouseRightOfEditor = coords.left > editorBoundingBox.right;
 
-  for (const element of elements) {
-    if (view.dom.contains(element)) {
-      block = getDraggableBlockFromElement(element, view);
-      break;
-    }
+  if (mouseLeftOfEditor) {
+    coords.left = editorBoundingBox.left + 10;
+  }
+
+  if (mouseRightOfEditor) {
+    coords.left = editorBoundingBox.right - 10;
+  }
+
+  let block = getBlockFromCoords(view, coords);
+
+  if (!mouseRightOfEditor && block) {
+    // note: this case is not necessary when we're on the right side of the editor
+
+    /* Now, because blocks can be nested
+    | BlockA        |
+    x | BlockB     y|
+    
+    hovering over position x (the "margin of block B") will return block A instead of block B.
+    to fix this, we get the block from the right side of block A (position y, which will fall in BlockB correctly)
+    */
+
+    const rect = block.node.getBoundingClientRect();
+    coords.left = rect.right - 10;
+    block = getBlockFromCoords(view, coords, false);
   }
 
   return block;
-};
+}
 
 /**
  * With the sidemenu plugin we can position a menu next to a hovered block.
@@ -158,6 +205,7 @@ export class SideMenuView<
     this.hoveredBlock = block.node;
 
     // Gets the block's content node, which lets to ignore child blocks when determining the block menu's position.
+    // TODO: needed?
     const blockContent = block.node.firstChild as HTMLElement;
 
     if (!blockContent) {
@@ -168,15 +216,20 @@ export class SideMenuView<
 
     // Shows or updates elements.
     if (this.editor.isEditable) {
-      const editorBoundingBox = (
-        this.pmView.dom.firstChild as HTMLElement
-      ).getBoundingClientRect();
       const blockContentBoundingBox = blockContent.getBoundingClientRect();
-
+      const column = block.node.closest("[data-node-type=column]");
       this.updateState({
         show: true,
         referencePos: new DOMRect(
-          editorBoundingBox.x,
+          column
+            ? // We take the first child as column elements have some default
+              // padding. This is a little weird since this child element will
+              // be the first block, but since it's always non-nested and we
+              // only take the x coordinate, it's ok.
+              column.firstElementChild!.getBoundingClientRect().x
+            : (
+                this.pmView.dom.firstChild as HTMLElement
+              ).getBoundingClientRect().x,
           blockContentBoundingBox.y,
           blockContentBoundingBox.width,
           blockContentBoundingBox.height
@@ -209,22 +262,7 @@ export class SideMenuView<
     });
 
     if (!pos || pos.inside === -1) {
-      const evt = new Event("drop", event) as any;
-      const editorBoundingBox = (
-        this.pmView.dom.firstChild as HTMLElement
-      ).getBoundingClientRect();
-      evt.clientX =
-        event.clientX < editorBoundingBox.left ||
-        event.clientX > editorBoundingBox.left + editorBoundingBox.width
-          ? editorBoundingBox.left + editorBoundingBox.width / 2
-          : event.clientX;
-      evt.clientY = Math.min(
-        Math.max(event.clientY, editorBoundingBox.top),
-        editorBoundingBox.top + editorBoundingBox.height
-      );
-      evt.dataTransfer = event.dataTransfer;
-      evt.preventDefault = () => event.preventDefault();
-      evt.synthetic = true; // prevent recursion
+      const evt = this.createSyntheticEvent(event);
       // console.log("dispatch fake drop");
       this.pmView.dom.dispatchEvent(evt);
     }
@@ -248,15 +286,7 @@ export class SideMenuView<
     });
 
     if (!pos || (pos.inside === -1 && this.pmView.dom.firstChild)) {
-      const evt = new Event("dragover", event) as any;
-      const editorBoundingBox = (
-        this.pmView.dom.firstChild as HTMLElement
-      ).getBoundingClientRect();
-      evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
-      evt.clientY = event.clientY;
-      evt.dataTransfer = event.dataTransfer;
-      evt.preventDefault = () => event.preventDefault();
-      evt.synthetic = true; // prevent recursion
+      const evt = this.createSyntheticEvent(event);
       // console.log("dispatch fake dragover");
       this.pmView.dom.dispatchEvent(evt);
     }
@@ -314,6 +344,62 @@ export class SideMenuView<
     this.updateStateFromMousePos();
   };
 
+  private createSyntheticEvent(event: DragEvent) {
+    const evt = new Event(event.type, event) as any;
+    const editorBoundingBox = (
+      this.pmView.dom.firstChild as HTMLElement
+    ).getBoundingClientRect();
+    evt.clientX = event.clientX;
+    evt.clientY = event.clientY;
+    if (
+      event.clientX < editorBoundingBox.left &&
+      event.clientX >
+        editorBoundingBox.left -
+          editorBoundingBox.width *
+            PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP
+    ) {
+      // when we're slightly left of the editor, we can drop to the side of the block
+      evt.clientX =
+        editorBoundingBox.left +
+        (editorBoundingBox.width *
+          PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP) /
+          2;
+    } else if (
+      event.clientX > editorBoundingBox.right &&
+      event.clientX <
+        editorBoundingBox.right +
+          editorBoundingBox.width *
+            PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP
+    ) {
+      // when we're slightly right of the editor, we can drop to the side of the block
+      evt.clientX =
+        editorBoundingBox.right -
+        (editorBoundingBox.width *
+          PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP) /
+          2;
+    } else if (
+      event.clientX < editorBoundingBox.left ||
+      event.clientX > editorBoundingBox.right
+    ) {
+      // when mouse is outside of the editor on x axis, drop it somewhere safe (but not to the side of a block)
+      evt.clientX =
+        editorBoundingBox.left +
+        PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP *
+          editorBoundingBox.width *
+          2; // put it somewhere in first block, but safe outside of the PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP margin
+    }
+
+    evt.clientY = Math.min(
+      Math.max(event.clientY, editorBoundingBox.top),
+      editorBoundingBox.top + editorBoundingBox.height
+    );
+
+    evt.dataTransfer = event.dataTransfer;
+    evt.preventDefault = () => event.preventDefault();
+    evt.synthetic = true; // prevent recursion
+    return evt;
+  }
+
   // Needed in cases where the editor state updates without the mouse cursor
   // moving, as some state updates can require a side menu update. For example,
   // adding a button to the side menu which removes the block can cause the
@@ -386,11 +472,14 @@ export class SideMenuProsemirrorPlugin<
   /**
    * Handles drag & drop events for blocks.
    */
-  blockDragStart = (event: {
-    dataTransfer: DataTransfer | null;
-    clientY: number;
-  }) => {
-    dragStart(event, this.editor);
+  blockDragStart = (
+    event: {
+      dataTransfer: DataTransfer | null;
+      clientY: number;
+    },
+    block: Block<BSchema, I, S>
+  ) => {
+    dragStart(event, block, this.editor);
   };
 
   /**

package/src/extensions/SideMenu/dragging.ts

@@ -6,6 +6,7 @@ import { EditorView } from "prosemirror-view";
 import { createExternalHTMLExporter } from "../../api/exporters/html/externalHTMLExporter.js";
 import { cleanHTMLToMarkdown } from "../../api/exporters/markdown/markdownExporter.js";
 import { fragmentToBlocks } from "../../api/nodeConversions/fragmentToBlocks.js";
+import { getNodeById } from "../../api/nodeUtil.js";
 import { Block } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
@@ -27,39 +28,6 @@ export type SideMenuState<
   block: Block<BSchema, I, S>;
 };
 
-export function getDraggableBlockFromElement(
-  element: Element,
-  view: EditorView
-) {
-  while (
-    element &&
-    element.parentElement &&
-    element.parentElement !== view.dom &&
-    element.getAttribute?.("data-node-type") !== "blockContainer"
-  ) {
-    element = element.parentElement;
-  }
-  if (element.getAttribute?.("data-node-type") !== "blockContainer") {
-    return undefined;
-  }
-  return { node: element as HTMLElement, id: element.getAttribute("data-id")! };
-}
-
-function blockPositionFromElement(element: Element, view: EditorView) {
-  const block = getDraggableBlockFromElement(element, view);
-
-  if (block && block.node.nodeType === 1) {
-    // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
-    const docView = (view as any).docView;
-    const desc = docView.nearestDesc(block.node, true);
-    if (!desc || desc === docView) {
-      return null;
-    }
-    return desc.posBefore;
-  }
-  return null;
-}
-
 function blockPositionsFromSelection(selection: Selection, doc: Node) {
   // Absolute positions just before the first block spanned by the selection, and just after the last block. Having the
   // selection start and end just before and just after the target blocks ensures no whitespace/line breaks are left
@@ -172,6 +140,7 @@ export function dragStart<
   S extends StyleSchema
 >(
   e: { dataTransfer: DataTransfer | null; clientY: number },
+  block: Block<BSchema, I, S>,
   editor: BlockNoteEditor<BSchema, I, S>
 ) {
   if (!e.dataTransfer) {
@@ -180,28 +149,8 @@ export function dragStart<
 
   const view = editor.prosemirrorView;
 
-  const editorBoundingBox = view.dom.getBoundingClientRect();
-
-  const coords = {
-    left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
-    top: e.clientY,
-  };
-
-  const elements = view.root.elementsFromPoint(coords.left, coords.top);
-  let blockEl = undefined;
-
-  for (const element of elements) {
-    if (view.dom.contains(element)) {
-      blockEl = getDraggableBlockFromElement(element, view);
-      break;
-    }
-  }
-
-  if (!blockEl) {
-    return;
-  }
+  const pos = getNodeById(block.id, view.state.doc).posBeforeNode;
 
-  const pos = blockPositionFromElement(blockEl.node, view);
   if (pos != null) {
     const selection = view.state.selection;
     const doc = view.state.doc;

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -62,12 +62,10 @@ export function insertOrUpdateBlock<
       currentBlock.content.length === 0)
   ) {
     newBlock = editor.updateBlock(currentBlock, block);
-
-    // Edge case for updating block content as `updateBlock` causes the
-    // selection to move into the next block, so we have to set it back.
-    if (block.content) {
-      editor.setTextCursorPosition(newBlock);
-    }
+    // We make sure to reset the cursor position to the new block as calling
+    // `updateBlock` may move it out. This generally happens when the content
+    // changes, or the update makes the block multi-column.
+    editor.setTextCursorPosition(newBlock);
   } else {
     newBlock = editor.insertBlocks([block], currentBlock, "after")[0];
     editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -12,7 +12,7 @@ import {
   StyleSchema,
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
-import { getDraggableBlockFromElement } from "../SideMenu/dragging.js";
+import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 
 let dragImageElement: HTMLElement | undefined;
 

package/src/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -62,7 +62,7 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
             lastNode = lastNode.lastChild;
 
             if (!lastNode || lastNode.type.name !== "blockContainer") {
-              throw new Error("Expected blockContainer");
+              return true; // not a blockContainer, but for example Columns. Insert trailing node
             }
 
             const lastContentNode = lastNode.firstChild;

package/src/extensions/getDraggableBlockFromElement.ts

@@ -0,0 +1,19 @@
+import { EditorView } from "prosemirror-view";
+
+export function getDraggableBlockFromElement(
+  element: Element,
+  view: EditorView
+) {
+  while (
+    element &&
+    element.parentElement &&
+    element.parentElement !== view.dom &&
+    element.getAttribute?.("data-node-type") !== "blockContainer"
+  ) {
+    element = element.parentElement;
+  }
+  if (element.getAttribute?.("data-node-type") !== "blockContainer") {
+    return undefined;
+  }
+  return { node: element as HTMLElement, id: element.getAttribute("data-id")! };
+}

package/src/i18n/locales/de.ts

@@ -22,13 +22,13 @@ export const de = {
       title: "Nummerierte Liste",
       subtext: "Liste mit nummerierten Elementen",
       aliases: ["ol", "li", "liste", "nummerierteliste", "nummerierte liste"],
-      group: "Grundlegende Blöcke",
+      group: "Grundlegende blöcke",
     },
     bullet_list: {
       title: "Aufzählungsliste",
       subtext: "Liste mit unnummerierten Elementen",
       aliases: ["ul", "li", "liste", "aufzählungsliste", "aufzählung liste"],
-      group: "Grundlegende Blöcke",
+      group: "Grundlegende blöcke",
     },
     check_list: {
       title: "Checkliste",
@@ -42,19 +42,19 @@ export const de = {
         "geprüfte liste",
         "kontrollkästchen",
       ],
-      group: "Grundlegende Blöcke",
+      group: "Grundlegende blöcke",
     },
     paragraph: {
       title: "Absatz",
       subtext: "Der Hauptteil Ihres Dokuments",
       aliases: ["p", "absatz"],
-      group: "Grundlegende Blöcke",
+      group: "Grundlegende blöcke",
     },
     code_block: {
       title: "Codeblock",
       subtext: "Codeblock mit Syntaxhervorhebung",
       aliases: ["code", "pre"],
-      group: "Grundlegende Blöcke",
+      group: "Grundlegende blöcke",
     },
     table: {
       title: "Tabelle",

package/src/i18n/locales/pt.ts

@@ -24,13 +24,13 @@ export const pt: Dictionary = {
       title: "Lista Numerada",
       subtext: "Usado para exibir uma lista numerada",
       aliases: ["ol", "li", "lista", "listanumerada", "lista numerada"],
-      group: "Blocos Básicos",
+      group: "Blocos básicos",
     },
     bullet_list: {
       title: "Lista com Marcadores",
       subtext: "Usado para exibir uma lista não ordenada",
       aliases: ["ul", "li", "lista", "listamarcadores", "lista com marcadores"],
-      group: "Blocos Básicos",
+      group: "Blocos básicos",
     },
     check_list: {
       title: "Lista de verificação",
@@ -43,19 +43,19 @@ export const pt: Dictionary = {
         "lista marcada",
         "caixa de seleção",
       ],
-      group: "Blocos Básicos",
+      group: "Blocos básicos",
     },
     paragraph: {
       title: "Parágrafo",
       subtext: "Usado para o corpo do seu documento",
       aliases: ["p", "paragrafo"],
-      group: "Blocos Básicos",
+      group: "Blocos básicos",
     },
     code_block: {
       title: "Bloco de Código",
       subtext: "Usado para exibir código com destaque de sintaxe",
       aliases: ["codigo", "pre"],
-      group: "Blocos Básicos",
+      group: "Blocos básicos",
     },
     table: {
       title: "Tabela",

package/src/index.ts

@@ -2,13 +2,10 @@ import * as locales from "./i18n/locales/index.js";
 export * from "./api/exporters/html/externalHTMLExporter.js";
 export * from "./api/exporters/html/internalHTMLSerializer.js";
 export * from "./api/getBlockInfoFromPos.js";
+export * from "./api/nodeUtil.js";
 export * from "./api/testUtil/index.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";
 export * from "./blocks/CodeBlockContent/CodeBlockContent.js";
-export * from "./blocks/defaultBlockHelpers.js";
-export * from "./blocks/defaultBlocks.js";
-export * from "./blocks/defaultBlockTypeGuards.js";
-export * from "./blocks/defaultProps.js";
 export * from "./blocks/FileBlockContent/FileBlockContent.js";
 export * from "./blocks/FileBlockContent/fileBlockHelpers.js";
 export * from "./blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.js";
@@ -19,10 +16,16 @@ export {
   EMPTY_CELL_WIDTH,
 } from "./blocks/TableBlockContent/TableExtension.js";
 export * from "./blocks/VideoBlockContent/VideoBlockContent.js";
+export * from "./blocks/defaultBlockHelpers.js";
+export * from "./blocks/defaultBlockTypeGuards.js";
+export * from "./blocks/defaultBlocks.js";
+export * from "./blocks/defaultProps.js";
 export * from "./editor/BlockNoteEditor.js";
 export * from "./editor/BlockNoteExtensions.js";
 export * from "./editor/BlockNoteSchema.js";
+export * from "./editor/defaultColors.js";
 export * from "./editor/selectionTypes.js";
+export * from "./exporter/index.js";
 export * from "./extensions-shared/UiElementPosition.js";
 export * from "./extensions/FilePanel/FilePanelPlugin.js";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin.js";
@@ -30,13 +33,14 @@ export * from "./extensions/LinkToolbar/LinkToolbarPlugin.js";
 export * from "./extensions/SideMenu/SideMenuPlugin.js";
 export * from "./extensions/SuggestionMenu/DefaultGridSuggestionItem.js";
 export * from "./extensions/SuggestionMenu/DefaultSuggestionItem.js";
+export * from "./extensions/SuggestionMenu/SuggestionPlugin.js";
 export * from "./extensions/SuggestionMenu/getDefaultEmojiPickerItems.js";
 export * from "./extensions/SuggestionMenu/getDefaultSlashMenuItems.js";
-export * from "./extensions/SuggestionMenu/SuggestionPlugin.js";
 export * from "./extensions/TableHandles/TableHandlesPlugin.js";
 export * from "./i18n/dictionary.js";
 export * from "./schema/index.js";
 export * from "./util/browser.js";
+export * from "./util/combineByGroup.js";
 export * from "./util/esmDependencies.js";
 export * from "./util/string.js";
 export * from "./util/typescript.js";

package/src/pm-nodes/BlockContainer.ts

@@ -21,7 +21,7 @@ export const BlockContainer = Node.create<{
   editor: BlockNoteEditor<any, any, any>;
 }>({
   name: "blockContainer",
-  group: "blockContainer",
+  group: "blockGroupChild bnBlock",
   // A block always contains content, and optionally a blockGroup which contains nested blocks
   content: "blockContent blockGroup?",
   // Ensures content-specific keyboard handlers trigger first.

package/src/pm-nodes/BlockGroup.ts

@@ -6,8 +6,8 @@ export const BlockGroup = Node.create<{
   domAttributes?: BlockNoteDOMAttributes;
 }>({
   name: "blockGroup",
-  group: "blockGroup",
-  content: "blockContainer+",
+  group: "childContainer",
+  content: "blockGroupChild+",
 
   parseHTML() {
     return [