@use-kona/editor 0.1.33 → 0.1.34

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -187,34 +187,41 @@ const moveNode = (editor, targetNodePath, nodeIds, position, sourcePath, section
     const dropPath = getDropPath(editor, targetNodePath, position);
     if (!dropPath) return;
     if (!isValidInsertPath(editor, dropPath)) return;
-    if (sectionPaths?.some((path)=>Path.equals(path, targetNodePath))) return;
+    const explicitPaths = sectionPaths?.length ? sectionPaths : 0 === nodeIds.length && sourcePath ? [
+        sourcePath
+    ] : void 0;
+    const explicitNodes = explicitPaths && new Set(explicitPaths.filter((path)=>Editor.hasPath(editor, path)).map((path)=>Editor.node(editor, path)[0]));
+    const paths = Array.from(Editor.nodes(editor, {
+        at: [],
+        match: (n)=>{
+            if (explicitNodes) return explicitNodes.has(n);
+            return Element.isElement(n) && Editor.isBlock(editor, n) && 'string' == typeof n.nodeId && nodeIds.includes(n.nodeId);
+        },
+        mode: 'highest'
+    }), ([, path])=>path);
+    if (paths.some((path)=>Path.equals(path, targetNodePath) || Path.isAncestor(path, targetNodePath))) return;
+    const targetRef = Editor.pathRef(editor, targetNodePath);
+    const sourceRefs = paths.map((path)=>Editor.pathRef(editor, path));
     Editor.withoutNormalizing(editor, ()=>{
-        if (sectionPaths?.length) {
-            const sectionNodes = new Set(sectionPaths.filter((path)=>Editor.hasPath(editor, path)).map((path)=>Editor.node(editor, path)[0]));
-            Transforms.moveNodes(editor, {
-                at: [],
-                match: (node)=>sectionNodes.has(node),
-                to: dropPath,
-                mode: 'highest'
-            });
-            return;
+        try {
+            const orderedRefs = 'top' === position ? sourceRefs : [
+                ...sourceRefs
+            ].reverse();
+            for (const sourceRef of orderedRefs){
+                const from = sourceRef.current;
+                const target = targetRef.current;
+                if (!from || !target) continue;
+                let to = 'top' === position ? target : Path.next(target);
+                if (Path.isSibling(from, to) && Path.isBefore(from, to)) to = Path.previous(to);
+                Transforms.moveNodes(editor, {
+                    at: from,
+                    to
+                });
+            }
+        } finally{
+            targetRef.unref();
+            for (const ref of sourceRefs)ref.unref();
         }
-        if (0 === nodeIds.length && sourcePath && Editor.hasPath(editor, sourcePath)) return void Transforms.moveNodes(editor, {
-            at: sourcePath,
-            to: dropPath
-        });
-        Transforms.moveNodes(editor, {
-            at: [],
-            match: (n)=>{
-                if (!Editor.isBlock(editor, n)) return false;
-                if (Editor.isEditor(n)) return false;
-                const node = n;
-                const shouldMove = 'string' == typeof node.nodeId && nodeIds.includes(node.nodeId);
-                return shouldMove;
-            },
-            to: dropPath,
-            mode: 'highest'
-        });
     });
     Editor.normalize(editor);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/DnDPlugin/DnDPlugin.spec.ts

@@ -1,17 +1,24 @@
 // @vitest-environment jsdom
 
 import '@testing-library/jest-dom/vitest';
-import { act, render, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import { createDragDropManager, type DragDropManager } from 'dnd-core';
 import React from 'react';
 import { DndProvider } from 'react-dnd';
 import type { Editor } from 'slate';
-import { createEditor } from 'slate';
+import { createEditor, Node, Editor as SlateEditor } from 'slate';
 import { describe, expect, it, vi } from 'vitest';
 import { KonaEditor } from '../../editor';
 import type { IPlugin } from '../../types';
 import { CollapsibleBlocksPlugin } from '../CollapsibleBlocksPlugin';
 import { HeadingsPlugin } from '../HeadingsPlugin';
+import { ListsPlugin } from '../ListsPlugin';
 import { DnDPlugin, moveNode } from './DnDPlugin';
 
 Object.assign(globalThis, { React });
@@ -61,6 +68,181 @@ const sectionEditor = () => {
 };
 
 describe('moveNode', () => {
+  const paragraph = (text: string) => ({
+    type: 'paragraph',
+    nodeId: text,
+    children: [{ text }],
+  });
+
+  const directions = [
+    { direction: 'down', initial: ['A', 'X', 'B', 'Y'], source: 0, target: 2 },
+    { direction: 'up', initial: ['X', 'B', 'Y', 'A'], source: 3, target: 1 },
+  ];
+
+  describe.each(['top', 'bottom'] as const)('drop at %s', (position) => {
+    it.each(directions)(
+      'moves one block $direction using IDs or a source path',
+      ({ initial, source, target }) => {
+        for (const useIds of [true, false]) {
+          const editor = createEditor();
+          editor.children = initial.map(paragraph);
+
+          moveNode(editor, [target], useIds ? ['A'] : [], position, [source]);
+
+          expect(editor.children.map(Node.string)).toEqual(
+            position === 'top' ? ['X', 'A', 'B', 'Y'] : ['X', 'B', 'A', 'Y'],
+          );
+        }
+      },
+    );
+
+    it.each([
+      { name: 'down', initial: ['A', 'C', 'X', 'B', 'Y'] },
+      { name: 'up', initial: ['X', 'B', 'Y', 'A', 'C'] },
+      { name: 'noncontiguous', initial: ['A', 'X', 'C', 'B', 'Y'] },
+      { name: 'across the target', initial: ['A', 'X', 'B', 'Y', 'C'] },
+    ])('moves a selection $name in document order', ({ initial }) => {
+      const editor = createEditor();
+      editor.children = initial.map(paragraph);
+
+      moveNode(editor, [initial.indexOf('B')], ['C', 'A'], position);
+
+      expect(editor.children.map(Node.string)).toEqual(
+        position === 'top'
+          ? ['X', 'A', 'C', 'B', 'Y']
+          : ['X', 'B', 'A', 'C', 'Y'],
+      );
+    });
+
+    it.each([true, false])(
+      'moves a section in both directions (collapsed=%s)',
+      (collapsed) => {
+        for (const direction of ['down', 'up']) {
+          const editor = sectionEditor();
+          const section = editor.children.slice(0, 4);
+          Object.assign(section[0], { collapsed });
+          const surrounding = ['X', 'B', 'Y'].map(paragraph);
+          editor.children =
+            direction === 'down'
+              ? [...section, ...surrounding]
+              : [...surrounding, ...section];
+          const start = direction === 'down' ? 0 : 3;
+
+          moveNode(
+            editor,
+            [direction === 'down' ? 5 : 1],
+            [],
+            position,
+            undefined,
+            [0, 1, 2, 3].map((index) => [start + index]),
+          );
+
+          expect(editor.children).toEqual(
+            position === 'top'
+              ? [surrounding[0], ...section, surrounding[1], surrounding[2]]
+              : [surrounding[0], surrounding[1], ...section, surrounding[2]],
+          );
+        }
+      },
+    );
+
+    it.each(directions)(
+      'reorders items $direction within a nested list',
+      ({ initial, source, target }) => {
+        const editor = new ListsPlugin().init(createEditor());
+        const items = initial.map((text) => ({
+          ...paragraph(text),
+          type: 'li',
+        }));
+        editor.children = [
+          {
+            type: 'ul',
+            children: [
+              { type: 'li', children: [{ text: 'Parent' }] },
+              { type: 'ul', children: items },
+              { type: 'li', children: [{ text: 'Tail' }] },
+            ],
+          },
+        ];
+
+        moveNode(editor, [0, 1, target], ['A'], position, [0, 1, source]);
+
+        expect(
+          Array.from(Node.children(editor, [0, 1]), ([node]) =>
+            Node.string(node),
+          ),
+        ).toEqual(
+          position === 'top' ? ['X', 'A', 'B', 'Y'] : ['X', 'B', 'A', 'Y'],
+        );
+        expect(Node.string(Node.get(editor, [0, 0]))).toBe('Parent');
+        expect(Node.string(Node.get(editor, [0, 2]))).toBe('Tail');
+      },
+    );
+
+    it.each(['into', 'out of'])(
+      'moves an item %s a nested list',
+      (direction) => {
+        const editor = new ListsPlugin().init(createEditor());
+        const item = (text: string) => ({ ...paragraph(text), type: 'li' });
+        editor.children = [
+          {
+            type: 'ul',
+            children: [
+              item('A'),
+              { type: 'ul', children: [item('B'), item('C')] },
+              item('D'),
+            ],
+          },
+        ];
+
+        if (direction === 'into') {
+          moveNode(editor, [0, 1, 0], ['A'], position);
+          expect(editor.children).toEqual([
+            {
+              type: 'ul',
+              children: [
+                {
+                  type: 'ul',
+                  children: (position === 'top'
+                    ? ['A', 'B', 'C']
+                    : ['B', 'A', 'C']
+                  ).map(item),
+                },
+                item('D'),
+              ],
+            },
+          ]);
+        } else {
+          moveNode(editor, [0, 2], ['B'], position);
+          const nested = { type: 'ul', children: [item('C')] };
+          expect(editor.children).toEqual([
+            {
+              type: 'ul',
+              children:
+                position === 'top'
+                  ? [item('A'), nested, item('B'), item('D')]
+                  : [item('A'), nested, item('D'), item('B')],
+            },
+          ]);
+        }
+      },
+    );
+  });
+
+  it.each(['top', 'bottom'] as const)(
+    'does not move a selection onto itself at %s',
+    (position) => {
+      const editor = createEditor();
+      editor.children = ['A', 'B', 'C'].map(paragraph);
+      const original = structuredClone(editor.children);
+
+      moveNode(editor, [1], ['A', 'B'], position);
+
+      expect(editor.children).toEqual(original);
+      expect(SlateEditor.pathRefs(editor).size).toBe(0);
+    },
+  );
+
   it('moves a list item before another list item', () => {
     const editor = listEditor();
 
@@ -149,99 +331,181 @@ const getHandlerIds = (
 };
 
 describe('DnDPlugin', () => {
-  it('reorders rendered paragraphs when dropped before another block', async () => {
-    const manager = createDndManager();
-    const onChange = vi.fn();
-    let editor: Editor | undefined;
-
-    const dndPlugin = new DnDPlugin({
-      onDropFiles: () => {},
-      renderBlock: ({ dragRef, dropRef, previewRef, props }) =>
-        React.createElement(
-          'div',
-          {
-            ...props.attributes,
-            ref: (element) => dropRef(previewRef(element)),
-          },
+  it.each([
+    {
+      selected: [],
+      direction: 'down',
+      source: 0,
+      target: 2,
+      y: 0,
+      expected: ['Second', 'First', 'Third', 'Fourth'],
+    },
+    {
+      selected: [],
+      direction: 'up',
+      source: 3,
+      target: 1,
+      y: 0,
+      expected: ['First', 'Fourth', 'Second', 'Third'],
+    },
+    {
+      selected: [],
+      direction: 'down',
+      source: 0,
+      target: 2,
+      y: 100,
+      expected: ['Second', 'Third', 'First', 'Fourth'],
+    },
+    {
+      selected: [],
+      direction: 'up',
+      source: 3,
+      target: 1,
+      y: 100,
+      expected: ['First', 'Second', 'Fourth', 'Third'],
+    },
+    {
+      selected: [0, 1],
+      direction: 'down',
+      source: 0,
+      target: 3,
+      y: 0,
+      expected: ['Third', 'First', 'Second', 'Fourth'],
+    },
+    {
+      selected: [2, 3],
+      direction: 'up',
+      source: 3,
+      target: 0,
+      y: 100,
+      expected: ['First', 'Third', 'Fourth', 'Second'],
+    },
+  ])(
+    'reorders rendered paragraphs $direction at y=$y',
+    async ({ selected, source, target, y, expected }) => {
+      const manager = createDndManager();
+      const onChange = vi.fn();
+      let editor: Editor | undefined;
+
+      const dndPlugin = new DnDPlugin({
+        onDropFiles: () => {},
+        renderBlock: ({
+          dragRef,
+          dropRef,
+          previewRef,
+          props,
+          onToggleSelected,
+        }) =>
           React.createElement(
-            'button',
-            { contentEditable: false, ref: dragRef, type: 'button' },
-            'Drag',
-          ),
-          props.children,
-        ),
-    });
-
-    render(
-      React.createElement(
-        DndProvider,
-        { manager },
-        React.createElement(KonaEditor, {
-          initialValue: [
-            { type: 'paragraph', children: [{ text: 'First' }] },
-            { type: 'paragraph', children: [{ text: 'Second' }] },
-          ],
-          plugins: [
-            dndPlugin,
+            'div',
             {
-              init(value) {
-                editor = value;
-                return value;
+              ...props.attributes,
+              ref: (element) => dropRef(previewRef(element)),
+            },
+            React.createElement(
+              'button',
+              { contentEditable: false, ref: dragRef, type: 'button' },
+              'Drag',
+            ),
+            React.createElement(
+              'button',
+              {
+                type: 'button',
+                contentEditable: false,
+                onClick: onToggleSelected,
               },
-            } satisfies IPlugin,
-          ],
-          onChange,
-        }),
-      ),
-    );
-
-    const originalRect = HTMLElement.prototype.getBoundingClientRect;
-    Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
-      configurable: true,
-      value: () => ({ bottom: 100, top: 0 }),
-    });
+              'Select',
+            ),
+            props.children,
+          ),
+      });
 
-    try {
-      const sourceIds = getHandlerIds(manager, 'dragSources');
-      const targetIds = getHandlerIds(manager, 'dropTargets');
+      const view = render(
+        React.createElement(
+          DndProvider,
+          { manager },
+          React.createElement(KonaEditor, {
+            initialValue: [
+              {
+                type: 'paragraph',
+                nodeId: 'First',
+                children: [{ text: 'First' }],
+              },
+              {
+                type: 'paragraph',
+                nodeId: 'Second',
+                children: [{ text: 'Second' }],
+              },
+              {
+                type: 'paragraph',
+                nodeId: 'Third',
+                children: [{ text: 'Third' }],
+              },
+              {
+                type: 'paragraph',
+                nodeId: 'Fourth',
+                children: [{ text: 'Fourth' }],
+              },
+            ],
+            plugins: [
+              dndPlugin,
+              {
+                init(value) {
+                  editor = value;
+                  return value;
+                },
+              } satisfies IPlugin,
+            ],
+            onChange,
+          }),
+        ),
+      );
 
-      expect(sourceIds).toHaveLength(2);
-      expect(targetIds).toHaveLength(2);
+      for (const index of selected) {
+        fireEvent.click(within(view.container).getAllByText('Select')[index]);
+      }
 
-      act(() => {
-        manager.getActions().beginDrag([sourceIds[1]], {
-          clientOffset: { x: 0, y: 50 },
-          getSourceClientOffset: () => ({ x: 0, y: 0 }),
-        });
-        manager.getActions().publishDragSource();
-        manager
-          .getActions()
-          .hover([targetIds[0]], { clientOffset: { x: 0, y: 0 } });
-        expect(manager.getMonitor().canDropOnTarget(targetIds[0])).toBe(true);
-        manager.getActions().drop();
-        manager.getActions().endDrag();
-      });
-    } finally {
+      const originalRect = HTMLElement.prototype.getBoundingClientRect;
       Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
         configurable: true,
-        value: originalRect,
+        value: () => ({ bottom: 100, top: 0 }),
       });
-    }
 
-    expect(editor?.children).toEqual([
-      expect.objectContaining({
-        type: 'paragraph',
-        children: [{ text: 'Second' }],
-      }),
-      expect.objectContaining({
-        type: 'paragraph',
-        children: [{ text: 'First' }],
-      }),
-    ]);
-    await waitFor(() =>
-      expect(onChange).toHaveBeenLastCalledWith(editor?.children),
-    );
-  });
+      try {
+        const sourceIds = getHandlerIds(manager, 'dragSources');
+        const targetIds = getHandlerIds(manager, 'dropTargets');
+
+        expect(sourceIds).toHaveLength(4);
+        expect(targetIds).toHaveLength(4);
+
+        await act(async () => {
+          manager.getActions().beginDrag([sourceIds[source]], {
+            clientOffset: { x: 0, y: 50 },
+            getSourceClientOffset: () => ({ x: 0, y: 0 }),
+          });
+          manager.getActions().publishDragSource();
+          manager
+            .getActions()
+            .hover([targetIds[target]], { clientOffset: { x: 0, y } });
+          expect(manager.getMonitor().canDropOnTarget(targetIds[target])).toBe(
+            true,
+          );
+          manager.getActions().drop();
+          manager.getActions().endDrag();
+        });
+      } finally {
+        Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
+          configurable: true,
+          value: originalRect,
+        });
+      }
+
+      expect(editor?.children.map(Node.string)).toEqual(expected);
+      await waitFor(() =>
+        expect(onChange).toHaveBeenLastCalledWith(editor?.children),
+      );
+    },
+  );
 
   it('moves every block in an expanded collapsible section', async () => {
     const manager = createDndManager();

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -9,7 +9,6 @@ import {
   useReadOnly,
   useSlate,
 } from 'slate-react';
-import type { CustomElement } from '../../../types';
 import { useEditorContext } from '../../provider';
 import type { IPlugin } from '../../types';
 import {
@@ -329,55 +328,71 @@ export const moveNode = (
     return;
   }
 
-  if (sectionPaths?.some((path) => Path.equals(path, targetNodePath))) {
+  const explicitPaths = sectionPaths?.length
+    ? sectionPaths
+    : nodeIds.length === 0 && sourcePath
+      ? [sourcePath]
+      : undefined;
+  const explicitNodes =
+    explicitPaths &&
+    new Set(
+      explicitPaths
+        .filter((path) => Editor.hasPath(editor, path))
+        .map((path) => Editor.node(editor, path)[0]),
+    );
+  const paths = Array.from(
+    Editor.nodes(editor, {
+      at: [],
+      match: (n) => {
+        if (explicitNodes) return explicitNodes.has(n);
+        return (
+          Element.isElement(n) &&
+          Editor.isBlock(editor, n) &&
+          typeof (n as NodeWithId).nodeId === 'string' &&
+          nodeIds.includes((n as NodeWithId).nodeId)
+        );
+      },
+      mode: 'highest',
+    }),
+    ([, path]) => path,
+  );
+
+  // A selected target (or its ancestor) cannot also anchor the move.
+  if (
+    paths.some(
+      (path) =>
+        Path.equals(path, targetNodePath) ||
+        Path.isAncestor(path, targetNodePath),
+    )
+  ) {
     return;
   }
 
-  Editor.withoutNormalizing(editor, () => {
-    if (sectionPaths?.length) {
-      const sectionNodes = new Set(
-        sectionPaths
-          .filter((path) => Editor.hasPath(editor, path))
-          .map((path) => Editor.node(editor, path)[0]),
-      );
-
-      Transforms.moveNodes(editor, {
-        at: [],
-        match: (node) => sectionNodes.has(node),
-        to: dropPath,
-        mode: 'highest',
-      });
-      return;
-    }
-
-    if (
-      nodeIds.length === 0 &&
-      sourcePath &&
-      Editor.hasPath(editor, sourcePath)
-    ) {
-      Transforms.moveNodes(editor, { at: sourcePath, to: dropPath });
-      return;
-    }
-
-    Transforms.moveNodes(editor, {
-      at: [],
-      match: (n) => {
-        if (!Editor.isBlock(editor, n as CustomElement)) {
-          return false;
-        }
+  const targetRef = Editor.pathRef(editor, targetNodePath);
+  const sourceRefs = paths.map((path) => Editor.pathRef(editor, path));
 
-        if (Editor.isEditor(n)) {
-          return false;
+  Editor.withoutNormalizing(editor, () => {
+    try {
+      // Keep every move anchored to the target as earlier moves shift paths.
+      // Inserting after the target runs in reverse to preserve document order.
+      const orderedRefs =
+        position === 'top' ? sourceRefs : [...sourceRefs].reverse();
+      for (const sourceRef of orderedRefs) {
+        const from = sourceRef.current;
+        const target = targetRef.current;
+        if (!from || !target) continue;
+
+        let to = position === 'top' ? target : Path.next(target);
+        // Slate's sibling destination is the index after removing the source.
+        if (Path.isSibling(from, to) && Path.isBefore(from, to)) {
+          to = Path.previous(to);
         }
-
-        const node = n as NodeWithId;
-        const shouldMove =
-          typeof node.nodeId === 'string' && nodeIds.includes(node.nodeId);
-        return shouldMove;
-      },
-      to: dropPath,
-      mode: 'highest',
-    });
+        Transforms.moveNodes(editor, { at: from, to });
+      }
+    } finally {
+      targetRef.unref();
+      for (const ref of sourceRefs) ref.unref();
+    }
   });
   Editor.normalize(editor);
 };