diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx index c0689304e88..da05f543751 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx @@ -1,6 +1,10 @@ -import { filterSuggestionItems } from '@blocknote/core/extensions'; +import { + filterSuggestionItems, + SuggestionMenu, +} from '@blocknote/core/extensions'; import { BlockNoteView } from '@blocknote/mantine'; import { SuggestionMenuController } from '@blocknote/react'; +import { useLingui } from '@lingui/react/macro'; import { styled } from '@linaria/react'; import { type ClipboardEvent, useContext } from 'react'; import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema'; @@ -12,6 +16,7 @@ import { type SuggestionItem, } from '@/blocknote-editor/components/CustomSlashMenu'; import { useMentionMenu } from '@/mention/hooks/useMentionMenu'; +import { IconX } from 'twenty-ui/display'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; interface BlockEditorProps { @@ -149,10 +154,30 @@ export const BlockEditor = ({ readonly, }: BlockEditorProps) => { const { colorScheme } = useContext(ThemeContext); + const { t } = useLingui(); const blockNoteTheme = colorScheme === 'light' ? 'light' : 'dark'; const getMentionItems = useMentionMenu(editor); + const getSlashMenuItems = async (query: string) => { + const filtered = filterSuggestionItems( + getSlashMenu(editor), + query, + ); + + if (filtered.length > 0) { + return filtered; + } + + return [ + { + title: t`Close menu`, + Icon: IconX, + onItemClick: () => editor.getExtension(SuggestionMenu)?.closeMenu(), + }, + ]; + }; + const handleFocus = () => { onFocus?.(); }; @@ -185,9 +210,7 @@ export const BlockEditor = ({ - filterSuggestionItems(getSlashMenu(editor), query) - } + getItems={getSlashMenuItems} suggestionMenuComponent={CustomSlashMenu} />