Fix(twenty-front): BlockNote slash command shows empty state when no match (#20689)

Fixes: #20625
Original PR: #20626

New changes:
- Now the text says "Close menu" instead of "No command found".
- "Close menu" is interactive like other commands ( With keyboard and
with mouse ).
- It closes automatically when user type 3 extra character past the
point of no result.


https://github.com/user-attachments/assets/9c1315b4-5a63-424d-8da8-dc1283535725

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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<SuggestionItem>(
+      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 = ({
         <CustomSideMenu editor={editor} />
         <SuggestionMenuController
           triggerCharacter="/"
-          getItems={async (query) =>
-            filterSuggestionItems<SuggestionItem>(getSlashMenu(editor), query)
-          }
+          getItems={getSlashMenuItems}
           suggestionMenuComponent={CustomSlashMenu}
         />
         <SuggestionMenuController