chore: clean code

libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx

@@ -1,9 +1,8 @@
 import { StrictMode } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 
 import { BasePlugin } from '../../base-plugin';
-import { CommandMenu } from './Menu';
 import { PluginRenderRoot } from '../../utils';
+import { CommandMenu } from './Menu';
 
 const PLUGIN_NAME = 'command-menu';
 

libs/components/editor-plugins/src/menu/command-menu/Container.tsx

@@ -1,28 +1,24 @@
 import React, {
-    useEffect,
-    useState,
-    useMemo,
     useCallback,
+    useEffect,
+    useMemo,
     useRef,
+    useState,
 } from 'react';
-import style9 from 'style9';
 
-import { BlockFlavorKeys } from '@toeverything/datasource/db-service';
-import { Virgo, PluginHooks, HookType } from '@toeverything/framework/virgo';
 import {
     CommonList,
-    CommonListItem,
     commonListContainer,
+    CommonListItem,
 } from '@toeverything/components/common';
+import { BlockFlavorKeys } from '@toeverything/datasource/db-service';
+import { HookType, PluginHooks, Virgo } from '@toeverything/framework/virgo';
 import { domToRect } from '@toeverything/utils';
 
-import { MenuCategories } from './Categories';
+import { styled } from '@toeverything/components/ui';
-import { menuItemsMap, CommandMenuCategories } from './config';
 import { QueryResult } from '../../search';
-import {
+import { MenuCategories } from './Categories';
-    MuiClickAwayListener as ClickAwayListener,
+import { CommandMenuCategories, menuItemsMap } from './config';
-    styled,
-} from '@toeverything/components/ui';
 
 const RootContainer = styled('div')(({ theme }) => {
     return {
@@ -134,7 +130,6 @@ export const CommandMenuContainer = ({
 
     const handleClickUp = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (isShow && types && event.code === 'ArrowUp') {
             event.preventDefault();
             if (!currentItem && types.length) {
                 setCurrentItem(types[types.length - 1]);
@@ -146,14 +141,12 @@ export const CommandMenuContainer = ({
                     setCurrentItem(types[idx - 1]);
                 }
             }
-            }
         },
-        [isShow, types, currentItem]
+        [types, currentItem]
     );
 
     const handleClickDown = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (isShow && types && event.code === 'ArrowDown') {
             event.preventDefault();
             if (!currentItem && types.length) {
                 setCurrentItem(types[0]);
@@ -165,28 +158,44 @@ export const CommandMenuContainer = ({
                     setCurrentItem(types[idx + 1]);
                 }
             }
-            }
         },
-        [isShow, types, currentItem]
+        [types, currentItem]
     );
 
     const handleClickEnter = useCallback(
         async (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (isShow && event.code === 'Enter' && currentItem) {
             event.preventDefault();
             onSelected && onSelected(currentItem);
-            }
         },
-        [isShow, currentItem, onSelected]
+        [currentItem, onSelected]
     );
 
     const handleKeyDown = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (!isShow) {
+                return;
+            }
+            if (types && event.code === 'ArrowUp') {
                 handleClickUp(event);
+                return;
+            }
+            if (types && event.code === 'ArrowDown') {
                 handleClickDown(event);
+                return;
+            }
+            if (event.code === 'Enter' && currentItem) {
                 handleClickEnter(event);
+                return;
+            }
         },
-        [handleClickUp, handleClickDown, handleClickEnter]
+        [
+            isShow,
+            types,
+            currentItem,
+            handleClickUp,
+            handleClickDown,
+            handleClickEnter,
+        ]
     );
 
     useEffect(() => {

libs/components/editor-plugins/src/menu/command-menu/Menu.tsx

@@ -212,7 +212,7 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
     const handleSelected = async (type: BlockFlavorKeys | string) => {
         const text = await editor.commands.textCommands.getBlockText(blockId);
         const block = await editor.getBlockById(blockId);
-        let textValue = block.getProperty('text').value;
+        const textValue = block.getProperty('text').value;
         editor.blockHelper.removeSearchSlash(blockId, true);
         if (type.startsWith('Virgo')) {
             const handler =
@@ -261,7 +261,6 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
         >
             {show ? (
                 <MuiClickAwayListener onClickAway={handleClickAway}>
-                    <div>
                     <CommandMenuContainer
                         editor={editor}
                         hooks={hooks}
@@ -277,7 +276,6 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
                         types={types}
                         categories={categories}
                     />
-                    </div>
                 </MuiClickAwayListener>
             ) : (
                 <></>

libs/components/editor-plugins/src/menu/command-menu/config.ts

@@ -1,25 +1,24 @@
 import {
-    HeadingOneIcon,
-    HeadingTwoIcon,
-    HeadingThreeIcon,
-    ToDoIcon,
-    NumberIcon,
     BulletIcon,
-    CodeIcon,
-    TextIcon,
-    PagesIcon,
-    ImageIcon,
-    FileIcon,
-    QuoteIcon,
     CalloutIcon,
+    CodeIcon,
     DividerIcon,
-    FigmaIcon,
-    YoutubeIcon,
     EmbedIcon,
+    FigmaIcon,
+    FileIcon,
+    HeadingOneIcon,
+    HeadingThreeIcon,
+    HeadingTwoIcon,
+    ImageIcon,
+    NumberIcon,
+    QuoteIcon,
+    TextIcon,
+    ToDoIcon,
+    YoutubeIcon,
 } from '@toeverything/components/icons';
 import { SvgIconProps } from '@toeverything/components/ui';
-import { Virgo } from '@toeverything/framework/virgo';
 import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { Virgo } from '@toeverything/framework/virgo';
 import { without } from '@toeverything/utils';
 
 export enum CommandMenuCategories {