@use-kona/editor 0.1.15 → 0.1.17

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

package/dist/plugins/CommandsPlugin/resolveCommands.spec.js

@@ -0,0 +1,277 @@
+import { describe, expect, it } from "vitest";
+import { CommandsResolver } from "./resolveCommands.js";
+const editor = {};
+const leaf = (params)=>({
+        name: params.name,
+        title: params.title,
+        commandName: params.commandName ?? params.title.toLocaleLowerCase(),
+        icon: null,
+        action: ()=>{}
+    });
+const deferred = ()=>{
+    let resolve = ()=>{};
+    let reject = ()=>{};
+    const promise = new Promise((res, rej)=>{
+        resolve = res;
+        reject = rej;
+    });
+    return {
+        promise,
+        resolve,
+        reject
+    };
+};
+describe('CommandsResolver', ()=>{
+    it('keeps leaf-only legacy behavior', async ()=>{
+        const resolver = new CommandsResolver();
+        const rootCommands = [
+            leaf({
+                name: 'paragraph',
+                title: 'Paragraph'
+            }),
+            leaf({
+                name: 'code',
+                title: 'Code'
+            })
+        ];
+        const request = resolver.resolve({
+            rootCommands,
+            filter: '',
+            path: [],
+            editor
+        });
+        const result = await request.promise;
+        expect(result.commands.map((item)=>item.command.name)).toEqual([
+            'paragraph',
+            'code'
+        ]);
+    });
+    it('resolves static submenu with sync getCommands', async ()=>{
+        const resolver = new CommandsResolver();
+        const rootCommands = [
+            {
+                name: 'insert',
+                title: 'Insert',
+                commandName: 'insert',
+                icon: null,
+                getCommands: ()=>[
+                        leaf({
+                            name: 'heading-1',
+                            title: 'Heading 1'
+                        })
+                    ]
+            }
+        ];
+        const request = resolver.resolve({
+            rootCommands,
+            filter: '',
+            path: [
+                {
+                    name: 'insert',
+                    title: 'Insert',
+                    commandName: 'insert'
+                }
+            ],
+            editor
+        });
+        const result = await request.promise;
+        expect(result.commands).toHaveLength(1);
+        expect(result.commands[0]?.command.name).toBe('heading-1');
+    });
+    it('resolves async submenu', async ()=>{
+        const resolver = new CommandsResolver();
+        const rootCommands = [
+            {
+                name: 'remote',
+                title: 'Remote',
+                commandName: 'remote',
+                icon: null,
+                getCommands: async ()=>[
+                        leaf({
+                            name: 'code',
+                            title: 'Code'
+                        })
+                    ]
+            }
+        ];
+        const request = resolver.resolve({
+            rootCommands,
+            filter: '',
+            path: [
+                {
+                    name: 'remote',
+                    title: 'Remote',
+                    commandName: 'remote'
+                }
+            ],
+            editor
+        });
+        const result = await request.promise;
+        expect(result.commands).toHaveLength(1);
+        expect(result.commands[0]?.command.name).toBe('code');
+    });
+    it('returns global leaf query matches with breadcrumbs', async ()=>{
+        const resolver = new CommandsResolver();
+        const rootCommands = [
+            {
+                name: 'insert',
+                title: 'Insert',
+                commandName: 'insert',
+                icon: null,
+                getCommands: ()=>[
+                        leaf({
+                            name: 'heading-1',
+                            title: 'Heading 1',
+                            commandName: 'heading1'
+                        }),
+                        leaf({
+                            name: 'code',
+                            title: 'Code',
+                            commandName: 'code'
+                        })
+                    ]
+            }
+        ];
+        const request = resolver.resolve({
+            rootCommands,
+            filter: 'code',
+            path: [],
+            editor
+        });
+        const result = await request.promise;
+        expect(result.commands).toHaveLength(1);
+        expect(result.commands[0]?.command.name).toBe('code');
+        expect(result.commands[0]?.breadcrumb).toBe('Insert');
+    });
+    it('returns matching submenu commands in query mode', async ()=>{
+        const resolver = new CommandsResolver();
+        const rootCommands = [
+            {
+                name: 'advanced',
+                title: 'Advanced',
+                commandName: 'advanced',
+                icon: null,
+                getCommands: ()=>[
+                        leaf({
+                            name: 'code',
+                            title: 'Code'
+                        })
+                    ]
+            }
+        ];
+        const request = resolver.resolve({
+            rootCommands,
+            filter: 'adv',
+            path: [],
+            editor
+        });
+        const result = await request.promise;
+        expect(result.commands).toHaveLength(1);
+        expect(result.commands[0]?.command.name).toBe('advanced');
+        expect(result.commands[0]?.isSubmenu).toBe(true);
+    });
+    it('ignores stale out-of-order async responses', async ()=>{
+        const resolver = new CommandsResolver();
+        const searchA = deferred();
+        const searchB = deferred();
+        const rootCommands = [
+            {
+                name: 'remote',
+                title: 'Remote',
+                commandName: 'remote',
+                icon: null,
+                getCommands: ({ query })=>{
+                    if ('a' === query) return searchA.promise;
+                    return searchB.promise;
+                }
+            }
+        ];
+        const firstRequest = resolver.resolve({
+            rootCommands,
+            filter: 'a',
+            path: [],
+            editor
+        });
+        const secondRequest = resolver.resolve({
+            rootCommands,
+            filter: 'b',
+            path: [],
+            editor
+        });
+        searchB.resolve([
+            leaf({
+                name: 'b',
+                title: 'Result B',
+                commandName: 'b'
+            })
+        ]);
+        const secondResult = await secondRequest.promise;
+        expect(secondResult.commands.map((item)=>item.command.name)).toEqual([
+            'b'
+        ]);
+        searchA.resolve([
+            leaf({
+                name: 'a',
+                title: 'Result A',
+                commandName: 'a'
+            })
+        ]);
+        const firstResult = await firstRequest.promise;
+        expect(firstResult.commands.map((item)=>item.command.name)).toEqual([
+            'b'
+        ]);
+        expect(resolver.getState().commands.map((item)=>item.command.name)).toEqual([
+            'b'
+        ]);
+    });
+    it('clears visible commands while loading new results', async ()=>{
+        const resolver = new CommandsResolver();
+        const remoteDeferred = deferred();
+        const rootCommands = [
+            leaf({
+                name: 'paragraph',
+                title: 'Paragraph'
+            }),
+            {
+                name: 'remote',
+                title: 'Remote',
+                commandName: 'remote',
+                icon: null,
+                getCommands: ({ query })=>{
+                    if (query) return remoteDeferred.promise;
+                    return [
+                        leaf({
+                            name: 'code',
+                            title: 'Code'
+                        })
+                    ];
+                }
+            }
+        ];
+        const initial = await resolver.resolve({
+            rootCommands,
+            filter: '',
+            path: [],
+            editor
+        }).promise;
+        const loadingRequest = resolver.resolve({
+            rootCommands,
+            filter: 'code',
+            path: [],
+            editor
+        });
+        expect(loadingRequest.state.isLoading).toBe(true);
+        expect(initial.commands.length).toBeGreaterThan(0);
+        expect(loadingRequest.state.commands).toEqual([]);
+        remoteDeferred.resolve([
+            leaf({
+                name: 'code',
+                title: 'Code'
+            })
+        ]);
+        const settled = await loadingRequest.promise;
+        expect(settled.isLoading).toBe(false);
+        expect(settled.commands).toHaveLength(1);
+        expect(settled.commands[0]?.command.name).toBe('code');
+    });
+});

package/dist/plugins/CommandsPlugin/styles.module.js

@@ -4,6 +4,11 @@ const styles_module = {
     button: "button-yrhMLR",
     active: "active-Is5D6b",
     icon: "icon-Xca6dM",
+    content: "content-VZW7lK",
+    breadcrumb: "breadcrumb-Jr0wXh",
+    submenu: "submenu-zNsqOg",
+    path: "path-fYY_14",
+    systemRow: "systemRow-ln5twO",
     backdrop: "backdrop-lw7AjW"
 };
 export { styles_module as default };

package/dist/plugins/CommandsPlugin/styles_module.css

@@ -2,20 +2,24 @@
   color: var(--kona-editor-text-color);
   z-index: 31;
   opacity: 0;
+  transform-origin: 0 0;
   background-color: var(--kona-editor-background-color, #fff);
   border: 1px solid var(--kona-editor-border-color, #ddd);
+  will-change: transform, opacity;
+  contain: layout paint style;
+  backface-visibility: hidden;
   border-radius: 4px;
   flex-direction: column;
   max-height: 200px;
   margin-top: -6px;
   font-size: 12px;
-  transition: transform .25s;
+  transition: transform .12s, opacity .12s;
   display: flex;
-  position: absolute;
-  top: -100000px;
-  left: -100000px;
+  position: fixed;
+  top: 0;
+  left: 0;
   overflow-y: auto;
-  transform: scale(.9);
+  transform: translate3d(-100000px, -100000px, 0)scale(.95);
   box-shadow: 0 1px 3px #00000006;
 
   &::-webkit-scrollbar {
@@ -35,14 +39,16 @@
 .button-yrhMLR {
   box-sizing: border-box;
   cursor: pointer;
-  height: 40px;
+  min-height: 40px;
   color: var(--kona-editor-text-color, #444);
+  text-align: left;
   background: none;
   border: none;
   align-items: center;
   column-gap: 8px;
+  width: 100%;
   padding: 8px;
-  display: inline-flex;
+  display: flex;
 }
 
 .button-yrhMLR:hover, .active-Is5D6b {
@@ -63,6 +69,40 @@
   display: inline-flex;
 }
 
+.content-VZW7lK {
+  flex-direction: column;
+  flex: 1;
+  row-gap: 2px;
+  min-width: 0;
+  display: flex;
+}
+
+.breadcrumb-Jr0wXh {
+  color: var(--kona-editor-secondary-text-color, #777);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  overflow: hidden;
+}
+
+.submenu-zNsqOg {
+  color: var(--kona-editor-secondary-text-color, #777);
+}
+
+.path-fYY_14 {
+  color: var(--kona-editor-secondary-text-color, #777);
+  border-bottom: 1px solid var(--kona-editor-border-color, #ddd);
+  padding: 6px 8px;
+  font-size: 11px;
+}
+
+.systemRow-ln5twO {
+  min-height: 32px;
+  color: var(--kona-editor-secondary-text-color, #777);
+  padding: 8px;
+  font-size: 11px;
+}
+
 .backdrop-lw7AjW {
   z-index: 30;
   background-color: #0000;

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

@@ -9,14 +9,26 @@ export type Options = {
 export type CommandsStore = {
     isOpen: boolean;
     filter: boolean | string;
-    commands: Command[];
+    openId: number;
+};
+export type CommandPathEntry = {
+    name: string;
+    title: string;
+    commandName: string;
+};
+export type GetCommandsContext = {
+    query: string;
+    editor: Editor;
+    path: CommandPathEntry[];
+    parent: Command;
 };
 export type Command = {
     name: string;
     title: string;
     commandName: string;
     icon: ReactNode;
-    action: (actions: Actions, editor: Editor) => void;
+    action?: (actions: Actions, editor: Editor) => void;
+    getCommands?: (context: GetCommandsContext) => Command[] | Promise<Command[]>;
 };
 export type Actions = {
     removeCommand: () => void;

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

@@ -0,0 +1,12 @@
+import type { Editor } from 'slate';
+import { type ResolvedCommandsState } from './resolveCommands';
+import type { Command, CommandPathEntry } from './types';
+type Params = {
+    rootCommands: Command[];
+    filter: boolean | string;
+    path: CommandPathEntry[];
+    editor: Editor;
+    isOpen: boolean;
+};
+export declare const useResolvedCommands: (params: Params) => ResolvedCommandsState;
+export {};

package/dist/plugins/CommandsPlugin/useResolvedCommands.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from "react";
+import { CommandsResolver } from "./resolveCommands.js";
+const DEBOUNCE_TIMEOUT = 150;
+const EMPTY_STATE = {
+    commands: [],
+    isLoading: false,
+    isError: false
+};
+const useResolvedCommands = (params)=>{
+    const { rootCommands, filter, path, editor, isOpen } = params;
+    const resolverRef = useRef(new CommandsResolver());
+    const [state, setState] = useState(EMPTY_STATE);
+    const query = 'string' == typeof filter ? filter : '';
+    useEffect(()=>{
+        if (!isOpen || false === filter) return void setState(EMPTY_STATE);
+        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;
+};
+export { useResolvedCommands };

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

@@ -1,3 +1,4 @@
+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';
@@ -12,18 +13,25 @@ type Options = {
         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>;
         };
     };
 };
 export declare class DnDPlugin implements IPlugin {
     private options;
+    store: MapStore<{
+        selected: Set<string>;
+    }>;
     constructor(options: Options);
+    handleToggleSelected: (nodeId: string) => void;
     static DND_BLOCK_ELEMENT: string;
     handlers: {
         onDrop: (event: DragEvent) => void;