diff --git a/libs/components/common/src/lib/list/index.tsx b/libs/components/common/src/lib/list/index.tsx index c00a4e1415..c1ec42557d 100644 --- a/libs/components/common/src/lib/list/index.tsx +++ b/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 (
{ commonListContainer, ])} > - {usedItems?.length ? ( - usedItems.map((item, idx) => { + {items?.length ? ( + items.map((item, idx) => { if (item.renderCustom) { return item.renderCustom(item); } else if (item.block) { diff --git a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx index 394ca6ceab..fa82124bc9 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx +++ b/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'; diff --git a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx index 43092ea535..e162613d99 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx +++ b/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 { menuItemsMap, CommandMenuCategories } from './config'; +import { styled } from '@toeverything/components/ui'; import { QueryResult } from '../../search'; -import { - MuiClickAwayListener as ClickAwayListener, - styled, -} from '@toeverything/components/ui'; +import { MenuCategories } from './Categories'; +import { CommandMenuCategories, menuItemsMap } from './config'; const RootContainer = styled('div')(({ theme }) => { return { @@ -134,59 +130,75 @@ export const CommandMenuContainer = ({ const handleClickUp = useCallback( (event: React.KeyboardEvent) => { - if (isShow && types && event.code === 'ArrowUp') { - event.preventDefault(); - if (!currentItem && types.length) { - setCurrentItem(types[types.length - 1]); - } - if (currentItem) { - const idx = types.indexOf(currentItem); - if (idx > 0) { - setNeedCheckIntoView(true); - setCurrentItem(types[idx - 1]); - } + event.preventDefault(); + if (!currentItem && types.length) { + setCurrentItem(types[types.length - 1]); + } + if (currentItem) { + const idx = types.indexOf(currentItem); + if (idx > 0) { + setNeedCheckIntoView(true); + setCurrentItem(types[idx - 1]); } } }, - [isShow, types, currentItem] + [types, currentItem] ); const handleClickDown = useCallback( (event: React.KeyboardEvent) => { - if (isShow && types && event.code === 'ArrowDown') { - event.preventDefault(); - if (!currentItem && types.length) { - setCurrentItem(types[0]); - } - if (currentItem) { - const idx = types.indexOf(currentItem); - if (idx < types.length - 1) { - setNeedCheckIntoView(true); - setCurrentItem(types[idx + 1]); - } + event.preventDefault(); + if (!currentItem && types.length) { + setCurrentItem(types[0]); + } + if (currentItem) { + const idx = types.indexOf(currentItem); + if (idx < types.length - 1) { + setNeedCheckIntoView(true); + setCurrentItem(types[idx + 1]); } } }, - [isShow, types, currentItem] + [types, currentItem] ); const handleClickEnter = useCallback( async (event: React.KeyboardEvent) => { - if (isShow && event.code === 'Enter' && currentItem) { - event.preventDefault(); - onSelected && onSelected(currentItem); - } + event.preventDefault(); + onSelected && onSelected(currentItem); }, - [isShow, currentItem, onSelected] + [currentItem, onSelected] ); const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { - handleClickUp(event); - handleClickDown(event); - handleClickEnter(event); + if (!isShow) { + return; + } + 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(() => { diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx index 80afb0726b..7d6ee812d4 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx +++ b/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 ? ( -
- -
+
) : ( <> diff --git a/libs/components/editor-plugins/src/menu/command-menu/config.ts b/libs/components/editor-plugins/src/menu/command-menu/config.ts index 9c06bc81ed..977ed0d4bd 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/config.ts +++ b/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, }, - { - text: 'Page', - type: 'page', - icon: PagesIcon, - }, + // the Page block should not be inserted + // { + // text: 'Page', + // 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, },