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); 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>) { override firstUpdated(props: Map<string, unknown>) {
super.firstUpdated(props); super.firstUpdated(props);
this.richText.value?.updateComplete this.richText.value?.updateComplete
@@ -232,6 +242,12 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
'paste', 'paste',
this._onPaste this._onPaste
); );
const inlineEditor = this.inlineEditor;
if (inlineEditor) {
this.disposables.add(
inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
);
}
} }
}) })
.catch(console.error); .catch(console.error);

View File

@@ -647,6 +647,16 @@ export class TableCell extends SignalWatcher(
return this.richText$.value?.inlineEditor; 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() { override connectedCallback() {
super.connectedCallback(); super.connectedCallback();
if (this.readonly) { if (this.readonly) {
@@ -659,10 +669,7 @@ export class TableCell extends SignalWatcher(
this.inlineEditor?.selectAll(); this.inlineEditor?.selectAll();
} }
}; };
this.addEventListener('keydown', selectAll); this.disposables.addFromEvent(this, 'keydown', selectAll);
this.disposables.add(() => {
this.removeEventListener('keydown', selectAll);
});
this.disposables.addFromEvent(this, 'click', (e: MouseEvent) => { this.disposables.addFromEvent(this, 'click', (e: MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
requestAnimationFrame(() => { requestAnimationFrame(() => {
@@ -679,6 +686,13 @@ export class TableCell extends SignalWatcher(
} }
this.richText$.value?.updateComplete this.richText$.value?.updateComplete
.then(() => { .then(() => {
const inlineEditor = this.inlineEditor;
if (inlineEditor) {
this.disposables.add(
inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
);
}
this.disposables.add( this.disposables.add(
effect(() => { effect(() => {
const richText = this.richText$.value; const richText = this.richText$.value;