@use-kona/editor 0.1.16 → 0.1.17

package/dist/plugins/CommandsPlugin/CommandsPlugin.d.ts

@@ -1,11 +1,10 @@
-import { type MapStore, type ReadableAtom } from 'nanostores';
+import { type MapStore } from 'nanostores';
 import type { IPlugin, UiParams } from '../../types';
 import type { CommandsStore, Options } from './types';
 export declare class CommandsPlugin implements IPlugin {
     options: Options;
     $store: MapStore<CommandsStore>;
-    $commands: ReadableAtom<CommandsStore['commands']>;
     constructor(options: Options);
     init(editor: any): any;
-    ui(params: UiParams): import("react/jsx-runtime").JSX.Element | null;
+    ui(_params: UiParams): import("react/jsx-runtime").JSX.Element | null;
 }

package/dist/plugins/CommandsPlugin/CommandsPlugin.js

@@ -1,34 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import { useStore } from "@nanostores/react";
-import { computed, map } from "nanostores";
+import { map } from "nanostores";
 import { Editor, Node } from "slate";
 import { Menu } from "./Menu.js";
 class CommandsPlugin {
     options;
     $store;
-    $commands;
     constructor(options){
         this.options = options;
         this.$store = map({
             isOpen: false,
             filter: false,
-            commands: []
-        });
-        this.$commands = computed(this.$store, (store)=>{
-            if (false === store.filter) return [];
-            return store.commands.filter((command)=>{
-                const isCommandMatches = command.commandName.toLocaleLowerCase().includes(store.filter.toLocaleLowerCase());
-                const isTitleMatches = command.title.toLocaleLowerCase().includes(store.filter.toLocaleLowerCase());
-                return isCommandMatches || isTitleMatches;
-            });
+            openId: 0
         });
     }
     init(editor) {
         const { onChange, insertText } = editor;
         editor.insertText = (text)=>{
             if ('/' === text) {
+                this.$store.setKey('openId', this.$store.get().openId + 1);
                 this.$store.setKey('isOpen', true);
-                this.$store.setKey('commands', this.options.commands);
                 this.$store.setKey('filter', '');
             }
             insertText(text);
@@ -43,14 +34,13 @@ class CommandsPlugin {
         };
         return editor;
     }
-    ui(params) {
-        const commands = useStore(this.$commands);
+    ui(_params) {
         const { isOpen } = useStore(this.$store);
         if (!isOpen) return null;
         return /*#__PURE__*/ jsx(Menu, {
             renderMenu: this.options.renderMenu,
             $store: this.$store,
-            commands: commands,
+            rootCommands: this.options.commands,
             ignoreNodes: this.options.ignoreNodes
         });
     }

package/dist/plugins/CommandsPlugin/Menu.d.ts

@@ -1,11 +1,11 @@
 import type { MapStore } from 'nanostores';
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { Command, CommandsStore } from './types';
 type Props = {
     $store: MapStore<CommandsStore>;
-    commands: Command[];
+    rootCommands: Command[];
     ignoreNodes?: string[];
     renderMenu: (children: ReactNode) => ReactNode;
 };
-export declare const Menu: (props: Props) => React.ReactPortal | null;
+export declare const Menu: (props: Props) => import("react").ReactPortal | null;
 export {};

package/dist/plugins/CommandsPlugin/Menu.js

@@ -7,11 +7,13 @@ import { Editor } from "slate";
 import { useFocused, useSlate, useSlateSelection } from "slate-react";
 import { insert, insertText, removeCommand, set, wrap } from "./actions.js";
 import styles_module from "./styles.module.js";
+import { useResolvedCommands } from "./useResolvedCommands.js";
 const Menu = (props)=>{
-    const { commands, $store, renderMenu, ignoreNodes = [] } = props;
+    const { rootCommands, $store, renderMenu, ignoreNodes = [] } = props;
     const store = useStore($store);
     const [style, setStyle] = useState({});
     const [active, setActive] = useState(0);
+    const [path, setPath] = useState([]);
     const refs = useRef({});
     const selection = useSlateSelection();
     const editor = useSlate();
@@ -20,6 +22,32 @@ const Menu = (props)=>{
     const entry = Editor.above(editor, {
         match: (n)=>Editor.isBlock(editor, n)
     });
+    const isBrowseMode = 'string' == typeof store.filter && '' === store.filter;
+    const isSearchMode = 'string' == typeof store.filter && '' !== store.filter;
+    const { commands, isLoading, isError } = useResolvedCommands({
+        rootCommands,
+        filter: store.filter,
+        path,
+        editor,
+        isOpen: store.isOpen
+    });
+    const entries = useMemo(()=>{
+        const commandEntries = commands.map((command)=>({
+                type: 'command',
+                command
+            }));
+        if (isBrowseMode && path.length > 0) return [
+            {
+                type: 'back'
+            },
+            ...commandEntries
+        ];
+        return commandEntries;
+    }, [
+        commands,
+        isBrowseMode,
+        path.length
+    ]);
     const actions = useMemo(()=>({
             removeCommand: removeCommand(editor, selection, store.filter),
             set: set(editor, selection, store.filter),
@@ -27,90 +55,151 @@ const Menu = (props)=>{
             wrap: wrap(editor, selection, store.filter),
             insertText: insertText(editor)
         }), [
-        commands,
+        selection,
         store.filter
     ]);
+    useEffect(()=>{
+        if (!store.isOpen) return;
+        setPath([]);
+        setActive(0);
+    }, [
+        store.isOpen,
+        store.openId
+    ]);
+    useEffect(()=>{
+        if (false === store.filter || isSearchMode) setActive(0);
+    }, [
+        isSearchMode,
+        store.filter
+    ]);
+    useEffect(()=>{
+        if (!entries.length) return void setActive(0);
+        if (active > entries.length - 1) setActive(entries.length - 1);
+    }, [
+        active,
+        entries
+    ]);
     useLayoutEffect(()=>{
         const { selection } = editor;
         if (!selection || !isFocused) return void setStyle(void 0);
-        setTimeout(()=>{
+        const frame = window.requestAnimationFrame(()=>{
             const domSelection = window.getSelection();
-            const domRange = domSelection?.getRangeAt(0);
+            const domRange = domSelection && domSelection.rangeCount > 0 ? domSelection.getRangeAt(0) : null;
             const rect = domRange?.getBoundingClientRect();
-            store.isOpen ? setStyle({
-                opacity: 1,
-                transform: 'scale(1)',
-                top: `${(rect?.top || 0) + window.scrollY + (rect?.height || 0) + 2}px`,
-                left: `${(rect?.left || 0) + window.scrollX + (rect?.width || 0) / 2}px`
-            }) : setStyle({
-                opacity: 0,
-                transform: 'scale(0.9)'
+            const x = (rect?.left || 0) + (rect?.width || 0) / 2;
+            const menuHeight = ref.current?.offsetHeight || 0;
+            let y = (rect?.top || 0) + (rect?.height || 0) + 2;
+            if (menuHeight > 0 && y + menuHeight >= window.innerHeight) y = Math.max(8, (rect?.top || 0) - menuHeight - 2);
+            const transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0) ${store.isOpen ? 'scale(1)' : 'scale(0.95)'}`;
+            setStyle({
+                opacity: store.isOpen ? 1 : 0,
+                transform
             });
-        }, 0);
+        });
+        return ()=>{
+            window.cancelAnimationFrame(frame);
+        };
+    }, [
+        selection,
+        commands.length,
+        isLoading,
+        isError,
+        store.isOpen,
+        isFocused
+    ]);
+    useEffect(()=>{
         const handleKeyDown = (event)=>{
+            if (!store.isOpen) return;
             switch(event.key){
                 case 'ArrowDown':
+                    if (!entries.length) return;
                     event.preventDefault();
+                    event.stopPropagation();
                     setActive((active)=>{
-                        const newActive = active >= commands.length - 1 ? 0 : active + 1;
-                        refs.current[newActive]?.scrollIntoView({
+                        const nextActive = active >= entries.length - 1 ? 0 : active + 1;
+                        refs.current[nextActive]?.scrollIntoView({
                             block: 'nearest'
                         });
-                        return newActive;
+                        return nextActive;
                     });
                     break;
                 case 'ArrowUp':
+                    if (!entries.length) return;
                     event.preventDefault();
+                    event.stopPropagation();
                     setActive((active)=>{
-                        const newActive = active <= 0 ? commands.length - 1 : active - 1;
-                        refs.current[newActive]?.scrollIntoView({
+                        const nextActive = active <= 0 ? entries.length - 1 : active - 1;
+                        refs.current[nextActive]?.scrollIntoView({
                             block: 'nearest'
                         });
-                        return newActive;
+                        return nextActive;
                     });
                     break;
-                case 'Enter':
+                case 'ArrowRight':
+                    {
+                        const entry = entries[active];
+                        if (!entry || 'command' !== entry.type || !entry.command.isSubmenu) return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setPath(entry.command.path);
+                        if (!isBrowseMode) $store.setKey('filter', '');
+                        setActive(0);
+                        break;
+                    }
+                case 'ArrowLeft':
+                    if (!isBrowseMode || !path.length) return;
                     event.preventDefault();
-                    commands[active]?.action(actions, editor);
-                    $store.setKey('isOpen', false);
+                    event.stopPropagation();
+                    setPath((path)=>path.slice(0, path.length - 1));
+                    setActive(0);
                     break;
+                case 'Enter':
+                    {
+                        const entry = entries[active];
+                        if (!entry) return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        if ('back' === entry.type && isBrowseMode) {
+                            setPath((path)=>path.slice(0, path.length - 1));
+                            setActive(0);
+                            break;
+                        }
+                        if ('command' !== entry.type) break;
+                        if (entry.command.isSubmenu) {
+                            setPath(entry.command.path);
+                            if (!isBrowseMode) $store.setKey('filter', '');
+                            setActive(0);
+                            break;
+                        }
+                        entry.command.command.action?.(actions, editor);
+                        $store.setKey('isOpen', false);
+                        break;
+                    }
                 case 'Escape':
+                    event.preventDefault();
                     event.stopPropagation();
                     $store.setKey('isOpen', false);
                     break;
             }
         };
-        if (store.isOpen && commands.length > 0) document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keydown', handleKeyDown);
         return ()=>{
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [
-        selection,
-        active,
         actions,
-        store.isOpen
-    ]);
-    useEffect(()=>{
-        if (active < 0) return void setActive(0);
-        if (active > commands.length - 1) setActive(commands.length - 1);
-    }, [
-        store.filter
+        active,
+        entries,
+        editor,
+        isBrowseMode,
+        path.length,
+        store.isOpen,
+        $store
     ]);
-    useLayoutEffect(()=>{
-        const element = ref.current;
-        if (element) {
-            const { height, top } = element.getBoundingClientRect();
-            const domSelection = window.getSelection();
-            const domRange = domSelection?.getRangeAt(0);
-            const rect = domRange?.getBoundingClientRect();
-            if (top + height >= window.innerHeight) setStyle((style)=>({
-                    ...style,
-                    top: `${top - height - (rect?.height ?? 22)}px`
-                }));
-        }
-    }, []);
-    if (!commands.length) return null;
+    const hasRows = entries.length > 0 || isLoading || isError;
+    if (false === store.filter || !hasRows) return null;
     if (entry && ignoreNodes.includes(entry[0].type)) return null;
+    const pathLabel = path.map((item)=>item.title).join(' / ');
     return /*#__PURE__*/ createPortal(renderMenu(/*#__PURE__*/ jsxs(Fragment, {
         children: [
             store.isOpen && /*#__PURE__*/ jsx("div", {
@@ -119,36 +208,118 @@ const Menu = (props)=>{
                     $store.setKey('isOpen', false);
                 }
             }),
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsxs("div", {
                 ref: ref,
                 style: style,
                 className: styles_module.menu,
                 onMouseDown: (event)=>{
                     event.preventDefault();
                 },
-                children: commands.map((command, index)=>/*#__PURE__*/ jsxs("button", {
-                        type: "button",
-                        ref: (element)=>{
-                            if (element) refs.current[index] = element;
-                        },
-                        className: clsx(styles_module.button, {
-                            [styles_module.active]: index === active
-                        }),
-                        onMouseDown: (event)=>{
-                            event.preventDefault();
-                            command.action(actions, editor);
-                            $store.setKey('isOpen', false);
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: styles_module.icon,
-                                children: command.icon
+                children: [
+                    isBrowseMode && pathLabel && /*#__PURE__*/ jsx("div", {
+                        className: styles_module.path,
+                        children: pathLabel
+                    }),
+                    entries.map((entry, index)=>{
+                        if ('back' === entry.type) return /*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            ref: (element)=>{
+                                refs.current[index] = element;
+                            },
+                            className: clsx(styles_module.button, {
+                                [styles_module.active]: index === active
+                            }),
+                            onMouseDown: (event)=>{
+                                event.preventDefault();
+                                setPath((path)=>path.slice(0, path.length - 1));
+                                setActive(0);
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: styles_module.icon,
+                                    children: "..."
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: styles_module.content,
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        children: "..."
+                                    })
+                                })
+                            ]
+                        }, "back");
+                        return /*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            ref: (element)=>{
+                                refs.current[index] = element;
+                            },
+                            className: clsx(styles_module.button, {
+                                [styles_module.active]: index === active
                             }),
-                            /*#__PURE__*/ jsx("span", {
-                                children: command.title
-                            })
-                        ]
-                    }, index))
+                            onMouseDown: (event)=>{
+                                event.preventDefault();
+                                if (entry.command.isSubmenu) {
+                                    setPath(entry.command.path);
+                                    if (!isBrowseMode) $store.setKey('filter', '');
+                                    setActive(0);
+                                    return;
+                                }
+                                entry.command.command.action?.(actions, editor);
+                                $store.setKey('isOpen', false);
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: styles_module.icon,
+                                    children: entry.command.command.icon
+                                }),
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: styles_module.content,
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            children: entry.command.command.title
+                                        }),
+                                        isSearchMode && entry.command.breadcrumb && /*#__PURE__*/ jsx("span", {
+                                            className: styles_module.breadcrumb,
+                                            children: entry.command.breadcrumb
+                                        })
+                                    ]
+                                }),
+                                entry.command.isSubmenu && isBrowseMode && /*#__PURE__*/ jsx("span", {
+                                    className: styles_module.submenu,
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ jsxs("svg", {
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        width: "12",
+                                        height: "12",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        strokeWidth: "2",
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        children: [
+                                            /*#__PURE__*/ jsx("path", {
+                                                stroke: "none",
+                                                d: "M0 0h24v24H0z",
+                                                fill: "none"
+                                            }),
+                                            /*#__PURE__*/ jsx("path", {
+                                                d: "M9 6l6 6l-6 6"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }, entry.command.key);
+                    }),
+                    isLoading && /*#__PURE__*/ jsx("div", {
+                        className: styles_module.systemRow,
+                        children: "Loading..."
+                    }),
+                    isError && /*#__PURE__*/ jsx("div", {
+                        className: styles_module.systemRow,
+                        children: "Could not load commands"
+                    })
+                ]
             })
         ]
     })), document.body);

package/dist/plugins/CommandsPlugin/index.d.ts

@@ -1,2 +1,2 @@
 export { CommandsPlugin } from './CommandsPlugin';
-export type { Command } from './types';
+export type { Command, CommandPathEntry, GetCommandsContext } from './types';

package/dist/plugins/CommandsPlugin/resolveCommands.d.ts

@@ -0,0 +1,34 @@
+import type { Editor } from 'slate';
+import type { Command, CommandPathEntry } from './types';
+export type ResolvedCommand = {
+    command: Command;
+    key: string;
+    path: CommandPathEntry[];
+    breadcrumb: string;
+    isSubmenu: boolean;
+};
+export type ResolveCommandsParams = {
+    rootCommands: Command[];
+    filter: string;
+    path: CommandPathEntry[];
+    editor: Editor;
+};
+export type ResolvedCommandsState = {
+    commands: ResolvedCommand[];
+    isLoading: boolean;
+    isError: boolean;
+};
+type ResolveRequest = {
+    state: ResolvedCommandsState;
+    promise: Promise<ResolvedCommandsState>;
+};
+export declare class CommandsResolver {
+    private cache;
+    private requestId;
+    private state;
+    getState(): ResolvedCommandsState;
+    resolve(params: ResolveCommandsParams): ResolveRequest;
+    private resolveChildCommands;
+    private resolveInternal;
+}
+export {};

package/dist/plugins/CommandsPlugin/resolveCommands.js

@@ -0,0 +1,150 @@
+const toPathEntry = (command)=>({
+        name: command.name,
+        title: command.title,
+        commandName: command.commandName
+    });
+const pathToKey = (path)=>path.map((item)=>item.name).join('/');
+const normalizeCommands = (commands)=>Array.isArray(commands) ? commands : [];
+const isCommandMatchesQuery = (command, query)=>{
+    const normalized = query.toLocaleLowerCase();
+    return command.commandName.toLocaleLowerCase().includes(normalized) || command.title.toLocaleLowerCase().includes(normalized);
+};
+const toResolvedCommand = (command, parentPath)=>{
+    const path = [
+        ...parentPath,
+        toPathEntry(command)
+    ];
+    return {
+        command,
+        path,
+        key: pathToKey(path),
+        breadcrumb: parentPath.map((item)=>item.title).join(' / '),
+        isSubmenu: Boolean(command.getCommands)
+    };
+};
+const resolveBrowseCommands = async (params, resolveChildCommands)=>{
+    const { rootCommands, path, editor } = params;
+    let currentCommands = rootCommands;
+    let currentPath = [];
+    for (const item of path){
+        const command = currentCommands.find((entry)=>entry.name === item.name);
+        if (!command?.getCommands) return [];
+        currentPath = [
+            ...currentPath,
+            toPathEntry(command)
+        ];
+        currentCommands = await resolveChildCommands({
+            command,
+            path: currentPath,
+            query: '',
+            editor
+        });
+    }
+    return currentCommands.map((command)=>toResolvedCommand(command, currentPath));
+};
+const resolveSearchCommands = async (params, resolveChildCommands)=>{
+    const { rootCommands, filter, editor } = params;
+    const commands = [];
+    const walk = async (levelCommands, parentPath)=>{
+        for (const command of levelCommands){
+            if (command.getCommands) {
+                if (isCommandMatchesQuery(command, filter)) commands.push(toResolvedCommand(command, parentPath));
+                const currentPath = [
+                    ...parentPath,
+                    toPathEntry(command)
+                ];
+                const children = await resolveChildCommands({
+                    command,
+                    path: currentPath,
+                    query: filter,
+                    editor
+                });
+                await walk(children, currentPath);
+                continue;
+            }
+            if (command.action && isCommandMatchesQuery(command, filter)) commands.push(toResolvedCommand(command, parentPath));
+        }
+    };
+    await walk(rootCommands, []);
+    return commands;
+};
+class CommandsResolver {
+    cache = new Map();
+    requestId = 0;
+    state = {
+        commands: [],
+        isLoading: false,
+        isError: false
+    };
+    getState() {
+        return this.state;
+    }
+    resolve(params) {
+        const currentRequestId = ++this.requestId;
+        this.state = {
+            commands: [],
+            isLoading: true,
+            isError: false
+        };
+        const promise = this.resolveInternal(params).then((commands)=>{
+            if (currentRequestId !== this.requestId) return this.state;
+            this.state = {
+                commands,
+                isLoading: false,
+                isError: false
+            };
+            return this.state;
+        }).catch(()=>{
+            if (currentRequestId !== this.requestId) return this.state;
+            this.state = {
+                ...this.state,
+                isLoading: false,
+                isError: true
+            };
+            return this.state;
+        });
+        return {
+            state: this.state,
+            promise
+        };
+    }
+    resolveChildCommands = async (params)=>{
+        const { command, path, query, editor } = params;
+        if (!command.getCommands) return [];
+        const cacheKey = `${query}::${pathToKey(path)}`;
+        const cached = this.cache.get(cacheKey);
+        if (cached?.status === 'resolved') return cached.value;
+        if (cached?.status === 'rejected') throw cached.error;
+        if (cached?.status === 'pending') return cached.promise;
+        const promise = Promise.resolve(command.getCommands({
+            query,
+            editor,
+            path,
+            parent: command
+        })).then((commands)=>normalizeCommands(commands));
+        this.cache.set(cacheKey, {
+            status: 'pending',
+            promise
+        });
+        try {
+            const commands = await promise;
+            this.cache.set(cacheKey, {
+                status: 'resolved',
+                value: commands
+            });
+            return commands;
+        } catch (error) {
+            this.cache.set(cacheKey, {
+                status: 'rejected',
+                error
+            });
+            throw error;
+        }
+    };
+    async resolveInternal(params) {
+        const { filter } = params;
+        if (!filter) return resolveBrowseCommands(params, this.resolveChildCommands);
+        return resolveSearchCommands(params, this.resolveChildCommands);
+    }
+}
+export { CommandsResolver };

package/dist/plugins/CommandsPlugin/resolveCommands.spec.d.ts

@@ -0,0 +1 @@
+export {};