fix: Emoji suggestion slash menu does not display (#984)

* fix #975

* fix: Unexpected show GridSuggestionMenu

* feat: add payload state in SuggestionPlugin.ts

* feat: rename SuggestionPlugin pluginState

Author: jkcs

packages/core/src/editor/BlockNoteEditor.ts

@@ -1159,15 +1159,26 @@ export class BlockNoteEditor<
     };
   }
 
-  public openSuggestionMenu(triggerCharacter: string) {
+  public openSuggestionMenu(
+    triggerCharacter: string,
+    pluginState?: {
+      deleteTriggerCharacter?: boolean;
+      ignoreQueryLength?: boolean;
+    }
+  ) {
+    const tr = this.prosemirrorView.state.tr;
+    const transaction =
+      pluginState && pluginState.deleteTriggerCharacter
+        ? tr.insertText(triggerCharacter)
+        : tr;
+
     this.prosemirrorView.focus();
     this.prosemirrorView.dispatch(
-      this.prosemirrorView.state.tr
-        .scrollIntoView()
-        .setMeta(this.suggestionMenus.plugin, {
-          triggerCharacter: triggerCharacter,
-          fromUserInput: false,
-        })
+      transaction.scrollIntoView().setMeta(this.suggestionMenus.plugin, {
+        triggerCharacter: triggerCharacter,
+        deleteTriggerCharacter: pluginState?.deleteTriggerCharacter || false,
+        ignoreQueryLength: pluginState?.ignoreQueryLength || false,
+      })
     );
   }
 }

packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -11,6 +11,7 @@ const findBlock = findParentNode((node) => node.type.name === "blockContainer");
 
 export type SuggestionMenuState = UiElementPosition & {
   query: string;
+  ignoreQueryLength?: boolean;
 };
 
 class SuggestionMenuView<
@@ -34,7 +35,10 @@ class SuggestionMenuView<
         throw new Error("Attempting to update uninitialized suggestions menu");
       }
 
-      emitUpdate(menuName, this.state);
+      emitUpdate(menuName, {
+        ...this.state,
+        ignoreQueryLength: this.pluginState?.ignoreQueryLength,
+      });
     };
 
     this.rootEl = this.editor._tiptapEditor.view.root;
@@ -120,7 +124,7 @@ class SuggestionMenuView<
       .deleteRange({
         from:
           this.pluginState.queryStartPos! -
-          (this.pluginState.fromUserInput
+          (this.pluginState.deleteTriggerCharacter
             ? this.pluginState.triggerCharacter!.length
             : 0),
         to: this.editor._tiptapEditor.state.selection.from,
@@ -132,10 +136,11 @@ class SuggestionMenuView<
 type SuggestionPluginState =
   | {
       triggerCharacter: string;
-      fromUserInput: boolean;
+      deleteTriggerCharacter: boolean;
       queryStartPos: number;
       query: string;
       decorationId: string;
+      ignoreQueryLength?: boolean;
     }
   | undefined;
 
@@ -194,7 +199,8 @@ export class SuggestionMenuProseMirrorPlugin<
           // or null if it should be hidden.
           const suggestionPluginTransactionMeta: {
             triggerCharacter: string;
-            fromUserInput?: boolean;
+            deleteTriggerCharacter?: boolean;
+            ignoreQueryLength?: boolean;
           } | null = transaction.getMeta(suggestionMenuPluginKey);
 
           // Only opens a menu of no menu is already open
@@ -206,11 +212,14 @@ export class SuggestionMenuProseMirrorPlugin<
             return {
               triggerCharacter:
                 suggestionPluginTransactionMeta.triggerCharacter,
-              fromUserInput:
-                suggestionPluginTransactionMeta.fromUserInput !== false,
+              deleteTriggerCharacter:
+                suggestionPluginTransactionMeta.deleteTriggerCharacter !==
+                false,
               queryStartPos: newState.selection.from,
               query: "",
               decorationId: `id_${Math.floor(Math.random() * 0xffffffff)}`,
+              ignoreQueryLength:
+                suggestionPluginTransactionMeta?.ignoreQueryLength,
             };
           }
 
@@ -285,7 +294,7 @@ export class SuggestionMenuProseMirrorPlugin<
 
           // If the menu was opened programmatically by another extension, it may not use a trigger character. In this
           // case, the decoration is set on the whole block instead, as the decoration range would otherwise be empty.
-          if (!suggestionPluginState.fromUserInput) {
+          if (!suggestionPluginState.deleteTriggerCharacter) {
             const blockNode = findBlock(state.selection);
             if (blockNode) {
               return DecorationSet.create(state.doc, [

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -272,7 +272,12 @@ export function getDefaultSlashMenuItems<
   }
 
   items.push({
-    onItemClick: () => editor.openSuggestionMenu(":"),
+    onItemClick: () => {
+      editor.openSuggestionMenu(":", {
+        deleteTriggerCharacter: true,
+        ignoreQueryLength: true,
+      });
+    },
     key: "emoji",
     ...editor.dictionary.slash_menu.emoji,
   });

packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx

@@ -130,7 +130,8 @@ export function GridSuggestionMenuController<
   if (
     !isMounted ||
     !state ||
-    (minQueryLength &&
+    (!state?.ignoreQueryLength &&
+      minQueryLength &&
       (state.query.startsWith(" ") || state.query.length < minQueryLength))
   ) {
     return null;