@use-kona/editor 0.1.24 → 0.1.25

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.tsx

@@ -96,7 +96,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;
 
@@ -331,10 +334,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,
       }),
     );
 

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);
     };

package/src/provider.tsx

@@ -0,0 +1,28 @@
+import type { StoreValue } from 'nanostores';
+import type React from 'react';
+import { createContext, useContext } from 'react';
+import type { EditorContext } from './types';
+
+const Context = createContext<EditorContext | null>(null);
+
+export const EditorProvider = ({
+  children,
+  selectedNodes,
+}: {
+  children: React.ReactNode;
+  selectedNodes: StoreValue<string[]>;
+}) => {
+  return (
+    <Context.Provider value={{ selectedNodes }}>{children}</Context.Provider>
+  );
+};
+
+export const useEditorContext = () => {
+  const context = useContext(Context);
+
+  if (!context) {
+    throw new Error('useEditorContext must be used within an EditorProvider');
+  }
+
+  return context;
+};

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { StoreValue } from 'nanostores';
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
 import type {
   DecoratedRange,
@@ -98,3 +99,7 @@ export type Deserialize = (
   element: HTMLElement,
   children?: (string | Descendant)[],
 ) => CustomElement | CustomText[] | undefined;
+
+export type EditorContext = {
+  selectedNodes: StoreValue<string[]>;
+};