fix: keep suggestion menus open during IME composition

Author: iice257

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

@@ -4,6 +4,7 @@ import { FC, useCallback, useEffect } from "react";
 import { useBlockNoteContext } from "../../../editor/BlockNoteContext.js";
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
 import { useCloseSuggestionMenuNoItems } from "../hooks/useCloseSuggestionMenuNoItems.js";
+import { useEditorCompositionState } from "../hooks/useEditorCompositionState.js";
 import { useLoadSuggestionMenuItems } from "../hooks/useLoadSuggestionMenuItems.js";
 import { useGridSuggestionMenuKeyboardNavigation } from "./hooks/useGridSuggestionMenuKeyboardNavigation.js";
 import { GridSuggestionMenuProps } from "./types.js";
@@ -48,8 +49,9 @@ export function GridSuggestionMenuWrapper<Item>(props: {
     query,
     getItems,
   );
+  const isComposing = useEditorCompositionState(editor);
 
-  useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu);
+  useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu, 3, isComposing);
 
   const { selectedIndex } = useGridSuggestionMenuKeyboardNavigation(
     editor,

packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx

@@ -4,6 +4,7 @@ import { FC, useCallback, useEffect } from "react";
 import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useCloseSuggestionMenuNoItems } from "./hooks/useCloseSuggestionMenuNoItems.js";
+import { useEditorCompositionState } from "./hooks/useEditorCompositionState.js";
 import { useLoadSuggestionMenuItems } from "./hooks/useLoadSuggestionMenuItems.js";
 import { useSuggestionMenuKeyboardNavigation } from "./hooks/useSuggestionMenuKeyboardNavigation.js";
 import { SuggestionMenuProps } from "./types.js";
@@ -46,8 +47,9 @@ export function SuggestionMenuWrapper<Item>(props: {
     query,
     getItems,
   );
+  const isComposing = useEditorCompositionState(editor);
 
-  useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu);
+  useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu, 3, isComposing);
 
   const { selectedIndex } = useSuggestionMenuKeyboardNavigation(
     editor,

packages/react/src/components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems.ts

@@ -8,6 +8,7 @@ export function useCloseSuggestionMenuNoItems<Item>(
   usedQuery: string | undefined,
   closeMenu: () => void,
   invalidQueries = 3,
+  disabled = false,
 ) {
   const lastUsefulQueryLength = useRef(0);
 
@@ -16,6 +17,11 @@ export function useCloseSuggestionMenuNoItems<Item>(
       return;
     }
 
+    if (disabled) {
+      lastUsefulQueryLength.current = usedQuery.length;
+      return;
+    }
+
     if (items.length > 0) {
       lastUsefulQueryLength.current = usedQuery.length;
     } else if (
@@ -24,5 +30,5 @@ export function useCloseSuggestionMenuNoItems<Item>(
     ) {
       closeMenu();
     }
-  }, [closeMenu, invalidQueries, items.length, usedQuery]);
+  }, [closeMenu, disabled, invalidQueries, items.length, usedQuery]);
 }

packages/react/src/components/SuggestionMenu/hooks/useEditorCompositionState.ts

@@ -0,0 +1,42 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import { useEffect, useState } from "react";
+
+import { useEditorDOMElement } from "../../../hooks/useEditorDomElement.js";
+
+export function useEditorCompositionState(
+  editor: BlockNoteEditor<any, any, any>,
+) {
+  const editorDOMElement = useEditorDOMElement(editor);
+  const [isComposing, setIsComposing] = useState(false);
+
+  useEffect(() => {
+    const handleCompositionStart = () => setIsComposing(true);
+    const handleCompositionEnd = () => setIsComposing(false);
+
+    editorDOMElement?.addEventListener(
+      "compositionstart",
+      handleCompositionStart,
+      true,
+    );
+    editorDOMElement?.addEventListener(
+      "compositionend",
+      handleCompositionEnd,
+      true,
+    );
+
+    return () => {
+      editorDOMElement?.removeEventListener(
+        "compositionstart",
+        handleCompositionStart,
+        true,
+      );
+      editorDOMElement?.removeEventListener(
+        "compositionend",
+        handleCompositionEnd,
+        true,
+      );
+    };
+  }, [editorDOMElement]);
+
+  return isComposing;
+}