From 636fa503b84f6321025ffda79c83225875430088 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Sat, 16 Mar 2024 21:13:37 +0800
Subject: [PATCH] feat: support esc shortcut on input-edit (#6143)

---
 .../component/src/ui/editable/inline-edit.tsx | 27 ++++++++++++++++---
 .../block-suite-header/title/index.tsx        |  1 +
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/component/src/ui/editable/inline-edit.tsx b/packages/frontend/component/src/ui/editable/inline-edit.tsx
index 07e0de7f7e..d4a638893c 100644
--- a/packages/frontend/component/src/ui/editable/inline-edit.tsx
+++ b/packages/frontend/component/src/ui/editable/inline-edit.tsx
@@ -1,9 +1,12 @@
 import clsx from 'clsx';
+import type {
+  CSSProperties,
+  ForwardedRef,
+  HTMLAttributes,
+  KeyboardEvent,
+  PropsWithChildren,
+} from 'react';
 import {
-  type CSSProperties,
-  type ForwardedRef,
-  type HTMLAttributes,
-  type PropsWithChildren,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -29,6 +32,10 @@ export interface InlineEditProps
    * Whether the content is editable
    */
   editable?: boolean;
+  /**
+   * Whether to exit when pressing `Escape`
+   */
+  exitible?: boolean;
 
   onInput?: (v: string) => void;
   onChange?: (v: string) => void;
@@ -68,6 +75,7 @@ export interface InlineEditProps
 export const InlineEdit = ({
   value,
   editable,
+  exitible,
   className,
   style,
   trigger = 'doubleClick',
@@ -127,6 +135,16 @@ export const InlineEdit = ({
     inputRef.current?.scrollTo(0, 0);
   }, [submit]);
 
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+      if (!exitible) return;
+      if (e.key !== 'Escape') return;
+      inputRef.current?.blur();
+    },
+    [exitible]
+  );
+
   const inputHandler = useCallback(
     (v: string) => {
       setEditingValue(v);
@@ -198,6 +216,7 @@ export const InlineEdit = ({
           placeholder={placeholder}
           onBlur={onBlur}
           onEnter={onEnter}
+          onKeyDown={onKeyDown}
           onChange={inputHandler}
           style={inputWrapperInheritsStyles}
           inputStyle={inputInheritsStyles}
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/title/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/title/index.tsx
index 69a12ea023..fb36120617 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/title/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/title/index.tsx
@@ -43,6 +43,7 @@ export const BlocksuiteHeaderTitle = (props: BlockSuiteHeaderTitleProps) => {
       value={title}
       onChange={onChange}
       editable={!isPublic}
+      exitible={true}
       placeholder="Untitled"
       data-testid="title-edit-button"
       handleRef={inputHandleRef}