@lobehub/editor 4.15.2 → 4.16.0

package/es/plugins/table/react/hooks.js

@@ -0,0 +1,77 @@
+import { getTableSelectionIndexes, isTableFullySelected } from "../utils/index.js";
+import { useEffect, useState } from "react";
+import { $findTableNode, $isTableSelection } from "@lexical/table";
+import "es-toolkit/compat";
+import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/table/react/hooks.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const isSameSelection = (current, next) => {
+	return current.isTableFocused === next.isTableFocused && current.isTableSelected === next.isTableSelected && current.selectedColumns.length === next.selectedColumns.length && current.selectedRows.length === next.selectedRows.length && current.selectedColumns.every((column, index) => column === next.selectedColumns[index]) && current.selectedRows.every((row, index) => row === next.selectedRows[index]);
+};
+const readTableControllerSelection = (editor, tableKey) => {
+	const rootElement = editor.getRootElement();
+	const activeElement = rootElement?.ownerDocument.activeElement;
+	const isEditorFocused = Boolean(rootElement && activeElement && (activeElement === rootElement || rootElement.contains(activeElement)));
+	return editor.getEditorState().read(() => {
+		const selection = $getSelection();
+		const tableNode = $getNodeByKey(tableKey);
+		if (!tableNode) return {
+			isTableFocused: false,
+			isTableSelected: false,
+			selectedColumns: [],
+			selectedRows: []
+		};
+		const columnCount = tableNode.getColumnCount();
+		const rowCount = tableNode.getChildrenSize();
+		const selectionIndexes = getTableSelectionIndexes(selection, tableKey, columnCount, rowCount);
+		const anchorNode = $isRangeSelection(selection) ? $getNodeByKey(selection.anchor.key) : null;
+		return {
+			isTableFocused: isEditorFocused && ($isTableSelection(selection) && selection.tableKey === tableKey || Boolean(anchorNode && $findTableNode(anchorNode)?.getKey() === tableKey)),
+			isTableSelected: isEditorFocused && isTableFullySelected(selection, tableKey, columnCount, rowCount),
+			selectedColumns: isEditorFocused ? selectionIndexes.selectedColumns : [],
+			selectedRows: isEditorFocused ? selectionIndexes.selectedRows : []
+		};
+	});
+};
+const useTableControllerSelection = (editor, node) => {
+	const tableKey = node.getKey();
+	const [selection, setSelection] = useState(() => readTableControllerSelection(editor, tableKey));
+	useEffect(() => {
+		let frame = null;
+		const updateSelection = () => {
+			const nextSelection = readTableControllerSelection(editor, tableKey);
+			setSelection((currentSelection) => {
+				return isSameSelection(currentSelection, nextSelection) ? currentSelection : nextSelection;
+			});
+		};
+		const scheduleUpdateSelection = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				updateSelection();
+			});
+		};
+		const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("focusin", scheduleUpdateSelection);
+			prevRootElement?.removeEventListener("focusout", scheduleUpdateSelection);
+			rootElement?.addEventListener("focusin", scheduleUpdateSelection);
+			rootElement?.addEventListener("focusout", scheduleUpdateSelection);
+			updateSelection();
+		});
+		const unregisterUpdateListener = editor.registerUpdateListener(updateSelection);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			unregisterRootListener();
+			unregisterUpdateListener();
+		};
+	}, [editor, tableKey]);
+	return selection;
+};
+//#endregion
+export { useTableControllerSelection };

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

@@ -1,49 +1,172 @@
 "use client";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
 import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
+import { $updateDOMForSelection } from "../utils/index.js";
+import { ITableControllerMenuService } from "../service/i-table-controller-menu-service.js";
 import { TablePlugin } from "../plugin/index.js";
 import PortalAnchor from "../../../editor-kernel/react/PortalAnchor.js";
-import { $updateDOMForSelection } from "../utils/index.js";
 import TableActionMenu from "./TableActionMenu/index.js";
+import TableColController from "./TableColController.js";
 import TableHoverActions from "./TableHoverActions/index.js";
 import TableResize_default from "./TableResize/index.js";
-import { styles } from "./style.js";
-import { useLayoutEffect, useMemo, useState } from "react";
+import TableRowController from "./TableRowController.js";
+import { selectionOutlineStyles, styles } from "./style.js";
+import { useAutoFitPastedTable } from "./useAutoFitPastedTable.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import { $findTableNode, $getElementForTableNode, $isTableSelection } from "@lexical/table";
+import { $findTableNode, $getElementForTableNode, $isTableNode, $isTableSelection } from "@lexical/table";
 import EventEmitter from "eventemitter3";
-import { $getSelection, $isRangeSelection } from "lexical";
+import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
 //#region src/plugins/table/react/index.tsx
-const ReactTablePlugin = ({ className, locale }) => {
+const isEditorRootFocused = (activeEditor) => {
+	const rootElement = activeEditor.getRootElement();
+	const activeElement = rootElement?.ownerDocument.activeElement;
+	return Boolean(rootElement && activeElement && (activeElement === rootElement || rootElement.contains(activeElement)));
+};
+const ReactTablePlugin = ({ className, locale, resizeMode = "realtime" }) => {
 	const [editor] = useLexicalComposerContext();
 	const [lexicalEditor, setLexicalEditor] = useState(null);
+	const [selectionOutlineRect, setSelectionOutlineRect] = useState(null);
+	const [selectionOutlinePreviewSide, setSelectionOutlinePreviewSide] = useState(null);
 	const eventEmitter = useMemo(() => {
 		return new EventEmitter();
 	}, []);
+	useAutoFitPastedTable(lexicalEditor);
+	const selectionOutlineStyle = useMemo(() => {
+		if (!selectionOutlineRect) return;
+		const style = {
+			height: selectionOutlineRect.height,
+			left: selectionOutlineRect.left,
+			top: selectionOutlineRect.top,
+			width: selectionOutlineRect.width
+		};
+		if (!selectionOutlinePreviewSide) return style;
+		return {
+			...style,
+			borderBottomWidth: selectionOutlinePreviewSide === "bottom" ? void 0 : 0,
+			borderLeftWidth: selectionOutlinePreviewSide === "left" ? void 0 : 0,
+			borderRightWidth: selectionOutlinePreviewSide === "right" ? void 0 : 0,
+			borderTopWidth: selectionOutlinePreviewSide === "top" ? void 0 : 0
+		};
+	}, [selectionOutlinePreviewSide, selectionOutlineRect]);
+	const updateSelectionOutlineRect = useCallback((rect) => {
+		setSelectionOutlineRect((current) => {
+			if (current?.height === rect?.height && current?.left === rect?.left && current?.top === rect?.top && current?.width === rect?.width) return current;
+			return rect;
+		});
+	}, []);
+	const refreshSelectionOutlineRect = useCallback((activeEditor) => {
+		if (!isEditorRootFocused(activeEditor)) {
+			updateSelectionOutlineRect(null);
+			return;
+		}
+		activeEditor.read(() => {
+			const selection = $getSelection();
+			if (!$isTableSelection(selection) && !$isRangeSelection(selection)) {
+				updateSelectionOutlineRect(null);
+				return null;
+			}
+			const anchorNode = $isRangeSelection(selection) ? $getNodeByKey(selection.anchor.key) : null;
+			const tableNode = $isTableSelection(selection) ? $getNodeByKey(selection.tableKey) : anchorNode ? $findTableNode(anchorNode) : null;
+			if (!tableNode || !$isTableNode(tableNode)) {
+				updateSelectionOutlineRect(null);
+				return null;
+			}
+			updateSelectionOutlineRect($updateDOMForSelection(activeEditor, $getElementForTableNode(activeEditor, tableNode), selection));
+		});
+	}, [updateSelectionOutlineRect]);
+	useEffect(() => {
+		if (!lexicalEditor || !selectionOutlineRect) return;
+		let frame = null;
+		const scheduleRefresh = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				refreshSelectionOutlineRect(lexicalEditor);
+			});
+		};
+		document.addEventListener("scroll", scheduleRefresh, true);
+		window.addEventListener("resize", scheduleRefresh);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			document.removeEventListener("scroll", scheduleRefresh, true);
+			window.removeEventListener("resize", scheduleRefresh);
+		};
+	}, [
+		lexicalEditor,
+		refreshSelectionOutlineRect,
+		selectionOutlineRect
+	]);
 	useLayoutEffect(() => {
 		if (locale) editor.registerLocale(locale);
-		editor.registerPlugin(TablePlugin, { theme: cx(styles, className) });
+		editor.registerPlugin(TablePlugin, {
+			decoratorCol: (node, lexicalEditor) => {
+				return /* @__PURE__ */ jsx(TableColController, {
+					blockMenuService: editor.requireService(IBlockMenuService),
+					editor: lexicalEditor,
+					menuService: editor.requireService(ITableControllerMenuService),
+					node,
+					onColumnMetricsChange: () => {
+						requestAnimationFrame(() => {
+							refreshSelectionOutlineRect(lexicalEditor);
+						});
+					},
+					onInsertPreviewChange: setSelectionOutlinePreviewSide
+				}, node.getColumnCount());
+			},
+			decoratorRow: (node, lexicalEditor) => {
+				return /* @__PURE__ */ jsx(TableRowController, {
+					blockMenuService: editor.requireService(IBlockMenuService),
+					editor: lexicalEditor,
+					menuService: editor.requireService(ITableControllerMenuService),
+					node,
+					onInsertPreviewChange: setSelectionOutlinePreviewSide
+				});
+			},
+			theme: cx(styles, className)
+		});
 	}, []);
 	useLexicalEditor((editor) => {
 		setLexicalEditor(editor);
-		editor.registerUpdateListener(() => {
-			editor.read(() => {
-				const selection = $getSelection();
-				if (!$isTableSelection(selection) && !$isRangeSelection(selection)) return null;
-				const tableNode = $findTableNode(selection.anchor.getNode());
-				if (!tableNode) return null;
-				$updateDOMForSelection(editor, $getElementForTableNode(editor, tableNode), selection);
+		let frame = null;
+		const scheduleRefreshSelectionOutlineRect = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				refreshSelectionOutlineRect(editor);
 			});
+		};
+		const unregisterUpdateListener = editor.registerUpdateListener(scheduleRefreshSelectionOutlineRect);
+		const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("focusin", scheduleRefreshSelectionOutlineRect);
+			prevRootElement?.removeEventListener("focusout", scheduleRefreshSelectionOutlineRect);
+			rootElement?.addEventListener("focusin", scheduleRefreshSelectionOutlineRect);
+			rootElement?.addEventListener("focusout", scheduleRefreshSelectionOutlineRect);
 		});
 		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			unregisterRootListener();
+			unregisterUpdateListener();
+			updateSelectionOutlineRect(null);
+			setSelectionOutlinePreviewSide(null);
 			setLexicalEditor(null);
 		};
 	}, []);
 	return lexicalEditor && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableResize_default, {
 		editor: lexicalEditor,
-		eventEmitter
-	}), /* @__PURE__ */ jsxs(PortalAnchor, { children: [/* @__PURE__ */ jsx(TableActionMenu, { editor: lexicalEditor }), /* @__PURE__ */ jsx(TableHoverActions, { editor: lexicalEditor })] })] });
+		eventEmitter,
+		resizeMode
+	}), /* @__PURE__ */ jsxs(PortalAnchor, { children: [
+		selectionOutlineStyle && /* @__PURE__ */ jsx("div", {
+			className: selectionOutlineStyles.outline,
+			contentEditable: false,
+			style: selectionOutlineStyle
+		}),
+		/* @__PURE__ */ jsx(TableActionMenu, { editor: lexicalEditor }),
+		/* @__PURE__ */ jsx(TableHoverActions, { editor: lexicalEditor })
+	] })] });
 };
 //#endregion
 export { ReactTablePlugin };

package/es/plugins/table/react/style.js

@@ -1,10 +1,82 @@
 import { createStaticStyles } from "antd-style";
 //#region src/plugins/table/react/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => css`
-    overflow-x: auto;
+    position: relative;
+    overflow: visible;
     margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em)
       calc(var(--lobe-markdown-margin-multiple) * 0.5em + 16px);
 
+    .lobe-editor-table-scroll-wrapper {
+      position: relative;
+      overflow: auto visible;
+      padding-block-start: 14px;
+    }
+
+    .lobe-editor-table-scroll-indicator {
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 3;
+      inset-block: 14px 0;
+
+      inline-size: 24px;
+
+      opacity: 0;
+
+      transition: opacity 0.12s ease;
+    }
+
+    .lobe-editor-table-scroll-indicator-visible {
+      opacity: 1;
+    }
+
+    .lobe-editor-table-scroll-indicator-start {
+      inset-inline-start: 0;
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, ${cssVar.colorBgContainer} 82%, transparent),
+        transparent
+      );
+    }
+
+    .lobe-editor-table-scroll-indicator-end {
+      inset-inline-start: 0;
+      background: linear-gradient(
+        to left,
+        color-mix(in srgb, ${cssVar.colorBgContainer} 82%, transparent),
+        transparent
+      );
+    }
+
+    .toolbar,
+    .toolbar-col,
+    .toolbar-row {
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 2;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      width: max-content;
+      height: 0;
+    }
+
+    .table-controller,
+    .table-controller-col,
+    .table-controller-row {
+      pointer-events: none;
+      position: relative;
+      width: max-content;
+      height: 0;
+    }
+
+    .table-controller-col .top,
+    .table-controller-row .left,
+    .table-controller-row .corner {
+      pointer-events: all;
+    }
+
     .editor_table {
       table-layout: fixed;
       border-spacing: 0;
@@ -18,11 +90,7 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       word-break: auto-phrase;
       overflow-wrap: break-word;
 
-      background: ${cssVar.colorFillQuaternary};
-
       > tr:first-of-type {
-        background: ${cssVar.colorFillQuaternary};
-
         .editor_table_cell_header {
           font-weight: bold;
         }
@@ -54,10 +122,23 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
     }
 
     .editor_table_cell_selected {
-      color: #000;
-      background-color: ${cssVar.yellow};
+      background-color: color-mix(in srgb, ${cssVar.yellow} 3%, transparent);
       caret-color: transparent;
     }
+
+    .lobe-editor-table-delete-preview {
+      background-color: color-mix(in srgb, ${cssVar.colorError} 20%, transparent) !important;
+    }
   `);
+const selectionOutlineStyles = createStaticStyles(({ css, cssVar }) => ({ outline: css`
+    pointer-events: none;
+
+    position: fixed;
+    z-index: 3;
+
+    box-sizing: border-box;
+    border: 1.5px solid color-mix(in srgb, ${cssVar.colorText} 22%, transparent);
+    border-radius: 3px;
+  ` }));
 //#endregion
-export { styles };
+export { selectionOutlineStyles, styles };

package/es/plugins/table/react/type.d.ts

@@ -1,8 +1,10 @@
 import { ILocaleKeys } from "../../../types/locale.js";
 //#region src/plugins/table/react/type.d.ts
+type TableResizeMode = 'realtime' | 'deferred';
 interface ReactTablePluginProps {
   className?: string;
   locale?: Partial<Record<keyof ILocaleKeys, string>>;
+  resizeMode?: TableResizeMode;
 }
 //#endregion
 export { ReactTablePluginProps };

package/es/plugins/table/react/useAutoFitPastedTable.js

@@ -0,0 +1,189 @@
+import { syncTableWidthDOM } from "../utils/index.js";
+import { getDistributedTableColumnWidths } from "../utils/distributeColumnWidth.js";
+import { useEffect, useRef } from "react";
+import { $computeTableMapSkipCellCheck, $isTableNode, TableNode } from "@lexical/table";
+import { $getNodeByKey, HISTORIC_TAG, PASTE_TAG, SKIP_SCROLL_INTO_VIEW_TAG } from "lexical";
+//#region src/plugins/table/react/useAutoFitPastedTable.ts
+const MAX_AUTO_FIT_ATTEMPTS = 3;
+const MIN_COLUMN_WIDTH = 75;
+const isPositiveNumber = (width) => {
+	return typeof width === "number" && Number.isFinite(width) && width > 0;
+};
+const hasValidColumnWidths = (colWidths, columnCount) => {
+	return colWidths?.length === columnCount && colWidths.every((width) => Number.isFinite(width) && width > 0);
+};
+const parseWidth = (value) => {
+	if (!value) return null;
+	const match = value.trim().match(/^(\d+(?:\.\d+)?)px?$|^(\d+(?:\.\d+)?)$/);
+	if (!match) return null;
+	const width = Number.parseFloat(match[1] || match[2]);
+	return Number.isFinite(width) && width > 0 ? width : null;
+};
+const getTableElement$1 = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	return tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table") || null;
+};
+const getHorizontalBorderWidth = (tableElement) => {
+	const firstRow = tableElement.rows[0];
+	if (!firstRow) return 0;
+	return Array.from(firstRow.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 getTargetTableWidth = (tableElement, columnCount) => {
+	const container = tableElement.closest(".lobe-editor-table-scroll-wrapper") ?? tableElement.parentElement;
+	const containerWidth = container?.clientWidth || container?.getBoundingClientRect().width || 0;
+	if (containerWidth <= 0) return 0;
+	return Math.max(containerWidth - getHorizontalBorderWidth(tableElement), columnCount * MIN_COLUMN_WIDTH);
+};
+const fitColumnWidths = (sourceWidths, targetWidth, minWidth = MIN_COLUMN_WIDTH) => {
+	const columnCount = sourceWidths.length;
+	if (columnCount === 0 || targetWidth <= 0) return null;
+	const nextWidths = Array.from({ length: columnCount }, () => 0);
+	const remainingIndexes = new Set(sourceWidths.map((_, index) => index));
+	let remainingWidth = Math.max(targetWidth, minWidth * columnCount);
+	while (remainingIndexes.size > 0) {
+		const remainingSourceWidth = Array.from(remainingIndexes).reduce((total, index) => total + (sourceWidths[index] ?? 0), 0);
+		const clampedIndexes = [];
+		for (const index of remainingIndexes) if ((remainingSourceWidth > 0 ? (sourceWidths[index] ?? 0) / remainingSourceWidth * remainingWidth : remainingWidth / remainingIndexes.size) < minWidth) {
+			nextWidths[index] = minWidth;
+			remainingWidth -= minWidth;
+			clampedIndexes.push(index);
+		}
+		if (clampedIndexes.length === 0) {
+			const indexes = Array.from(remainingIndexes);
+			const widthForRemaining = remainingWidth;
+			const flooredWidths = indexes.map((index) => {
+				return remainingSourceWidth > 0 ? (sourceWidths[index] ?? 0) / remainingSourceWidth * widthForRemaining : widthForRemaining / indexes.length;
+			}).map((width) => Math.floor(width));
+			const flooredTotal = flooredWidths.reduce((total, width) => total + width, 0);
+			const lastIndex = indexes.at(-1);
+			indexes.forEach((index, offset) => {
+				nextWidths[index] = flooredWidths[offset] ?? minWidth;
+			});
+			if (lastIndex !== void 0) nextWidths[lastIndex] += Math.round(widthForRemaining - flooredTotal);
+			break;
+		}
+		clampedIndexes.forEach((index) => {
+			remainingIndexes.delete(index);
+		});
+	}
+	return nextWidths;
+};
+const getDOMColumnWidths = (tableElement, columnCount) => {
+	const colWidths = Array.from(tableElement.querySelectorAll(":scope > colgroup > col")).slice(0, columnCount).map((col) => parseWidth(col.style.width) ?? parseWidth(col.getAttribute("width")));
+	if (colWidths.length === columnCount && colWidths.every(isPositiveNumber)) return colWidths;
+	const firstRow = tableElement.rows[0];
+	if (!firstRow) return null;
+	const widths = Array.from({ length: columnCount }, () => null);
+	let columnIndex = 0;
+	for (const cell of Array.from(firstRow.cells)) {
+		while (columnIndex < columnCount && widths[columnIndex] !== null) columnIndex += 1;
+		if (columnIndex >= columnCount) break;
+		const colSpan = Math.max(1, cell.colSpan || 1);
+		const cellWidth = parseWidth(cell.style.width) ?? parseWidth(cell.getAttribute("width")) ?? cell.getBoundingClientRect().width;
+		const width = Number.isFinite(cellWidth) && cellWidth > 0 ? cellWidth / colSpan : null;
+		for (let index = 0; index < colSpan && columnIndex + index < columnCount; index += 1) widths[columnIndex + index] = width;
+		columnIndex += colSpan;
+	}
+	return widths.every(isPositiveNumber) ? widths : null;
+};
+const getCellColumnWidths = (tableNode, columnCount) => {
+	const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+	const firstRow = tableMap[0];
+	if (!firstRow) return null;
+	const widths = Array.from({ length: columnCount }, () => null);
+	for (const mapCell of firstRow) {
+		const { cell, startColumn } = mapCell;
+		const colSpan = Math.max(1, cell.getColSpan());
+		const cellWidth = cell.getWidth();
+		if (!cellWidth || cellWidth <= 0) continue;
+		const width = cellWidth / colSpan;
+		for (let index = 0; index < colSpan && startColumn + index < columnCount; index += 1) widths[startColumn + index] = width;
+	}
+	return widths.every(isPositiveNumber) ? widths : null;
+};
+const getSourceColumnWidths = (editor, tableNode, tableElement, columnCount) => {
+	const colWidths = tableNode.getColWidths();
+	if (hasValidColumnWidths(colWidths, columnCount)) return [...colWidths];
+	return getCellColumnWidths(tableNode, columnCount) ?? getDOMColumnWidths(tableElement, columnCount);
+};
+const getFittedTableColumnWidths = (editor, tableNode, isPastedTable) => {
+	const columnCount = tableNode.getColumnCount();
+	if (columnCount === 0) return null;
+	const tableElement = getTableElement$1(editor, tableNode.getKey());
+	if (!tableElement) return null;
+	const targetWidth = getTargetTableWidth(tableElement, columnCount);
+	if (targetWidth <= 0) return null;
+	const sourceWidths = getSourceColumnWidths(editor, tableNode, tableElement, columnCount);
+	if (sourceWidths) return fitColumnWidths(sourceWidths, targetWidth);
+	return isPastedTable ? getDistributedTableColumnWidths(editor, tableNode) : null;
+};
+const useAutoFitPastedTable = (editor) => {
+	const pendingTableKeysRef = useRef(/* @__PURE__ */ new Set());
+	const pasteTableKeysRef = useRef(/* @__PURE__ */ new Set());
+	const frameIdsRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (!editor) return;
+		const clearFrame = () => {
+			for (const frameId of frameIdsRef.current) cancelAnimationFrame(frameId);
+			frameIdsRef.current.clear();
+		};
+		const fitTable = (tableKey, remainingAttempts = MAX_AUTO_FIT_ATTEMPTS) => {
+			const frameId = requestAnimationFrame(() => {
+				frameIdsRef.current.delete(frameId);
+				let nextColWidths = null;
+				editor.update(() => {
+					const tableNode = $getNodeByKey(tableKey);
+					if (!$isTableNode(tableNode)) {
+						pendingTableKeysRef.current.delete(tableKey);
+						pasteTableKeysRef.current.delete(tableKey);
+						return;
+					}
+					const columnCount = tableNode.getColumnCount();
+					const isPastedTable = pasteTableKeysRef.current.has(tableKey);
+					if (columnCount === 0 || !isPastedTable && hasValidColumnWidths(tableNode.getColWidths(), columnCount)) {
+						pendingTableKeysRef.current.delete(tableKey);
+						pasteTableKeysRef.current.delete(tableKey);
+						return;
+					}
+					nextColWidths = getFittedTableColumnWidths(editor, tableNode, isPastedTable);
+					if (!nextColWidths) return;
+					tableNode.setColWidths(nextColWidths);
+					pendingTableKeysRef.current.delete(tableKey);
+					pasteTableKeysRef.current.delete(tableKey);
+				}, { tag: [HISTORIC_TAG, SKIP_SCROLL_INTO_VIEW_TAG] });
+				if (nextColWidths) {
+					const syncFrameId = requestAnimationFrame(() => {
+						frameIdsRef.current.delete(syncFrameId);
+						if (nextColWidths) syncTableWidthDOM(editor, tableKey, nextColWidths);
+					});
+					frameIdsRef.current.add(syncFrameId);
+					return;
+				}
+				if (remainingAttempts > 0 && pendingTableKeysRef.current.has(tableKey)) fitTable(tableKey, remainingAttempts - 1);
+			});
+			frameIdsRef.current.add(frameId);
+		};
+		const unregisterMutationListener = editor.registerMutationListener(TableNode, (nodeMutations, { updateTags }) => {
+			const isPasteUpdate = updateTags.has(PASTE_TAG);
+			for (const [tableKey, mutation] of nodeMutations) {
+				if (mutation !== "created") continue;
+				pendingTableKeysRef.current.add(tableKey);
+				if (isPasteUpdate) pasteTableKeysRef.current.add(tableKey);
+				fitTable(tableKey);
+			}
+		}, { skipInitialization: true });
+		return () => {
+			clearFrame();
+			pendingTableKeysRef.current.clear();
+			pasteTableKeysRef.current.clear();
+			unregisterMutationListener();
+		};
+	}, [editor]);
+};
+//#endregion
+export { useAutoFitPastedTable };

package/es/plugins/table/service/i-table-controller-menu-service.d.ts

@@ -0,0 +1,44 @@
+import { IServiceID } from "../../../types/kernel.js";
+import { TableNode } from "@lexical/table";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/table/service/i-table-controller-menu-service.d.ts
+type TableControllerMenuAxis = 'column' | 'row';
+interface ITableControllerMenuRenderContext {
+  axis: TableControllerMenuAxis;
+  editor: LexicalEditor;
+  node: TableNode;
+  selectedIndexes: number[];
+}
+interface ITableControllerBaseMenuItem {
+  key: string;
+  order?: number;
+  when?: (context: ITableControllerMenuRenderContext) => boolean;
+}
+interface ITableControllerMenuActionItem extends ITableControllerBaseMenuItem {
+  danger?: boolean;
+  label: string | ((context: ITableControllerMenuRenderContext) => string);
+  onClick: (context: ITableControllerMenuRenderContext) => void;
+  preview?: 'delete' | 'insert-after' | 'insert-before';
+  type?: 'item';
+}
+interface ITableControllerMenuSeparatorItem extends ITableControllerBaseMenuItem {
+  type: 'separator';
+}
+type ITableControllerMenuItem = ITableControllerMenuActionItem | ITableControllerMenuSeparatorItem;
+interface ITableControllerMenuService {
+  getItems(context: ITableControllerMenuRenderContext): ITableControllerMenuItem[];
+  registerItem(item: ITableControllerMenuItem): () => void;
+  subscribe(listener: () => void): () => void;
+}
+declare const ITableControllerMenuService: IServiceID<ITableControllerMenuService>;
+declare class TableControllerMenuService implements ITableControllerMenuService {
+  private items;
+  private listeners;
+  getItems(context: ITableControllerMenuRenderContext): ITableControllerMenuItem[];
+  registerItem(item: ITableControllerMenuItem): () => void;
+  subscribe(listener: () => void): () => void;
+  private notify;
+}
+//#endregion
+export { ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, TableControllerMenuAxis, TableControllerMenuService };

package/es/plugins/table/service/i-table-controller-menu-service.js

@@ -0,0 +1,31 @@
+import { genServiceId } from "../../../editor-kernel/utils.js";
+//#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
+export { ITableControllerMenuService, TableControllerMenuService };

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

@@ -0,0 +1 @@
+import { ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, TableControllerMenuAxis, TableControllerMenuService } from "./i-table-controller-menu-service.js";