@lobehub/editor 4.15.2 → 4.16.0

package/es/headless.js

@@ -1,9 +1,9 @@
 import { createHeadlessEditor as createHeadlessEditor$1 } from "@lexical/headless";
 import { createEmptyHistoryState, registerHistory } from "@lexical/history";
-import { $createTableNodeWithDimensions, $createTableSelection, $findTableNode, $isTableCellNode, $isTableNode, $isTableSelection, TableCellNode, TableNode, TableNode as TableNode$1, TableRowNode, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
+import { $computeTableMapSkipCellCheck, $createTableNodeWithDimensions, $createTableSelection, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $findTableNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isSimpleTable, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, TableCellNode, TableNode, TableNode as TableNode$1, TableRowNode, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
 import { get, merge, template, templateSettings } from "es-toolkit/compat";
 import EventEmitter from "eventemitter3";
-import { $applyNodeReplacement, $caretFromPoint, $createLineBreakNode, $createNodeSelection, $createParagraphNode, $createRangeSelection, $createTextNode, $getCaretRange, $getCharacterOffsets, $getChildCaret, $getNearestNodeFromDOMNode, $getNodeByKey, $getPreviousSelection, $getRoot, $getSelection, $insertNodes, $isBlockElementNode, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootNode, $isRootOrShadowRoot, $isTextNode, $isTextPointCaret, $nodesOfType, $normalizeSelection__EXPERIMENTAL, $parseSerializedNode, $setSelection, COLLABORATION_TAG, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_NORMAL, CONTROLLED_TEXT_INSERTION_COMMAND, COPY_COMMAND, DecoratorNode, ElementNode, FORMAT_TEXT_COMMAND, HISTORIC_TAG, HISTORY_MERGE_TAG, HISTORY_PUSH_TAG, INDENT_CONTENT_COMMAND, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, INSERT_TAB_COMMAND, IS_BOLD, IS_CODE, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND, KEY_ENTER_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, PASTE_COMMAND, ParagraphNode, REDO_COMMAND, SELECTION_CHANGE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, TEXT_TYPE_TO_FORMAT, TabNode, TextNode, UNDO_COMMAND, createCommand, createEditor, getNearestEditorFromDOMNode, isHTMLElement, isModifierMatch, resetRandomKey } from "lexical";
+import { $applyNodeReplacement, $caretFromPoint, $createLineBreakNode, $createNodeSelection, $createParagraphNode, $createRangeSelection, $createTextNode, $getCaretRange, $getCharacterOffsets, $getChildCaret, $getNearestNodeFromDOMNode, $getNodeByKey, $getPreviousSelection, $getRoot, $getSelection, $insertNodes, $isBlockElementNode, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootNode, $isRootOrShadowRoot, $isTextNode, $isTextPointCaret, $nodesOfType, $normalizeSelection__EXPERIMENTAL, $parseSerializedNode, $setSelection, COLLABORATION_TAG, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_NORMAL, CONTROLLED_TEXT_INSERTION_COMMAND, COPY_COMMAND, DecoratorNode, ElementNode, FORMAT_TEXT_COMMAND, HISTORIC_TAG, HISTORY_MERGE_TAG, HISTORY_PUSH_TAG, INDENT_CONTENT_COMMAND, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, INSERT_TAB_COMMAND, IS_BOLD, IS_CODE, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND, KEY_ENTER_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, PASTE_COMMAND, ParagraphNode, REDO_COMMAND, SELECTION_CHANGE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, TEXT_TYPE_TO_FORMAT, TabNode, TextNode, UNDO_COMMAND, createCommand, createEditor, getNearestEditorFromDOMNode, isHTMLElement, isModifierMatch, resetRandomKey, setDOMUnmanaged } from "lexical";
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text";
 import createDebug from "debug";
 import { $filter, $findMatchingParent, $getNearestBlockElementAncestorOrThrow, $getNearestNodeOfType, $insertNodeToNearestRoot, CAN_USE_DOM, IS_APPLE as isApple, addClassNamesToElement, calculateZoomLevel, isHTMLAnchorElement, isHTMLElement as isHTMLElement$1, mergeRegister } from "@lexical/utils";
@@ -20,7 +20,11 @@ import { $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode } from "
 import { bundledLanguagesInfo } from "shiki";
 //#region src/locale/index.ts
 var locale_default = {
-	block: { delete: "Delete block" },
+	block: {
+		copy: "Copy",
+		delete: "Delete block",
+		select: "Select"
+	},
 	cancel: "Cancel",
 	codemirror: {
 		copySuccess: "Code copied to clipboard",
@@ -3815,8 +3819,14 @@ const LitexmlPlugin = class extends KernelPlugin {
 		this.register(editor.registerNodeTransform(DiffNode, (node) => {
 			if (node.diffType === "modify" && node.getChildrenSize() === 1) node.setDiffType("remove");
 		}));
-		this.register(editor.registerUpdateListener(({ editorState, prevEditorState }) => {
+		this.register(editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
 			if (editorState === prevEditorState) return;
+			if (tags.has(HISTORIC_TAG)) return;
+			let shouldNormalize = false;
+			editorState.read(() => {
+				shouldNormalize = $nodesOfType(DiffNode).some((node) => node.diffType === "modify" && node.getChildrenSize() === 1);
+			});
+			if (!shouldNormalize) return;
 			editor.update(() => {
 				const diffNodes = $nodesOfType(DiffNode);
 				for (const node of diffNodes) if (node.diffType === "modify" && node.getChildrenSize() === 1) node.setDiffType("remove");
@@ -4648,7 +4658,7 @@ function registerLastElement(editor) {
 						root.append(paragraph);
 					}
 					isProcessing = false;
-				});
+				}, { tag: HISTORIC_TAG });
 			});
 		}
 	});
@@ -6395,75 +6405,544 @@ const ListPlugin = class extends KernelPlugin {
 	}
 };
 //#endregion
+//#region src/plugins/block/service/i-block-menu-service.ts
+const IBlockMenuService = genServiceId("BlockMenuService");
+function createDefaultTableColWidths(columnCount, tableWidth = 750) {
+	const safeColumnCount = Math.max(1, columnCount);
+	const columnWidth = Math.floor(tableWidth / safeColumnCount);
+	const colWidths = Array.from({ length: safeColumnCount }, () => columnWidth);
+	colWidths[safeColumnCount - 1] = tableWidth - columnWidth * (safeColumnCount - 1);
+	return colWidths;
+}
+function syncTableWidthDOM(editor, tableKey, colWidths) {
+	const tableElement = editor.getElementByKey(tableKey);
+	const table = tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table");
+	if (!(table instanceof HTMLTableElement)) return;
+	table.style.width = `${colWidths.reduce((total, width) => total + width, 0)}px`;
+}
+//#endregion
+//#region src/plugins/table/utils/autoFitColumnWidth.ts
+const AUTO_FIT_MIN_COLUMN_WIDTH = 75;
+const MEASURE_CONTAINER_CLASS = "lobe-editor-table-auto-fit-measure";
+const getTableElement$1 = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	return tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table");
+};
+const applyNoWrapMeasureStyle = (element) => {
+	element.style.whiteSpace = "nowrap";
+	element.style.wordBreak = "normal";
+	element.style.overflowWrap = "normal";
+	element.style.setProperty("text-wrap", "nowrap");
+};
+const createMeasureContainer = (tableElement) => {
+	const container = document.createElement("div");
+	container.className = MEASURE_CONTAINER_CLASS;
+	container.style.insetBlockStart = "0";
+	container.style.insetInlineStart = "-100000px";
+	container.style.pointerEvents = "none";
+	container.style.position = "absolute";
+	container.style.visibility = "hidden";
+	container.style.zIndex = "-1";
+	(tableElement.parentElement ?? document.body).append(container);
+	return container;
+};
+const measureCellNoWrapWidth = (cellElement, measureContainer) => {
+	const table = document.createElement("table");
+	const tbody = document.createElement("tbody");
+	const row = document.createElement("tr");
+	const clone = cellElement.cloneNode(true);
+	table.className = "editor_table";
+	table.style.borderCollapse = "collapse";
+	table.style.borderSpacing = "0";
+	table.style.tableLayout = "auto";
+	table.style.width = "max-content";
+	delete clone.dataset.lexicalKey;
+	clone.style.blockSize = "auto";
+	clone.style.display = "table-cell";
+	clone.style.inlineSize = "max-content";
+	clone.style.maxInlineSize = "none";
+	clone.style.minInlineSize = "0";
+	clone.style.overflow = "visible";
+	clone.style.position = "static";
+	clone.style.width = "max-content";
+	applyNoWrapMeasureStyle(table);
+	applyNoWrapMeasureStyle(clone);
+	clone.querySelectorAll("*").forEach(applyNoWrapMeasureStyle);
+	row.append(clone);
+	tbody.append(row);
+	table.append(tbody);
+	measureContainer.append(table);
+	const width = Math.ceil(Math.max(table.getBoundingClientRect().width, clone.getBoundingClientRect().width));
+	table.remove();
+	return width;
+};
+const getAutoFitTableColumnWidths = (editor, tableNode, columnIndexes) => {
+	const tableElement = getTableElement$1(editor, tableNode.getKey());
+	if (!tableElement || columnIndexes.length === 0) return null;
+	const columnCount = tableNode.getColumnCount();
+	const targetColumnIndexes = [...new Set(columnIndexes)].filter((index) => index >= 0 && index < columnCount);
+	if (targetColumnIndexes.length === 0) return null;
+	const measureContainer = createMeasureContainer(tableElement);
+	try {
+		const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+		const nextColWidths = [...tableNode.getColWidths() || createDefaultTableColWidths(columnCount)];
+		for (const columnIndex of targetColumnIndexes) {
+			const measuredCellKeys = /* @__PURE__ */ new Set();
+			let columnWidth = AUTO_FIT_MIN_COLUMN_WIDTH;
+			for (const row of tableMap) {
+				const cell = row[columnIndex]?.cell;
+				if (!cell || cell.getColSpan() > 1 || measuredCellKeys.has(cell.getKey())) continue;
+				const cellElement = editor.getElementByKey(cell.getKey());
+				if (!(cellElement instanceof HTMLElement)) continue;
+				measuredCellKeys.add(cell.getKey());
+				columnWidth = Math.max(columnWidth, measureCellNoWrapWidth(cellElement, measureContainer));
+			}
+			nextColWidths[columnIndex] = columnWidth;
+		}
+		return nextColWidths;
+	} finally {
+		measureContainer.remove();
+	}
+};
+//#endregion
+//#region src/plugins/table/utils/distributeColumnWidth.ts
+const DISTRIBUTE_MIN_COLUMN_WIDTH = 75;
+const getTableElement = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	return tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table");
+};
+const getScrollContainerWidth = (tableElement) => {
+	const container = tableElement.closest(".lobe-editor-table-scroll-wrapper") ?? tableElement.parentElement;
+	if (!container) return 0;
+	return container.clientWidth || container.getBoundingClientRect().width;
+};
+const getHorizontalBorderWidth = (tableElement) => {
+	const firstRow = tableElement.rows[0];
+	if (!firstRow) return 0;
+	const cells = Array.from(firstRow.cells);
+	if (cells.length === 0) return 0;
+	return cells.reduce((total, cell, index) => {
+		const style = getComputedStyle(cell);
+		const borderInlineStartWidth = index === 0 ? Number.parseFloat(style.borderInlineStartWidth) || 0 : 0;
+		const borderInlineEndWidth = Number.parseFloat(style.borderInlineEndWidth) || 0;
+		return total + borderInlineStartWidth + borderInlineEndWidth;
+	}, 0);
+};
+const getDistributedTableColumnWidths = (editor, tableNode) => {
+	const columnCount = tableNode.getColumnCount();
+	if (columnCount === 0) return null;
+	const tableElement = getTableElement(editor, tableNode.getKey());
+	if (!tableElement) return null;
+	const minTableWidth = DISTRIBUTE_MIN_COLUMN_WIDTH * columnCount;
+	const targetTableWidth = Math.max(getScrollContainerWidth(tableElement) - getHorizontalBorderWidth(tableElement), minTableWidth);
+	const columnWidth = Math.floor(targetTableWidth / columnCount);
+	const colWidths = Array.from({ length: columnCount }, () => columnWidth);
+	colWidths[columnCount - 1] = targetTableWidth - columnWidth * (columnCount - 1);
+	return colWidths;
+};
+//#endregion
 //#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 false;
+		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 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
 //#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
 	});
 }
 //#endregion
+//#region src/plugins/table/service/i-table-controller-menu-service.ts
+const ITableControllerMenuService = genServiceId("TableControllerMenuService");
+var TableControllerMenuService = class {
+	constructor() {
+		this.items = /* @__PURE__ */ new Map();
+		this.listeners = /* @__PURE__ */ new Set();
+	}
+	getItems(context) {
+		return Array.from(this.items.values()).filter((item) => item.when ? item.when(context) : true).sort((a, b) => (a.order || 0) - (b.order || 0));
+	}
+	registerItem(item) {
+		this.items.set(item.key, item);
+		this.notify();
+		return () => {
+			this.items.delete(item.key);
+			this.notify();
+		};
+	}
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+	notify() {
+		for (const listener of this.listeners) listener();
+	}
+};
+//#endregion
 //#region src/plugins/table/plugin/index.ts
 const tableCellProcessor = (before, content, after) => {
 	return before + content.replace(/\n+$/, "").replaceAll(/\n+/g, "<br />") + after;
@@ -6471,6 +6950,13 @@ const tableCellProcessor = (before, content, after) => {
 function isHeadlessEditor(editor) {
 	return editor._headless === true;
 }
+const getSelectedRange = (selectedIndexes) => {
+	const sortedIndexes = [...selectedIndexes].sort((a, b) => a - b);
+	return {
+		end: sortedIndexes.at(-1) ?? 0,
+		start: sortedIndexes[0] ?? 0
+	};
+};
 const TablePlugin = class extends KernelPlugin {
 	static {
 		this.pluginName = "TablePlugin";
@@ -6479,11 +6965,26 @@ const TablePlugin = class extends KernelPlugin {
 		super();
 		this.kernel = kernel;
 		patchTableNode();
+		kernel.registerServiceHotReload(ITableControllerMenuService, new TableControllerMenuService());
 		kernel.registerNodes([
 			TableNode$1,
 			TableRowNode,
 			TableCellNode
 		]);
+		if (options?.decoratorCol || options?.decoratorRow) {
+			kernel.registerDecorator(TableNode$1.getType(), { multi: [...options.decoratorCol ? [{
+				queryDOM: (el) => el.querySelector(".toolbar-col"),
+				render: (node, editor) => {
+					return options.decoratorCol?.(node, editor) || null;
+				}
+			}] : [], ...options.decoratorRow ? [{
+				queryDOM: (el) => el.querySelector(".toolbar-row"),
+				render: (node, editor) => {
+					return options.decoratorRow?.(node, editor) || null;
+				}
+			}] : []] });
+			this.registeredDecorators.add(TableNode$1.getType());
+		}
 		kernel.registerThemes({
 			table: "editor_table",
 			tableCell: "editor_table_cell",
@@ -6502,6 +7003,169 @@ const TablePlugin = class extends KernelPlugin {
 		}
 		this.registerMarkdown();
 		this.registerLiteXml();
+		this.registerControllerMenu();
+		this.registerBlockSelect();
+	}
+	registerBlockSelect() {
+		const blockMenuService = this.kernel.requireService(IBlockMenuService);
+		if (!blockMenuService) return;
+		this.register(blockMenuService.registerSelectHandler({
+			key: "__table_block_select_handler",
+			onSelect: (node) => {
+				if (!$isTableNode(node)) return false;
+				const [tableMap] = $computeTableMapSkipCellCheck(node, null, null);
+				const firstCell = tableMap[0]?.[0]?.cell;
+				const lastRow = [...tableMap].reverse().find((row) => row.length > 0);
+				const lastCell = lastRow?.[lastRow.length - 1]?.cell;
+				if (!firstCell || !lastCell) return false;
+				const tableSelection = $createTableSelection();
+				tableSelection.set(node.getKey(), firstCell.getKey(), lastCell.getKey());
+				$setSelection(tableSelection);
+				return true;
+			},
+			order: 100
+		}));
+	}
+	registerControllerMenu() {
+		const tableControllerMenuService = this.kernel.requireService(ITableControllerMenuService);
+		if (!tableControllerMenuService) return;
+		[
+			tableControllerMenuService.registerItem({
+				key: "__table_column_insert_before",
+				label: "Insert before",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { start } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_COLUMN_COMMAND, {
+						columnIndex: start,
+						insertAfter: false,
+						table: node.getKey()
+					});
+				},
+				order: 10,
+				preview: "insert-before",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_insert_after",
+				label: "Insert after",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { end } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_COLUMN_COMMAND, {
+						columnIndex: end,
+						insertAfter: true,
+						table: node.getKey()
+					});
+				},
+				order: 20,
+				preview: "insert-after",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_separator_delete",
+				order: 40,
+				type: "separator",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_sync_width",
+				label: "Sync width to all columns",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const columnIndex = selectedIndexes[0];
+					if (columnIndex === void 0) return;
+					editor.dispatchCommand(SYNC_TABLE_COLUMN_WIDTH_COMMAND, {
+						columnIndex,
+						table: node.getKey()
+					});
+				},
+				order: 30,
+				when: ({ axis, selectedIndexes }) => axis === "column" && selectedIndexes.length > 0
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_auto_fit_width",
+				label: "Auto fit width",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					editor.dispatchCommand(AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND, {
+						columnIndexes: selectedIndexes,
+						table: node.getKey()
+					});
+				},
+				order: 35,
+				when: ({ axis, selectedIndexes }) => axis === "column" && selectedIndexes.length > 0
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_distribute_width",
+				label: "Distribute width",
+				onClick: ({ editor, node }) => {
+					editor.dispatchCommand(DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND, { table: node.getKey() });
+				},
+				order: 36,
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				danger: true,
+				key: "__table_column_delete",
+				label: "Delete",
+				onClick: ({ editor }) => {
+					editor.update(() => {
+						$deleteTableColumnAtSelection();
+					});
+				},
+				order: 40,
+				preview: "delete",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_row_insert_above",
+				label: "Insert above",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { start } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_ROW_COMMAND, {
+						insertAfter: false,
+						rowIndex: start,
+						table: node.getKey()
+					});
+				},
+				order: 10,
+				preview: "insert-before",
+				when: ({ axis }) => axis === "row"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_row_insert_below",
+				label: "Insert below",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { end } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_ROW_COMMAND, {
+						insertAfter: true,
+						rowIndex: end,
+						table: node.getKey()
+					});
+				},
+				order: 20,
+				preview: "insert-after",
+				when: ({ axis }) => axis === "row"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_row_separator_delete",
+				order: 30,
+				type: "separator",
+				when: ({ axis }) => axis === "row"
+			}),
+			tableControllerMenuService.registerItem({
+				danger: true,
+				key: "__table_row_delete",
+				label: "Delete",
+				onClick: ({ editor }) => {
+					editor.update(() => {
+						$deleteTableRowAtSelection();
+					});
+				},
+				order: 40,
+				preview: "delete",
+				when: ({ axis }) => axis === "row"
+			})
+		].forEach((unregister) => {
+			this.register(unregister);
+		});
 	}
 	registerLiteXml() {
 		const litexmlService = this.kernel.requireService(ILitexmlService);
@@ -6536,7 +7200,7 @@ const TablePlugin = class extends KernelPlugin {
 			for (const child of children) if ((child.children?.length || -1) > maxTdlen) maxTdlen = child.children.length;
 			return INodeHelper.createElementNode(TableNode$1.getType(), {
 				children,
-				colWidths: colWidths.length > 0 ? colWidths : new Array(maxTdlen).fill(750 / maxTdlen),
+				colWidths: colWidths.length > 0 ? colWidths : createDefaultTableColWidths(maxTdlen),
 				direction: null,
 				format: "",
 				indent: 0,
@@ -6592,7 +7256,7 @@ const TablePlugin = class extends KernelPlugin {
 			const colLen = node.children[0]?.children.length || 1;
 			return INodeHelper.createElementNode("table", {
 				children,
-				colWidths: new Array(colLen).fill(750 / colLen),
+				colWidths: createDefaultTableColWidths(colLen),
 				direction: null,
 				format: "",
 				indent: 0,