fix xl-multi-column

packages/xl-multi-column/src/extensions/DropCursor/dropHandlers.ts

@@ -0,0 +1,94 @@
+import type { Block, BlockNoteEditor } from "@blocknote/core";
+import {
+  getNodeById,
+  removeAndInsertBlocks,
+  updateBlock as updateBlockLowLevel,
+} from "@blocknote/core";
+
+import { computeColumnListChildrenAfterDrop } from "./util/computeColumnListChildren.js";
+
+/**
+ * Handles dropping a block (or column) onto the left/right edge of an
+ * existing column, inserting a new column next to it.
+ *
+ * The removal of the dragged item and the update of `columnList`'s children
+ * happen in a single transaction, with column/columnList collapsing
+ * ("fixColumns") disabled for the removal step. `newChildren` is computed
+ * up-front and already accounts for any column left empty by the removal, so
+ * letting `fixColumnList` also run on the removal step would collapse (and
+ * invalidate the id of) the very `columnList` we're about to update.
+ */
+export function dropOntoColumn(
+  editor: BlockNoteEditor<any, any, any>,
+  params: {
+    columnList: Block<any, any, any>;
+    targetColumnId: string;
+    draggedBlock: Block<any, any, any>;
+    position: "left" | "right";
+  },
+) {
+  const { columnList, targetColumnId, draggedBlock, position } = params;
+
+  if (targetColumnId === draggedBlock.id) {
+    return;
+  }
+
+  const newChildren = computeColumnListChildrenAfterDrop(
+    columnList,
+    draggedBlock,
+    targetColumnId,
+    position,
+  );
+
+  editor.transact((tr) => {
+    if (getNodeById(draggedBlock.id, tr.doc)) {
+      removeAndInsertBlocks(tr, [draggedBlock.id], [], { fixColumns: false });
+    }
+
+    updateBlockLowLevel(tr, columnList.id, { children: newChildren });
+  });
+}
+
+/**
+ * Handles dropping a block onto the left/right edge of a block that isn't
+ * inside a column, wrapping both blocks in a new `columnList`.
+ */
+export function dropOntoBlock(
+  editor: BlockNoteEditor<any, any, any>,
+  params: {
+    targetBlock: Block<any, any, any>;
+    draggedBlock: Block<any, any, any>;
+    position: "left" | "right";
+  },
+) {
+  const { targetBlock, draggedBlock, position } = params;
+
+  if (targetBlock.id === draggedBlock.id) {
+    return;
+  }
+
+  const blocks =
+    position === "left"
+      ? [draggedBlock, targetBlock]
+      : [targetBlock, draggedBlock];
+
+  editor.transact((tr) => {
+    if (getNodeById(draggedBlock.id, tr.doc)) {
+      removeAndInsertBlocks(tr, [draggedBlock.id], []);
+    }
+
+    removeAndInsertBlocks<any, any, any>(
+      tr,
+      [targetBlock.id],
+      [
+        {
+          type: "columnList",
+          children: blocks.map((block) => ({
+            type: "column" as const,
+            children: [block],
+          })),
+        },
+      ],
+    );
+  });
+}

packages/xl-multi-column/src/extensions/DropCursor/multiColumnHandleDropPlugin.ts

@@ -1,12 +1,8 @@
 import type { BlockNoteEditor } from "@blocknote/core";
-import {
-  UniqueID,
-  createExtension,
-  getBlockInfo,
-  nodeToBlock,
-} from "@blocknote/core";
+import { createExtension, getBlockInfo, nodeToBlock } from "@blocknote/core";
 import { Plugin } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
+import { dropOntoBlock, dropOntoColumn } from "./dropHandlers.js";
 import { detectEdgePosition } from "./multiColumnDropCursor.js";
 
 /**
@@ -79,69 +75,21 @@ export function createMultiColumnHandleDropPlugin(
             });
           }
 
-          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,
+          dropOntoColumn(editor, {
+            columnList,
+            targetColumnId: blockInfo.bnBlock.node.attrs.id,
+            draggedBlock,
+            position: edgePos.position,
           });
         } else {
           // Create new columnList with blocks as columns
           const block = nodeToBlock(blockInfo.bnBlock.node, view.state.doc);
 
-          // 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],
-                  };
-                }),
-              },
-            ],
-          );
+          dropOntoBlock(editor, {
+            targetBlock: block,
+            draggedBlock,
+            position: edgePos.position,
+          });
         }
 
         return true; // Prevent default ProseMirror drop behavior

packages/xl-multi-column/src/extensions/DropCursor/util/computeColumnListChildren.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { computeColumnListChildrenAfterDrop } from "./computeColumnListChildren.js";
+
+const paragraph = (id: string, content = "") => ({
+  id,
+  type: "paragraph" as const,
+  props: {},
+  content,
+  children: [],
+});
+
+const column = (id: string, children: ReturnType<typeof paragraph>[]) => ({
+  id,
+  type: "column" as const,
+  props: { width: 1 },
+  content: undefined,
+  children,
+});
+
+describe("computeColumnListChildrenAfterDrop", () => {
+  it("keeps the source column when it still has other children", () => {
+    const columnList = {
+      id: "column-list",
+      type: "columnList",
+      props: {},
+      content: undefined,
+      children: [
+        column("column-a", [
+          paragraph("dragged", "Dragged"),
+          paragraph("stays", "Stays"),
+        ]),
+        column("column-b", [paragraph("target", "Target")]),
+      ],
+    } as any;
+
+    const result = computeColumnListChildrenAfterDrop(
+      columnList,
+      columnList.children[0].children[0],
+      "column-b",
+      "left",
+    );
+
+    expect(result.map((c: any) => c.id)).toEqual([
+      "column-a",
+      expect.any(String),
+      "column-b",
+    ]);
+    expect(result[0].children.map((b: any) => b.id)).toEqual(["stays"]);
+    expect(result[1].children.map((b: any) => b.id)).toEqual(["dragged"]);
+  });
+
+  it("drops the source column entirely once its only block is dragged away (crash trigger)", () => {
+    const columnList = {
+      id: "column-list",
+      type: "columnList",
+      props: {},
+      content: undefined,
+      children: [
+        column("column-a", [paragraph("dragged", "Dragged")]),
+        column("column-b", [paragraph("target", "Target")]),
+      ],
+    } as any;
+
+    const result = computeColumnListChildrenAfterDrop(
+      columnList,
+      columnList.children[0].children[0],
+      "column-b",
+      "left",
+    );
+
+    expect(result.map((c: any) => c.id)).not.toContain("column-a");
+    expect(result.map((c: any) => c.id)).toEqual([
+      expect.any(String),
+      "column-b",
+    ]);
+    expect(result[0].children.map((b: any) => b.id)).toEqual(["dragged"]);
+  });
+
+  it("resolves the target index against the post-filter list, not the original one (left edge)", () => {
+    const columnList = {
+      id: "column-list",
+      type: "columnList",
+      props: {},
+      content: undefined,
+      children: [
+        column("column-a", [paragraph("dragged", "Dragged")]),
+        column("column-b", [paragraph("b", "B")]),
+        column("column-c", [paragraph("c", "C")]),
+      ],
+    } as any;
+
+    const result = computeColumnListChildrenAfterDrop(
+      columnList,
+      columnList.children[0].children[0],
+      "column-c",
+      "left",
+    );
+
+    expect(result.map((c: any) => c.id)).toEqual([
+      "column-b",
+      expect.any(String),
+      "column-c",
+    ]);
+  });
+
+  it("resolves the target index against the post-filter list, not the original one (right edge)", () => {
+    const columnList = {
+      id: "column-list",
+      type: "columnList",
+      props: {},
+      content: undefined,
+      children: [
+        column("column-a", [paragraph("dragged", "Dragged")]),
+        column("column-b", [paragraph("b", "B")]),
+        column("column-c", [paragraph("c", "C")]),
+      ],
+    } as any;
+
+    const result = computeColumnListChildrenAfterDrop(
+      columnList,
+      columnList.children[0].children[0],
+      "column-c",
+      "right",
+    );
+
+    expect(result.map((c: any) => c.id)).toEqual([
+      "column-b",
+      "column-c",
+      expect.any(String),
+    ]);
+  });
+
+  it("removes the dragged item from the top level when it is itself a column", () => {
+    const draggedColumn = column("column-a", [paragraph("dragged", "Dragged")]);
+    const columnList = {
+      id: "column-list",
+      type: "columnList",
+      props: {},
+      content: undefined,
+      children: [
+        draggedColumn,
+        column("column-b", [paragraph("target", "Target")]),
+      ],
+    } as any;
+
+    const result = computeColumnListChildrenAfterDrop(
+      columnList,
+      draggedColumn as any,
+      "column-b",
+      "left",
+    );
+
+    expect(result.map((c: any) => c.id)).toEqual([
+      expect.any(String),
+      "column-b",
+    ]);
+    expect(result[0].id).not.toBe("column-a");
+    expect(result[0].children.map((b: any) => b.id)).toEqual(["dragged"]);
+  });
+});