Merge pull request #428 from toeverything/fix/command-menu

Fix/command menu

libs/components/common/src/lib/list/index.tsx

@@ -39,14 +39,6 @@ type MenuItemsProps = {
 
 export const CommonList = (props: MenuItemsProps) => {
     const { items, currentItem, setCurrentItem, onSelected } = props;
-    // const JSONUnsupportedBlockTypes = useFlag('JSONUnsupportedBlockTypes', [
-    //     'page',
-    // ]);
-    // TODO Insert bidirectional link to be developed
-    const JSONUnsupportedBlockTypes = ['page'];
-    const usedItems = items.filter(item => {
-        return !JSONUnsupportedBlockTypes.includes(item?.content?.id);
-    });
     return (
         <div className={clsx(styles('root_container'), props.className)}>
             <div
@@ -55,8 +47,8 @@ export const CommonList = (props: MenuItemsProps) => {
                     commonListContainer,
                 ])}
             >
-                {usedItems?.length ? (
+                {items?.length ? (
-                    usedItems.map((item, idx) => {
+                    items.map((item, idx) => {
                         if (item.renderCustom) {
                             return item.renderCustom(item);
                         } else if (item.block) {

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,59 +130,75 @@ export const CommandMenuContainer = ({
 
     const handleClickUp = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (isShow && types && event.code === 'ArrowUp') {
+            event.preventDefault();
-                event.preventDefault();
+            if (!currentItem && types.length) {
-                if (!currentItem && types.length) {
+                setCurrentItem(types[types.length - 1]);
-                    setCurrentItem(types[types.length - 1]);
+            }
-                }
+            if (currentItem) {
-                if (currentItem) {
+                const idx = types.indexOf(currentItem);
-                    const idx = types.indexOf(currentItem);
+                if (idx > 0) {
-                    if (idx > 0) {
+                    setNeedCheckIntoView(true);
-                        setNeedCheckIntoView(true);
+                    setCurrentItem(types[idx - 1]);
-                        setCurrentItem(types[idx - 1]);
-                    }
                 }
             }
         },
-        [isShow, types, currentItem]
+        [types, currentItem]
     );
 
     const handleClickDown = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (isShow && types && event.code === 'ArrowDown') {
+            event.preventDefault();
-                event.preventDefault();
+            if (!currentItem && types.length) {
-                if (!currentItem && types.length) {
+                setCurrentItem(types[0]);
-                    setCurrentItem(types[0]);
+            }
-                }
+            if (currentItem) {
-                if (currentItem) {
+                const idx = types.indexOf(currentItem);
-                    const idx = types.indexOf(currentItem);
+                if (idx < types.length - 1) {
-                    if (idx < types.length - 1) {
+                    setNeedCheckIntoView(true);
-                        setNeedCheckIntoView(true);
+                    setCurrentItem(types[idx + 1]);
-                        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();
-                event.preventDefault();
+            onSelected && onSelected(currentItem);
-                onSelected && onSelected(currentItem);
-            }
         },
-        [isShow, currentItem, onSelected]
+        [currentItem, onSelected]
     );
 
     const handleKeyDown = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
-            handleClickUp(event);
+            if (!isShow) {
-            handleClickDown(event);
+                return;
-            handleClickEnter(event);
+            }
+            if (event.nativeEvent.isComposing) {
+                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,23 +261,21 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
         >
             {show ? (
                 <MuiClickAwayListener onClickAway={handleClickAway}>
-                    <div>
+                    <CommandMenuContainer
-                        <CommandMenuContainer
+                        editor={editor}
-                            editor={editor}
+                        hooks={hooks}
-                            hooks={hooks}
+                        style={{
-                            style={{
+                            ...commandMenuPosition,
-                                ...commandMenuPosition,
+                            ...style,
-                                ...style,
+                        }}
-                            }}
+                        isShow={show}
-                            isShow={show}
+                        blockId={blockId}
-                            blockId={blockId}
+                        onSelected={handleSelected}
-                            onSelected={handleSelected}
+                        onclose={handleClose}
-                            onclose={handleClose}
+                        searchBlocks={searchBlocks}
-                            searchBlocks={searchBlocks}
+                        types={types}
-                            types={types}
+                        categories={categories}
-                            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 {
@@ -68,11 +67,12 @@ export const menuItemsMap: {
             type: Protocol.Block.Type.text,
             icon: TextIcon,
         },
-        {
+        // the Page block should not be inserted
-            text: 'Page',
+        // {
-            type: 'page',
+        //     text: 'Page',
-            icon: PagesIcon,
+        //     type: Protocol.Block.Type.page,
-        },
+        //     icon: PagesIcon,
+        // },
         {
             text: 'Heading 1',
             type: Protocol.Block.Type.heading1,
@@ -91,7 +91,7 @@ export const menuItemsMap: {
     ],
     [CommandMenuCategories.lists]: [
         {
-            text: 'To do',
+            text: 'Todo',
             type: Protocol.Block.Type.todo,
             icon: ToDoIcon,
         },