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 -->
This commit is contained in:
Aadi
2025-06-12 13:28:52 +05:30
committed by GitHub
parent b986a39da3
commit d2664480f7
2 changed files with 34 additions and 4 deletions

View File

@@ -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);

View File

@@ -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;