@use-kona/editor 0.1.24-dnd.5 → 0.1.24-dnd.7

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -4,7 +4,7 @@ import { map } from "nanostores";
 import { useEffect, useRef, useState } from "react";
 import { 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, useReadOnly, useSlate } from "slate-react";
 import { getNodesByNodeIds } from "./utils.js";
 class DnDPlugin {
@@ -42,7 +42,9 @@ class DnDPlugin {
     renderBlock = (props)=>{
         const editor = useSlate();
         const $store = useStore(this.store);
+        const isCopying = useRef(false);
         const options = this.options;
+        const generateId = this.options?.nodeIdPlugin?.generateId;
         const isReadOnly = useReadOnly();
         const [dropPosition, setDropPosition] = useState(null);
         const dropTargetRef = useRef(null);
@@ -55,14 +57,18 @@ class DnDPlugin {
                 const nodes = selected.length > 0 && selected.includes(currentElement.nodeId) ? getNodesByNodeIds(editor, selected) : [
                     structuredClone(props.element)
                 ];
+                const item = this.options.customTypes?.[currentElement.type]?.getData?.(currentElement);
                 const items = nodes.map((node)=>{
                     if (this.options.customTypes?.[node.type]) return this.options.customTypes[node.type].getData?.(node);
                     return null;
                 }).filter(Boolean);
                 const dragItem = {
+                    kind: 'inner',
                     nodes,
+                    item,
                     items,
                     source: {
+                        editor,
                         editorId: this.getEditorId(editor),
                         documentId: options.documentId
                     }
@@ -98,32 +104,47 @@ class DnDPlugin {
                 const hoverClientY = clientOffset.y - hoverBoundingRect.top;
                 hoverClientY < hoverMiddleY ? setDropPosition('top') : setDropPosition('bottom');
             },
-            drop: (item, monitor)=>{
+            drop: (data, monitor)=>{
                 const itemType = monitor.getItemType();
+                const sourceEditor = 'inner' === data.kind ? data.source?.editor : null;
+                const isSameDocument = 'inner' === data.kind && data.source?.documentId === this.options.documentId && void 0 !== this.options.documentId;
+                const isSameEditor = 'inner' === data.kind && data.source?.editorId === this.editors.get(editor) && void 0 !== this.editors.get(editor);
                 const sourceTo = ReactEditor.findPath(editor, props.element);
                 if (!sourceTo) return;
                 const insertAt = getDropPath(editor, sourceTo, dropPosition || 'bottom');
                 if (!insertAt) return;
                 const customDropHandler = itemType && options.customDropHandlers?.[itemType];
-                if (customDropHandler) return void customDropHandler.onDrop({
+                if (customDropHandler && 'outer' === data.kind) return void customDropHandler.onDrop({
                     editor,
-                    item,
+                    data,
                     insertAt
                 });
                 switch(itemType){
                     case NativeTypes.FILE:
-                        options.onDropFiles(editor, item.files, insertAt);
+                        options.onDropFiles(editor, data.files, insertAt);
                         break;
                     default:
                         {
-                            const dragItem = item;
+                            const dragItem = data;
+                            if ('outer' === dragItem.kind) return;
                             if (!dropPosition || !dragItem.nodes.length) return;
                             const nodeIds = dragItem.nodes.map((node)=>node.nodeId);
-                            moveNode(editor, sourceTo, nodeIds, dropPosition);
+                            if (isSameDocument || isSameEditor) if (isCopying.current) {
+                                if (!generateId) return;
+                                const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
+                                insertNodes(editor, insertAt, clonedNodes);
+                            } else moveNode(editor, sourceTo, nodeIds, dropPosition);
+                            else {
+                                if (!generateId) return;
+                                const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
+                                insertNodes(editor, insertAt, clonedNodes);
+                                if (!isCopying.current && sourceEditor) removeNodes(sourceEditor, nodeIds);
+                            }
                             $store.selected.clear();
                             break;
                         }
                 }
+                isCopying.current = false;
                 setDropPosition(null);
             }
         });
@@ -147,6 +168,9 @@ class DnDPlugin {
             selected: 'string' == typeof currentElement.nodeId ? $store.selected.has(currentElement.nodeId) : false,
             onToggleSelected: ()=>{
                 if ('string' == typeof currentElement.nodeId) this.handleToggleSelected(currentElement.nodeId);
+            },
+            onNativeDrop: (event)=>{
+                isCopying.current = event.altKey;
             }
         });
     };
@@ -180,4 +204,38 @@ const moveNode = (editor, targetNodePath, nodeIds, position)=>{
     });
     Editor.normalize(editor);
 };
+const insertNodes = (editor, path, nodes)=>{
+    Editor.withoutNormalizing(editor, ()=>{
+        Transforms.insertNodes(editor, nodes, {
+            at: path
+        });
+    });
+};
+const removeNodes = (editor, nodeIds)=>{
+    try {
+        Transforms.removeNodes(editor, {
+            at: [],
+            match: (n)=>{
+                if (!Element.isElement(n)) return false;
+                if (!Editor.isBlock(editor, n)) return false;
+                const node = n;
+                return 'string' == typeof node.nodeId && nodeIds.includes(node.nodeId);
+            },
+            mode: 'highest'
+        });
+    } catch  {
+        return;
+    }
+};
+const cloneWithNewIds = (nodes, generateId)=>{
+    const copy = structuredClone(nodes);
+    const assignId = (node)=>{
+        node.nodeId = generateId();
+        node.children.forEach((node)=>{
+            if ('children' in node) assignId(node);
+        });
+    };
+    copy.forEach(assignId);
+    return copy;
+};
 export { DnDPlugin };

package/dist/plugins/DnDPlugin/types.js

@@ -0,0 +1,2 @@
+const isNodeWithId = (node)=>'object' == typeof node && null !== node && 'nodeId' in node;
+export { isNodeWithId };

package/dist/plugins/NodeIdPlugin/NodeIdPlugin.js

@@ -10,8 +10,10 @@ const assignId = (node, generateId)=>{
 };
 class NodeIdPlugin {
     options;
+    generateId;
     constructor(options){
         this.options = options;
+        this.generateId = options.generateId;
     }
     init(editor) {
         const { apply, normalizeNode } = editor;
@@ -20,22 +22,22 @@ class NodeIdPlugin {
                 const node = Node.get(editor, operation.path);
                 const oldType = operation.properties.type;
                 const newType = operation.newProperties.type;
-                if (!node || !Text.isText(node) && oldType !== newType) operation.newProperties.nodeId = this.options.generateId();
+                if (!node || !Text.isText(node) && oldType !== newType) operation.newProperties.nodeId = this.generateId();
                 return apply(operation);
             }
             if ('insert_node' === operation.type) {
-                assignId(operation.node, this.options.generateId);
+                assignId(operation.node, this.generateId);
                 return apply(operation);
             }
             if ('split_node' === operation.type) {
                 const node = Node.get(editor, operation.path);
-                if (!node || !Text.isText(node)) operation.properties.nodeId = this.options.generateId();
+                if (!node || !Text.isText(node)) operation.properties.nodeId = this.generateId();
             }
             return apply(operation);
         };
         editor.normalizeNode = (entry)=>{
             const [node] = entry;
-            assignId(node, this.options.generateId);
+            assignId(node, this.generateId);
             normalizeNode(entry);
         };
         return editor;

package/dist/src/plugins/DnDPlugin/DnDPlugin.d.ts

@@ -2,7 +2,7 @@ import { type MapStore } from 'nanostores';
 import { Editor } from 'slate';
 import { ReactEditor, type RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
-import type { Options } from './types';
+import { type Options } from './types';
 export declare class DnDPlugin implements IPlugin {
     private options;
     store: MapStore<{

package/dist/src/plugins/DnDPlugin/types.d.ts

@@ -2,9 +2,16 @@ import type React from 'react';
 import type { ConnectDragPreview, ConnectDragSource, ConnectDropTarget } from 'react-dnd';
 import type { Editor, Path } from 'slate';
 import type { RenderElementProps } from 'slate-react';
-import type { CustomElement } from '../../../types';
-export type NodeWithId = CustomElement & {
+import type { CustomElement, CustomText } from '../../../types';
+import type { NodeIdPlugin } from '../NodeIdPlugin';
+export type NodeWithId = Omit<CustomElement, 'children'> & {
     nodeId: string;
+    children: (NodeWithId | CustomText)[];
+};
+export declare const isNodeWithId: (node: unknown) => node is NodeWithId;
+export type CustomDropHandler<T = unknown> = {
+    type: string | symbol;
+    onDrop: (context: CustomDropContext<T>) => DropResult;
 };
 export type Options = {
     editorId?: string;
@@ -18,6 +25,7 @@ export type Options = {
         position: 'top' | 'bottom' | null;
         selected?: boolean;
         onToggleSelected: () => void;
+        onNativeDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
     }) => React.ReactNode;
     ignoreNodes?: string[];
     customTypes?: {
@@ -27,25 +35,23 @@ 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.
          */
@@ -59,4 +65,13 @@ 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>;
 export {};

package/dist/src/plugins/NodeIdPlugin/NodeIdPlugin.d.ts

@@ -9,6 +9,7 @@ type Options = {
 };
 export declare class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
     private options;
+    generateId: () => string;
     constructor(options: Options);
     init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor & {
         getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.24-dnd.5",
+  "version": "0.1.24-dnd.7",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -4,7 +4,7 @@ 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,
@@ -13,7 +13,12 @@ import {
 } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import type { IPlugin } from '../../types';
-import type { EditorDragItem, NodeWithId, Options } from './types';
+import {
+  type EditorDragItem,
+  isNodeWithId,
+  type NodeWithId,
+  type Options,
+} from './types';
 import { getNodesByNodeIds } from './utils';
 
 export class DnDPlugin implements IPlugin {
@@ -63,7 +68,9 @@ export class DnDPlugin implements IPlugin {
 
     const $store = useStore(this.store);
 
+    const isCopying = useRef(false);
     const options = this.options;
+    const generateId = this.options?.nodeIdPlugin?.generateId;
     const isReadOnly = useReadOnly();
 
     const [dropPosition, setDropPosition] = useState<'top' | 'bottom' | null>(
@@ -90,6 +97,11 @@ export class DnDPlugin implements IPlugin {
             ? getNodesByNodeIds(editor, selected)
             : [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,9 +112,12 @@ export class DnDPlugin implements IPlugin {
           .filter(Boolean);
 
         const dragItem: EditorDragItem = {
+          kind: 'inner',
           nodes,
+          item,
           items,
           source: {
+            editor,
             editorId: this.getEditorId(editor),
             documentId: options.documentId,
           },
@@ -120,7 +135,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 +170,18 @@ 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?.editorId === this.editors.get(editor) &&
+          this.editors.get(editor) !== undefined;
 
         const sourceTo = ReactEditor.findPath(editor, props.element);
 
@@ -169,8 +198,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 +207,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 +225,35 @@ export class DnDPlugin implements IPlugin {
 
             const nodeIds = dragItem.nodes.map((node) => node.nodeId);
 
-            moveNode(editor, sourceTo, nodeIds, dropPosition);
+            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);
+              }
+            }
             $store.selected.clear();
             break;
           }
         }
 
+        isCopying.current = false;
         setDropPosition(null);
       },
     });
@@ -234,6 +291,9 @@ export class DnDPlugin implements IPlugin {
           this.handleToggleSelected(currentElement.nodeId);
         }
       },
+      onNativeDrop: (event) => {
+        isCopying.current = event.altKey;
+      },
     });
   };
 }
@@ -289,3 +349,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

@@ -7,15 +7,25 @@ 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 = CustomElement & {
+export type NodeWithId = Omit<CustomElement, 'children'> & {
   nodeId: string;
+  children: (NodeWithId | CustomText)[];
+};
+
+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 = {
@@ -30,6 +40,7 @@ export type Options = {
     position: 'top' | 'bottom' | null;
     selected?: boolean;
     onToggleSelected: () => void;
+    onNativeDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
   }) => React.ReactNode;
   ignoreNodes?: string[];
   customTypes?: {
@@ -39,28 +50,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 +83,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/NodeIdPlugin/NodeIdPlugin.ts

@@ -26,7 +26,11 @@ type Options = {
 };
 
 export class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
-  constructor(private options: Options) {}
+  generateId: () => string;
+
+  constructor(private options: Options) {
+    this.generateId = options.generateId;
+  }
 
   init(editor: Editor) {
     const { apply, normalizeNode } = editor;
@@ -39,14 +43,13 @@ export class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
         const newType = (operation.newProperties as CustomElement).type;
 
         if (!node || (!Text.isText(node) && oldType !== newType)) {
-          (operation.newProperties as NodeIdBlock).nodeId =
-            this.options.generateId();
+          (operation.newProperties as NodeIdBlock).nodeId = this.generateId();
         }
         return apply(operation);
       }
 
       if (operation.type === 'insert_node') {
-        assignId(operation.node, this.options.generateId);
+        assignId(operation.node, this.generateId);
         return apply(operation);
       }
 
@@ -54,8 +57,7 @@ export class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
         const node = Node.get(editor, operation.path);
 
         if (!node || !Text.isText(node)) {
-          (operation.properties as NodeIdBlock).nodeId =
-            this.options.generateId();
+          (operation.properties as NodeIdBlock).nodeId = this.generateId();
         }
         return apply(operation);
       }
@@ -66,7 +68,7 @@ export class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
     editor.normalizeNode = (entry: NodeEntry) => {
       const [node] = entry;
 
-      assignId(node, this.options.generateId);
+      assignId(node, this.generateId);
 
       normalizeNode(entry);
     };