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 { 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) { super.firstUpdated(props); this.richText.value?.updateComplete @@ -232,6 +242,12 @@ export class HeaderAreaTextCell extends BaseCellRenderer { '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;