@blocknote/xl-multi-column 0.47.1 → 0.47.2

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1772452740129,"assets":[{"name":"blocknote-xl-multi-column.cjs","size":20696},{"name":"blocknote-xl-multi-column.cjs.map","size":3792252}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote-xl-multi-column.cjs"],"names":["blocknote-xl-multi-column"]}],"modules":[{"name":"./src/i18n/locales/ar.ts","size":364,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/de.ts","size":400,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/en.ts","size":378,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/es.ts","size":392,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/fr.ts","size":398,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/hr.ts","size":396,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/is.ts","size":376,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ja.ts","size":284,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ko.ts","size":288,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/nl.ts","size":390,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/pl.ts","size":394,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/pt.ts","size":388,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ru.ts","size":370,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/vi.ts","size":340,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/zh.ts","size":274,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/index.ts","size":0,"chunks":["a1ee98a"]},{"name":"./src/i18n/dictionary.ts","size":189,"chunks":["a1ee98a"]},{"name":"./src/extensions/ColumnResize/ColumnResizeExtension.ts","size":8414,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Column.ts","size":2591,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/ColumnList.ts","size":1144,"chunks":["a1ee98a"]},{"name":"./src/blocks/Columns/index.ts","size":316,"chunks":["a1ee98a"]},{"name":"./src/blocks/schema.ts","size":295,"chunks":["a1ee98a"]},{"name":"./src/extensions/DropCursor/MultiColumnDropCursorPlugin.ts","size":11843,"chunks":["a1ee98a"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@19.2.3/node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["a1ee98a"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@19.2.3/node_modules/react-icons/lib/iconBase.mjs","size":4003,"chunks":["a1ee98a"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@19.2.3/node_modules/react-icons/tb/index.mjs","size":708,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/getMultiColumnSlashMenuItems.tsx","size":2105,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}
+{"builtAt":1774004019713,"assets":[{"name":"blocknote-xl-multi-column.cjs","size":17011},{"name":"blocknote-xl-multi-column.cjs.map","size":3780581}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote-xl-multi-column.cjs"],"names":["blocknote-xl-multi-column"]}],"modules":[{"name":"./src/i18n/locales/ar.ts","size":364,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/de.ts","size":400,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/en.ts","size":378,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/es.ts","size":392,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/fr.ts","size":398,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/hr.ts","size":396,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/is.ts","size":376,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ja.ts","size":284,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ko.ts","size":288,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/nl.ts","size":390,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/pl.ts","size":394,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/pt.ts","size":388,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ru.ts","size":370,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/vi.ts","size":340,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/zh.ts","size":274,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/index.ts","size":0,"chunks":["a1ee98a"]},{"name":"./src/i18n/dictionary.ts","size":189,"chunks":["a1ee98a"]},{"name":"./src/extensions/DropCursor/multiColumnDropCursor.ts","size":1778,"chunks":["a1ee98a"]},{"name":"./src/extensions/DropCursor/multiColumnHandleDropPlugin.ts","size":3253,"chunks":["a1ee98a"]},{"name":"./src/extensions/ColumnResize/ColumnResizeExtension.ts","size":8412,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Column.ts","size":2593,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/ColumnList.ts","size":1146,"chunks":["a1ee98a"]},{"name":"./src/blocks/Columns/index.ts","size":351,"chunks":["a1ee98a"]},{"name":"./src/blocks/schema.ts","size":293,"chunks":["a1ee98a"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@19.2.3/node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["a1ee98a"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@19.2.3/node_modules/react-icons/lib/iconBase.mjs","size":4003,"chunks":["a1ee98a"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@19.2.3/node_modules/react-icons/tb/index.mjs","size":708,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/getMultiColumnSlashMenuItems.tsx","size":2105,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}

package/package.json

@@ -9,7 +9,7 @@
     "directory": "packages/xl-multi-column"
   },
   "license": "GPL-3.0 OR PROPRIETARY",
-  "version": "0.47.1",
+  "version": "0.47.2",
   "files": [
     "dist",
     "types",
@@ -42,8 +42,8 @@
     }
   },
   "dependencies": {
-    "@blocknote/core": "0.47.1",
-    "@blocknote/react": "0.47.1",
+    "@blocknote/core": "0.47.2",
+    "@blocknote/react": "0.47.2",
     "@tiptap/core": "^3.13.0",
     "prosemirror-model": "^1.25.4",
     "prosemirror-state": "^1.4.4",

package/src/blocks/Columns/index.ts

@@ -1,3 +1,4 @@
+import { MultiColumnDropHandlerExtension } from "../../extensions/DropCursor/multiColumnHandleDropPlugin.js";
 import { Column } from "../../pm-nodes/Column.js";
 import { ColumnList } from "../../pm-nodes/ColumnList.js";
 
@@ -14,6 +15,7 @@ export const ColumnBlock = createBlockSpecFromTiptapNode(
       default: 1,
     },
   },
+  [MultiColumnDropHandlerExtension()],
 );
 
 export const ColumnListBlock = createBlockSpecFromTiptapNode(

package/src/extensions/DropCursor/multiColumnDropCursor.ts

@@ -0,0 +1,112 @@
+import { type DropCursorHooks, getNearestBlockPos } from "@blocknote/core";
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+
+const PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP = 0.1;
+
+export interface EdgeDropPosition {
+  position: "left" | "right" | "regular";
+  posBeforeNode: number;
+  node: any;
+}
+
+/**
+ * Detects if the drop event is near the left or right edge of a block.
+ * Shared utility used by both the drop cursor visualization and the drop handler.
+ * Returns null when the event position cannot be resolved (e.g. drop outside editor bounds).
+ */
+export function detectEdgePosition(
+  event: DragEvent,
+  view: EditorView,
+  state: EditorState,
+): EdgeDropPosition | null {
+  const eventPos = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY,
+  });
+
+  if (!eventPos) {
+    return null;
+  }
+
+  const blockPos = getNearestBlockPos(state.doc, eventPos.pos);
+
+  // If we're at a block that's in a column, we want to compare the mouse position to the column, not the block inside it
+  // Why? Because we want to insert a new column in the columnList, instead of a new columnList inside of the column
+  let resolved = state.doc.resolve(blockPos.posBeforeNode);
+  if (resolved.parent.type.name === "column") {
+    resolved = state.doc.resolve(resolved.before());
+  }
+
+  const posInfo = {
+    posBeforeNode: resolved.pos,
+    node: resolved.nodeAfter!,
+  };
+
+  const blockElement = view.nodeDOM(posInfo.posBeforeNode);
+  if (blockElement === null) {
+    return {
+      position: "regular",
+      posBeforeNode: posInfo.posBeforeNode,
+      node: posInfo.node,
+    };
+  }
+  const blockRect = (blockElement as HTMLElement).getBoundingClientRect();
+
+  let position: "regular" | "left" | "right" = "regular";
+
+  if (
+    event.clientX <=
+    blockRect.left +
+      blockRect.width * PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP
+  ) {
+    position = "left";
+  } else if (
+    event.clientX >=
+    blockRect.right -
+      blockRect.width * PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP
+  ) {
+    position = "right";
+  }
+
+  return {
+    position,
+    posBeforeNode: posInfo.posBeforeNode,
+    node: posInfo.node,
+  };
+}
+
+/**
+ * Creates the computeDropPosition hook for multi-column support.
+ * This hook detects edge drops and returns vertical cursor orientations.
+ */
+export const multiColumnDropCursor: { hooks: DropCursorHooks } = {
+  hooks: {
+    computeDropPosition: (context) => {
+      const edgePos = detectEdgePosition(
+        context.event,
+        context.view,
+        context.view.state,
+      );
+
+      // Fall back to default when position cannot be resolved
+      if (edgePos === null) {
+        return context.defaultPosition;
+      }
+
+      // If it's a regular (non-edge) drop, use the default position
+      if (edgePos.position === "regular") {
+        return context.defaultPosition;
+      }
+
+      // Edge drop - show vertical cursor
+      return {
+        pos: edgePos.posBeforeNode,
+        orientation:
+          edgePos.position === "left"
+            ? "block-vertical-left"
+            : "block-vertical-right",
+      };
+    },
+  },
+};

package/src/extensions/DropCursor/multiColumnHandleDropPlugin.ts

@@ -0,0 +1,162 @@
+import type { BlockNoteEditor } from "@blocknote/core";
+import {
+  UniqueID,
+  createExtension,
+  getBlockInfo,
+  nodeToBlock,
+} from "@blocknote/core";
+import { Plugin } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { detectEdgePosition } from "./multiColumnDropCursor.js";
+
+/**
+ * Creates a ProseMirror plugin that handles drop events for multi-column layouts.
+ * When a block is dropped near the left or right edge of another block, it creates
+ * or modifies column layouts.
+ */
+export function createMultiColumnHandleDropPlugin(
+  editor: BlockNoteEditor<any, any, any>,
+): Plugin {
+  return new Plugin({
+    props: {
+      handleDrop(view: EditorView, event: DragEvent, slice, _moved) {
+        const edgePos = detectEdgePosition(event, view, view.state);
+        if (edgePos === null) {
+          return false; // Let ProseMirror handle the drop (e.g. outside editor bounds)
+        }
+
+        const blockInfo = getBlockInfo(edgePos);
+
+        // Only handle edge drops (left/right)
+        if (edgePos.position === "regular") {
+          return false; // Let ProseMirror handle regular drops
+        }
+
+        if (slice.content.childCount === 0) {
+          return false; // Let ProseMirror handle empty slice drops
+        }
+
+        const draggedBlock = nodeToBlock(
+          slice.content.child(0),
+          editor.pmSchema,
+        );
+
+        if (blockInfo.blockNoteType === "column") {
+          // Insert new column in existing columnList
+          const parentBlock = view.state.doc
+            .resolve(blockInfo.bnBlock.beforePos)
+            .node();
+
+          const columnList = nodeToBlock<any, any, any>(
+            parentBlock,
+            editor.pmSchema,
+          );
+
+          // Normalize column widths to average of 1
+          // In a `columnList`, we expect that the average width of each column
+          // is 1. However, there are cases in which this stops being true. For
+          // example, having one wider column and then removing it will cause
+          // the average width to go down. This isn't really an issue until the
+          // user tries to add a new column, which will, in this case, be wider
+          // than expected. Therefore, we normalize the column widths to an
+          // average of 1 here to avoid this issue.
+          let sumColumnWidthPercent = 0;
+          columnList.children.forEach((column) => {
+            sumColumnWidthPercent += column.props.width as number;
+          });
+          const avgColumnWidthPercent =
+            sumColumnWidthPercent / columnList.children.length;
+
+          // If the average column width is not 1, normalize it. We're dealing
+          // with floats so we need a small margin to account for precision
+          // errors.
+          if (avgColumnWidthPercent < 0.99 || avgColumnWidthPercent > 1.01) {
+            const scalingFactor = 1 / avgColumnWidthPercent;
+
+            columnList.children.forEach((column) => {
+              column.props.width =
+                (column.props.width as number) * scalingFactor;
+            });
+          }
+
+          const index = columnList.children.findIndex(
+            (b) => b.id === blockInfo.bnBlock.node.attrs.id,
+          );
+
+          const newChildren = columnList.children
+            // If the dragged block is in one of the columns, remove it.
+            .map((column) => ({
+              ...column,
+              children: column.children.filter(
+                (block) => block.id !== draggedBlock.id,
+              ),
+            }))
+            // Remove empty columns (can happen when dragged block is removed).
+            .filter((column) => column.children.length > 0)
+            // Insert the dragged block in the correct position.
+            .toSpliced(edgePos.position === "left" ? index : index + 1, 0, {
+              type: "column",
+              children: [draggedBlock],
+              props: {},
+              content: undefined,
+              id: UniqueID.options.generateID(),
+            });
+
+          if (editor.getBlock(draggedBlock.id)) {
+            editor.removeBlocks([draggedBlock]);
+          }
+
+          editor.updateBlock(columnList, {
+            children: newChildren,
+          });
+        } else {
+          // Create new columnList with blocks as columns
+          const block = nodeToBlock(blockInfo.bnBlock.node, editor.pmSchema);
+
+          // The user is dropping next to the original block being dragged - do
+          // nothing.
+          if (block.id === draggedBlock.id) {
+            return true;
+          }
+
+          const blocks =
+            edgePos.position === "left"
+              ? [draggedBlock, block]
+              : [block, draggedBlock];
+
+          if (editor.getBlock(draggedBlock.id)) {
+            editor.removeBlocks([draggedBlock]);
+          }
+
+          editor.replaceBlocks(
+            [block],
+            [
+              {
+                type: "columnList",
+                children: blocks.map((b) => {
+                  return {
+                    type: "column",
+                    children: [b],
+                  };
+                }),
+              },
+            ],
+          );
+        }
+
+        return true; // Prevent default ProseMirror drop behavior
+      },
+    },
+  });
+}
+
+/**
+ * BlockNote extension that adds the multi-column drop handler plugin.
+ * This should be added to the editor's extensions to enable column creation via drag-and-drop.
+ */
+export const MultiColumnDropHandlerExtension = createExtension(
+  ({ editor }) => ({
+    key: "multiColumnDropHandler",
+    prosemirrorPlugins: [createMultiColumnHandleDropPlugin(editor)],
+  }),
+);

package/src/index.ts

@@ -3,5 +3,5 @@ export { locales };
 export * from "./i18n/dictionary.js";
 export * from "./blocks/Columns/index.js";
 export * from "./blocks/schema.js";
-export * from "./extensions/DropCursor/MultiColumnDropCursorPlugin.js";
+export * from "./extensions/DropCursor/multiColumnDropCursor.js";
 export * from "./extensions/SuggestionMenu/getMultiColumnSlashMenuItems.js";

package/types/src/extensions/DropCursor/multiColumnDropCursor.d.ts

@@ -0,0 +1,21 @@
+import { type DropCursorHooks } from "@blocknote/core";
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+export interface EdgeDropPosition {
+    position: "left" | "right" | "regular";
+    posBeforeNode: number;
+    node: any;
+}
+/**
+ * Detects if the drop event is near the left or right edge of a block.
+ * Shared utility used by both the drop cursor visualization and the drop handler.
+ * Returns null when the event position cannot be resolved (e.g. drop outside editor bounds).
+ */
+export declare function detectEdgePosition(event: DragEvent, view: EditorView, state: EditorState): EdgeDropPosition | null;
+/**
+ * Creates the computeDropPosition hook for multi-column support.
+ * This hook detects edge drops and returns vertical cursor orientations.
+ */
+export declare const multiColumnDropCursor: {
+    hooks: DropCursorHooks;
+};

package/types/src/extensions/DropCursor/multiColumnHandleDropPlugin.d.ts

@@ -0,0 +1,16 @@
+import type { BlockNoteEditor } from "@blocknote/core";
+import { Plugin } from "prosemirror-state";
+/**
+ * Creates a ProseMirror plugin that handles drop events for multi-column layouts.
+ * When a block is dropped near the left or right edge of another block, it creates
+ * or modifies column layouts.
+ */
+export declare function createMultiColumnHandleDropPlugin(editor: BlockNoteEditor<any, any, any>): Plugin;
+/**
+ * BlockNote extension that adds the multi-column drop handler plugin.
+ * This should be added to the editor's extensions to enable column creation via drag-and-drop.
+ */
+export declare const MultiColumnDropHandlerExtension: (options?: any) => import("@blocknote/core").ExtensionFactoryInstance<{
+    key: string;
+    prosemirrorPlugins: Plugin<any>[];
+}>;

package/types/src/index.d.ts

@@ -3,5 +3,5 @@ export { locales };
 export * from "./i18n/dictionary.js";
 export * from "./blocks/Columns/index.js";
 export * from "./blocks/schema.js";
-export * from "./extensions/DropCursor/MultiColumnDropCursorPlugin.js";
+export * from "./extensions/DropCursor/multiColumnDropCursor.js";
 export * from "./extensions/SuggestionMenu/getMultiColumnSlashMenuItems.js";