Added keyboard navigation to AI button

Author: matthewlipski

packages/ai/src/react/components/FormattingToolbar/DefaultButtons/AIButton.tsx

@@ -7,11 +7,13 @@ import {
 import {
   DefaultReactSuggestionItem,
   useComponentsContext,
+  useSuggestionMenuKeyboardHandler,
 } from "@blocknote/react";
 import {
   ChangeEvent,
   KeyboardEvent,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from "react";
@@ -69,12 +71,45 @@ export const AIButton = () => {
             title: "Make Longer",
             onItemClick: () => runAIEdit("Make longer"),
           },
+          {
+            name: "make-shorter",
+            title: "Make Shorter",
+            onItemClick: () => runAIEdit("Make shorter"),
+          },
+          {
+            name: "summarize",
+            title: "Summarize",
+            onItemClick: () => runAIEdit("Summarize"),
+          },
         ],
         currentEditingPrompt
       ),
     [currentEditingPrompt, runAIEdit]
   );
 
+  const { selectedIndex, setSelectedIndex, handler } =
+    useSuggestionMenuKeyboardHandler(items, (item) => item.onItemClick());
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        if (items.length > 0) {
+          handler(event);
+        } else {
+          handleEnter(event);
+        }
+      } else {
+        handler(event);
+      }
+    },
+    [handleEnter, handler, items.length]
+  );
+
+  // Resets index when items change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [currentEditingPrompt, setSelectedIndex]);
+
   if (!editor.isEditable) {
     return null;
   }
@@ -99,20 +134,19 @@ export const AIButton = () => {
             value={currentEditingPrompt || ""}
             autoFocus={true}
             placeholder={dict.formatting_toolbar.ai.input_placeholder}
-            onKeyDown={handleEnter}
+            onKeyDown={handleKeyDown}
             onChange={handleChange}
           />
         </Components.Generic.Form.Root>
-
         <Components.SuggestionMenu.Root
           className={"bn-ai-menu"}
           id={"ai-suggestion-menu"}>
-          {items.map((item) => (
+          {items.map((item, index) => (
             <Components.SuggestionMenu.Item
               key={item.name}
               className={"bn-suggestion-menu-item"}
               id={item.name}
-              isSelected={false}
+              isSelected={index === selectedIndex}
               onClick={item.onItemClick}
               item={item}
             />

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

@@ -0,0 +1,49 @@
+import { useState } from "react";
+
+// Hook which returns a handler for keyboard navigation of a suggestion menu. Up
+// & down arrow keys are used to select an item, enter is used to execute it.
+export function useSuggestionMenuKeyboardHandler<Item>(
+  items: Item[],
+  onItemClick?: (item: Item) => void
+) {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+
+  return {
+    selectedIndex,
+    setSelectedIndex,
+    handler: (event: { key: string; preventDefault: () => void }) => {
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+
+        if (items.length) {
+          setSelectedIndex((selectedIndex - 1 + items!.length) % items!.length);
+        }
+
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        // debugger;
+        event.preventDefault();
+
+        if (items.length) {
+          setSelectedIndex((selectedIndex + 1) % items!.length);
+        }
+
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        if (items.length) {
+          onItemClick?.(items[selectedIndex]);
+        }
+
+        return true;
+      }
+
+      return false;
+    },
+  };
+}

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

@@ -1,70 +1,35 @@
 import { BlockNoteEditor } from "@blocknote/core";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import { useSuggestionMenuKeyboardHandler } from "./useSuggestionMenuKeyboardHandler";
 
 // Hook which handles keyboard navigation of a suggestion menu. Up & down arrow
 // keys are used to select a menu item, enter is used to execute it.
 export function useSuggestionMenuKeyboardNavigation<Item>(
   editor: BlockNoteEditor<any, any, any>,
   query: string,
   items: Item[],
-  onItemClick?: (item: Item) => void
+  onItemClick?: (item: Item) => void,
+  element?: HTMLElement
 ) {
-  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const { selectedIndex, setSelectedIndex, handler } =
+    useSuggestionMenuKeyboardHandler(items, onItemClick);
 
   useEffect(() => {
-    const handleMenuNavigationKeys = (event: KeyboardEvent) => {
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-
-        if (items.length) {
-          setSelectedIndex((selectedIndex - 1 + items!.length) % items!.length);
-        }
-
-        return true;
-      }
-
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-
-        if (items.length) {
-          setSelectedIndex((selectedIndex + 1) % items!.length);
-        }
-
-        return true;
-      }
-
-      if (event.key === "Enter") {
-        event.preventDefault();
-
-        if (items.length) {
-          onItemClick?.(items[selectedIndex]);
-        }
-
-        return true;
-      }
-
-      return false;
-    };
-
-    editor.domElement.addEventListener(
-      "keydown",
-      handleMenuNavigationKeys,
-      true
-    );
+    (element || editor.domElement).addEventListener("keydown", handler, true);
 
     return () => {
-      editor.domElement.removeEventListener(
+      (element || editor.domElement).removeEventListener(
         "keydown",
-        handleMenuNavigationKeys,
+        handler,
         true
       );
     };
-  }, [editor.domElement, items, selectedIndex, onItemClick]);
+  }, [editor.domElement, items, selectedIndex, onItemClick, element]);
 
   // Resets index when items change
   useEffect(() => {
     setSelectedIndex(0);
-  }, [query]);
+  }, [query, setSelectedIndex]);
 
   return {
     selectedIndex: items.length === 0 ? undefined : selectedIndex,

packages/react/src/index.ts

@@ -48,6 +48,7 @@ export * from "./components/SuggestionMenu/SuggestionMenuWrapper";
 export * from "./components/SuggestionMenu/getDefaultReactSlashMenuItems";
 export * from "./components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems";
 export * from "./components/SuggestionMenu/hooks/useLoadSuggestionMenuItems";
+export * from "./components/SuggestionMenu/hooks/useSuggestionMenuKeyboardHandler";
 export * from "./components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation";
 export * from "./components/SuggestionMenu/types";