feat: add shortcut for table deletion

pull/5163/head
LIlGG 2024-01-10 11:04:59 +08:00
parent 0b30c0d98e
commit 0a812c497e
3 changed files with 62 additions and 4 deletions

View File

@ -15,8 +15,7 @@ const ExtensionListKeymap = ListKeymap.extend<ListKeymapOptions>({
let handled = false;
if (!editor.state.selection.empty) {
editor.commands.deleteSelection();
return true;
return false;
}
this.options.listTypes.forEach(

View File

@ -1,5 +1,10 @@
import TiptapTable, { type TableOptions } from "@tiptap/extension-table";
import { isActive, type Editor, type Range } from "@/tiptap/vue-3";
import {
isActive,
type Editor,
type Range,
isNodeActive,
} from "@/tiptap/vue-3";
import type {
Node as ProseMirrorNode,
NodeView,
@ -25,6 +30,8 @@ import { markRaw } from "vue";
import { i18n } from "@/locales";
import type { ExtensionOptions, NodeBubbleMenu } from "@/types";
import { BlockActionSeparator, ToolboxItem } from "@/components";
import { hasTableBefore, isTableSelected } from "./util";
import { Editor } from "@tiptap/core";
function updateColumns(
node: ProseMirrorNode,
@ -375,6 +382,44 @@ const Table = TiptapTable.extend<ExtensionOptions & TableOptions>({
},
};
},
addKeyboardShortcuts() {
const handleBackspace = () => {
const { editor } = this;
if (editor.commands.undoInputRule()) {
return true;
}
// the node in the current active state is not a table
// and the previous node is a table
if (
!isNodeActive(editor.state, Table.name) &&
hasTableBefore(editor.state)
) {
editor.commands.selectNodeBackward();
return true;
}
if (!isNodeActive(editor.state, Table.name)) {
return false;
}
// If the table is currently selected,
// then delete the whole table
if (isTableSelected(editor.state.selection)) {
editor.commands.deleteTable();
return true;
}
return false;
};
return {
Backspace: () => handleBackspace(),
"Mod-Backspace": () => handleBackspace(),
};
},
}).configure({ resizable: true });
export default Table;

View File

@ -1,6 +1,6 @@
import { findParentNode } from "@/tiptap/vue-3";
import { Node, CellSelection, TableMap } from "@/tiptap/pm";
import type { Selection, Transaction } from "@/tiptap/pm";
import type { EditorState, Selection, Transaction } from "@/tiptap/pm";
export const selectTable = (tr: Transaction) => {
const table = findTable(tr.selection);
@ -236,3 +236,17 @@ export const isTableSelected = (selection: any) => {
return false;
};
export const hasTableBefore = (editorState: EditorState) => {
const { $anchor } = editorState.selection;
const previousNodePos = Math.max(0, $anchor.pos - 2);
const previousNode = editorState.doc.resolve(previousNodePos).node();
if (!previousNode || !(previousNode.type.name === "table")) {
return false;
}
return true;
};