@use-kona/editor 0.1.16 → 0.1.17

package/src/plugins/CommandsPlugin/useResolvedCommands.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+import type { Editor } from 'slate';
+import {
+  CommandsResolver,
+  type ResolvedCommandsState,
+} from './resolveCommands';
+import type { Command, CommandPathEntry } from './types';
+
+const DEBOUNCE_TIMEOUT = 150;
+
+type Params = {
+  rootCommands: Command[];
+  filter: boolean | string;
+  path: CommandPathEntry[];
+  editor: Editor;
+  isOpen: boolean;
+};
+
+const EMPTY_STATE: ResolvedCommandsState = {
+  commands: [],
+  isLoading: false,
+  isError: false,
+};
+
+export const useResolvedCommands = (params: Params) => {
+  const { rootCommands, filter, path, editor, isOpen } = params;
+  const resolverRef = useRef(new CommandsResolver());
+  const [state, setState] = useState<ResolvedCommandsState>(EMPTY_STATE);
+  const query = typeof filter === 'string' ? filter : '';
+
+  useEffect(() => {
+    if (!isOpen || filter === false) {
+      setState(EMPTY_STATE);
+      return;
+    }
+
+    setState({
+      commands: [],
+      isLoading: true,
+      isError: false,
+    });
+
+    const timeout = window.setTimeout(
+      () => {
+        const request = resolverRef.current.resolve({
+          rootCommands,
+          filter: query,
+          path,
+          editor,
+        });
+
+        setState(request.state);
+
+        request.promise.then((resolved) => {
+          setState(resolved);
+        });
+      },
+      query ? DEBOUNCE_TIMEOUT : 0,
+    );
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [editor, filter, isOpen, path, query, rootCommands]);
+
+  return state;
+};

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -1,3 +1,5 @@
+import { useStore } from '@nanostores/react';
+import { type MapStore, map } from 'nanostores';
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import {
@@ -26,6 +28,8 @@ type Options = {
     dropRef: ConnectDropTarget;
     previewRef: ConnectDragPreview;
     position: 'top' | 'bottom' | null;
+    selected?: boolean;
+    onToggleSelected: () => void;
   }) => React.ReactNode;
   ignoreNodes?: string[];
   customTypes?: {
@@ -37,8 +41,36 @@ type Options = {
   };
 };
 
+type DnDItem = {
+  element: CustomElement;
+  nodeIds?: string[];
+};
+
+type DnDNode = CustomElement & {
+  nodeId?: string;
+};
+
 export class DnDPlugin implements IPlugin {
-  constructor(private options: Options) {}
+  store: MapStore<{ selected: Set<string> }>;
+
+  constructor(private options: Options) {
+    this.store = map({
+      selected: new Set(),
+    });
+  }
+
+  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';
 
@@ -51,6 +83,8 @@ export class DnDPlugin implements IPlugin {
   renderBlock = (props: RenderElementProps) => {
     const editor = useSlate();
 
+    const $store = useStore(this.store);
+
     const options = this.options;
     const isReadOnly = useReadOnly();
 
@@ -59,12 +93,14 @@ export class DnDPlugin implements IPlugin {
     );
 
     const customType = options.customTypes?.[props.element.type];
+    const currentElement = props.element as DnDNode;
 
     const [, drag, preview] = useDrag({
       type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
       item: {
         ...(customType?.getData?.(props.element) || {}),
         element: props.element,
+        nodeIds: Array.from($store.selected.values()),
       },
       ...(customType?.getDndItem?.(props.element) || {}),
       canDrag: !isReadOnly,
@@ -128,16 +164,13 @@ export class DnDPlugin implements IPlugin {
             );
             break;
           default: {
-            const targetTo = ReactEditor.findPath(
-              editor,
-              (item as { element: CustomElement }).element,
-            );
+            const dragItem = item as DnDItem;
 
-            if (!dropPosition) {
+            if (!dropPosition || !dragItem.nodeIds?.length) {
               return;
             }
 
-            moveNode(editor, sourceTo, targetTo, dropPosition);
+            moveNode(editor, sourceTo, dragItem.nodeIds, dropPosition);
             break;
           }
         }
@@ -165,6 +198,15 @@ export class DnDPlugin implements IPlugin {
       dropRef: drop,
       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);
+        }
+      },
     });
   };
 }
@@ -187,16 +229,29 @@ const getDropPath = (
 const moveNode = (
   editor: Editor,
   targetNodePath: Path,
-  sourceNodePath: Path,
+  nodeIds: string[],
   position: 'top' | 'bottom',
 ) => {
   const dropPath = getDropPath(editor, targetNodePath, position);
 
   if (!dropPath) return;
 
+  // nodeIds.reverse().forEach((nodeId) => {
   Transforms.moveNodes(editor, {
-    at: sourceNodePath,
+    // at: sourceNodePath,
+    at: [],
+    match: (n) => {
+      if (!Editor.isBlock(editor, n as CustomElement)) {
+        return false;
+      }
+
+      const node = n as DnDNode;
+      const shouldMove =
+        typeof node.nodeId === 'string' && nodeIds.includes(node.nodeId);
+      return shouldMove;
+    },
     to: dropPath,
     mode: 'highest',
   });
+  // });
 };

package/src/plugins/NodeIdPlugin/NodeIdPlugin.ts

@@ -1,4 +1,4 @@
-import { type Editor, Element, Node, Text } from 'slate';
+import { type Editor, Element, Node, type NodeEntry, Text } from 'slate';
 import type { CustomElement } from '../../../types';
 import type { IPlugin } from '../../types';
 
@@ -29,7 +29,7 @@ export class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
   constructor(private options: Options) {}
 
   init(editor: Editor) {
-    const { apply } = editor;
+    const { apply, normalizeNode } = editor;
 
     editor.apply = (operation) => {
       if (operation.type === 'set_node') {
@@ -63,6 +63,14 @@ export class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
       return apply(operation);
     };
 
+    editor.normalizeNode = (entry: NodeEntry) => {
+      const [node] = entry;
+
+      assignId(node, this.options.generateId);
+
+      normalizeNode(entry);
+    };
+
     return editor;
   }
 }

package/src/plugins/index.ts

@@ -2,7 +2,12 @@ export { AttachmentsPlugin } from './AttachmentsPlugin';
 export { BasicFormattingPlugin } from './BasicFormattingPlugin';
 export { BreaksPlugin } from './BreaksPlugin';
 export { CodeBlockPlugin, type CodeElement } from './CodeBlockPlugin';
-export { type Command, CommandsPlugin } from './CommandsPlugin';
+export {
+  type Command,
+  type CommandPathEntry,
+  CommandsPlugin,
+  type GetCommandsContext,
+} from './CommandsPlugin';
 export { DnDPlugin } from './DnDPlugin';
 export { EmojiPlugin } from './EmojiPlugin';
 export { type Commands, FloatingMenuPlugin } from './FloatingMenuPlugin';