@use-kona/editor 0.1.17 → 0.1.19

package/dist/plugins/CommandsPlugin/Menu.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "@nanostores/react";
 import clsx from "clsx";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Editor } from "slate";
+import { Editor, Transforms } 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";
@@ -23,7 +23,6 @@ const Menu = (props)=>{
         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,
@@ -48,6 +47,26 @@ const Menu = (props)=>{
         isBrowseMode,
         path.length
     ]);
+    const enterSubmenu = useCallback((nextPath)=>{
+        if (!isBrowseMode && 'string' == typeof store.filter && store.filter) {
+            const focus = selection?.focus ?? editor.selection?.focus;
+            if (focus) Transforms["delete"](editor, {
+                at: focus,
+                distance: store.filter.length,
+                reverse: true,
+                unit: 'character'
+            });
+            $store.setKey('filter', '');
+        }
+        setPath(nextPath);
+        setActive(0);
+    }, [
+        editor,
+        isBrowseMode,
+        selection,
+        store.filter,
+        $store
+    ]);
     const actions = useMemo(()=>({
             removeCommand: removeCommand(editor, selection, store.filter),
             set: set(editor, selection, store.filter),
@@ -67,9 +86,8 @@ const Menu = (props)=>{
         store.openId
     ]);
     useEffect(()=>{
-        if (false === store.filter || isSearchMode) setActive(0);
+        if (false === store.filter || 'string' == typeof store.filter && '' !== store.filter) setActive(0);
     }, [
-        isSearchMode,
         store.filter
     ]);
     useEffect(()=>{
@@ -141,9 +159,7 @@ const Menu = (props)=>{
                         if (!entry || 'command' !== entry.type || !entry.command.isSubmenu) return;
                         event.preventDefault();
                         event.stopPropagation();
-                        setPath(entry.command.path);
-                        if (!isBrowseMode) $store.setKey('filter', '');
-                        setActive(0);
+                        enterSubmenu(entry.command.path);
                         break;
                     }
                 case 'ArrowLeft':
@@ -166,9 +182,7 @@ const Menu = (props)=>{
                         }
                         if ('command' !== entry.type) break;
                         if (entry.command.isSubmenu) {
-                            setPath(entry.command.path);
-                            if (!isBrowseMode) $store.setKey('filter', '');
-                            setActive(0);
+                            enterSubmenu(entry.command.path);
                             break;
                         }
                         entry.command.command.action?.(actions, editor);
@@ -191,15 +205,15 @@ const Menu = (props)=>{
         active,
         entries,
         editor,
+        enterSubmenu,
         isBrowseMode,
         path.length,
         store.isOpen,
         $store
     ]);
-    const hasRows = entries.length > 0 || isLoading || isError;
+    const hasRows = entries.length > 0 || 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", {
@@ -216,10 +230,6 @@ const Menu = (props)=>{
                     event.preventDefault();
                 },
                 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",
@@ -247,7 +257,7 @@ const Menu = (props)=>{
                                 })
                             ]
                         }, "back");
-                        return /*#__PURE__*/ jsxs("button", {
+                        return /*#__PURE__*/ jsx("button", {
                             type: "button",
                             ref: (element)=>{
                                 refs.current[index] = element;
@@ -257,64 +267,55 @@ const Menu = (props)=>{
                             }),
                             onMouseDown: (event)=>{
                                 event.preventDefault();
-                                if (entry.command.isSubmenu) {
-                                    setPath(entry.command.path);
-                                    if (!isBrowseMode) $store.setKey('filter', '');
-                                    setActive(0);
-                                    return;
-                                }
+                                if (entry.command.isSubmenu) return void enterSubmenu(entry.command.path);
                                 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.render?.({
+                                command: entry.command.command,
+                                isSubmenu: entry.command.isSubmenu,
+                                isActive: index === active
+                            }) ?? /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: styles_module.icon,
+                                        children: entry.command.command.icon
+                                    }),
+                                    /*#__PURE__*/ jsx("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.isSubmenu && /*#__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"

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

@@ -4,7 +4,6 @@ export type ResolvedCommand = {
     command: Command;
     key: string;
     path: CommandPathEntry[];
-    breadcrumb: string;
     isSubmenu: boolean;
 };
 export type ResolveCommandsParams = {

package/dist/plugins/CommandsPlugin/resolveCommands.js

@@ -18,17 +18,21 @@ const toResolvedCommand = (command, parentPath)=>{
         command,
         path,
         key: pathToKey(path),
-        breadcrumb: parentPath.map((item)=>item.title).join(' / '),
         isSubmenu: Boolean(command.getCommands)
     };
 };
-const resolveBrowseCommands = async (params, resolveChildCommands)=>{
+const resolveCurrentLevelCommands = async (params, resolveChildCommands, queryForCurrentLevel)=>{
     const { rootCommands, path, editor } = params;
     let currentCommands = rootCommands;
     let currentPath = [];
-    for (const item of path){
+    for(let index = 0; index < path.length; index++){
+        const item = path[index];
+        const isLastPathItem = index === path.length - 1;
         const command = currentCommands.find((entry)=>entry.name === item.name);
-        if (!command?.getCommands) return [];
+        if (!command?.getCommands) return {
+            commands: [],
+            path: currentPath
+        };
         currentPath = [
             ...currentPath,
             toPathEntry(command)
@@ -36,37 +40,24 @@ const resolveBrowseCommands = async (params, resolveChildCommands)=>{
         currentCommands = await resolveChildCommands({
             command,
             path: currentPath,
-            query: '',
+            query: isLastPathItem ? queryForCurrentLevel : '',
             editor
         });
     }
-    return currentCommands.map((command)=>toResolvedCommand(command, currentPath));
+    return {
+        commands: currentCommands,
+        path: currentPath
+    };
+};
+const resolveBrowseCommands = async (params, resolveChildCommands)=>{
+    const currentLevel = await resolveCurrentLevelCommands(params, resolveChildCommands, '');
+    return currentLevel.commands.map((command)=>toResolvedCommand(command, currentLevel.path));
 };
 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;
+    const { filter } = params;
+    const currentLevel = await resolveCurrentLevelCommands(params, resolveChildCommands, filter);
+    const matchedCommands = currentLevel.commands.filter((command)=>isCommandMatchesQuery(command, filter));
+    return matchedCommands.map((command)=>toResolvedCommand(command, currentLevel.path));
 };
 class CommandsResolver {
     cache = new Map();

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

@@ -110,7 +110,7 @@ describe('CommandsResolver', ()=>{
         expect(result.commands).toHaveLength(1);
         expect(result.commands[0]?.command.name).toBe('code');
     });
-    it('returns global leaf query matches with breadcrumbs', async ()=>{
+    it('searches only root level when path is empty', async ()=>{
         const resolver = new CommandsResolver();
         const rootCommands = [
             {
@@ -120,14 +120,37 @@ describe('CommandsResolver', ()=>{
                 icon: null,
                 getCommands: ()=>[
                         leaf({
-                            name: 'heading-1',
-                            title: 'Heading 1',
-                            commandName: 'heading1'
-                        }),
+                            name: 'code',
+                            title: 'Code'
+                        })
+                    ]
+            },
+            leaf({
+                name: 'paragraph',
+                title: 'Paragraph'
+            })
+        ];
+        const request = resolver.resolve({
+            rootCommands,
+            filter: 'code',
+            path: [],
+            editor
+        });
+        const result = await request.promise;
+        expect(result.commands).toHaveLength(0);
+    });
+    it('searches only current nested level', async ()=>{
+        const resolver = new CommandsResolver();
+        const rootCommands = [
+            {
+                name: 'insert',
+                title: 'Insert',
+                commandName: 'insert',
+                icon: null,
+                getCommands: ()=>[
                         leaf({
                             name: 'code',
-                            title: 'Code',
-                            commandName: 'code'
+                            title: 'Code'
                         })
                     ]
             }
@@ -135,13 +158,18 @@ describe('CommandsResolver', ()=>{
         const request = resolver.resolve({
             rootCommands,
             filter: 'code',
-            path: [],
+            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('code');
-        expect(result.commands[0]?.breadcrumb).toBe('Insert');
     });
     it('returns matching submenu commands in query mode', async ()=>{
         const resolver = new CommandsResolver();
@@ -189,13 +217,25 @@ describe('CommandsResolver', ()=>{
         const firstRequest = resolver.resolve({
             rootCommands,
             filter: 'a',
-            path: [],
+            path: [
+                {
+                    name: 'remote',
+                    title: 'Remote',
+                    commandName: 'remote'
+                }
+            ],
             editor
         });
         const secondRequest = resolver.resolve({
             rootCommands,
             filter: 'b',
-            path: [],
+            path: [
+                {
+                    name: 'remote',
+                    title: 'Remote',
+                    commandName: 'remote'
+                }
+            ],
             editor
         });
         searchB.resolve([
@@ -257,7 +297,13 @@ describe('CommandsResolver', ()=>{
         const loadingRequest = resolver.resolve({
             rootCommands,
             filter: 'code',
-            path: [],
+            path: [
+                {
+                    name: 'remote',
+                    title: 'Remote',
+                    commandName: 'remote'
+                }
+            ],
             editor
         });
         expect(loadingRequest.state.isLoading).toBe(true);

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

@@ -5,9 +5,7 @@ const styles_module = {
     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"
 };

package/dist/plugins/CommandsPlugin/styles_module.css

@@ -8,7 +8,7 @@
   will-change: transform, opacity;
   contain: layout paint style;
   backface-visibility: hidden;
-  border-radius: 4px;
+  border-radius: 8px;
   flex-direction: column;
   max-height: 200px;
   margin-top: -6px;
@@ -70,32 +70,16 @@
 }
 
 .content-VZW7lK {
-  flex-direction: column;
+  flex-direction: row;
   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);

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

@@ -29,6 +29,11 @@ export type Command = {
     icon: ReactNode;
     action?: (actions: Actions, editor: Editor) => void;
     getCommands?: (context: GetCommandsContext) => Command[] | Promise<Command[]>;
+    render?: (params: {
+        command: Command;
+        isSubmenu: boolean;
+        isActive: boolean;
+    }) => ReactNode;
 };
 export type Actions = {
     removeCommand: () => void;

package/dist/plugins/CommandsPlugin/useResolvedCommands.js

@@ -10,14 +10,35 @@ const useResolvedCommands = (params)=>{
     const { rootCommands, filter, path, editor, isOpen } = params;
     const resolverRef = useRef(new CommandsResolver());
     const [state, setState] = useState(EMPTY_STATE);
+    const prevIsOpenRef = useRef(false);
+    const prevPathKeyRef = useRef('');
+    const prevQueryRef = useRef('');
     const query = 'string' == typeof filter ? filter : '';
     useEffect(()=>{
-        if (!isOpen || false === filter) return void setState(EMPTY_STATE);
-        setState({
+        if (!isOpen || false === filter) {
+            setState(EMPTY_STATE);
+            prevIsOpenRef.current = false;
+            prevPathKeyRef.current = '';
+            prevQueryRef.current = '';
+            return;
+        }
+        const pathKey = path.map((item)=>item.name).join('/');
+        const isNewSession = !prevIsOpenRef.current;
+        const isPathChanged = !isNewSession && prevPathKeyRef.current !== pathKey;
+        const isQueryChanged = !isNewSession && prevQueryRef.current !== query;
+        if (isNewSession || isPathChanged) setState({
             commands: [],
             isLoading: true,
             isError: false
         });
+        else if (isQueryChanged) setState((state)=>({
+                ...state,
+                isLoading: true,
+                isError: false
+            }));
+        prevIsOpenRef.current = true;
+        prevPathKeyRef.current = pathKey;
+        prevQueryRef.current = query;
         const timeout = window.setTimeout(()=>{
             const request = resolverRef.current.resolve({
                 rootCommands,
@@ -25,7 +46,6 @@ const useResolvedCommands = (params)=>{
                 path,
                 editor
             });
-            setState(request.state);
             request.promise.then((resolved)=>{
                 setState(resolved);
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/CommandsPlugin/Menu.tsx

@@ -4,6 +4,7 @@ import type { MapStore } from 'nanostores';
 import {
   type CSSProperties,
   type ReactNode,
+  useCallback,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -11,7 +12,7 @@ import {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
-import { Editor } from 'slate';
+import { Editor, Transforms } from 'slate';
 import { useFocused, useSlate, useSlateSelection } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import { insert, insertText, removeCommand, set, wrap } from './actions';
@@ -44,7 +45,6 @@ export const Menu = (props: Props) => {
   });
 
   const isBrowseMode = typeof store.filter === 'string' && store.filter === '';
-  const isSearchMode = typeof store.filter === 'string' && store.filter !== '';
 
   const { commands, isLoading, isError } = useResolvedCommands({
     rootCommands,
@@ -66,6 +66,29 @@ export const Menu = (props: Props) => {
     return commandEntries;
   }, [commands, isBrowseMode, path.length]);
 
+  const enterSubmenu = useCallback(
+    (nextPath: CommandPathEntry[]) => {
+      if (!isBrowseMode && typeof store.filter === 'string' && store.filter) {
+        const focus = selection?.focus ?? editor.selection?.focus;
+
+        if (focus) {
+          Transforms.delete(editor, {
+            at: focus,
+            distance: store.filter.length,
+            reverse: true,
+            unit: 'character',
+          });
+        }
+
+        $store.setKey('filter', '');
+      }
+
+      setPath(nextPath);
+      setActive(0);
+    },
+    [editor, isBrowseMode, selection, store.filter, $store],
+  );
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about those deps
   const actions = useMemo(() => {
     return {
@@ -87,10 +110,13 @@ export const Menu = (props: Props) => {
   }, [store.isOpen, store.openId]);
 
   useEffect(() => {
-    if (store.filter === false || isSearchMode) {
+    if (
+      store.filter === false ||
+      (typeof store.filter === 'string' && store.filter !== '')
+    ) {
       setActive(0);
     }
-  }, [isSearchMode, store.filter]);
+  }, [store.filter]);
 
   useEffect(() => {
     if (!entries.length) {
@@ -183,11 +209,7 @@ export const Menu = (props: Props) => {
 
           event.preventDefault();
           event.stopPropagation();
-          setPath(entry.command.path);
-          if (!isBrowseMode) {
-            $store.setKey('filter', '');
-          }
-          setActive(0);
+          enterSubmenu(entry.command.path);
           break;
         }
         case 'ArrowLeft': {
@@ -221,11 +243,7 @@ export const Menu = (props: Props) => {
           }
 
           if (entry.command.isSubmenu) {
-            setPath(entry.command.path);
-            if (!isBrowseMode) {
-              $store.setKey('filter', '');
-            }
-            setActive(0);
+            enterSubmenu(entry.command.path);
             break;
           }
 
@@ -252,13 +270,14 @@ export const Menu = (props: Props) => {
     active,
     entries,
     editor,
+    enterSubmenu,
     isBrowseMode,
     path.length,
     store.isOpen,
     $store,
   ]);
 
-  const hasRows = entries.length > 0 || isLoading || isError;
+  const hasRows = entries.length > 0 || isError;
 
   if (store.filter === false || !hasRows) {
     return null;
@@ -268,8 +287,6 @@ export const Menu = (props: Props) => {
     return null;
   }
 
-  const pathLabel = path.map((item) => item.title).join(' / ');
-
   return createPortal(
     renderMenu(
       <>
@@ -289,9 +306,6 @@ export const Menu = (props: Props) => {
             event.preventDefault();
           }}
         >
-          {isBrowseMode && pathLabel && (
-            <div className={styles.path}>{pathLabel}</div>
-          )}
           {entries.map((entry, index) => {
             if (entry.type === 'back') {
               return (
@@ -331,11 +345,7 @@ export const Menu = (props: Props) => {
                 onMouseDown={(event) => {
                   event.preventDefault();
                   if (entry.command.isSubmenu) {
-                    setPath(entry.command.path);
-                    if (!isBrowseMode) {
-                      $store.setKey('filter', '');
-                    }
-                    setActive(0);
+                    enterSubmenu(entry.command.path);
                     return;
                   }
 
@@ -343,39 +353,41 @@ export const Menu = (props: Props) => {
                   $store.setKey('isOpen', false);
                 }}
               >
-                <span className={styles.icon}>
-                  {entry.command.command.icon}
-                </span>
-                <span className={styles.content}>
-                  <span>{entry.command.command.title}</span>
-                  {isSearchMode && entry.command.breadcrumb && (
-                    <span className={styles.breadcrumb}>
-                      {entry.command.breadcrumb}
+                {entry.command.command.render?.({
+                  command: entry.command.command,
+                  isSubmenu: entry.command.isSubmenu,
+                  isActive: index === active,
+                }) ?? (
+                  <>
+                    <span className={styles.icon}>
+                      {entry.command.command.icon}
                     </span>
-                  )}
-                </span>
-                {entry.command.isSubmenu && isBrowseMode && (
-                  <span className={styles.submenu} aria-hidden="true">
-                    <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"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M9 6l6 6l-6 6" />
-                    </svg>
-                  </span>
+                    <span className={styles.content}>
+                      <span>{entry.command.command.title}</span>
+                    </span>
+                    {entry.command.isSubmenu && (
+                      <span className={styles.submenu} aria-hidden="true">
+                        <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"
+                        >
+                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                          <path d="M9 6l6 6l-6 6" />
+                        </svg>
+                      </span>
+                    )}
+                  </>
                 )}
               </button>
             );
           })}
-          {isLoading && <div className={styles.systemRow}>Loading...</div>}
           {isError && (
             <div className={styles.systemRow}>Could not load commands</div>
           )}

package/src/plugins/CommandsPlugin/resolveCommands.spec.ts

@@ -102,7 +102,7 @@ describe('CommandsResolver', () => {
     expect(result.commands[0]?.command.name).toBe('code');
   });
 
-  it('returns global leaf query matches with breadcrumbs', async () => {
+  it('searches only root level when path is empty', async () => {
     const resolver = new CommandsResolver();
     const rootCommands: Command[] = [
       {
@@ -110,15 +110,9 @@ describe('CommandsResolver', () => {
         title: 'Insert',
         commandName: 'insert',
         icon: null,
-        getCommands: () => [
-          leaf({
-            name: 'heading-1',
-            title: 'Heading 1',
-            commandName: 'heading1',
-          }),
-          leaf({ name: 'code', title: 'Code', commandName: 'code' }),
-        ],
+        getCommands: () => [leaf({ name: 'code', title: 'Code' })],
       },
+      leaf({ name: 'paragraph', title: 'Paragraph' }),
     ];
 
     const request = resolver.resolve({
@@ -130,9 +124,32 @@ describe('CommandsResolver', () => {
 
     const result = await request.promise;
 
+    expect(result.commands).toHaveLength(0);
+  });
+
+  it('searches only current nested level', async () => {
+    const resolver = new CommandsResolver();
+    const rootCommands: Command[] = [
+      {
+        name: 'insert',
+        title: 'Insert',
+        commandName: 'insert',
+        icon: null,
+        getCommands: () => [leaf({ name: 'code', title: 'Code' })],
+      },
+    ];
+
+    const request = resolver.resolve({
+      rootCommands,
+      filter: 'code',
+      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('code');
-    expect(result.commands[0]?.breadcrumb).toBe('Insert');
   });
 
   it('returns matching submenu commands in query mode', async () => {
@@ -185,13 +202,13 @@ describe('CommandsResolver', () => {
     const firstRequest = resolver.resolve({
       rootCommands,
       filter: 'a',
-      path: [],
+      path: [{ name: 'remote', title: 'Remote', commandName: 'remote' }],
       editor,
     });
     const secondRequest = resolver.resolve({
       rootCommands,
       filter: 'b',
-      path: [],
+      path: [{ name: 'remote', title: 'Remote', commandName: 'remote' }],
       editor,
     });
 
@@ -243,7 +260,7 @@ describe('CommandsResolver', () => {
     const loadingRequest = resolver.resolve({
       rootCommands,
       filter: 'code',
-      path: [],
+      path: [{ name: 'remote', title: 'Remote', commandName: 'remote' }],
       editor,
     });
 

package/src/plugins/CommandsPlugin/resolveCommands.ts

@@ -16,7 +16,6 @@ export type ResolvedCommand = {
   command: Command;
   key: string;
   path: CommandPathEntry[];
-  breadcrumb: string;
   isSubmenu: boolean;
 };
 
@@ -84,36 +83,57 @@ const toResolvedCommand = (
     command,
     path,
     key: pathToKey(path),
-    breadcrumb: parentPath.map((item) => item.title).join(' / '),
     isSubmenu: Boolean(command.getCommands),
   };
 };
 
-const resolveBrowseCommands = async (
+const resolveCurrentLevelCommands = async (
   params: ResolveCommandsParams,
   resolveChildCommands: ResolveChildCommands,
+  queryForCurrentLevel: string,
 ) => {
   const { rootCommands, path, editor } = params;
   let currentCommands = rootCommands;
   let currentPath: CommandPathEntry[] = [];
 
-  for (const item of path) {
+  for (let index = 0; index < path.length; index++) {
+    const item = path[index];
+    const isLastPathItem = index === path.length - 1;
     const command = currentCommands.find((entry) => entry.name === item.name);
     if (!command?.getCommands) {
-      return [];
+      return {
+        commands: [],
+        path: currentPath,
+      };
     }
 
     currentPath = [...currentPath, toPathEntry(command)];
     currentCommands = await resolveChildCommands({
       command,
       path: currentPath,
-      query: '',
+      query: isLastPathItem ? queryForCurrentLevel : '',
       editor,
     });
   }
 
-  return currentCommands.map((command) =>
-    toResolvedCommand(command, currentPath),
+  return {
+    commands: currentCommands,
+    path: currentPath,
+  };
+};
+
+const resolveBrowseCommands = async (
+  params: ResolveCommandsParams,
+  resolveChildCommands: ResolveChildCommands,
+) => {
+  const currentLevel = await resolveCurrentLevelCommands(
+    params,
+    resolveChildCommands,
+    '',
+  );
+
+  return currentLevel.commands.map((command) =>
+    toResolvedCommand(command, currentLevel.path),
   );
 };
 
@@ -121,38 +141,20 @@ const resolveSearchCommands = async (
   params: ResolveCommandsParams,
   resolveChildCommands: ResolveChildCommands,
 ) => {
-  const { rootCommands, filter, editor } = params;
-  const commands: ResolvedCommand[] = [];
-
-  const walk = async (
-    levelCommands: Command[],
-    parentPath: CommandPathEntry[],
-  ): Promise<void> => {
-    for (const command of levelCommands) {
-      if (command.getCommands) {
-        if (isCommandMatchesQuery(command, filter)) {
-          commands.push(toResolvedCommand(command, parentPath));
-        }
+  const { filter } = params;
+  const currentLevel = await resolveCurrentLevelCommands(
+    params,
+    resolveChildCommands,
+    filter,
+  );
 
-        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));
-      }
-    }
-  };
+  const matchedCommands = currentLevel.commands.filter((command) =>
+    isCommandMatchesQuery(command, filter),
+  );
 
-  await walk(rootCommands, []);
-  return commands;
+  return matchedCommands.map((command) =>
+    toResolvedCommand(command, currentLevel.path),
+  );
 };
 
 export class CommandsResolver {

package/src/plugins/CommandsPlugin/styles.module.css

@@ -11,7 +11,7 @@
   background-color: var(--kona-editor-background-color, #fff);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);
   border: 1px solid var(--kona-editor-border-color, #ddd);
-  border-radius: 4px;
+  border-radius: 8px;
   transition:
     transform 0.12s ease,
     opacity 0.12s ease;
@@ -79,29 +79,13 @@
   display: flex;
   flex: 1;
   min-width: 0;
-  flex-direction: column;
-  row-gap: 2px;
-}
-
-.breadcrumb {
-  font-size: 11px;
-  color: var(--kona-editor-secondary-text-color, #777);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  flex-direction: row;
 }
 
 .submenu {
   color: var(--kona-editor-secondary-text-color, #777);
 }
 
-.path {
-  padding: 6px 8px;
-  font-size: 11px;
-  color: var(--kona-editor-secondary-text-color, #777);
-  border-bottom: 1px solid var(--kona-editor-border-color, #ddd);
-}
-
 .systemRow {
   min-height: 32px;
   padding: 8px;

package/src/plugins/CommandsPlugin/types.ts

@@ -35,6 +35,11 @@ export type Command = {
   icon: ReactNode;
   action?: (actions: Actions, editor: Editor) => void;
   getCommands?: (context: GetCommandsContext) => Command[] | Promise<Command[]>;
+  render?: (params: {
+    command: Command;
+    isSubmenu: boolean;
+    isActive: boolean;
+  }) => ReactNode;
 };
 
 export type Actions = {

package/src/plugins/CommandsPlugin/useResolvedCommands.ts

@@ -26,19 +26,42 @@ 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 prevIsOpenRef = useRef(false);
+  const prevPathKeyRef = useRef('');
+  const prevQueryRef = useRef('');
   const query = typeof filter === 'string' ? filter : '';
 
   useEffect(() => {
     if (!isOpen || filter === false) {
       setState(EMPTY_STATE);
+      prevIsOpenRef.current = false;
+      prevPathKeyRef.current = '';
+      prevQueryRef.current = '';
       return;
     }
 
-    setState({
-      commands: [],
-      isLoading: true,
-      isError: false,
-    });
+    const pathKey = path.map((item) => item.name).join('/');
+    const isNewSession = !prevIsOpenRef.current;
+    const isPathChanged = !isNewSession && prevPathKeyRef.current !== pathKey;
+    const isQueryChanged = !isNewSession && prevQueryRef.current !== query;
+
+    if (isNewSession || isPathChanged) {
+      setState({
+        commands: [],
+        isLoading: true,
+        isError: false,
+      });
+    } else if (isQueryChanged) {
+      setState((state) => ({
+        ...state,
+        isLoading: true,
+        isError: false,
+      }));
+    }
+
+    prevIsOpenRef.current = true;
+    prevPathKeyRef.current = pathKey;
+    prevQueryRef.current = query;
 
     const timeout = window.setTimeout(
       () => {
@@ -49,8 +72,6 @@ export const useResolvedCommands = (params: Params) => {
           editor,
         });
 
-        setState(request.state);
-
         request.promise.then((resolved) => {
           setState(resolved);
         });