-import {SerializedTableNode, TableNode, TableRowNode} from "@lexical/table";
-import {DOMConversion, DOMConversionMap, DOMConversionOutput, LexicalEditor, LexicalNode, Spread} from "lexical";
+import {SerializedTableNode, TableNode} from "@lexical/table";
+import {DOMConversion, DOMConversionMap, DOMConversionOutput, LexicalNode, Spread} from "lexical";
import {EditorConfig} from "lexical/LexicalEditor";
import {el} from "../utils/dom";
+import {getTableColumnWidths} from "../utils/tables";
export type SerializedCustomTableNode = Spread<{
id: string;
}
}
-function getTableColumnWidths(table: HTMLTableElement): string[] {
- const maxColRow = getMaxColRowFromTable(table);
-
- const colGroup = table.querySelector('colgroup');
- let widths: string[] = [];
- if (colGroup && (colGroup.childElementCount === maxColRow?.childElementCount || !maxColRow)) {
- widths = extractWidthsFromRow(colGroup);
- }
- if (widths.filter(Boolean).length === 0 && maxColRow) {
- widths = extractWidthsFromRow(maxColRow);
- }
-
- return widths;
-}
-
-function getMaxColRowFromTable(table: HTMLTableElement): HTMLTableRowElement|null {
- const rows = table.querySelectorAll('tr');
- let maxColCount: number = 0;
- let maxColRow: HTMLTableRowElement|null = null;
-
- for (const row of rows) {
- if (row.childElementCount > maxColCount) {
- maxColRow = row;
- maxColCount = row.childElementCount;
- }
- }
-
- return maxColRow;
-}
-
-function extractWidthsFromRow(row: HTMLTableRowElement|HTMLTableColElement) {
- return [...row.children].map(child => extractWidthFromElement(child as HTMLElement))
-}
-
-function extractWidthFromElement(element: HTMLElement): string {
- let width = element.style.width || element.getAttribute('width');
- if (width && !Number.isNaN(Number(width))) {
- width = width + 'px';
- }
-
- return width || '';
-}
-
export function $createCustomTableNode(): CustomTableNode {
return new CustomTableNode();
}
export function $isCustomTableNode(node: LexicalNode | null | undefined): node is CustomTableNode {
return node instanceof CustomTableNode;
}
-
-export function $setTableColumnWidth(node: CustomTableNode, columnIndex: number, width: number): void {
- const rows = node.getChildren() as TableRowNode[];
- let maxCols = 0;
- for (const row of rows) {
- const cellCount = row.getChildren().length;
- if (cellCount > maxCols) {
- maxCols = cellCount;
- }
- }
-
- let colWidths = node.getColWidths();
- if (colWidths.length === 0 || colWidths.length < maxCols) {
- colWidths = Array(maxCols).fill('');
- }
-
- if (columnIndex + 1 > colWidths.length) {
- console.error(`Attempted to set table column width for column [${columnIndex}] but only ${colWidths.length} columns found`);
- }
-
- colWidths[columnIndex] = width + 'px';
- node.setColWidths(colWidths);
-}
-
-export function $getTableColumnWidth(editor: LexicalEditor, node: CustomTableNode, columnIndex: number): number {
- const colWidths = node.getColWidths();
- if (colWidths.length > columnIndex && colWidths[columnIndex].endsWith('px')) {
- return Number(colWidths[columnIndex].replace('px', ''));
- }
-
- // Otherwise, get from table element
- const table = editor.getElementByKey(node.__key) as HTMLTableElement|null;
- if (table) {
- const maxColRow = getMaxColRowFromTable(table);
- if (maxColRow && maxColRow.children.length > columnIndex) {
- const cell = maxColRow.children[columnIndex];
- return cell.clientWidth;
- }
- }
-
- return 0;
-}
\ No newline at end of file
## In progress
- Table features
- - Cell properties form logic
+ - CustomTableCellNode importDOM logic
- Merge cell action
- Row properties form logic
- Table properties form logic
EditorSelectFormFieldDefinition
} from "../../framework/forms";
import {EditorUiContext} from "../../framework/core";
-import {$isCustomTableCellNode, CustomTableCellNode} from "../../../nodes/custom-table-cell-node";
+import {CustomTableCellNode} from "../../../nodes/custom-table-cell-node";
import {EditorFormModal} from "../../framework/modals";
-import {$getNodeFromSelection} from "../../../utils/selection";
import {$getSelection, ElementFormatType} from "lexical";
-import {TableCellHeaderStates} from "@lexical/table";
+import {$getTableCellsFromSelection, $setTableCellColumnWidth} from "../../../utils/tables";
+import {formatSizeValue} from "../../../utils/dom";
const borderStyleInput: EditorSelectFormFieldDefinition = {
label: 'Border style',
width: '', // TODO
height: styles.get('height') || '',
type: cell.getTag(),
- h_align: '', // TODO
+ h_align: cell.getFormatType(),
v_align: styles.get('vertical-align') || '',
border_width: styles.get('border-width') || '',
border_style: styles.get('border-style') || '',
export const cellProperties: EditorFormDefinition = {
submitText: 'Save',
async action(formData, context: EditorUiContext) {
- // TODO - Set for cell selection range
context.editor.update(() => {
- const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
- if ($isCustomTableCellNode(cell)) {
- // TODO - Set width
- cell.setFormat((formData.get('h_align')?.toString() || '') as ElementFormatType);
+ const cells = $getTableCellsFromSelection($getSelection());
+ for (const cell of cells) {
+ const width = formData.get('width')?.toString() || '';
+
+ $setTableCellColumnWidth(cell, width);
cell.updateTag(formData.get('type')?.toString() || '');
+ cell.setFormat((formData.get('h_align')?.toString() || '') as ElementFormatType);
const styles = cell.getStyles();
- styles.set('height', formData.get('height')?.toString() || '');
+ styles.set('height', formatSizeValue(formData.get('height')?.toString() || ''));
styles.set('vertical-align', formData.get('v_align')?.toString() || '');
- styles.set('border-width', formData.get('border_width')?.toString() || '');
+ styles.set('border-width', formatSizeValue(formData.get('border_width')?.toString() || ''));
styles.set('border-style', formData.get('border_style')?.toString() || '');
styles.set('border-color', formData.get('border_color')?.toString() || '');
styles.set('background-color', formData.get('background_color')?.toString() || '');
import {$getNearestNodeFromDOMNode, LexicalEditor} from "lexical";
import {MouseDragTracker, MouseDragTrackerDistance} from "./mouse-drag-tracker";
-import {$getTableColumnWidth, $setTableColumnWidth, CustomTableNode} from "../../../nodes/custom-table";
+import {CustomTableNode} from "../../../nodes/custom-table";
import {TableRowNode} from "@lexical/table";
import {el} from "../../../utils/dom";
+import {$getTableColumnWidth, $setTableColumnWidth} from "../../../utils/tables";
type MarkerDomRecord = {x: HTMLElement, y: HTMLElement};
export function htmlToDom(html: string): Document {
const parser = new DOMParser();
return parser.parseFromString(html, 'text/html');
+}
+
+export function formatSizeValue(size: number | string, defaultSuffix: string = 'px'): string {
+ if (typeof size === 'number' || /^-?\d+$/.test(size)) {
+ return `${size}${defaultSuffix}`;
+ }
+
+ return size;
}
\ No newline at end of file
--- /dev/null
+import {BaseSelection, LexicalEditor} from "lexical";
+import {$isTableRowNode, $isTableSelection, TableRowNode} from "@lexical/table";
+import {$isCustomTableNode, CustomTableNode} from "../nodes/custom-table";
+import {$isCustomTableCellNode, CustomTableCellNode} from "../nodes/custom-table-cell-node";
+import {$getParentOfType} from "./nodes";
+import {$getNodeFromSelection} from "./selection";
+import {formatSizeValue} from "./dom";
+
+function $getTableFromCell(cell: CustomTableCellNode): CustomTableNode|null {
+ return $getParentOfType(cell, $isCustomTableNode) as CustomTableNode|null;
+}
+
+export function getTableColumnWidths(table: HTMLTableElement): string[] {
+ const maxColRow = getMaxColRowFromTable(table);
+
+ const colGroup = table.querySelector('colgroup');
+ let widths: string[] = [];
+ if (colGroup && (colGroup.childElementCount === maxColRow?.childElementCount || !maxColRow)) {
+ widths = extractWidthsFromRow(colGroup);
+ }
+ if (widths.filter(Boolean).length === 0 && maxColRow) {
+ widths = extractWidthsFromRow(maxColRow);
+ }
+
+ return widths;
+}
+
+function getMaxColRowFromTable(table: HTMLTableElement): HTMLTableRowElement | null {
+ const rows = table.querySelectorAll('tr');
+ let maxColCount: number = 0;
+ let maxColRow: HTMLTableRowElement | null = null;
+
+ for (const row of rows) {
+ if (row.childElementCount > maxColCount) {
+ maxColRow = row;
+ maxColCount = row.childElementCount;
+ }
+ }
+
+ return maxColRow;
+}
+
+function extractWidthsFromRow(row: HTMLTableRowElement | HTMLTableColElement) {
+ return [...row.children].map(child => extractWidthFromElement(child as HTMLElement))
+}
+
+function extractWidthFromElement(element: HTMLElement): string {
+ let width = element.style.width || element.getAttribute('width');
+ if (width && !Number.isNaN(Number(width))) {
+ width = width + 'px';
+ }
+
+ return width || '';
+}
+
+export function $setTableColumnWidth(node: CustomTableNode, columnIndex: number, width: number|string): void {
+ const rows = node.getChildren() as TableRowNode[];
+ let maxCols = 0;
+ for (const row of rows) {
+ const cellCount = row.getChildren().length;
+ if (cellCount > maxCols) {
+ maxCols = cellCount;
+ }
+ }
+
+ let colWidths = node.getColWidths();
+ if (colWidths.length === 0 || colWidths.length < maxCols) {
+ colWidths = Array(maxCols).fill('');
+ }
+
+ if (columnIndex + 1 > colWidths.length) {
+ console.error(`Attempted to set table column width for column [${columnIndex}] but only ${colWidths.length} columns found`);
+ }
+
+ colWidths[columnIndex] = formatSizeValue(width);
+ node.setColWidths(colWidths);
+}
+
+export function $getTableColumnWidth(editor: LexicalEditor, node: CustomTableNode, columnIndex: number): number {
+ const colWidths = node.getColWidths();
+ if (colWidths.length > columnIndex && colWidths[columnIndex].endsWith('px')) {
+ return Number(colWidths[columnIndex].replace('px', ''));
+ }
+
+ // Otherwise, get from table element
+ const table = editor.getElementByKey(node.__key) as HTMLTableElement | null;
+ if (table) {
+ const maxColRow = getMaxColRowFromTable(table);
+ if (maxColRow && maxColRow.children.length > columnIndex) {
+ const cell = maxColRow.children[columnIndex];
+ return cell.clientWidth;
+ }
+ }
+
+ return 0;
+}
+
+function $getCellColumnIndex(node: CustomTableCellNode): number {
+ const row = node.getParent();
+ if (!$isTableRowNode(row)) {
+ return -1;
+ }
+
+ let index = 0;
+ const cells = row.getChildren<CustomTableCellNode>();
+ for (const cell of cells) {
+ let colSpan = cell.getColSpan() || 1;
+ index += colSpan;
+ if (cell.getKey() === node.getKey()) {
+ break;
+ }
+ }
+
+ return index - 1;
+}
+
+export function $setTableCellColumnWidth(cell: CustomTableCellNode, width: string): void {
+ const table = $getTableFromCell(cell)
+ const index = $getCellColumnIndex(cell);
+
+ if (table && index >= 0) {
+ $setTableColumnWidth(table, index, width);
+ }
+}
+
+export function $getTableCellsFromSelection(selection: BaseSelection|null): CustomTableCellNode[] {
+ if ($isTableSelection(selection)) {
+ const nodes = selection.getNodes();
+ return nodes.filter(n => $isCustomTableCellNode(n));
+ }
+
+ const cell = $getNodeFromSelection(selection, $isCustomTableCellNode) as CustomTableCellNode;
+ return cell ? [cell] : [];
+}
\ No newline at end of file
projects / bookstack / commitdiff