@use-kona/editor 0.1.28 → 0.1.30

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

@@ -0,0 +1,346 @@
+// @vitest-environment jsdom
+
+import { act, render, waitFor } 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 { describe, expect, it, vi } from 'vitest';
+import { KonaEditor } from '../../editor';
+import type { IPlugin } from '../../types';
+import { CollapsibleBlocksPlugin } from '../CollapsibleBlocksPlugin';
+import { HeadingsPlugin } from '../HeadingsPlugin';
+import { DnDPlugin, moveNode } from './DnDPlugin';
+
+Object.assign(globalThis, { React });
+
+const listEditor = () => {
+  const editor = createEditor();
+  editor.children = [
+    {
+      type: 'ol',
+      nodeId: 'list',
+      children: [
+        { type: 'li', nodeId: 'first', children: [{ text: 'First' }] },
+        { type: 'li', nodeId: 'second', children: [{ text: 'Second' }] },
+      ],
+    },
+  ];
+  return editor;
+};
+
+const sectionEditor = () => {
+  const editor = createEditor();
+  editor.children = [
+    {
+      type: 'heading1',
+      nodeId: 'section',
+      collapsed: true,
+      children: [{ text: 'Section' }],
+    },
+    { type: 'paragraph', nodeId: 'text', children: [{ text: 'Section text' }] },
+    {
+      type: 'heading2',
+      nodeId: 'nested',
+      children: [{ text: 'Nested section' }],
+    },
+    {
+      type: 'paragraph',
+      nodeId: 'nested-text',
+      children: [{ text: 'Nested text' }],
+    },
+    {
+      type: 'heading1',
+      nodeId: 'next',
+      children: [{ text: 'Next section' }],
+    },
+  ];
+  return editor;
+};
+
+describe('moveNode', () => {
+  it('moves a list item before another list item', () => {
+    const editor = listEditor();
+
+    moveNode(editor, [0, 0], ['second'], 'top');
+
+    expect(editor.children[0].children.map((node) => node.nodeId)).toEqual([
+      'second',
+      'first',
+    ]);
+  });
+
+  it('allows dropping at the end of a list', () => {
+    const editor = listEditor();
+
+    moveNode(editor, [0, 1], ['first'], 'bottom');
+
+    expect(editor.children[0].children.map((node) => node.nodeId)).toEqual([
+      'second',
+      'first',
+    ]);
+  });
+
+  it('moves a collapsed section with all of its content', () => {
+    const editor = sectionEditor();
+
+    moveNode(editor, [4], [], 'bottom', undefined, [[0], [1], [2], [3]]);
+
+    expect(editor.children.map((node) => node.children[0].text)).toEqual([
+      'Next section',
+      'Section',
+      'Section text',
+      'Nested section',
+      'Nested text',
+    ]);
+    expect(editor.children[1]).toMatchObject({ collapsed: true });
+  });
+
+  it('moves a nested section without crossing the next equal-or-higher boundary', () => {
+    const editor = sectionEditor();
+
+    moveNode(editor, [4], [], 'bottom', undefined, [[2], [3]]);
+
+    expect(editor.children.map((node) => node.children[0].text)).toEqual([
+      'Section',
+      'Section text',
+      'Next section',
+      'Nested section',
+      'Nested text',
+    ]);
+  });
+
+  it('does not move a section when dropped onto one of its own blocks', () => {
+    const editor = sectionEditor();
+
+    moveNode(editor, [2], [], 'top', undefined, [[0], [1], [2], [3]]);
+
+    expect(editor.children.map((node) => node.children[0].text)).toEqual([
+      'Section',
+      'Section text',
+      'Nested section',
+      'Nested text',
+      'Next section',
+    ]);
+  });
+});
+
+const createDndManager = (): DragDropManager =>
+  createDragDropManager(() => ({
+    connectDragPreview: () => () => {},
+    connectDragSource: () => () => {},
+    connectDropTarget: () => () => {},
+    profile: () => ({}),
+    setup: () => {},
+    teardown: () => {},
+  }));
+
+const getHandlerIds = (
+  manager: DragDropManager,
+  kind: 'dragSources' | 'dropTargets',
+) => {
+  const registry = manager.getRegistry() as unknown as Record<
+    'dragSources' | 'dropTargets',
+    Map<string, unknown>
+  >;
+  return [...registry[kind].keys()];
+};
+
+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)),
+          },
+          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,
+            {
+              init(value) {
+                editor = value;
+                return value;
+              },
+            } satisfies IPlugin,
+          ],
+          onChange,
+        }),
+      ),
+    );
+
+    const originalRect = HTMLElement.prototype.getBoundingClientRect;
+    Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({ bottom: 100, top: 0 }),
+    });
+
+    try {
+      const sourceIds = getHandlerIds(manager, 'dragSources');
+      const targetIds = getHandlerIds(manager, 'dropTargets');
+
+      expect(sourceIds).toHaveLength(2);
+      expect(targetIds).toHaveLength(2);
+
+      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 {
+      Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
+        configurable: true,
+        value: originalRect,
+      });
+    }
+
+    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),
+    );
+  });
+
+  it('moves every block in an expanded collapsible section', 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)),
+          },
+          React.createElement(
+            'button',
+            { contentEditable: false, ref: dragRef, type: 'button' },
+            'Drag',
+          ),
+          props.children,
+        ),
+    });
+
+    render(
+      React.createElement(
+        DndProvider,
+        { manager },
+        React.createElement(KonaEditor, {
+          initialValue: [
+            {
+              type: HeadingsPlugin.HeadingLevel1,
+              children: [{ text: 'Section' }],
+            },
+            { type: 'paragraph', children: [{ text: 'Section text' }] },
+            {
+              type: HeadingsPlugin.HeadingLevel2,
+              children: [{ text: 'Nested section' }],
+            },
+            { type: 'paragraph', children: [{ text: 'Nested text' }] },
+            {
+              type: HeadingsPlugin.HeadingLevel1,
+              children: [{ text: 'Next section' }],
+            },
+          ],
+          plugins: [
+            new HeadingsPlugin(),
+            new CollapsibleBlocksPlugin([
+              HeadingsPlugin.HeadingLevel1,
+              HeadingsPlugin.HeadingLevel2,
+            ]),
+            dndPlugin,
+            {
+              init(value) {
+                editor = value;
+                return value;
+              },
+            } satisfies IPlugin,
+          ],
+          onChange,
+        }),
+      ),
+    );
+
+    const originalRect = HTMLElement.prototype.getBoundingClientRect;
+    Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({ bottom: 100, top: 0 }),
+    });
+
+    try {
+      const sourceIds = getHandlerIds(manager, 'dragSources');
+      const targetIds = getHandlerIds(manager, 'dropTargets');
+
+      act(() => {
+        manager.getActions().beginDrag([sourceIds[0]], {
+          clientOffset: { x: 0, y: 50 },
+          getSourceClientOffset: () => ({ x: 0, y: 0 }),
+        });
+        manager.getActions().publishDragSource();
+        manager
+          .getActions()
+          .hover([targetIds[4]], { clientOffset: { x: 0, y: 100 } });
+        manager.getActions().drop();
+        manager.getActions().endDrag();
+      });
+    } finally {
+      Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
+        configurable: true,
+        value: originalRect,
+      });
+    }
+
+    expect(editor?.children.map((node) => node.children[0].text)).toEqual([
+      'Next section',
+      'Section',
+      'Section text',
+      'Nested section',
+      'Nested text',
+    ]);
+    await waitFor(() => expect(onChange).toHaveBeenCalled());
+  });
+});

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -12,6 +12,7 @@ import {
 import type { CustomElement } from '../../../types';
 import { useEditorContext } from '../../provider';
 import type { IPlugin } from '../../types';
+import { getCollapsibleSectionPaths } from '../CollapsibleBlocksPlugin/CollapsibleBlocksPlugin';
 import type { EditorDragItem, NodeWithId, Options } from './types';
 import { getNodesByNodeIds } from './utils';
 
@@ -54,15 +55,18 @@ export class DnDPlugin implements IPlugin {
       type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
       item: () => {
         const selected: Array<NodeWithId> = $selectedNodes;
+        const path = ReactEditor.findPath(editor, props.element);
+        const sectionPaths = getCollapsibleSectionPaths(editor, path);
 
         /**
          * We copy nodes that the user is dragging.
          * If a user drags multiple nodes, and the current node is one of them,
          * we copy selected nodes. Otherwise, we copy only the current node.
          */
-        const nodes =
-          selected.length > 0 &&
-          selected.find((node) => node.nodeId === currentElement.nodeId)
+        const nodes = sectionPaths
+          ? getNodesAtPaths(editor, sectionPaths)
+          : selected.length > 0 &&
+              selected.find((node) => node.nodeId === currentElement.nodeId)
             ? getNodesByNodeIds(
                 editor,
                 selected.map((node) => node.nodeId),
@@ -91,6 +95,8 @@ export class DnDPlugin implements IPlugin {
           source: {
             editor,
             documentId: options.documentId,
+            path,
+            sectionPaths: sectionPaths || undefined,
           },
         };
 
@@ -124,22 +130,8 @@ export class DnDPlugin implements IPlugin {
         };
       },
       hover(_, monitor) {
-        const element = dropTargetRef.current;
-        if (!element) return;
-
-        const hoverBoundingRect = element.getBoundingClientRect();
-        const hoverMiddleY =
-          (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-        const clientOffset = monitor.getClientOffset();
-        if (!clientOffset) return;
-
-        const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-
-        if (hoverClientY < hoverMiddleY) {
-          setDropPosition('top');
-        } else {
-          setDropPosition('bottom');
-        }
+        const position = getDropPosition(dropTargetRef.current, monitor);
+        if (position) setDropPosition(position);
       },
       drop: (data, monitor) => {
         const itemType = monitor.getItemType();
@@ -156,11 +148,12 @@ export class DnDPlugin implements IPlugin {
 
         if (!sourceTo) return;
 
-        const insertAt = getDropPath(
-          editor,
-          sourceTo,
-          dropPosition || 'bottom',
-        );
+        const position =
+          getDropPosition(dropTargetRef.current, monitor) ||
+          dropPosition ||
+          'bottom';
+
+        const insertAt = getDropPath(editor, sourceTo, position);
 
         if (!insertAt) return;
 
@@ -188,15 +181,24 @@ export class DnDPlugin implements IPlugin {
               return;
             }
 
-            if (!dropPosition || !dragItem.nodes.length) {
+            if (!dragItem.nodes.length) {
               return;
             }
 
-            const nodeIds = dragItem.nodes.map((node) => node.nodeId);
+            const nodeIds = dragItem.nodes
+              .map((node) => node.nodeId)
+              .filter((nodeId): nodeId is string => typeof nodeId === 'string');
 
             if (isSameDocument || isSameEditor) {
               if (!isCopying.current) {
-                moveNode(editor, sourceTo, nodeIds, dropPosition);
+                moveNode(
+                  editor,
+                  sourceTo,
+                  nodeIds,
+                  position,
+                  dragItem.source.path,
+                  dragItem.source.sectionPaths,
+                );
               } else {
                 if (!generateId) {
                   return;
@@ -214,7 +216,11 @@ export class DnDPlugin implements IPlugin {
 
               insertNodes(editor, insertAt, clonedNodes);
               if (!isCopying.current && sourceEditor) {
-                removeNodes(sourceEditor, nodeIds);
+                removeNodes(
+                  sourceEditor,
+                  nodeIds,
+                  dragItem.source.sectionPaths,
+                );
               }
             }
             selectedNodes.set([]);
@@ -289,20 +295,66 @@ const getDropPath = (
   }
 };
 
-const moveNode = (
+const getDropPosition = (
+  element: HTMLElement | null,
+  monitor: { getClientOffset: () => { y: number } | null },
+) => {
+  if (!element) return null;
+
+  const clientOffset = monitor.getClientOffset();
+  if (!clientOffset) return null;
+
+  const rect = element.getBoundingClientRect();
+  return clientOffset.y - rect.top < (rect.bottom - rect.top) / 2
+    ? 'top'
+    : 'bottom';
+};
+
+export const moveNode = (
   editor: Editor,
   targetNodePath: Path,
   nodeIds: string[],
   position: 'top' | 'bottom',
+  sourcePath?: Path,
+  sectionPaths?: Path[],
 ) => {
   const dropPath = getDropPath(editor, targetNodePath, position);
 
   if (!dropPath) return;
-  if (!Editor.hasPath(editor, dropPath)) {
+  if (!isValidInsertPath(editor, dropPath)) {
+    return;
+  }
+
+  if (sectionPaths?.some((path) => Path.equals(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) => {
@@ -326,14 +378,48 @@ const moveNode = (
   Editor.normalize(editor);
 };
 
+const isValidInsertPath = (editor: Editor, path: Path) => {
+  const parentPath = Path.parent(path);
+  const index = path[path.length - 1];
+
+  if (index === undefined || !Editor.hasPath(editor, parentPath)) {
+    return false;
+  }
+
+  const [parent] = Editor.node(editor, parentPath);
+  return 'children' in parent && index <= parent.children.length;
+};
+
 const insertNodes = (editor: Editor, path: Path, nodes: NodeWithId[]) => {
   Editor.withoutNormalizing(editor, () => {
     Transforms.insertNodes(editor, nodes, { at: path });
   });
 };
 
-const removeNodes = (editor: Editor, nodeIds: string[]) => {
+const getNodesAtPaths = (editor: Editor, paths: Path[]) =>
+  paths
+    .filter((path) => Editor.hasPath(editor, path))
+    .map((path) => structuredClone(Editor.node(editor, path)[0] as NodeWithId));
+
+const removeNodes = (
+  editor: Editor,
+  nodeIds: string[],
+  sectionPaths?: Path[],
+) => {
   try {
+    if (sectionPaths?.length) {
+      const paths = sectionPaths
+        .filter((path) => Editor.hasPath(editor, path))
+        .sort((left, right) => Path.compare(right, left));
+
+      Editor.withoutNormalizing(editor, () => {
+        paths.forEach((path) => {
+          Transforms.removeNodes(editor, { at: path });
+        });
+      });
+      return;
+    }
+
     Transforms.removeNodes(editor, {
       at: [],
       match: (n) => {

package/src/plugins/DnDPlugin/types.ts

@@ -73,6 +73,7 @@ export type EditorInnerDragItem<TItem = unknown> = {
      */
     documentId?: string | null;
     path?: Path;
+    sectionPaths?: Path[];
   };
   data?: Record<string, unknown>;
 };

package/src/plugins/index.ts

@@ -2,6 +2,7 @@ export { AttachmentsPlugin } from './AttachmentsPlugin';
 export { BasicFormattingPlugin } from './BasicFormattingPlugin';
 export { BreaksPlugin } from './BreaksPlugin';
 export { CodeBlockPlugin, type CodeElement } from './CodeBlockPlugin';
+export { CollapsibleBlocksPlugin } from './CollapsibleBlocksPlugin';
 export {
   type Command,
   type CommandPathEntry,

package/src/types.ts

@@ -21,6 +21,11 @@ export interface IPlugin<
   leafs?: Leaf<TEditor, TLeaf>[];
   hotkeys?: Hotkey[];
 
+  /**
+   * Render block wrappers from lower to higher priority. Plugins with the same
+   * priority retain the order supplied to KonaEditor.
+   */
+  renderBlockPriority?: number;
   renderBlock?: (props: RenderElementProps) => ReactElement | null;
   renderLeaf?: (props: RenderLeafProps) => ReactElement | null;