@use-kona/editor 0.1.23 → 0.1.24-dnd.2

package/dist/core/createEditor.js

@@ -8,7 +8,7 @@ const createEditor_createEditor = (plugins)=>()=>{
             if (plugin.init) return plugin.init(editor);
             return editor;
         }, baseEditor);
-        const { isInline, isVoid, normalizeNode, deleteFragment, deleteBackward, deleteForward } = editorWithPlugins;
+        const { isInline, isVoid, deleteFragment, deleteBackward, deleteForward } = editorWithPlugins;
         editorWithPlugins.getCommands = (plugin)=>{
             const pluginInstance = pluginsMap.get(plugin);
             if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -1,18 +1,29 @@
 import { useStore } from "@nanostores/react";
+import { nanoid } from "nanoid";
 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 { ReactEditor, useReadOnly, useSlate } from "slate-react";
+import { getNodesByNodeIds } from "./utils.js";
 class DnDPlugin {
     options;
     store;
+    editors;
     constructor(options){
         this.options = options;
         this.store = map({
             selected: new Set()
         });
+        this.editors = new WeakMap();
+    }
+    init(editor) {
+        this.editors.set(editor, nanoid());
+        return editor;
+    }
+    getEditorId(editor) {
+        return this.editors.get(editor);
     }
     handleToggleSelected = (nodeId)=>{
         const selected = new Set(this.store.get().selected);
@@ -35,20 +46,33 @@ class DnDPlugin {
         const isReadOnly = useReadOnly();
         const [dropPosition, setDropPosition] = useState(null);
         const dropTargetRef = useRef(null);
-        const customType = options.customTypes?.[props.element.type];
+        options.customTypes?.[props.element.type];
         const currentElement = props.element;
-        const selected = Array.from($store.selected.values());
         const [, drag, preview] = useDrag({
-            type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
-            item: {
-                ...customType?.getData?.(props.element) || {},
-                element: props.element,
-                nodeIds: currentElement?.nodeId && selected.includes(currentElement?.nodeId) ? selected : [
-                    currentElement?.nodeId
-                ]
+            type: DnDPlugin.DND_BLOCK_ELEMENT,
+            item: ()=>{
+                const selected = Array.from($store.selected.values());
+                const nodes = selected.length > 0 && selected.includes(currentElement.nodeId) ? getNodesByNodeIds(editor, selected) : [
+                    structuredClone(props.element)
+                ];
+                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 = {
+                    nodes,
+                    items,
+                    source: {
+                        editorId: this.getEditorId(editor),
+                        documentId: options.documentId
+                    }
+                };
+                return dragItem;
             },
-            ...customType?.getDndItem?.(props.element) || {},
-            canDrag: !isReadOnly
+            canDrag: !isReadOnly,
+            end: ()=>{
+                $store.selected.clear();
+            }
         });
         const allCustomTypes = Object.values(options.customTypes || {}).map((customType)=>customType.type);
         const [{ isOver }, drop] = useDrop({
@@ -78,17 +102,29 @@ class DnDPlugin {
                 const itemType = monitor.getItemType();
                 const sourceTo = ReactEditor.findPath(editor, props.element);
                 if (!sourceTo) return;
-                const dropPath = getDropPath(editor, sourceTo, dropPosition || 'bottom');
-                if (!dropPath) return;
+                const insertAt = getDropPath(editor, sourceTo, dropPosition || 'bottom');
+                if (!insertAt) return;
+                const customDropHandler = itemType && options.customDropHandlers?.[itemType];
+                if (customDropHandler) {
+                    console.log('customDropHandler.onDrop', itemType);
+                    customDropHandler.onDrop({
+                        editor,
+                        item,
+                        insertAt
+                    });
+                    return;
+                }
+                console.log('customDropHandler not found', itemType);
                 switch(itemType){
                     case NativeTypes.FILE:
-                        options.onDropFiles(editor, item.files, dropPath);
+                        options.onDropFiles(editor, item.files, insertAt);
                         break;
                     default:
                         {
                             const dragItem = item;
-                            if (!dropPosition || !dragItem.nodeIds?.length) return;
-                            moveNode(editor, sourceTo, dragItem.nodeIds, dropPosition);
+                            if (!dropPosition || !dragItem.nodes.length) return;
+                            const nodeIds = dragItem.nodes.map((node)=>node.nodeId);
+                            moveNode(editor, sourceTo, nodeIds, dropPosition);
                             $store.selected.clear();
                             break;
                         }

package/dist/plugins/DnDPlugin/utils.js

@@ -0,0 +1,24 @@
+import { Editor, Element } from "slate";
+const cloneSlateNode = (node)=>structuredClone(node);
+const getNodesByNodeIds = (editor, nodeIds)=>{
+    if (!nodeIds.length) return [];
+    const ids = new Set(nodeIds);
+    const nodes = [];
+    const entries = Editor.nodes(editor, {
+        at: [],
+        match: (n)=>{
+            if (!Element.isElement(n)) return false;
+            if (!Editor.isBlock(editor, n)) return false;
+            const nodeId = n.nodeId;
+            return 'string' == typeof nodeId && ids.has(nodeId);
+        },
+        mode: 'highest'
+    });
+    try {
+        for (const entry of entries)nodes.push(entry);
+    } catch  {
+        return [];
+    }
+    return nodes.map(([node])=>cloneSlateNode(node));
+};
+export { getNodesByNodeIds };

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

@@ -1,36 +1,19 @@
 import { type MapStore } from 'nanostores';
-import type React from 'react';
-import { type ConnectDragPreview, type ConnectDragSource, type ConnectDropTarget } from 'react-dnd';
-import { Editor, Path } from 'slate';
-import { type RenderElementProps } from 'slate-react';
-import type { CustomElement } from '../../../types';
+import { Editor } from 'slate';
+import { ReactEditor, type RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
-type Options = {
-    onDropFiles: (editor: Editor, files: File[], path: Path) => void;
-    renderBlock?: (params: {
-        props: RenderElementProps;
-        dragRef: ConnectDragSource;
-        dropRef: ConnectDropTarget;
-        previewRef: ConnectDragPreview;
-        position: 'top' | 'bottom' | null;
-        selected?: boolean;
-        onToggleSelected: () => void;
-    }) => React.ReactNode;
-    ignoreNodes?: string[];
-    customTypes?: {
-        [type: string]: {
-            type: string | symbol;
-            getData?: (element: CustomElement) => Record<string, unknown>;
-            getDndItem?: (element: CustomElement) => Record<string, unknown>;
-        };
-    };
-};
+import type { Options } from './types';
 export declare class DnDPlugin implements IPlugin {
     private options;
     store: MapStore<{
         selected: Set<string>;
     }>;
+    editors: WeakMap<Editor, string>;
     constructor(options: Options);
+    init(editor: Editor): import("slate").BaseEditor & ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
+    getEditorId(editor: Editor): string | undefined;
     handleToggleSelected: (nodeId: string) => void;
     static DND_BLOCK_ELEMENT: string;
     handlers: {
@@ -38,4 +21,3 @@ export declare class DnDPlugin implements IPlugin {
     };
     renderBlock: (props: RenderElementProps) => any;
 }
-export {};

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

@@ -0,0 +1,62 @@
+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 & {
+    nodeId: string;
+};
+export type Options = {
+    editorId?: string;
+    documentId?: string | null;
+    onDropFiles: (editor: Editor, files: File[], path: Path) => void;
+    renderBlock?: (params: {
+        props: RenderElementProps;
+        dragRef: ConnectDragSource;
+        dropRef: ConnectDropTarget;
+        previewRef: ConnectDragPreview;
+        position: 'top' | 'bottom' | null;
+        selected?: boolean;
+        onToggleSelected: () => void;
+    }) => React.ReactNode;
+    ignoreNodes?: string[];
+    customTypes?: {
+        [type: string]: {
+            type: string | symbol;
+            getData?: (element: CustomElement) => unknown;
+        };
+    };
+    customDropHandlers?: {
+        [type: string | symbol]: {
+            type: string | symbol;
+            onDrop: <T = unknown>(context: CustomDropContext<T>) => DropResult;
+        };
+    };
+};
+type CustomDropContext<T = unknown> = {
+    editor: Editor;
+    item: T;
+    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 = {
+    nodes: NodeWithId[];
+    items?: unknown[];
+    source: {
+        /**
+         * Different editors have different unique identifiers.
+         */
+        editorId?: string;
+        /**
+         * But different editors may have the same document opened. In this case,
+         * editor1.documentId will be the same as editor2.documentId.
+         */
+        documentId?: string | null;
+        path?: Path;
+    };
+    data?: Record<string, unknown>;
+};
+export {};

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

@@ -0,0 +1,8 @@
+import { Editor } from 'slate';
+import type { NodeWithId } from './types';
+/**
+ * Gets a copy of listed notes by their ids
+ * @param editor
+ * @param nodeIds
+ */
+export declare const getNodesByNodeIds: (editor: Editor, nodeIds: string[]) => NodeWithId[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.23",
+  "version": "0.1.24-dnd.2",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -69,6 +69,7 @@
     "escape-html": "^1.0.3",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
+    "nanoid": "^5.1.16",
     "nanostores": "^1.0.1",
     "prismjs": "^1.30.0"
   }

package/src/core/createEditor.ts

@@ -24,14 +24,8 @@ export const createEditor = (plugins: IPlugin[]) => () => {
     return editor;
   }, baseEditor);
 
-  const {
-    isInline,
-    isVoid,
-    normalizeNode,
-    deleteFragment,
-    deleteBackward,
-    deleteForward,
-  } = editorWithPlugins;
+  const { isInline, isVoid, deleteFragment, deleteBackward, deleteForward } =
+    editorWithPlugins;
 
   editorWithPlugins.getCommands = (plugin: new () => IPlugin) => {
     const pluginInstance = pluginsMap.get(plugin);

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -1,14 +1,8 @@
 import { useStore } from '@nanostores/react';
+import { nanoid } from 'nanoid';
 import { type MapStore, map } from 'nanostores';
-import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import {
-  type ConnectDragPreview,
-  type ConnectDragSource,
-  type ConnectDropTarget,
-  useDrag,
-  useDrop,
-} from 'react-dnd';
+import { type ConnectDropTarget, useDrag, useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import { Editor, Path, Transforms } from 'slate';
 import {
@@ -19,44 +13,28 @@ import {
 } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import type { IPlugin } from '../../types';
-
-type Options = {
-  onDropFiles: (editor: Editor, files: File[], path: Path) => void;
-  renderBlock?: (params: {
-    props: RenderElementProps;
-    dragRef: ConnectDragSource;
-    dropRef: ConnectDropTarget;
-    previewRef: ConnectDragPreview;
-    position: 'top' | 'bottom' | null;
-    selected?: boolean;
-    onToggleSelected: () => void;
-  }) => React.ReactNode;
-  ignoreNodes?: string[];
-  customTypes?: {
-    [type: string]: {
-      type: string | symbol;
-      getData?: (element: CustomElement) => Record<string, unknown>;
-      getDndItem?: (element: CustomElement) => Record<string, unknown>;
-    };
-  };
-};
-
-type DnDItem = {
-  element: CustomElement;
-  nodeIds?: string[];
-};
-
-type DnDNode = CustomElement & {
-  nodeId?: string;
-};
+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();
+  }
+
+  init(editor: Editor) {
+    this.editors.set(editor, nanoid());
+
+    return editor;
+  }
+
+  getEditorId(editor: Editor) {
+    return this.editors.get(editor);
   }
 
   handleToggleSelected = (nodeId: string) => {
@@ -95,21 +73,47 @@ export class DnDPlugin implements IPlugin {
     const dropTargetRef = useRef<HTMLElement | null>(null);
 
     const customType = options.customTypes?.[props.element.type];
-    const currentElement = props.element as DnDNode;
-
-    const selected = Array.from($store.selected.values());
+    const currentElement = props.element as NodeWithId;
 
     const [, drag, preview] = useDrag({
-      type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
-      item: {
-        ...(customType?.getData?.(props.element) || {}),
-        element: props.element,
-        nodeIds: currentElement?.nodeId && selected.includes(currentElement?.nodeId)
-          ? selected
-          : [currentElement?.nodeId],
+      type: DnDPlugin.DND_BLOCK_ELEMENT,
+      item: () => {
+        const selected = Array.from($store.selected.values());
+
+        /**
+         * 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.includes(currentElement.nodeId)
+            ? getNodesByNodeIds(editor, selected)
+            : [structuredClone(props.element as NodeWithId)];
+
+        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: EditorDragItem = {
+          nodes,
+          items,
+          source: {
+            editorId: this.getEditorId(editor),
+            documentId: options.documentId,
+          },
+        };
+
+        return dragItem;
       },
-      ...(customType?.getDndItem?.(props.element) || {}),
       canDrag: !isReadOnly,
+      end: () => {
+        $store.selected.clear();
+      },
     });
 
     const allCustomTypes = Object.values(options.customTypes || {}).map(
@@ -154,26 +158,47 @@ export class DnDPlugin implements IPlugin {
 
         if (!sourceTo) return;
 
-        const dropPath = getDropPath(editor, sourceTo, dropPosition || 'bottom');
+        const insertAt = getDropPath(
+          editor,
+          sourceTo,
+          dropPosition || 'bottom',
+        );
 
-        if (!dropPath) return;
+        if (!insertAt) return;
+
+        const customDropHandler =
+          itemType && options.customDropHandlers?.[itemType];
+
+        if (customDropHandler) {
+          console.log('customDropHandler.onDrop', itemType);
+          customDropHandler.onDrop({ editor, item, insertAt });
+          return;
+        } else {
+          console.log('customDropHandler not found', itemType);
+          console.log(
+            'valid drop handlers are',
+            Object.keys(options.customDropHandlers),
+          );
+        }
 
         switch (itemType) {
           case NativeTypes.FILE:
             options.onDropFiles(
               editor,
               (item as { files: File[] }).files,
-              dropPath,
+              insertAt,
             );
             break;
           default: {
-            const dragItem = item as DnDItem;
+            const dragItem = item as EditorDragItem;
 
-            if (!dropPosition || !dragItem.nodeIds?.length) {
+            if (!dropPosition || !dragItem.nodes.length) {
               return;
             }
 
-            moveNode(editor, sourceTo, dragItem.nodeIds, dropPosition);
+            const nodeIds = dragItem.nodes.map((node) => node.nodeId);
+
+            moveNode(editor, sourceTo, nodeIds, dropPosition);
             $store.selected.clear();
             break;
           }
@@ -245,7 +270,7 @@ const moveNode = (
 
   if (!dropPath) return;
   if (!Editor.hasPath(editor, dropPath)) {
-    return
+    return;
   }
 
   Editor.withoutNormalizing(editor, () => {
@@ -260,7 +285,7 @@ const moveNode = (
           return false;
         }
 
-        const node = n as DnDNode;
+        const node = n as NodeWithId;
         const shouldMove =
           typeof node.nodeId === 'string' && nodeIds.includes(node.nodeId);
         return shouldMove;
@@ -270,5 +295,4 @@ const moveNode = (
     });
   });
   Editor.normalize(editor);
-
 };

package/src/plugins/DnDPlugin/types.ts

@@ -0,0 +1,76 @@
+import { type MapStore, map } from 'nanostores';
+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';
+
+type DropParams = {
+  editor: Editor;
+  item: unknown;
+};
+
+export type NodeWithId = CustomElement & {
+  nodeId: string;
+};
+
+export type Options = {
+  editorId?: string;
+  documentId?: string | null;
+  onDropFiles: (editor: Editor, files: File[], path: Path) => void;
+  renderBlock?: (params: {
+    props: RenderElementProps;
+    dragRef: ConnectDragSource;
+    dropRef: ConnectDropTarget;
+    previewRef: ConnectDragPreview;
+    position: 'top' | 'bottom' | null;
+    selected?: boolean;
+    onToggleSelected: () => void;
+  }) => React.ReactNode;
+  ignoreNodes?: string[];
+  customTypes?: {
+    [type: string]: {
+      type: string | symbol;
+      getData?: (element: CustomElement) => unknown;
+    };
+  };
+  customDropHandlers?: {
+    [type: string | symbol]: {
+      type: string | symbol;
+      onDrop: <T = unknown>(context: CustomDropContext<T>) => DropResult;
+    };
+  };
+};
+
+type CustomDropContext<T = unknown> = {
+  editor: Editor;
+  item: T;
+  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 = {
+  nodes: NodeWithId[];
+  items?: unknown[];
+  source: {
+    /**
+     * Different editors have different unique identifiers.
+     */
+    editorId?: string;
+    /**
+     * But different editors may have the same document opened. In this case,
+     * editor1.documentId will be the same as editor2.documentId.
+     */
+    documentId?: string | null;
+    path?: Path;
+  };
+  data?: Record<string, unknown>;
+};

package/src/plugins/DnDPlugin/utils.ts

@@ -0,0 +1,52 @@
+import { Editor, Element, type Path } from 'slate';
+import type { NodeWithId } from './types';
+
+type NodeWithIdEntry = [NodeWithId, Path];
+
+const cloneSlateNode = (node: NodeWithId): NodeWithId => {
+  return structuredClone(node);
+};
+
+/**
+ * Gets a copy of listed notes by their ids
+ * @param editor
+ * @param nodeIds
+ */
+export const getNodesByNodeIds = (
+  editor: Editor,
+  nodeIds: string[],
+): NodeWithId[] => {
+  if (!nodeIds.length) {
+    return [];
+  }
+
+  const ids = new Set(nodeIds);
+  const nodes: NodeWithIdEntry[] = [];
+
+  const entries = Editor.nodes(editor, {
+    at: [],
+    match: (n) => {
+      if (!Element.isElement(n)) {
+        return false;
+      }
+
+      if (!Editor.isBlock(editor, n)) {
+        return false;
+      }
+
+      const nodeId = (n as NodeWithId).nodeId;
+      return typeof nodeId === 'string' && ids.has(nodeId);
+    },
+    mode: 'highest',
+  });
+
+  try {
+    for (const entry of entries) {
+      nodes.push(entry as NodeWithIdEntry);
+    }
+  } catch {
+    return [];
+  }
+
+  return nodes.map(([node]) => cloneSlateNode(node));
+};