@blocknote/core 0.17.1 → 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/SuggestionPlugin.ts

@@ -202,6 +202,11 @@ export class SuggestionMenuProseMirrorPlugin<
             return prev;
           }
 
+          // Ignore transactions in code blocks.
+          if (transaction.selection.$from.parent.type.spec.code) {
+            return prev;
+          }
+
           // Either contains the trigger character if the menu should be shown,
           // or null if it should be hidden.
           const suggestionPluginTransactionMeta: {

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -32,7 +32,8 @@ export async function getDefaultEmojiPickerItems<
   if (!data) {
     // use a dynamic import to encourage bundle-splitting
     // and a smaller initial client bundle size
-    data = import("@emoji-mart/data", { assert: { type: "json" } }) as any;
+
+    data = import("@emoji-mart/data") as any;
 
     // load dynamically because emoji-mart doesn't specify type: module and breaks in nodejs
     emojiMart = await import("emoji-mart");

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!);
@@ -175,6 +173,24 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("codeBlock", editor)) {
+    items.push({
+      onItemClick: () => {
+        const pos = editor._tiptapEditor.state.selection.from;
+
+        insertOrUpdateBlock(editor, {
+          type: "codeBlock",
+        });
+
+        // Move the cursor inside the code block
+        editor._tiptapEditor.commands.setTextSelection(pos);
+      },
+      badge: formatKeyboardShortcut("Mod-Alt-c"),
+      key: "code_block",
+      ...editor.dictionary.slash_menu.code_block,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("table", editor)) {
     items.push({
       onItemClick: () => {