- 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
37 lines
No EOL
1.2 KiB
TypeScript
37 lines
No EOL
1.2 KiB
TypeScript
import { TableHeader as TiptapTableHeader } from "@tiptap/extension-table-header";
|
|
|
|
export const TableHeader = TiptapTableHeader.extend({
|
|
name: "tableHeader",
|
|
content: "(paragraph | heading | bulletList | orderedList | taskList | blockquote | callout | image | video | attachment | mathBlock | details | codeBlock)+",
|
|
|
|
addAttributes() {
|
|
return {
|
|
...this.parent?.(),
|
|
backgroundColor: {
|
|
default: null,
|
|
parseHTML: (element) => element.style.backgroundColor || null,
|
|
renderHTML: (attributes) => {
|
|
if (!attributes.backgroundColor) {
|
|
return {};
|
|
}
|
|
return {
|
|
style: `background-color: ${attributes.backgroundColor}`,
|
|
'data-background-color': attributes.backgroundColor,
|
|
};
|
|
},
|
|
},
|
|
backgroundColorName: {
|
|
default: null,
|
|
parseHTML: (element) => element.getAttribute('data-background-color-name') || null,
|
|
renderHTML: (attributes) => {
|
|
if (!attributes.backgroundColorName) {
|
|
return {};
|
|
}
|
|
return {
|
|
'data-background-color-name': attributes.backgroundColorName.toLowerCase(),
|
|
};
|
|
},
|
|
},
|
|
};
|
|
},
|
|
}); |