feat(editor): add delete key support for table view (#14119)
This PR allows the user to use the `Delete` key to delete the content of
one or more cells in a Table View. Previously, this was only possible to
do with the `Backspace` key. Both keys can now be used, which is often
the norm in other tools - such as Notion and Excel.
In short, the logic for the `Backspace` key has been moved to a separate
function which is called by keyevents from both the `Backspace` and
`Delete` keys.
Affected files:
-
blocksuite/affine/data-view/src/view-presets/table/pc-virtual/controller/hotkeys.ts
-
blocksuite/affine/data-view/src/view-presets/table/pc/controller/hotkeys.ts
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Optimized table hotkey handling logic to consolidate delete and
backspace operations for improved code maintainability.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -20,10 +20,7 @@ export class TableHotkeysController implements ReactiveController {
|
||||
return this.logic.ui$.value;
|
||||
}
|
||||
|
||||
hostConnected() {
|
||||
this.disposables.add(
|
||||
this.logic.bindHotkey({
|
||||
Backspace: () => {
|
||||
private _handleDeleteOrBackspace() {
|
||||
const selection = this.selectionController.selection;
|
||||
if (!selection) {
|
||||
return;
|
||||
@@ -35,13 +32,8 @@ export class TableHotkeysController implements ReactiveController {
|
||||
this.logic.ui$.value?.requestUpdate();
|
||||
return;
|
||||
}
|
||||
const {
|
||||
focus,
|
||||
rowsSelection,
|
||||
columnsSelection,
|
||||
isEditing,
|
||||
groupKey,
|
||||
} = selection;
|
||||
const { focus, rowsSelection, columnsSelection, isEditing, groupKey } =
|
||||
selection;
|
||||
if (focus && !isEditing) {
|
||||
if (rowsSelection && columnsSelection) {
|
||||
// multi cell
|
||||
@@ -74,6 +66,16 @@ export class TableHotkeysController implements ReactiveController {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hostConnected() {
|
||||
this.disposables.add(
|
||||
this.logic.bindHotkey({
|
||||
Backspace: () => {
|
||||
this._handleDeleteOrBackspace();
|
||||
},
|
||||
Delete: () => {
|
||||
this._handleDeleteOrBackspace();
|
||||
},
|
||||
Escape: () => {
|
||||
const selection = this.selectionController.selection;
|
||||
|
||||
@@ -18,10 +18,7 @@ export class TableHotkeysController implements ReactiveController {
|
||||
return this.logic.ui$.value;
|
||||
}
|
||||
|
||||
hostConnected() {
|
||||
this.host?.disposables.add(
|
||||
this.logic.bindHotkey({
|
||||
Backspace: () => {
|
||||
private _handleDeleteOrBackspace() {
|
||||
const selection = this.selectionController.selection;
|
||||
if (!selection) {
|
||||
return;
|
||||
@@ -33,13 +30,8 @@ export class TableHotkeysController implements ReactiveController {
|
||||
this.logic.ui$.value?.requestUpdate();
|
||||
return;
|
||||
}
|
||||
const {
|
||||
focus,
|
||||
rowsSelection,
|
||||
columnsSelection,
|
||||
isEditing,
|
||||
groupKey,
|
||||
} = selection;
|
||||
const { focus, rowsSelection, columnsSelection, isEditing, groupKey } =
|
||||
selection;
|
||||
if (focus && !isEditing) {
|
||||
if (rowsSelection && columnsSelection) {
|
||||
// multi cell
|
||||
@@ -72,6 +64,16 @@ export class TableHotkeysController implements ReactiveController {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hostConnected() {
|
||||
this.host?.disposables.add(
|
||||
this.logic.bindHotkey({
|
||||
Backspace: () => {
|
||||
this._handleDeleteOrBackspace();
|
||||
},
|
||||
Delete: () => {
|
||||
this._handleDeleteOrBackspace();
|
||||
},
|
||||
Escape: () => {
|
||||
const selection = this.selectionController.selection;
|
||||
|
||||
Reference in New Issue
Block a user