feat: add select all shortcut function to the table (#5443)

#### What type of PR is this?

/area editor
/area ui
/kind feature
/milestone 2.14.x

#### What this PR does / why we need it:

为默认富文本编辑器中的表格,增加全选快捷键。具体操作逻辑如下:

1. 当光标处于表格中单元格内时,按 `Mod + a` 全选快捷键后,若未选中当前单元格,则选中单元格。
2. 若其中包含有其他影响全选快捷键的组件,则以组件自身为准,例如代码块中的全选。
3. 若已经选中单元格,则再次按全选快捷键,选中整个表格。
4. 若已经选中表格,则再按全选快捷键不会触发其他全选事件。

#### How to test it?

按照操作逻辑测试全选快捷键逻辑是否无误。是否与其他快捷键产生冲突。

#### Which issue(s) this PR fixes:

Fixes #5438 

#### Does this PR introduce a user-facing change?
```release-note
为富文本编辑器中的表格组件增加全选快捷键
```
pull/5452/head^2
Takagi 2024-03-06 14:30:09 +08:00 committed by GitHub
parent 860f694385
commit 71d97b20c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 1 deletions

View File

@ -9,6 +9,7 @@ import {
mergeAttributes,
isNodeActive,
CoreEditor,
findParentNode,
} from "@/tiptap";
import {
type Node as ProseMirrorNode,
@ -36,7 +37,12 @@ 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 {
hasTableBefore,
isCellSelection,
isTableSelected,
selectTable,
} from "./util";
function updateColumns(
node: ProseMirrorNode,
@ -484,6 +490,38 @@ const Table = TiptapTable.extend<ExtensionOptions & TableOptions>({
Backspace: () => handleBackspace(),
"Mod-Backspace": () => handleBackspace(),
"Mod-a": ({ editor }) => {
if (!isNodeActive(editor.state, Table.name)) {
return false;
}
const { tr, selection } = editor.state;
// If the entire table is already selected, no longer perform the select all operation.
if (isTableSelected(selection)) {
return true;
}
if (isCellSelection(selection)) {
selectTable(tr);
editor.view.dispatch(tr);
return true;
}
let cellNodePos = findParentNode(
(node) => node.type.name === TableCell.name
)(selection);
if (!cellNodePos) {
cellNodePos = findParentNode(
(node) => node.type.name === TableHeader.name
)(selection);
}
if (!cellNodePos) {
return false;
}
editor.commands.setNodeSelection(cellNodePos.pos);
return true;
},
};
},