BookStack/resources/js/wysiwyg/nodes/custom-table-cell.ts

247 lines
7.4 KiB
TypeScript
Raw Normal View History

import {
$createParagraphNode,
$isElementNode,
$isLineBreakNode,
$isTextNode,
DOMConversionMap,
DOMConversionOutput,
DOMExportOutput,
EditorConfig,
LexicalEditor,
LexicalNode,
Spread
} from "lexical";
import {
$createTableCellNode,
$isTableCellNode,
SerializedTableCellNode,
TableCellHeaderStates,
TableCellNode
} from "@lexical/table";
import {TableCellHeaderState} from "@lexical/table/LexicalTableCellNode";
import {extractStyleMapFromElement, StyleMap} from "../utils/dom";
import {CommonBlockAlignment, extractAlignmentFromElement} from "./_common";
export type SerializedCustomTableCellNode = Spread<{
styles: Record<string, string>;
alignment: CommonBlockAlignment;
}, SerializedTableCellNode>
export class CustomTableCellNode extends TableCellNode {
__styles: StyleMap = new Map;
__alignment: CommonBlockAlignment = '';
static getType(): string {
return 'custom-table-cell';
}
static clone(node: CustomTableCellNode): CustomTableCellNode {
const cellNode = new CustomTableCellNode(
node.__headerState,
node.__colSpan,
node.__width,
node.__key,
);
cellNode.__rowSpan = node.__rowSpan;
cellNode.__styles = new Map(node.__styles);
cellNode.__alignment = node.__alignment;
return cellNode;
}
clearWidth(): void {
const self = this.getWritable();
self.__width = undefined;
}
getStyles(): StyleMap {
const self = this.getLatest();
return new Map(self.__styles);
}
setStyles(styles: StyleMap): void {
const self = this.getWritable();
self.__styles = new Map(styles);
}
setAlignment(alignment: CommonBlockAlignment) {
const self = this.getWritable();
self.__alignment = alignment;
}
getAlignment(): CommonBlockAlignment {
const self = this.getLatest();
return self.__alignment;
}
updateTag(tag: string): void {
const isHeader = tag.toLowerCase() === 'th';
const state = isHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS;
const self = this.getWritable();
self.__headerState = state;
}
createDOM(config: EditorConfig): HTMLElement {
const element = super.createDOM(config);
for (const [name, value] of this.__styles.entries()) {
element.style.setProperty(name, value);
}
if (this.__alignment) {
element.classList.add('align-' + this.__alignment);
}
return element;
}
updateDOM(prevNode: CustomTableCellNode): boolean {
return super.updateDOM(prevNode)
|| this.__styles !== prevNode.__styles
|| this.__alignment !== prevNode.__alignment;
}
static importDOM(): DOMConversionMap | null {
return {
td: (node: Node) => ({
conversion: $convertCustomTableCellNodeElement,
priority: 0,
}),
th: (node: Node) => ({
conversion: $convertCustomTableCellNodeElement,
priority: 0,
}),
};
}
exportDOM(editor: LexicalEditor): DOMExportOutput {
const element = this.createDOM(editor._config);
return {
element
};
}
static importJSON(serializedNode: SerializedCustomTableCellNode): CustomTableCellNode {
const node = $createCustomTableCellNode(
serializedNode.headerState,
serializedNode.colSpan,
serializedNode.width,
);
node.setStyles(new Map(Object.entries(serializedNode.styles)));
node.setAlignment(serializedNode.alignment);
return node;
}
exportJSON(): SerializedCustomTableCellNode {
return {
...super.exportJSON(),
type: 'custom-table-cell',
styles: Object.fromEntries(this.__styles),
alignment: this.__alignment,
};
}
}
function $convertCustomTableCellNodeElement(domNode: Node): DOMConversionOutput {
const output = $convertTableCellNodeElement(domNode);
if (domNode instanceof HTMLElement && output.node instanceof CustomTableCellNode) {
output.node.setStyles(extractStyleMapFromElement(domNode));
output.node.setAlignment(extractAlignmentFromElement(domNode));
}
return output;
}
/**
* Function taken from:
* https://github.com/facebook/lexical/blob/e1881a6e409e1541c10dd0b5378f3a38c9dc8c9e/packages/lexical-table/src/LexicalTableCellNode.ts#L289
* Copyright (c) Meta Platforms, Inc. and affiliates.
* MIT LICENSE
* Modified since copy.
*/
export function $convertTableCellNodeElement(
domNode: Node,
): DOMConversionOutput {
const domNode_ = domNode as HTMLTableCellElement;
const nodeName = domNode.nodeName.toLowerCase();
let width: number | undefined = undefined;
const PIXEL_VALUE_REG_EXP = /^(\d+(?:\.\d+)?)px$/;
if (PIXEL_VALUE_REG_EXP.test(domNode_.style.width)) {
width = parseFloat(domNode_.style.width);
}
const tableCellNode = $createTableCellNode(
nodeName === 'th'
? TableCellHeaderStates.ROW
: TableCellHeaderStates.NO_STATUS,
domNode_.colSpan,
width,
);
tableCellNode.__rowSpan = domNode_.rowSpan;
const style = domNode_.style;
const textDecoration = style.textDecoration.split(' ');
const hasBoldFontWeight =
style.fontWeight === '700' || style.fontWeight === 'bold';
const hasLinethroughTextDecoration = textDecoration.includes('line-through');
const hasItalicFontStyle = style.fontStyle === 'italic';
const hasUnderlineTextDecoration = textDecoration.includes('underline');
return {
after: (childLexicalNodes) => {
if (childLexicalNodes.length === 0) {
childLexicalNodes.push($createParagraphNode());
}
return childLexicalNodes;
},
forChild: (lexicalNode, parentLexicalNode) => {
if ($isTableCellNode(parentLexicalNode) && !$isElementNode(lexicalNode)) {
const paragraphNode = $createParagraphNode();
if (
$isLineBreakNode(lexicalNode) &&
lexicalNode.getTextContent() === '\n'
) {
return null;
}
if ($isTextNode(lexicalNode)) {
if (hasBoldFontWeight) {
lexicalNode.toggleFormat('bold');
}
if (hasLinethroughTextDecoration) {
lexicalNode.toggleFormat('strikethrough');
}
if (hasItalicFontStyle) {
lexicalNode.toggleFormat('italic');
}
if (hasUnderlineTextDecoration) {
lexicalNode.toggleFormat('underline');
}
}
paragraphNode.append(lexicalNode);
return paragraphNode;
}
return lexicalNode;
},
node: tableCellNode,
};
}
export function $createCustomTableCellNode(
headerState: TableCellHeaderState,
colSpan = 1,
width?: number,
): CustomTableCellNode {
return new CustomTableCellNode(headerState, colSpan, width);
}
export function $isCustomTableCellNode(node: LexicalNode | null | undefined): node is CustomTableCellNode {
return node instanceof CustomTableCellNode;
}