@copilotkit/react-textarea 1.53.1-next.0 → 1.53.1-next.2

package/package.json

@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.53.1-next.0",
+  "version": "1.53.1-next.2",
   "sideEffects": [
     "**/*.css"
   ],
@@ -70,9 +70,9 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.1",
     "tailwind-merge": "^1.13.2",
-    "@copilotkit/react-core": "1.53.1-next.0",
-    "@copilotkit/runtime-client-gql": "1.53.1-next.0",
-    "@copilotkit/shared": "1.53.1-next.0"
+    "@copilotkit/react-core": "1.53.1-next.2",
+    "@copilotkit/runtime-client-gql": "1.53.1-next.2",
+    "@copilotkit/shared": "1.53.1-next.2"
   },
   "keywords": [
     "copilotkit",

package/src/components/hovering-toolbar/hovering-toolbar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Editor, Location, Transforms } from "slate";
-import { useSlate, useSlateSelection } from "slate-react";
+import { ReactEditor, useSlate, useSlateSelection } from "slate-react";
 import {
   getFullEditorTextWithNewlines,
   getTextAroundSelection,
@@ -123,6 +123,36 @@ export const HoveringToolbar = (props: HoveringToolbarProps) => {
     };
   }, [ref, setIsDisplayed]);
 
+  // Close the hovering editor on Escape and restore focus to the textarea.
+  // This complements the Escape handler in HoveringInsertionPromptBoxCore's
+  // onKeyDown. That handler covers Escape when the prompt input has focus;
+  // this document-level listener covers Escape from anywhere else in the popup.
+  // Both may fire when the input is focused (double setIsDisplayed(false) is
+  // harmless). If nested dismissible UI is ever added inside this toolbar,
+  // this listener will need stopPropagation guards to avoid stealing Escape.
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setIsDisplayed(false);
+        // Re-focus the Slate editor after closing
+        try {
+          ReactEditor.focus(editor);
+        } catch {
+          // Editor may not be mounted, ignore
+        }
+      }
+    };
+
+    if (isDisplayed) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isDisplayed, setIsDisplayed, editor]);
+
   if (!isShown) {
     return null;
   }

package/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx

@@ -178,6 +178,9 @@ export const HoveringInsertionPromptBoxCore = ({
             } else if (e.key === "Enter") {
               e.preventDefault();
               beginGeneratingAdjustment();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setIsDisplayed(false);
             }
           }}
           placeholder={placeholder}