feat(commands): scope search to current level and simplify menu UI

Author: eden-lane

packages/editor/package.json

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

packages/editor/src/plugins/CommandsPlugin/Menu.tsx

@@ -44,7 +44,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,
@@ -87,10 +86,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) {
@@ -268,8 +270,6 @@ export const Menu = (props: Props) => {
     return null;
   }
 
-  const pathLabel = path.map((item) => item.title).join(' / ');
-
   return createPortal(
     renderMenu(
       <>
@@ -289,9 +289,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 (
@@ -348,11 +345,6 @@ export const Menu = (props: Props) => {
                 </span>
                 <span className={styles.content}>
                   <span>{entry.command.command.title}</span>
-                  {isSearchMode && entry.command.breadcrumb && (
-                    <span className={styles.breadcrumb}>
-                      {entry.command.breadcrumb}
-                    </span>
-                  )}
                 </span>
                 {entry.command.isSubmenu && isBrowseMode && (
                   <span className={styles.submenu} aria-hidden="true">

packages/editor/src/plugins/CommandsPlugin/resolveCommands.spec.ts

@@ -102,23 +102,17 @@ 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[] = [
       {
         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' }),
-        ],
+        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,
     });
 

packages/editor/src/plugins/CommandsPlugin/resolveCommands.ts

@@ -16,7 +16,6 @@ export type ResolvedCommand = {
   command: Command;
   key: string;
   path: CommandPathEntry[];
-  breadcrumb: string;
   isSubmenu: boolean;
 };
 
@@ -84,75 +83,78 @@ 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),
   );
 };
 
 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 {

packages/editor/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;

packages/editor/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);
         });