From d2664480f795c78821fccbc99f10dcd1ef9573b4 Mon Sep 17 00:00:00 2001
From: Aadi <123532141+golok727@users.noreply.github.com>
Date: Thu, 12 Jun 2025 13:28:52 +0530
Subject: [PATCH] fix(editor): unable to delete content backward in database
 title cell (#12738)

fix: https://github.com/toeverything/blocksuite/issues/8578

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Improved keyboard event handling within inline editors for database
headers and table cells, enhancing user control over key interactions
like 'Tab' and 'Escape'.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../database/src/properties/title/text.ts     | 16 ++++++++++++++
 .../affine/blocks/table/src/table-cell.ts     | 22 +++++++++++++++----
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/blocksuite/affine/blocks/database/src/properties/title/text.ts b/blocksuite/affine/blocks/database/src/properties/title/text.ts
index cd77b784a..e4deda964 100644
--- a/blocksuite/affine/blocks/database/src/properties/title/text.ts
+++ b/blocksuite/affine/blocks/database/src/properties/title/text.ts
@@ -212,6 +212,16 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
     this.disposables.addFromEvent(this, 'keydown', selectAll);
   }
 
+  private readonly _handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        return;
+      }
+      event.stopPropagation();
+    }
+  };
+
   override firstUpdated(props: Map<string, unknown>) {
     super.firstUpdated(props);
     this.richText.value?.updateComplete
@@ -232,6 +242,12 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
             'paste',
             this._onPaste
           );
+          const inlineEditor = this.inlineEditor;
+          if (inlineEditor) {
+            this.disposables.add(
+              inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
+            );
+          }
         }
       })
       .catch(console.error);
diff --git a/blocksuite/affine/blocks/table/src/table-cell.ts b/blocksuite/affine/blocks/table/src/table-cell.ts
index 31d4546d1..f54319dbb 100644
--- a/blocksuite/affine/blocks/table/src/table-cell.ts
+++ b/blocksuite/affine/blocks/table/src/table-cell.ts
@@ -647,6 +647,16 @@ export class TableCell extends SignalWatcher(
     return this.richText$.value?.inlineEditor;
   }
 
+  private readonly _handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        return;
+      }
+      e.stopPropagation();
+    }
+  };
+
   override connectedCallback() {
     super.connectedCallback();
     if (this.readonly) {
@@ -659,10 +669,7 @@ export class TableCell extends SignalWatcher(
         this.inlineEditor?.selectAll();
       }
     };
-    this.addEventListener('keydown', selectAll);
-    this.disposables.add(() => {
-      this.removeEventListener('keydown', selectAll);
-    });
+    this.disposables.addFromEvent(this, 'keydown', selectAll);
     this.disposables.addFromEvent(this, 'click', (e: MouseEvent) => {
       e.stopPropagation();
       requestAnimationFrame(() => {
@@ -679,6 +686,13 @@ export class TableCell extends SignalWatcher(
     }
     this.richText$.value?.updateComplete
       .then(() => {
+        const inlineEditor = this.inlineEditor;
+        if (inlineEditor) {
+          this.disposables.add(
+            inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
+          );
+        }
+
         this.disposables.add(
           effect(() => {
             const richText = this.richText$.value;