@use-kona/editor 0.1.17 → 0.1.18

package/dist/plugins/CommandsPlugin/Menu.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,
@@ -67,9 +66,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(()=>{
@@ -199,7 +197,6 @@ const Menu = (props)=>{
     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", {
@@ -216,10 +213,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",
@@ -271,17 +264,11 @@ const Menu = (props)=>{
                                     className: styles_module.icon,
                                     children: entry.command.command.icon
                                 }),
-                                /*#__PURE__*/ jsxs("span", {
+                                /*#__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
-                                        })
-                                    ]
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        children: entry.command.command.title
+                                    })
                                 }),
                                 entry.command.isSubmenu && isBrowseMode && /*#__PURE__*/ jsx("span", {
                                     className: styles_module.submenu,

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/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.18",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/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">

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