@lobehub/editor 4.15.2 → 4.16.1

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

@@ -3,9 +3,13 @@ import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
 import { ILitexmlService } from "../../litexml/service/litexml-service.js";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
 import { cx } from "../../../utils/cx.js";
-import { registerTableCommand } from "../command/index.js";
+import { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
+import { createDefaultTableColWidths } from "../utils/index.js";
+import { AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND, DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_ROW_COMMAND, SYNC_TABLE_COLUMN_WIDTH_COMMAND, registerTableCommand } from "../command/index.js";
 import { TableNode as TableNode$1, patchTableNode } from "../node/index.js";
-import { $isTableNode, TableCellNode, TableRowNode, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
+import { ITableControllerMenuService, TableControllerMenuService } from "../service/i-table-controller-menu-service.js";
+import { $computeTableMapSkipCellCheck, $createTableSelection, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $isTableNode, TableCellNode, TableRowNode, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
+import { $setSelection } from "lexical";
 //#region src/plugins/table/plugin/index.ts
 init_helper();
 init_plugin();
@@ -15,6 +19,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";
@@ -23,11 +34,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",
@@ -46,6 +72,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);
@@ -80,7 +269,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,
@@ -136,7 +325,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,

package/es/plugins/table/react/TableActionMenu/ActionMenu.js

@@ -2,7 +2,7 @@ import { useTranslation } from "../../../../editor-kernel/react/useTranslation.j
 import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils.js";
 import { Dropdown } from "@lobehub/ui";
 import { Grid2X2XIcon, PanelBottomCloseIcon, PanelLeftCloseIcon, PanelRightCloseIcon, PanelTopCloseIcon, TableColumnsSplitIcon, TableRowsSplitIcon } from "lucide-react";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableElement, getTableObserverFromTableElement } from "@lexical/table";
 import { $getSelection, $setSelection } from "lexical";
@@ -14,8 +14,13 @@ import { $getSelection, $setSelection } from "lexical";
 * LICENSE file in the root directory of this source tree.
 *
 */
+const TABLE_DELETE_PREVIEW_CLASS = "lobe-editor-table-delete-preview";
+const range = (from, to) => {
+	return Array.from({ length: to - from + 1 }, (_, index) => from + index);
+};
 const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge, children }) => {
 	const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+	const deletePreviewElementsRef = useRef([]);
 	const [selectionCounts, updateSelectionCounts] = useState({
 		columns: 1,
 		rows: 1
@@ -24,6 +29,62 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 	const [canUnmergeCell, setCanUnmergeCell] = useState(false);
 	const [, setBackgroundColor] = useState(() => currentCellBackgroundColor(editor) || "");
 	const t = useTranslation();
+	const clearDeletePreview = useCallback(() => {
+		deletePreviewElementsRef.current.forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		document.querySelectorAll(`.${TABLE_DELETE_PREVIEW_CLASS}`).forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		deletePreviewElementsRef.current = [];
+	}, []);
+	const showDeletePreview = useCallback((target) => {
+		clearDeletePreview();
+		editor.getEditorState().read(() => {
+			if (!tableCellNode.isAttached()) return;
+			const latestTableCellNode = tableCellNode.getLatest();
+			if (!$isTableCellNode(latestTableCellNode)) return;
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(latestTableCellNode);
+			const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+			const selection = $getSelection();
+			const previewCellKeys = /* @__PURE__ */ new Set();
+			if (target === "columns") {
+				const selectedColumns = $isTableSelection(selection) && selection.tableKey === tableNode.getKey() ? range(selection.getShape().fromX, selection.getShape().toX) : [];
+				const columnIndexes = selectedColumns.length > 0 ? selectedColumns : [$getTableColumnIndexFromTableCellNode(latestTableCellNode)];
+				for (const row of gridMap) for (const columnIndex of columnIndexes) {
+					const cell = row[columnIndex]?.cell;
+					if (cell) previewCellKeys.add(cell.getKey());
+				}
+			} else if (target === "rows") {
+				const selectedRows = $isTableSelection(selection) && selection.tableKey === tableNode.getKey() ? range(selection.getShape().fromY, selection.getShape().toY) : [];
+				const rowIndexes = selectedRows.length > 0 ? selectedRows : [$getTableRowIndexFromTableCellNode(latestTableCellNode)];
+				for (const rowIndex of rowIndexes) {
+					const row = gridMap[rowIndex];
+					if (!row) continue;
+					for (const mapCell of row) if (mapCell?.cell) previewCellKeys.add(mapCell.cell.getKey());
+				}
+			} else for (const row of gridMap) for (const mapCell of row) if (mapCell?.cell) previewCellKeys.add(mapCell.cell.getKey());
+			for (const cellKey of previewCellKeys) {
+				const element = editor.getElementByKey(cellKey);
+				if (element instanceof HTMLElement) {
+					element.classList.add(TABLE_DELETE_PREVIEW_CLASS);
+					deletePreviewElementsRef.current.push(element);
+				}
+			}
+		});
+	}, [
+		clearDeletePreview,
+		editor,
+		tableCellNode
+	]);
+	const renderDeleteMenuLabel = useCallback((label, target) => {
+		return /* @__PURE__ */ jsx("span", {
+			onMouseEnter: () => showDeletePreview(target),
+			onMouseLeave: clearDeletePreview,
+			style: { display: "block" },
+			children: label
+		});
+	}, [clearDeletePreview, showDeletePreview]);
 	useEffect(() => {
 		return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
 			if (nodeMutations.get(tableCellNode.getKey()) === "updated") {
@@ -45,6 +106,16 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 			setCanUnmergeCell($canUnmerge());
 		});
 	}, [editor]);
+	useEffect(() => {
+		return () => {
+			clearDeletePreview();
+		};
+	}, [clearDeletePreview]);
+	useEffect(() => {
+		return editor.registerUpdateListener(() => {
+			clearDeletePreview();
+		});
+	}, [clearDeletePreview, editor]);
 	const clearTableSelection = useCallback(() => {
 		editor.update(() => {
 			if (tableCellNode.isAttached()) {
@@ -83,25 +154,29 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 		});
 	}, [editor, selectionCounts.columns]);
 	const deleteTableRowAtSelection = useCallback(() => {
+		clearDeletePreview();
 		editor.update(() => {
 			$deleteTableRowAtSelection();
 		});
-	}, [editor]);
+	}, [clearDeletePreview, editor]);
 	const deleteTableAtSelection = useCallback(() => {
+		clearDeletePreview();
 		editor.update(() => {
 			$getTableNodeFromLexicalNodeOrThrow(tableCellNode).remove();
 			clearTableSelection();
 		});
 	}, [
+		clearDeletePreview,
 		editor,
 		tableCellNode,
 		clearTableSelection
 	]);
 	const deleteTableColumnAtSelection = useCallback(() => {
+		clearDeletePreview();
 		editor.update(() => {
 			$deleteTableColumnAtSelection();
 		});
-	}, [editor]);
+	}, [clearDeletePreview, editor]);
 	const toggleTableRowIsHeader = useCallback(() => {
 		editor.update(() => {
 			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -178,20 +253,20 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 				{
 					icon: TableColumnsSplitIcon,
 					key: "table-delete-columns",
-					label: t(`table.deleteColumn`),
+					label: renderDeleteMenuLabel(t(`table.deleteColumn`), "columns"),
 					onClick: () => deleteTableColumnAtSelection()
 				},
 				{
 					icon: TableRowsSplitIcon,
 					key: "table-delete-rows",
-					label: t(`table.deleteRow`),
+					label: renderDeleteMenuLabel(t(`table.deleteRow`), "rows"),
 					onClick: () => deleteTableRowAtSelection()
 				},
 				{ type: "divider" },
 				{
 					icon: Grid2X2XIcon,
 					key: "table-delete",
-					label: t(`table.delete`),
+					label: renderDeleteMenuLabel(t(`table.delete`), "table"),
 					onClick: () => deleteTableAtSelection()
 				}
 			];
@@ -209,6 +284,7 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 			deleteTableColumnAtSelection,
 			deleteTableRowAtSelection,
 			deleteTableAtSelection,
+			renderDeleteMenuLabel,
 			toggleTableRowIsHeader,
 			toggleTableColumnIsHeader
 		]) },

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

@@ -7,7 +7,7 @@ import { ChevronDown } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, $isTableCellNode, $isTableSelection, getTableElement, getTableObserverFromTableElement } from "@lexical/table";
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
+import { $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 //#region src/plugins/table/react/TableActionMenu/index.tsx
 /**
@@ -48,7 +48,9 @@ const TableActionMenu = memo(({ cellMerge, editor }) => {
 		let tableObserver = null;
 		let tableCellParentNodeDOM = null;
 		if ($isRangeSelection(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
-			const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+			const anchorNode = $getNodeByKey(selection.anchor.key);
+			if (!anchorNode) return disable();
+			const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(anchorNode);
 			if (!tableCellNodeFromSelection) return disable();
 			tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
 			if (!tableCellParentNodeDOM || !tableCellNodeFromSelection.isAttached()) return disable();
@@ -59,8 +61,10 @@ const TableActionMenu = memo(({ cellMerge, editor }) => {
 			tableObserver = getTableObserverFromTableElement(tableElement);
 			setTableMenuCellNode(tableCellNodeFromSelection);
 		} else if ($isTableSelection(selection)) {
-			const anchorNode = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
-			if (!$isTableCellNode(anchorNode)) throw new Error("TableSelection anchorNode must be a TableCellNode");
+			const selectionAnchorNode = $getNodeByKey(selection.anchor.key);
+			if (!selectionAnchorNode) return disable();
+			const anchorNode = $getTableCellNodeFromLexicalNode(selectionAnchorNode);
+			if (!$isTableCellNode(anchorNode)) return disable();
 			const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode);
 			const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
 			if (tableElement === null) throw new Error("TableActionMenu: Expected to find tableElement in DOM");
@@ -68,6 +72,7 @@ const TableActionMenu = memo(({ cellMerge, editor }) => {
 			tableCellParentNodeDOM = editor.getElementByKey(anchorNode.getKey());
 			if (tableCellParentNodeDOM === null) return disable();
 			if (checkTableCellOverflow(tableCellParentNodeDOM)) return disable();
+			setTableMenuCellNode(anchorNode);
 		} else if (!activeElement) return disable();
 		if (tableObserver === null || tableCellParentNodeDOM === null) return disable();
 		const enabled = !tableObserver || !tableObserver.isSelecting;