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:
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user