feat: enhance table cells with rich content support (#1409)

- Support multiple content types in table cells and headers: paragraphs, headings, lists (bullet/ordered/task), blockquotes, callouts, images, videos, attachments, math blocks, toggles, and code blocks
- Add custom table extension with smart Tab key handling for list indentation within tables
- Preserve default table navigation when not in lists
This commit is contained in:
Philip Okugbe
2025-07-28 08:22:22 +01:00
committed by GitHub
parent 1f815880a4
commit 0bd7ecb9b0
6 changed files with 72 additions and 6 deletions

View File

@ -0,0 +1,65 @@
import Table from "@tiptap/extension-table";
import { Editor } from "@tiptap/core";
const LIST_TYPES = ["bulletList", "orderedList", "taskList"];
function isInList(editor: Editor): boolean {
const { $from } = editor.state.selection;
for (let depth = $from.depth; depth > 0; depth--) {
const node = $from.node(depth);
if (LIST_TYPES.includes(node.type.name)) {
return true;
}
}
return false;
}
function handleListIndent(editor: Editor): boolean {
return editor.commands.sinkListItem("listItem") ||
editor.commands.sinkListItem("taskItem");
}
function handleListOutdent(editor: Editor): boolean {
return editor.commands.liftListItem("listItem") ||
editor.commands.liftListItem("taskItem");
}
export const CustomTable = Table.extend({
addKeyboardShortcuts() {
return {
...this.parent?.(),
Tab: () => {
// If we're in a list within a table, handle list indentation
if (isInList(this.editor) && this.editor.isActive("table")) {
if (handleListIndent(this.editor)) {
return true;
}
}
// Otherwise, use default table navigation
if (this.editor.commands.goToNextCell()) {
return true;
}
if (!this.editor.can().addRowAfter()) {
return false;
}
return this.editor.chain().addRowAfter().goToNextCell().run();
},
"Shift-Tab": () => {
// If we're in a list within a table, handle list outdentation
if (isInList(this.editor) && this.editor.isActive("table")) {
if (handleListOutdent(this.editor)) {
return true;
}
}
// Otherwise, use default table navigation
return this.editor.commands.goToPreviousCell();
},
};
},
});