feat: onkeydown for text edit and cancel event

Author: std-microblock

deps/breeze-ui.lua

@@ -3,8 +3,8 @@ package("breeze-glfw")
     set_urls("https://github.com/breeze-shell/glfw.git")
     add_versions("2026.03.07+1", "a79c32a7d9ef4cd8a15b5f8ccbcdf9510c48da03")
 
-local BREEZE_UI_VER = "2026.03.29+1"
-local BREEZE_UI_HASH = "9ced7b5735ad6cd18eb49d5cfebf88ea8bc9dab2"
+local BREEZE_UI_VER = "2026.03.29+2"
+local BREEZE_UI_HASH = "a6d34e86d37579e1aa722c640dcef485069ba1cd"
 local USE_LOCAL_BREEZE_UI = os.getenv("CI") ~= "true"
 local BREEZE_UI_LOCAL_PATH = "../breeze-ui"
 

src/shell/script/binding_qjs.h

@@ -127,6 +127,7 @@ template<> struct js_bind<mb_shell::js::breeze_ui::js_textbox_widget> {
                 .property<&mb_shell::js::breeze_ui::js_textbox_widget::get_on_change, &mb_shell::js::breeze_ui::js_textbox_widget::set_on_change>("on_change")
                 .property<&mb_shell::js::breeze_ui::js_textbox_widget::get_on_focus, &mb_shell::js::breeze_ui::js_textbox_widget::set_on_focus>("on_focus")
                 .property<&mb_shell::js::breeze_ui::js_textbox_widget::get_on_blur, &mb_shell::js::breeze_ui::js_textbox_widget::set_on_blur>("on_blur")
+                .property<&mb_shell::js::breeze_ui::js_textbox_widget::get_on_key_down, &mb_shell::js::breeze_ui::js_textbox_widget::set_on_key_down>("on_key_down")
                 .property<&mb_shell::js::breeze_ui::js_textbox_widget::get_selection_start>("selection_start")
                 .property<&mb_shell::js::breeze_ui::js_textbox_widget::get_selection_end>("selection_end")
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::get_text>("get_text")
@@ -183,6 +184,8 @@ template<> struct js_bind<mb_shell::js::breeze_ui::js_textbox_widget> {
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::set_on_focus>("set_on_focus")
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::get_on_blur>("get_on_blur")
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::set_on_blur>("set_on_blur")
+                .fun<&mb_shell::js::breeze_ui::js_textbox_widget::get_on_key_down>("get_on_key_down")
+                .fun<&mb_shell::js::breeze_ui::js_textbox_widget::set_on_key_down>("set_on_key_down")
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::focus>("focus")
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::blur>("blur")
                 .fun<&mb_shell::js::breeze_ui::js_textbox_widget::select_all>("select_all")

src/shell/script/binding_types.d.ts

@@ -121,6 +121,8 @@ export class js_textbox_widget extends js_widget {
     set on_focus(value: (() => void));
 	get on_blur(): (() => void);
     set on_blur(value: (() => void));
+	get on_key_down(): ((arg1: number, arg2: boolean, arg3: boolean, arg4: boolean, arg5: boolean) => boolean);
+    set on_key_down(value: ((arg1: number, arg2: boolean, arg3: boolean, arg4: boolean, arg5: boolean) => boolean));
 	get selection_start(): number;
 	get selection_end(): number;
 	focus(): void
@@ -1396,4 +1398,4 @@ declare module "mshell" {
     type intptr_t = number;
     type uintptr_t = number;
     type ssize_t = number;
-}
+}

src/shell/script/binding_types_breeze_ui.cc

@@ -171,6 +171,9 @@ IMPL_CALLBACK_PROP(breeze_ui::js_textbox_widget, ui::textbox_widget, on_focus,
                    std::function<void()>)
 IMPL_CALLBACK_PROP(breeze_ui::js_textbox_widget, ui::textbox_widget, on_blur,
                    std::function<void()>)
+IMPL_CALLBACK_PROP(breeze_ui::js_textbox_widget, ui::textbox_widget,
+                   on_key_down,
+                   std::function<bool(int, bool, bool, bool, bool)>)
 
 void breeze_ui::js_widget::append_child_after(std::shared_ptr<js_widget> child,
                                               int after_index) {

src/shell/script/binding_types_breeze_ui.h

@@ -108,6 +108,8 @@ struct breeze_ui {
         DEFINE_PROP(std::function<void(std::string)>, on_change)
         DEFINE_PROP(std::function<void()>, on_focus)
         DEFINE_PROP(std::function<void()>, on_blur)
+        DEFINE_PROP(std::function<bool(int, bool, bool, bool, bool)>,
+                    on_key_down)
 
         void focus();
         void blur();

src/shell/script/script.js

@@ -3,13 +3,37 @@ import { Button, Text } from "../components";
 import { useTranslation } from "../hooks";
 import { memo, useState } from "react";
 
+const GLFW_KEY_ENTER = 257;
+
 const TestPage = memo(() => {
     const { t } = useTranslation();
     const [singleLineValue, setSingleLineValue] = useState("你尴尬Say个Hi 没位坐下来");
     const [multiLineValue, setMultiLineValue] = useState(
         "你的影子被日落拉长\n思念在很远的地方\n喔喔喔喔 轻轻的唱年少的轻狂\nAabcd1234567890!@#$%^&*()_+"
     );
     const [focusState, setFocusState] = useState("none");
+    const [singleLineSubmitValue, setSingleLineSubmitValue] = useState("");
+    const [multiLineSubmitValue, setMultiLineSubmitValue] = useState("");
+
+    const handleSingleLineKeyDown = (key: number) => {
+        if (key !== GLFW_KEY_ENTER) {
+            return false;
+        }
+        setSingleLineSubmitValue(singleLineValue);
+        return true;
+    };
+
+    const handleMultiLineKeyDown = (
+        key: number,
+        _shiftKey: boolean,
+        ctrlKey: boolean,
+    ) => {
+        if (key !== GLFW_KEY_ENTER || !ctrlKey) {
+            return false;
+        }
+        setMultiLineSubmitValue(multiLineValue);
+        return true;
+    };
 
     return (
         <flex maxHeight={500} enableScrolling>
@@ -40,6 +64,7 @@ const TestPage = memo(() => {
                         height={34}
                         fontSize={14}
                         onChange={setSingleLineValue}
+                        onKeyDown={handleSingleLineKeyDown}
                         onFocus={() => setFocusState("single")}
                         onBlur={() => setFocusState("none")}
                     />
@@ -54,11 +79,14 @@ const TestPage = memo(() => {
                         caretColor="#ff00ff"
                         multiline
                         onChange={setMultiLineValue}
+                        onKeyDown={handleMultiLineKeyDown}
                         onFocus={() => setFocusState("multi")}
                         onBlur={() => setFocusState("none")}
                     />
                     <Text fontSize={13} fontWeight={900}>Focused: {focusState}</Text>
                     <Text fontSize={13}>Single line value: {singleLineValue}</Text>
+                    <Text fontSize={13}>Single enter submit: {singleLineSubmitValue || "(empty)"}</Text>
+                    <Text fontSize={13}>Multi Ctrl+Enter submit: {multiLineSubmitValue || "(empty)"}</Text>
                 </flex>
 
                 <flex>

src/shell/script/ts/src/config_page/pages/TestPage.tsx

@@ -84,6 +84,7 @@ declare module 'react' {
         onChange?: (value: string) => void;
         onFocus?: () => void;
         onBlur?: () => void;
+        onKeyDown?: (key: number, shiftKey: boolean, ctrlKey: boolean, altKey: boolean, metaKey: boolean) => boolean;
         key?: string | number;
         animatedVars?: string[];
         x?: number;

src/shell/script/ts/src/jsx.d.ts

@@ -186,6 +186,7 @@ const componentMap = {
             onChange: getSetFactory('on_change'),
             onFocus: getSetFactory('on_focus'),
             onBlur: getSetFactory('on_blur'),
+            onKeyDown: getSetFactory('on_key_down'),
             ...commonProps
         }
     },