@lobehub/editor 4.15.2 → 4.16.1

package/es/plugins/table/command/index.js

@@ -1,57 +1,238 @@
-import { $createTableNodeWithDimensions, $createTableSelection, $findTableNode, $isTableNode, $isTableSelection } from "@lexical/table";
+import { createDefaultTableColWidths, syncTableWidthDOM } from "../utils/index.js";
+import { getAutoFitTableColumnWidths } from "../utils/autoFitColumnWidth.js";
+import { getDistributedTableColumnWidths } from "../utils/distributeColumnWidth.js";
+import { $computeTableMapSkipCellCheck, $createTableNodeWithDimensions, $createTableSelection, $findTableNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isSimpleTable, $isTableNode, $isTableRowNode, $isTableSelection } from "@lexical/table";
 import { $getNodeByKey, $getPreviousSelection, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
 import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
 //#region src/plugins/table/command/index.ts
 const INSERT_TABLE_COMMAND = createCommand();
 const SELECT_TABLE_COMMAND = createCommand();
+const INSERT_TABLE_COLUMN_COMMAND = createCommand();
+const INSERT_TABLE_ROW_COMMAND = createCommand();
+const SYNC_TABLE_COLUMN_WIDTH_COMMAND = createCommand();
+const AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND = createCommand();
+const DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND = createCommand();
+const MOVE_TABLE_COLUMN_COMMAND = createCommand();
+const MOVE_TABLE_ROW_COMMAND = createCommand();
+const resetTableScrollLeft = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	const scrollWrapper = (tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table"))?.closest(".lobe-editor-table-scroll-wrapper");
+	if (scrollWrapper) scrollWrapper.scrollLeft = 0;
+};
+const $selectFirstDescendant = (node) => {
+	const firstDescendant = node.getFirstDescendant();
+	if ($isTextNode(firstDescendant)) firstDescendant.select();
+	else node.selectStart();
+};
+const getMoveRange = (selectedIndexes, targetIndex, insertAfter = false) => {
+	if (selectedIndexes.length === 0) return null;
+	const sortedIndexes = [...selectedIndexes].sort((a, b) => a - b);
+	const from = sortedIndexes[0];
+	const to = sortedIndexes.at(-1) ?? from;
+	const count = to - from + 1;
+	const insertionIndex = insertAfter ? targetIndex + 1 : targetIndex;
+	if (insertionIndex >= from && insertionIndex <= to + 1) return null;
+	return {
+		count,
+		from,
+		target: insertionIndex > to ? insertionIndex - count : insertionIndex,
+		to
+	};
+};
+const $selectTableRows = (tableNode, from, to) => {
+	const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+	const firstRow = tableMap[from];
+	const lastRow = tableMap[to];
+	const firstCell = firstRow?.[0]?.cell;
+	const lastCell = lastRow?.[lastRow.length - 1]?.cell;
+	if (!firstCell || !lastCell) return false;
+	const tableSelection = $createTableSelection();
+	tableSelection.set(tableNode.getKey(), firstCell.getKey(), lastCell.getKey());
+	$setSelection(tableSelection);
+	return true;
+};
+const $selectTableColumns = (tableNode, from, to) => {
+	const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+	const firstCell = tableMap.find((row) => row[from])?.[from]?.cell;
+	const lastCell = [...tableMap].reverse().find((row) => row[to])?.[to]?.cell;
+	if (!firstCell || !lastCell) return false;
+	const tableSelection = $createTableSelection();
+	tableSelection.set(tableNode.getKey(), firstCell.getKey(), lastCell.getKey());
+	$setSelection(tableSelection);
+	return true;
+};
+const getRangeFromSelection = (selection, table, targetIndex, direction, crossAxisLength, anchorIndex) => {
+	if (anchorIndex !== void 0) return {
+		from: Math.min(anchorIndex, targetIndex),
+		to: Math.max(anchorIndex, targetIndex)
+	};
+	if (!$isTableSelection(selection) || selection.tableKey !== table) return {
+		from: 0,
+		to: targetIndex
+	};
+	const shape = selection.getShape();
+	if (!(direction === "row" ? shape.fromX === 0 && shape.toX === crossAxisLength - 1 : shape.fromY === 0 && shape.toY === crossAxisLength - 1)) return {
+		from: 0,
+		to: targetIndex
+	};
+	const from = direction === "row" ? shape.fromY : shape.fromX;
+	const to = direction === "row" ? shape.toY : shape.toX;
+	return {
+		from: Math.min(from, targetIndex),
+		to: Math.max(to, targetIndex)
+	};
+};
 function registerTableCommand(editor) {
 	return mergeRegister(editor.registerCommand(INSERT_TABLE_COMMAND, ({ rows, columns, includeHeaders }) => {
 		const selection = $getSelection() || $getPreviousSelection();
 		if (!selection || !$isRangeSelection(selection)) return false;
-		if ($findTableNode(selection.anchor.getNode())) return false;
-		const anchorNode = selection.anchor.getNode();
-		const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
+		const anchorNode = $getNodeByKey(selection.anchor.key);
+		if (!anchorNode) return false;
+		if ($findTableNode(anchorNode)) return false;
+		const rowCount = Number(rows);
+		const columnCount = Number(columns);
+		const tableNode = $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders);
+		tableNode.setColWidths(createDefaultTableColWidths(columnCount));
 		if ($isElementNode(anchorNode) && anchorNode.isEmpty()) anchorNode.replace(tableNode);
 		else $insertNodeToNearestRoot(tableNode);
 		const firstDescendant = tableNode.getFirstDescendant();
 		if ($isTextNode(firstDescendant)) firstDescendant.select();
 		return true;
-	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(SELECT_TABLE_COMMAND, ({ table, columnIndex, rowIndex }) => {
-		editor.update(() => {
-			const prevSelection = $getSelection();
-			const tableNode = $getNodeByKey(table);
-			if (!tableNode || !$isTableNode(tableNode)) return;
-			const tableSelection = $isTableSelection(prevSelection) ? prevSelection : $createTableSelection();
-			if (rowIndex !== void 0) {
-				const firstRow = tableNode.getChildren()[rowIndex];
-				if (!firstRow) return;
-				const firstCell = firstRow.getFirstChild();
-				const lastCell = firstRow.getLastChild();
-				if (!firstCell || !lastCell) return;
-				tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
-				$setSelection(tableSelection);
-			} else if (columnIndex !== void 0) {
-				const firstRow = tableNode.getFirstChild();
-				const lastRow = tableNode.getLastChild();
-				if (!firstRow || !lastRow) return;
-				const firstCell = firstRow.getChildren()[columnIndex];
-				const lastCell = lastRow.getChildren()[columnIndex];
-				if (!firstCell || !lastCell) return;
-				tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
-				$setSelection(tableSelection);
-			} else {
-				const firstRow = tableNode.getFirstChild();
-				const lastRow = tableNode.getLastChild();
-				if (!firstRow || !lastRow) return;
-				const firstCell = firstRow.getFirstChild();
-				const lastCell = lastRow.getLastChild();
-				if (!firstCell || !lastCell) return;
-				tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
-				$setSelection(tableSelection);
-			}
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(INSERT_TABLE_COLUMN_COMMAND, ({ table, columnIndex, insertAfter = true }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode)) return false;
+		const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+		const firstCell = tableMap.find((row) => row[columnIndex])?.[columnIndex]?.cell;
+		const lastCell = [...tableMap].reverse().find((row) => row[columnIndex])?.[columnIndex]?.cell;
+		if (!firstCell || !lastCell) return false;
+		const tableSelection = $createTableSelection();
+		tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
+		$setSelection(tableSelection);
+		$insertTableColumnAtSelection(insertAfter);
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(INSERT_TABLE_ROW_COMMAND, ({ table, rowIndex, insertAfter = true }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode)) return false;
+		const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+		const row = tableMap[rowIndex];
+		const firstCell = row?.[0]?.cell;
+		const lastCell = row?.[row.length - 1]?.cell;
+		if (!firstCell || !lastCell) return false;
+		const tableSelection = $createTableSelection();
+		tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
+		$setSelection(tableSelection);
+		const insertedRow = $insertTableRowAtSelection(insertAfter);
+		if (insertedRow) $selectFirstDescendant(insertedRow);
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(SYNC_TABLE_COLUMN_WIDTH_COMMAND, ({ table, columnIndex }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode)) return false;
+		const columnCount = tableNode.getColumnCount();
+		const selectedWidth = (tableNode.getColWidths() || createDefaultTableColWidths(columnCount))[columnIndex];
+		if (selectedWidth === void 0) return false;
+		const nextColWidths = Array.from({ length: columnCount }, () => selectedWidth);
+		tableNode.setColWidths(nextColWidths);
+		requestAnimationFrame(() => {
+			syncTableWidthDOM(editor, table, nextColWidths);
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND, ({ table, columnIndexes }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode)) return false;
+		const nextColWidths = getAutoFitTableColumnWidths(editor, tableNode, columnIndexes);
+		if (!nextColWidths) return false;
+		tableNode.setColWidths(nextColWidths);
+		requestAnimationFrame(() => {
+			syncTableWidthDOM(editor, table, nextColWidths);
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND, ({ table }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode)) return false;
+		const nextColWidths = getDistributedTableColumnWidths(editor, tableNode);
+		if (!nextColWidths) return false;
+		tableNode.setColWidths(nextColWidths);
+		requestAnimationFrame(() => {
+			syncTableWidthDOM(editor, table, nextColWidths);
+			resetTableScrollLeft(editor, table);
 		});
-		return false;
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(MOVE_TABLE_COLUMN_COMMAND, ({ table, selectedColumns, columnIndex, insertAfter = false }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode) || !$isSimpleTable(tableNode)) return false;
+		const moveRange = getMoveRange(selectedColumns, columnIndex, insertAfter);
+		if (!moveRange) return false;
+		const { count, from, target, to } = moveRange;
+		tableNode.getChildren().filter($isTableRowNode).forEach((row) => {
+			const cells = row.getChildren();
+			const movedCells = cells.slice(from, to + 1);
+			const nextCells = [...cells.slice(0, from), ...cells.slice(to + 1)];
+			nextCells.splice(target, 0, ...movedCells);
+			row.splice(0, cells.length, nextCells);
+		});
+		const colWidths = tableNode.getColWidths();
+		if (colWidths && colWidths.length === tableNode.getColumnCount()) {
+			const movedWidths = colWidths.slice(from, to + 1);
+			const nextWidths = [...colWidths.slice(0, from), ...colWidths.slice(to + 1)];
+			nextWidths.splice(target, 0, ...movedWidths);
+			tableNode.setColWidths(nextWidths);
+		}
+		$selectTableColumns(tableNode, target, target + count - 1);
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(MOVE_TABLE_ROW_COMMAND, ({ table, selectedRows, rowIndex, insertAfter = false }) => {
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode) || !$isSimpleTable(tableNode)) return false;
+		const moveRange = getMoveRange(selectedRows, rowIndex, insertAfter);
+		if (!moveRange) return false;
+		const { count, from, target, to } = moveRange;
+		const rows = tableNode.getChildren();
+		const movedRows = rows.slice(from, to + 1);
+		const nextRows = [...rows.slice(0, from), ...rows.slice(to + 1)];
+		nextRows.splice(target, 0, ...movedRows);
+		tableNode.splice(0, rows.length, nextRows);
+		$selectTableRows(tableNode, target, target + count - 1);
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(SELECT_TABLE_COMMAND, ({ table, anchorIndex, columnIndex, extend, rowIndex }) => {
+		const prevSelection = $getSelection();
+		const tableNode = $getNodeByKey(table);
+		if (!tableNode || !$isTableNode(tableNode)) return false;
+		const tableSelection = $isTableSelection(prevSelection) ? prevSelection : $createTableSelection();
+		const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+		if (rowIndex !== void 0) {
+			const { from, to } = extend ? getRangeFromSelection(prevSelection, table, rowIndex, "row", tableNode.getColumnCount(), anchorIndex) : {
+				from: rowIndex,
+				to: rowIndex
+			};
+			const firstRow = tableMap[from];
+			const lastRow = tableMap[to];
+			const firstCell = firstRow?.[0]?.cell;
+			const lastCell = lastRow?.[lastRow.length - 1]?.cell;
+			if (!firstCell || !lastCell) return false;
+			tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
+			$setSelection(tableSelection);
+			return true;
+		}
+		if (columnIndex !== void 0) {
+			const { from, to } = extend ? getRangeFromSelection(prevSelection, table, columnIndex, "column", tableMap.length, anchorIndex) : {
+				from: columnIndex,
+				to: columnIndex
+			};
+			const firstCell = tableMap.find((row) => row[from])?.[from]?.cell;
+			const lastCell = [...tableMap].reverse().find((row) => row[to])?.[to]?.cell;
+			if (!firstCell || !lastCell) return false;
+			tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
+			$setSelection(tableSelection);
+			return true;
+		}
+		const firstRow = tableMap[0];
+		const lastRow = tableMap.at(-1);
+		const firstCell = firstRow?.[0]?.cell;
+		const lastCell = lastRow?.[lastRow.length - 1]?.cell;
+		if (!firstCell || !lastCell) return false;
+		tableSelection.set(table, firstCell.getKey(), lastCell.getKey());
+		$setSelection(tableSelection);
+		return true;
 	}, COMMAND_PRIORITY_EDITOR));
 }
 //#endregion
-export { INSERT_TABLE_COMMAND, SELECT_TABLE_COMMAND, registerTableCommand };
+export { AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND, DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, MOVE_TABLE_COLUMN_COMMAND, MOVE_TABLE_ROW_COMMAND, SELECT_TABLE_COMMAND, SYNC_TABLE_COLUMN_WIDTH_COMMAND, registerTableCommand };

package/es/plugins/table/index.d.ts

@@ -1,3 +1,4 @@
-import { INSERT_TABLE_COMMAND, SELECT_TABLE_COMMAND } from "./command/index.js";
+import { INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, SELECT_TABLE_COMMAND } from "./command/index.js";
 import { TablePlugin, TablePluginOptions } from "./plugin/index.js";
-import { ReactTablePlugin } from "./react/index.js";
+import { ReactTablePlugin } from "./react/index.js";
+import { ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, TableControllerMenuAxis, TableControllerMenuService } from "./service/i-table-controller-menu-service.js";

package/es/plugins/table/node/index.d.ts

@@ -0,0 +1,2 @@
+import { TableNode as TableNode$1 } from "@lexical/table";
+export { TableNode$1 as TableNode };

package/es/plugins/table/node/index.js

@@ -1,14 +1,142 @@
+import { getKernelFromEditor, getKernelFromEditorConfig, reconcileDecorator } from "../../../editor-kernel/utils.js";
 import { TableNode, TableNode as TableNode$1 } from "@lexical/table";
+import { setDOMUnmanaged } from "lexical";
 //#region src/plugins/table/node/index.ts
 const OriginalCreateDOM = TableNode.prototype.createDOM;
+const OriginalUpdateDOM = TableNode.prototype.updateDOM;
+const SCROLL_INDICATOR_WIDTH = 24;
+function markTableControllerHost(element, withDecorator = false) {
+	setDOMUnmanaged(element);
+	if (withDecorator) element.dataset.lexicalDecorator = "true";
+}
+function updateTableScrollIndicators(scrollWrapper) {
+	const maxScrollLeft = scrollWrapper.scrollWidth - scrollWrapper.clientWidth;
+	const scrollLeft = scrollWrapper.scrollLeft;
+	const hasOverflow = maxScrollLeft > 1;
+	const showStart = hasOverflow && scrollLeft > 1;
+	const showEnd = hasOverflow && scrollLeft < maxScrollLeft - 1;
+	const startIndicator = scrollWrapper.querySelector(":scope > .lobe-editor-table-scroll-indicator-start");
+	const endIndicator = scrollWrapper.querySelector(":scope > .lobe-editor-table-scroll-indicator-end");
+	startIndicator?.classList.toggle("lobe-editor-table-scroll-indicator-visible", showStart);
+	endIndicator?.classList.toggle("lobe-editor-table-scroll-indicator-visible", showEnd);
+	if (startIndicator) startIndicator.style.transform = `translateX(${scrollLeft}px)`;
+	if (endIndicator) endIndicator.style.transform = `translateX(${Math.max(scrollLeft + scrollWrapper.clientWidth - SCROLL_INDICATOR_WIDTH, 0)}px)`;
+}
+function ensureTableScrollIndicators(scrollWrapper) {
+	const ensureIndicator = (className) => {
+		const existingIndicator = scrollWrapper.querySelector(`:scope > .${className}`);
+		if (existingIndicator instanceof HTMLElement) {
+			setDOMUnmanaged(existingIndicator);
+			return;
+		}
+		const indicator = document.createElement("span");
+		indicator.className = `lobe-editor-table-scroll-indicator ${className}`;
+		setDOMUnmanaged(indicator);
+		scrollWrapper.append(indicator);
+	};
+	ensureIndicator("lobe-editor-table-scroll-indicator-start");
+	ensureIndicator("lobe-editor-table-scroll-indicator-end");
+	if (scrollWrapper.dataset.scrollIndicatorsReady === "true") {
+		updateTableScrollIndicators(scrollWrapper);
+		return;
+	}
+	scrollWrapper.dataset.scrollIndicatorsReady = "true";
+	scrollWrapper.addEventListener("scroll", () => updateTableScrollIndicators(scrollWrapper), { passive: true });
+	const resizeObserver = new ResizeObserver(() => updateTableScrollIndicators(scrollWrapper));
+	resizeObserver.observe(scrollWrapper);
+	resizeObserver.observe(scrollWrapper.querySelector("table") ?? scrollWrapper);
+	requestAnimationFrame(() => updateTableScrollIndicators(scrollWrapper));
+}
+function ensureTableControllerDOM(element) {
+	const table = element instanceof HTMLTableElement ? element : element.querySelector("table");
+	if (!table) return;
+	let scrollWrapper = table.closest(".lobe-editor-table-scroll-wrapper");
+	if (!table.closest(".lobe-editor-table-scroll-wrapper")) {
+		scrollWrapper = document.createElement("div");
+		scrollWrapper.className = "lobe-editor-table-scroll-wrapper";
+		table.parentElement?.insertBefore(scrollWrapper, table);
+		scrollWrapper.append(table);
+	}
+	if (!scrollWrapper) return;
+	const legacyToolbar = element.querySelector(":scope > .toolbar");
+	if (legacyToolbar instanceof HTMLElement) {
+		legacyToolbar.className = "toolbar-col";
+		markTableControllerHost(legacyToolbar, true);
+		scrollWrapper.append(legacyToolbar);
+	}
+	const ensureToolbar = (parent, className, withDecorator = false) => {
+		const existingToolbar = parent.querySelector(`:scope > .${className}`);
+		if (existingToolbar instanceof HTMLElement) {
+			markTableControllerHost(existingToolbar, withDecorator);
+			return;
+		}
+		if (!existingToolbar) {
+			const toolbar = document.createElement("div");
+			toolbar.className = className;
+			markTableControllerHost(toolbar, withDecorator);
+			parent.append(toolbar);
+		}
+	};
+	const legacyDecoratedToolbar = scrollWrapper.querySelector(":scope > .toolbar[data-lexical-decorator]");
+	if (legacyDecoratedToolbar instanceof HTMLElement) {
+		legacyDecoratedToolbar.className = "toolbar-col";
+		markTableControllerHost(legacyDecoratedToolbar, true);
+	}
+	const legacyPlainToolbar = scrollWrapper.querySelector(":scope > .toolbar:not([data-lexical-decorator])");
+	if (legacyPlainToolbar instanceof HTMLElement) {
+		legacyPlainToolbar.className = "toolbar-row";
+		markTableControllerHost(legacyPlainToolbar, true);
+		element.append(legacyPlainToolbar);
+	}
+	ensureToolbar(scrollWrapper, "toolbar-col", true);
+	ensureToolbar(element, "toolbar-row", true);
+	ensureTableScrollIndicators(scrollWrapper);
+}
+function reconcileTableDecorator(editor, node, decorator) {
+	if (!decorator) return;
+	if (typeof decorator === "function") {
+		reconcileDecorator(editor, node.getKey(), decorator(node, editor));
+		return;
+	}
+	if ("multi" in decorator) {
+		const decorators = decorator.multi.map((item) => ({
+			queryDOM: item.queryDOM,
+			render: item.render(node, editor)
+		}));
+		reconcileDecorator(editor, node.getKey(), { multi: decorators });
+		return;
+	}
+	reconcileDecorator(editor, node.getKey(), {
+		queryDOM: decorator.queryDOM,
+		render: decorator.render(node, editor)
+	});
+}
 function patchTableNode() {
+	if (TableNode.prototype.createDOM !== OriginalCreateDOM) return;
 	Object.defineProperty(TableNode.prototype, "createDOM", {
 		configurable: true,
 		enumerable: false,
 		value: function(config, editor) {
 			const table = OriginalCreateDOM.call(this, config, editor);
-			const controller = document.createElement("div");
-			table.append(controller);
+			ensureTableControllerDOM(table);
+			const decorator = getKernelFromEditor(editor)?.getDecorator(TableNode.getType()) || null;
+			reconcileTableDecorator(editor, this, decorator);
+			return table;
+		},
+		writable: true
+	});
+	Object.defineProperty(TableNode.prototype, "updateDOM", {
+		configurable: true,
+		enumerable: false,
+		value: function(_prevNode, _dom, _config) {
+			const table = OriginalUpdateDOM.call(this, _prevNode, _dom, _config);
+			ensureTableControllerDOM(_dom);
+			const kernel = getKernelFromEditorConfig(_config);
+			const editor = kernel?.getLexicalEditor();
+			if (editor) {
+				const decorator = kernel?.getDecorator(TableNode.getType()) || null;
+				reconcileTableDecorator(editor, this, decorator);
+			}
 			return table;
 		},
 		writable: true

package/es/plugins/table/plugin/index.d.ts

@@ -1,6 +1,12 @@
 import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { TableNode } from "../node/index.js";
+import { ReactNode } from "react";
+import { LexicalEditor } from "lexical";
+
 //#region src/plugins/table/plugin/index.d.ts
 interface TablePluginOptions {
+  decoratorCol?: (node: TableNode, editor: LexicalEditor) => ReactNode;
+  decoratorRow?: (node: TableNode, editor: LexicalEditor) => ReactNode;
   theme?: string;
 }
 declare const TablePlugin: IEditorPluginConstructor<TablePluginOptions>;