import {BaseSelection, LexicalEditor} from "lexical";
-import {$isTableRowNode, $isTableSelection, TableRowNode, TableSelection, TableSelectionShape} from "@lexical/table";
-import {$isCustomTableNode, CustomTableNode} from "../nodes/custom-table";
-import {$isCustomTableCellNode, CustomTableCellNode} from "../nodes/custom-table-cell";
+import {
+ $isTableCellNode,
+ $isTableNode,
+ $isTableRowNode,
+ $isTableSelection, TableCellNode, TableNode,
+ TableRowNode,
+ TableSelection,
+} from "@lexical/table";
import {$getParentOfType} from "./nodes";
import {$getNodeFromSelection} from "./selection";
-import {formatSizeValue} from "./dom";
+import {el, formatSizeValue} from "./dom";
import {TableMap} from "./table-map";
-function $getTableFromCell(cell: CustomTableCellNode): CustomTableNode|null {
- return $getParentOfType(cell, $isCustomTableNode) as CustomTableNode|null;
+function $getTableFromCell(cell: TableCellNode): TableNode|null {
+ return $getParentOfType(cell, $isTableNode) as TableNode|null;
}
export function getTableColumnWidths(table: HTMLTableElement): string[] {
return width || '';
}
-export function $setTableColumnWidth(node: CustomTableNode, columnIndex: number, width: number|string): void {
+export function $setTableColumnWidth(node: TableNode, columnIndex: number, width: number|string): void {
const rows = node.getChildren() as TableRowNode[];
let maxCols = 0;
for (const row of rows) {
node.setColWidths(colWidths);
}
-export function $getTableColumnWidth(editor: LexicalEditor, node: CustomTableNode, columnIndex: number): number {
+export function $getTableColumnWidth(editor: LexicalEditor, node: TableNode, columnIndex: number): number {
const colWidths = node.getColWidths();
if (colWidths.length > columnIndex && colWidths[columnIndex].endsWith('px')) {
return Number(colWidths[columnIndex].replace('px', ''));
return 0;
}
-function $getCellColumnIndex(node: CustomTableCellNode): number {
+function $getCellColumnIndex(node: TableCellNode): number {
const row = node.getParent();
if (!$isTableRowNode(row)) {
return -1;
}
let index = 0;
- const cells = row.getChildren<CustomTableCellNode>();
+ const cells = row.getChildren<TableCellNode>();
for (const cell of cells) {
let colSpan = cell.getColSpan() || 1;
index += colSpan;
return index - 1;
}
-export function $setTableCellColumnWidth(cell: CustomTableCellNode, width: string): void {
+export function $setTableCellColumnWidth(cell: TableCellNode, width: string): void {
const table = $getTableFromCell(cell)
const index = $getCellColumnIndex(cell);
}
}
-export function $getTableCellColumnWidth(editor: LexicalEditor, cell: CustomTableCellNode): string {
+export function $getTableCellColumnWidth(editor: LexicalEditor, cell: TableCellNode): string {
const table = $getTableFromCell(cell)
const index = $getCellColumnIndex(cell);
if (!table) {
return (widths.length > index) ? widths[index] : '';
}
-export function $getTableCellsFromSelection(selection: BaseSelection|null): CustomTableCellNode[] {
+export function buildColgroupFromTableWidths(colWidths: string[]): HTMLElement|null {
+ if (colWidths.length === 0) {
+ return null
+ }
+
+ const colgroup = el('colgroup');
+ for (const width of colWidths) {
+ const col = el('col');
+ if (width) {
+ col.style.width = width;
+ }
+ colgroup.append(col);
+ }
+
+ return colgroup;
+}
+
+export function $getTableCellsFromSelection(selection: BaseSelection|null): TableCellNode[] {
if ($isTableSelection(selection)) {
const nodes = selection.getNodes();
- return nodes.filter(n => $isCustomTableCellNode(n));
+ return nodes.filter(n => $isTableCellNode(n));
}
- const cell = $getNodeFromSelection(selection, $isCustomTableCellNode) as CustomTableCellNode;
+ const cell = $getNodeFromSelection(selection, $isTableCellNode) as TableCellNode;
return cell ? [cell] : [];
}
const fixedToX = selectionShape.toX + ((headCell.getColSpan() || 1) - 1);
const fixedToY = selectionShape.toY + ((headCell.getRowSpan() || 1) - 1);
- const mergeCells = tableMap.getCellsInRange(
- selectionShape.fromX,
- selectionShape.fromY,
- fixedToX,
- fixedToY,
- );
+ const mergeCells = tableMap.getCellsInRange({
+ fromX: selectionShape.fromX,
+ fromY: selectionShape.fromY,
+ toX: fixedToX,
+ toY: fixedToY,
+ });
if (mergeCells.length === 0) {
return;
firstCell.setRowSpan(newHeight);
}
+export function $getTableRowsFromSelection(selection: BaseSelection|null): TableRowNode[] {
+ const cells = $getTableCellsFromSelection(selection);
+ const rowsByKey: Record<string, TableRowNode> = {};
+ for (const cell of cells) {
+ const row = cell.getParent();
+ if ($isTableRowNode(row)) {
+ rowsByKey[row.getKey()] = row;
+ }
+ }
+
+ return Object.values(rowsByKey);
+}
+
+export function $getTableFromSelection(selection: BaseSelection|null): TableNode|null {
+ const cells = $getTableCellsFromSelection(selection);
+ if (cells.length === 0) {
+ return null;
+ }
+
+ const table = $getParentOfType(cells[0], $isTableNode);
+ if ($isTableNode(table)) {
+ return table;
+ }
+
+ return null;
+}
+
+export function $clearTableSizes(table: TableNode): void {
+ table.setColWidths([]);
+
+ // TODO - Extra form things once table properties and extra things
+ // are supported
+ for (const row of table.getChildren()) {
+ if (!$isTableRowNode(row)) {
+ continue;
+ }
+ const rowStyles = row.getStyles();
+ rowStyles.delete('height');
+ rowStyles.delete('width');
+ row.setStyles(rowStyles);
+
+ const cells = row.getChildren().filter(c => $isTableCellNode(c));
+ for (const cell of cells) {
+ const cellStyles = cell.getStyles();
+ cellStyles.delete('height');
+ cellStyles.delete('width');
+ cell.setStyles(cellStyles);
+ cell.clearWidth();
+ }
+ }
+}
+
+export function $clearTableFormatting(table: TableNode): void {
+ table.setColWidths([]);
+ table.setStyles(new Map);
+
+ for (const row of table.getChildren()) {
+ if (!$isTableRowNode(row)) {
+ continue;
+ }
+
+ row.setStyles(new Map);
+
+ const cells = row.getChildren().filter(c => $isTableCellNode(c));
+ for (const cell of cells) {
+ cell.setStyles(new Map);
+ cell.clearWidth();
+ }
+ }
+}
+
+/**
+ * Perform the given callback for each cell in the given table.
+ * Returning false from the callback stops the function early.
+ */
+export function $forEachTableCell(table: TableNode, callback: (c: TableCellNode) => void|false): void {
+ outer: for (const row of table.getChildren()) {
+ if (!$isTableRowNode(row)) {
+ continue;
+ }
+ const cells = row.getChildren();
+ for (const cell of cells) {
+ if (!$isTableCellNode(cell)) {
+ return;
+ }
+ const result = callback(cell);
+ if (result === false) {
+ break outer;
+ }
+ }
+ }
+}
+
+export function $getCellPaddingForTable(table: TableNode): string {
+ let padding: string|null = null;
+
+ $forEachTableCell(table, (cell: TableCellNode) => {
+ const cellPadding = cell.getStyles().get('padding') || ''
+ if (padding === null) {
+ padding = cellPadding;
+ }
+
+ if (cellPadding !== padding) {
+ padding = null;
+ return false;
+ }
+ });
+
+ return padding || '';
+}