@use-kona/editor 0.1.24 → 0.1.26

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -1,10 +1,8 @@
 import { useStore } from '@nanostores/react';
-import { nanoid } from 'nanoid';
-import { type MapStore, map } from 'nanostores';
 import { useEffect, useRef, useState } from 'react';
 import { type ConnectDropTarget, useDrag, useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
-import { Editor, Path, Transforms } from 'slate';
+import { Editor, Element, Path, Transforms } from 'slate';
 import {
   ReactEditor,
   type RenderElementProps,
@@ -12,44 +10,18 @@ import {
   useSlate,
 } from 'slate-react';
 import type { CustomElement } from '../../../types';
+import { useEditorContext } from '../../provider';
 import type { IPlugin } from '../../types';
 import type { EditorDragItem, NodeWithId, Options } from './types';
 import { getNodesByNodeIds } from './utils';
 
 export class DnDPlugin implements IPlugin {
-  store: MapStore<{ selected: Set<string> }>;
-  editors: WeakMap<Editor, string>;
-
-  constructor(private options: Options) {
-    this.store = map({
-      selected: new Set(),
-    });
-    this.editors = new WeakMap();
-  }
+  constructor(private options: Options) {}
 
   init(editor: Editor) {
-    this.editors.set(editor, nanoid());
-
     return editor;
   }
 
-  getEditorId(editor: Editor) {
-    return this.editors.get(editor);
-  }
-
-  handleToggleSelected = (nodeId: string) => {
-    const selected = new Set(this.store.get().selected);
-    if (selected.has(nodeId)) {
-      selected.delete(nodeId);
-    } else {
-      selected.add(nodeId);
-    }
-
-    this.store.set({
-      selected,
-    });
-  };
-
   static DND_BLOCK_ELEMENT = 'block';
 
   handlers = {
@@ -61,9 +33,12 @@ export class DnDPlugin implements IPlugin {
   renderBlock = (props: RenderElementProps) => {
     const editor = useSlate();
 
-    const $store = useStore(this.store);
+    const { selectedNodes } = useEditorContext();
+    const $selectedNodes = useStore(selectedNodes);
 
+    const isCopying = useRef(false);
     const options = this.options;
+    const generateId = this.options?.nodeIdPlugin?.generateId;
     const isReadOnly = useReadOnly();
 
     const [dropPosition, setDropPosition] = useState<'top' | 'bottom' | null>(
@@ -76,9 +51,9 @@ export class DnDPlugin implements IPlugin {
     const currentElement = props.element as NodeWithId;
 
     const [, drag, preview] = useDrag({
-      type: DnDPlugin.DND_BLOCK_ELEMENT,
+      type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
       item: () => {
-        const selected = Array.from($store.selected.values());
+        const selected: Array<NodeWithId> = $selectedNodes;
 
         /**
          * We copy nodes that the user is dragging.
@@ -86,10 +61,19 @@ export class DnDPlugin implements IPlugin {
          * we copy selected nodes. Otherwise, we copy only the current node.
          */
         const nodes =
-          selected.length > 0 && selected.includes(currentElement.nodeId)
-            ? getNodesByNodeIds(editor, selected)
+          selected.length > 0 &&
+          selected.find((node) => node.nodeId === currentElement.nodeId)
+            ? getNodesByNodeIds(
+                editor,
+                selected.map((node) => node.nodeId),
+              )
             : [structuredClone(props.element as NodeWithId)];
 
+        const item =
+          this.options.customTypes?.[currentElement.type]?.getData?.(
+            currentElement,
+          );
+
         const items = nodes
           .map((node) => {
             if (this.options.customTypes?.[node.type]) {
@@ -100,10 +84,12 @@ export class DnDPlugin implements IPlugin {
           .filter(Boolean);
 
         const dragItem: EditorDragItem = {
+          kind: 'inner',
           nodes,
+          item,
           items,
           source: {
-            editorId: this.getEditorId(editor),
+            editor,
             documentId: options.documentId,
           },
         };
@@ -112,7 +98,7 @@ export class DnDPlugin implements IPlugin {
       },
       canDrag: !isReadOnly,
       end: () => {
-        $store.selected.clear();
+        selectedNodes.set([]);
       },
     });
 
@@ -120,7 +106,11 @@ export class DnDPlugin implements IPlugin {
       (customType) => customType.type,
     );
 
-    const [{ isOver }, drop] = useDrop({
+    const [{ isOver }, drop] = useDrop<
+      EditorDragItem,
+      void,
+      { isOver: boolean }
+    >({
       accept: [
         DnDPlugin.DND_BLOCK_ELEMENT,
         NativeTypes.FILE,
@@ -151,8 +141,16 @@ export class DnDPlugin implements IPlugin {
           setDropPosition('bottom');
         }
       },
-      drop(item, monitor) {
+      drop: (data, monitor) => {
         const itemType = monitor.getItemType();
+        const sourceEditor = data.kind === 'inner' ? data.source?.editor : null;
+
+        const isSameDocument =
+          data.kind === 'inner' &&
+          data.source?.documentId === this.options.documentId &&
+          this.options.documentId !== undefined;
+        const isSameEditor =
+          data.kind === 'inner' && data.source?.editor === editor;
 
         const sourceTo = ReactEditor.findPath(editor, props.element);
 
@@ -169,8 +167,8 @@ export class DnDPlugin implements IPlugin {
         const customDropHandler =
           itemType && options.customDropHandlers?.[itemType];
 
-        if (customDropHandler) {
-          customDropHandler.onDrop({ editor, item, insertAt });
+        if (customDropHandler && data.kind === 'outer') {
+          customDropHandler.onDrop({ editor, data, insertAt });
           return;
         }
 
@@ -178,12 +176,17 @@ export class DnDPlugin implements IPlugin {
           case NativeTypes.FILE:
             options.onDropFiles(
               editor,
-              (item as { files: File[] }).files,
+              (data as unknown as { files: File[] }).files,
               insertAt,
             );
             break;
           default: {
-            const dragItem = item as EditorDragItem;
+            const dragItem = data as EditorDragItem;
+
+            // We don't know what "default" behavior for the outer items is
+            if (dragItem.kind === 'outer') {
+              return;
+            }
 
             if (!dropPosition || !dragItem.nodes.length) {
               return;
@@ -191,12 +194,35 @@ export class DnDPlugin implements IPlugin {
 
             const nodeIds = dragItem.nodes.map((node) => node.nodeId);
 
-            moveNode(editor, sourceTo, nodeIds, dropPosition);
-            $store.selected.clear();
+            if (isSameDocument || isSameEditor) {
+              if (!isCopying.current) {
+                moveNode(editor, sourceTo, nodeIds, dropPosition);
+              } else {
+                if (!generateId) {
+                  return;
+                }
+
+                const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
+                insertNodes(editor, insertAt, clonedNodes);
+              }
+            } else {
+              if (!generateId) {
+                return;
+              }
+
+              const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
+
+              insertNodes(editor, insertAt, clonedNodes);
+              if (!isCopying.current && sourceEditor) {
+                removeNodes(sourceEditor, nodeIds);
+              }
+            }
+            selectedNodes.set([]);
             break;
           }
         }
 
+        isCopying.current = false;
         setDropPosition(null);
       },
     });
@@ -219,22 +245,32 @@ export class DnDPlugin implements IPlugin {
       return props.children;
     }
 
-    return options.renderBlock?.({
-      props,
-      dragRef: drag,
-      dropRef: connectDropRef,
-      previewRef: preview,
-      position: dropPosition,
-      selected:
-        typeof currentElement.nodeId === 'string'
-          ? $store.selected.has(currentElement.nodeId)
-          : false,
-      onToggleSelected: () => {
-        if (typeof currentElement.nodeId === 'string') {
-          this.handleToggleSelected(currentElement.nodeId);
-        }
-      },
-    });
+    return (
+      <div>
+        {options.renderBlock?.({
+          props,
+          dragRef: drag,
+          dropRef: connectDropRef,
+          previewRef: preview,
+          position: dropPosition,
+          onNativeDrop: (event) => {
+            isCopying.current = event.altKey;
+          },
+          onToggleSelected: (event) => {
+            event.stopPropagation();
+            if ($selectedNodes.includes(props.element)) {
+              selectedNodes.set(
+                [...$selectedNodes].filter(
+                  (element) => element !== props.element,
+                ),
+              );
+            } else {
+              selectedNodes.set([...$selectedNodes, props.element]);
+            }
+          },
+        })}
+      </div>
+    );
   };
 }
 
@@ -289,3 +325,52 @@ const moveNode = (
   });
   Editor.normalize(editor);
 };
+
+const insertNodes = (editor: Editor, path: Path, nodes: NodeWithId[]) => {
+  Editor.withoutNormalizing(editor, () => {
+    Transforms.insertNodes(editor, nodes, { at: path });
+  });
+};
+
+const removeNodes = (editor: Editor, nodeIds: string[]) => {
+  try {
+    Transforms.removeNodes(editor, {
+      at: [],
+      match: (n) => {
+        if (!Element.isElement(n)) {
+          return false;
+        }
+
+        if (!Editor.isBlock(editor, n)) {
+          return false;
+        }
+
+        const node = n as NodeWithId;
+        return typeof node.nodeId === 'string' && nodeIds.includes(node.nodeId);
+      },
+      mode: 'highest',
+    });
+  } catch {
+    return;
+  }
+};
+
+const cloneWithNewIds = (
+  nodes: NodeWithId[],
+  generateId: () => string,
+): NodeWithId[] => {
+  const copy = structuredClone(nodes);
+
+  const assignId = (node: NodeWithId): void => {
+    node.nodeId = generateId();
+    node.children.forEach((node) => {
+      if ('children' in node) {
+        assignId(node);
+      }
+    });
+  };
+
+  copy.forEach(assignId);
+
+  return copy;
+};

package/src/plugins/DnDPlugin/types.ts

@@ -1,4 +1,3 @@
-import { type MapStore, map } from 'nanostores';
 import type React from 'react';
 import type {
   ConnectDragPreview,
@@ -7,15 +6,20 @@ import type {
 } from 'react-dnd';
 import type { Editor, Path } from 'slate';
 import type { RenderElementProps } from 'slate-react';
-import type { CustomElement } from '../../../types';
+import type { CustomElement, CustomText } from '../../../types';
+import type { NodeIdPlugin } from '../NodeIdPlugin';
 
-type DropParams = {
-  editor: Editor;
-  item: unknown;
+export type NodeWithId = Omit<CustomElement, 'children'> & {
+  nodeId: string;
+  children: (NodeWithId | CustomText)[];
 };
 
-export type NodeWithId = CustomElement & {
-  nodeId: string;
+export const isNodeWithId = (node: unknown): node is NodeWithId =>
+  typeof node === 'object' && node !== null && 'nodeId' in node;
+
+export type CustomDropHandler<T = unknown> = {
+  type: string | symbol;
+  onDrop: (context: CustomDropContext<T>) => DropResult;
 };
 
 export type Options = {
@@ -28,8 +32,8 @@ export type Options = {
     dropRef: ConnectDropTarget;
     previewRef: ConnectDragPreview;
     position: 'top' | 'bottom' | null;
-    selected?: boolean;
-    onToggleSelected: () => void;
+    onNativeDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onToggleSelected?: (event: React.MouseEvent<HTMLDivElement>) => void;
   }) => React.ReactNode;
   ignoreNodes?: string[];
   customTypes?: {
@@ -39,28 +43,26 @@ export type Options = {
     };
   };
   customDropHandlers?: {
-    [type: string | symbol]: {
-      type: string | symbol;
-      onDrop: <T = unknown>(context: CustomDropContext<T>) => DropResult;
-    };
+    [type: string | symbol]: CustomDropHandler;
   };
+  nodeIdPlugin?: NodeIdPlugin;
 };
 
-type CustomDropContext<T = unknown> = {
+export type CustomDropContext<TItem = unknown> = {
   editor: Editor;
-  item: T;
+  data: EditorOuterDragItem<TItem>;
   insertAt: Path;
 };
 
 type DropResult = 'handled' | 'ignored';
 
-/**
- * We're using this type to represent a drag item that is being dragged from the editor.
- */
-export type EditorDragItem = {
+export type EditorInnerDragItem<TItem = unknown> = {
+  kind: 'inner';
   nodes: NodeWithId[];
-  items?: unknown[];
+  item?: TItem;
+  items?: TItem[];
   source: {
+    editor: Editor;
     /**
      * Different editors have different unique identifiers.
      */
@@ -74,3 +76,16 @@ export type EditorDragItem = {
   };
   data?: Record<string, unknown>;
 };
+
+export type EditorOuterDragItem<TItem = unknown> = {
+  kind: 'outer';
+  item: TItem;
+  items: TItem[];
+};
+
+/**
+ * We're using this type to represent a drag item that is being dragged from the editor.
+ */
+export type EditorDragItem<TItem = unknown> =
+  | EditorInnerDragItem<TItem>
+  | EditorOuterDragItem<TItem>;

package/src/plugins/HeadingsPlugin/HeadingsPlugin.tsx

@@ -124,8 +124,7 @@ const isBlockActive = (editor, type) => {
   const [match] = Array.from(
     Editor.nodes(editor, {
       at: Editor.unhangRange(editor, selection),
-      match: (node) =>
-        !Editor.isEditor(node) && Element.isElement(node) && node.type === type,
+      match: (node) => Element.isElement(node) && node.type === type,
     }),
   );
 

package/src/plugins/ListsPlugin/ListsPlugin.spec.tsx

@@ -1,35 +1,44 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
+import type { KeyboardEvent, ReactNode } from 'react';
+import { Editor } from 'slate';
 import {
   createHyperscript,
   createText,
   type HyperscriptShorthands,
 } from 'slate-hyperscript';
-import { describe, expect, it } from 'vitest';
-import { Editor } from 'slate';
+import { describe, expect, it, vi } from 'vitest';
 import { createEditor } from '../../core/createEditor';
 import { ListsPlugin } from './ListsPlugin';
 
-
 const elements: HyperscriptShorthands = {
   paragraph: { type: 'paragraph' },
   numberedList: { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
   bulletedList: { type: ListsPlugin.BULLETED_LIST_ELEMENT },
   listItem: { type: ListsPlugin.LIST_ITEM_ELEMENT },
+  taskItem: { type: 'task-item' },
 };
 
 const jsx = createHyperscript({ elements, creators: { text: createText } });
 
 jsx;
 
-const createEditorWithPlugin = (children: any) => {
+const createEditorAndPlugin = (
+  children: ReactNode,
+  options: ConstructorParameters<typeof ListsPlugin>[0] = {},
+) => {
   const editorState = <editor>{children}</editor>;
-  const editor = createEditor([new ListsPlugin()])();
+  const plugin = new ListsPlugin(options);
+  const editor = createEditor([plugin])();
   editor.children = editorState.children;
   editor.selection = editorState.selection;
 
-  return editor;
+  return { editor, plugin };
+};
+
+const createEditorWithPlugin = (children: ReactNode) => {
+  return createEditorAndPlugin(children).editor;
 };
 
 describe('ListsPlugin', () => {
@@ -128,13 +137,19 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'first' }],
+          },
         ],
       },
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'second' }],
+          },
         ],
       },
     ];
@@ -146,8 +161,14 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'first' }],
+          },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'second' }],
+          },
         ],
       },
     ];
@@ -166,13 +187,19 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.BULLETED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'bullet' }],
+          },
         ],
       },
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'number' }],
+          },
         ],
       },
     ];
@@ -184,13 +211,19 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.BULLETED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'bullet' }],
+          },
         ],
       },
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'number' }],
+          },
         ],
       },
     ];
@@ -242,4 +275,67 @@ describe('ListsPlugin', () => {
 
     expect(editor.children).toEqual(output);
   });
+
+  it('should turn first-level list item into paragraph on Backspace at start', () => {
+    const { editor, plugin } = createEditorAndPlugin(
+      <bulletedList>
+        <listItem>
+          <cursor />
+          <text>Hello world</text>
+        </listItem>
+      </bulletedList>,
+    );
+    const event = {
+      key: 'Backspace',
+      preventDefault: vi.fn(),
+    } as unknown as KeyboardEvent;
+
+    plugin.handlers.onKeyDown(event, editor);
+
+    const output = (
+      <editor>
+        <paragraph>
+          <text>Hello world</text>
+        </paragraph>
+      </editor>
+    );
+
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(editor.children).toEqual(output.children);
+  });
+
+  it('should ignore configured list item types for Backspace conversion', () => {
+    const { editor, plugin } = createEditorAndPlugin(
+      <bulletedList>
+        <taskItem>
+          <cursor />
+          <text>Hello world</text>
+        </taskItem>
+      </bulletedList>,
+      {
+        ignoreBackspaceTypes: ['task-item'],
+        listItemTypes: ['task-item'],
+      },
+    );
+    const event = {
+      key: 'Backspace',
+      preventDefault: vi.fn(),
+    } as unknown as KeyboardEvent;
+
+    plugin.handlers.onKeyDown(event, editor);
+
+    const output = (
+      <editor>
+        <bulletedList>
+          <taskItem>
+            <text />
+            <text>Hello world</text>
+          </taskItem>
+        </bulletedList>
+      </editor>
+    );
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(editor.children).toEqual(output.children);
+  });
 });

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -17,6 +17,7 @@ import styles from './styles.module.css';
 type Options = {
   listTypes?: string[];
   listItemTypes?: string[];
+  ignoreBackspaceTypes?: string[];
 };
 
 export class ListsPlugin implements IPlugin {
@@ -27,9 +28,14 @@ export class ListsPlugin implements IPlugin {
   static LIST_ITEM_ELEMENT = 'li';
 
   constructor(options: Options = {}) {
-    const { listTypes = [], listItemTypes = [] } = options;
+    const {
+      ignoreBackspaceTypes = [],
+      listTypes = [],
+      listItemTypes = [],
+    } = options;
 
     this.options = {
+      ignoreBackspaceTypes,
       listTypes: [
         ListsPlugin.BULLETED_LIST_ELEMENT,
         ListsPlugin.NUMBERED_LIST_ELEMENT,
@@ -96,7 +102,10 @@ export class ListsPlugin implements IPlugin {
       }
 
       /* Merge adjacent lists */
-      if (this.isList(editor, node as CustomElement) && Path.hasPrevious(path)) {
+      if (
+        this.isList(editor, node as CustomElement) &&
+        Path.hasPrevious(path)
+      ) {
         const prevPath = Path.previous(path);
         const prevNode = Node.get(editor, prevPath) as CustomElement;
 
@@ -236,9 +245,14 @@ export class ListsPlugin implements IPlugin {
         if (
           selection &&
           match &&
+          !this.options.ignoreBackspaceTypes?.includes(
+            (match[0] as CustomElement).type,
+          ) &&
           this.getListItemDepth(editor, match[1]) === 1 &&
           Editor.isStart(editor, selection.anchor, match[1])
         ) {
+          event.preventDefault();
+
           Transforms.unwrapNodes(editor, {
             match: (n) => this.isList(editor, n as CustomElement),
             split: true,
@@ -331,10 +345,7 @@ export class ListsPlugin implements IPlugin {
     const [match] = Array.from(
       Editor.nodes(editor, {
         at: Editor.unhangRange(editor, selection),
-        match: (node) =>
-          !Editor.isEditor(node) &&
-          Element.isElement(node) &&
-          node.type === type,
+        match: (node) => Element.isElement(node) && node.type === type,
       }),
     );