@lobehub/editor 4.15.2 → 4.16.0

package/es/plugins/table/utils/autoFitColumnWidth.js

@@ -0,0 +1,87 @@
+import { createDefaultTableColWidths } from "./index.js";
+import { $computeTableMapSkipCellCheck } from "@lexical/table";
+//#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
+export { getAutoFitTableColumnWidths };

package/es/plugins/table/utils/distributeColumnWidth.js

@@ -0,0 +1,37 @@
+//#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
+export { getDistributedTableColumnWidths };

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

@@ -1,9 +1,51 @@
 import { assert, init_utils } from "../../../editor-kernel/utils.js";
-import { $isTableCellNode } from "@lexical/table";
+import { $isTableCellNode, $isTableSelection } from "@lexical/table";
 import { $getNearestNodeFromDOMNode } from "lexical";
 import { addClassNamesToElement, removeClassNamesFromElement } from "@lexical/utils";
 //#region src/plugins/table/utils/index.ts
 init_utils();
+const EMPTY_TABLE_SELECTION_INDEXES = {
+	selectedColumns: [],
+	selectedRows: []
+};
+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`;
+}
+const range = (from, to) => {
+	return Array.from({ length: to - from + 1 }, (_, index) => from + index);
+};
+function getSelectedTableColumnIndexes(selection, tableKey, rowCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return [];
+	const shape = selection.getShape();
+	return shape.fromY === 0 && shape.toY === rowCount - 1 ? range(shape.fromX, shape.toX) : [];
+}
+function getSelectedTableRowIndexes(selection, tableKey, columnCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return [];
+	const shape = selection.getShape();
+	return shape.fromX === 0 && shape.toX === columnCount - 1 ? range(shape.fromY, shape.toY) : [];
+}
+function isTableFullySelected(selection, tableKey, columnCount, rowCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return false;
+	const shape = selection.getShape();
+	return shape.fromX === 0 && shape.toX === columnCount - 1 && shape.fromY === 0 && shape.toY === rowCount - 1;
+}
+function getTableSelectionIndexes(selection, tableKey, columnCount, rowCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return EMPTY_TABLE_SELECTION_INDEXES;
+	return {
+		selectedColumns: getSelectedTableColumnIndexes(selection, tableKey, rowCount),
+		selectedRows: getSelectedTableRowIndexes(selection, tableKey, columnCount)
+	};
+}
 function $forEachTableCell(grid, cb) {
 	const { domRows } = grid;
 	for (const [y, row] of domRows.entries()) {
@@ -30,12 +72,69 @@ function $removeHighlightFromDOM(editor, cell) {
 	const editorThemeClasses = editor._config.theme;
 	removeClassNamesFromElement(element, editorThemeClasses.tableCellSelected);
 }
+function getTableSelectionOutlineRect(selectedCells, table, selection) {
+	const outlineElements = [...selectedCells];
+	if (outlineElements.length === 0) return null;
+	const shape = selection.getShape();
+	const tableElement = outlineElements[0].closest("table.editor_table, table");
+	const scrollWrapper = tableElement?.closest(".lobe-editor-table-scroll-wrapper");
+	const tableRoot = scrollWrapper?.parentElement ?? tableElement?.parentElement;
+	const isColumnSelection = shape.fromY === 0 && shape.toY === table.rows - 1;
+	const isRowSelection = shape.fromX === 0 && shape.toX === table.columns - 1;
+	const selectedRowControllers = [];
+	if (isColumnSelection && isRowSelection) return null;
+	if (isColumnSelection) {
+		const columnControllers = scrollWrapper?.querySelectorAll(".table-controller-col .col");
+		for (let index = shape.fromX; index <= shape.toX; index++) {
+			const element = columnControllers?.[index];
+			if (element) outlineElements.push(element);
+		}
+	}
+	if (isRowSelection) {
+		const rowControllers = tableRoot?.querySelectorAll(".table-controller-row .row");
+		for (let index = shape.fromY; index <= shape.toY; index++) {
+			const element = rowControllers?.[index];
+			if (element) {
+				selectedRowControllers.push(element);
+				outlineElements.push(element);
+			}
+		}
+	}
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const element of outlineElements) {
+		if (!element.isConnected) continue;
+		const rect = element.getBoundingClientRect();
+		left = Math.min(left, rect.left);
+		top = Math.min(top, rect.top);
+		right = Math.max(right, rect.right);
+		bottom = Math.max(bottom, rect.bottom);
+	}
+	if (isRowSelection && scrollWrapper) {
+		const scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+		const tableRect = tableElement?.getBoundingClientRect();
+		const rowControllerLeft = selectedRowControllers.reduce((currentLeft, element) => Math.min(currentLeft, element.getBoundingClientRect().left), Number.POSITIVE_INFINITY);
+		left = rowControllerLeft === Number.POSITIVE_INFINITY ? scrollWrapperRect.left : rowControllerLeft;
+		right = Math.min(tableRect?.right ?? scrollWrapperRect.right, scrollWrapperRect.right);
+	}
+	if (left === Number.POSITIVE_INFINITY || top === Number.POSITIVE_INFINITY || right === Number.NEGATIVE_INFINITY || bottom === Number.NEGATIVE_INFINITY) return null;
+	return {
+		height: bottom - top,
+		left,
+		top,
+		width: right - left
+	};
+}
 function $updateDOMForSelection(editor, table, selection) {
 	const selectedCellNodes = new Set(selection ? selection.getNodes() : []);
+	const selectedCells = /* @__PURE__ */ new Set();
 	$forEachTableCell(table, (cell, lexicalNode) => {
 		const elem = cell.elem;
 		if (selectedCellNodes.has(lexicalNode)) {
 			cell.highlighted = true;
+			selectedCells.add(elem);
 			$addHighlightToDOM(editor, cell);
 		} else {
 			cell.highlighted = false;
@@ -43,6 +142,7 @@ function $updateDOMForSelection(editor, table, selection) {
 			if (!elem.getAttribute("style")) elem.removeAttribute("style");
 		}
 	});
+	return $isTableSelection(selection) ? getTableSelectionOutlineRect([...selectedCells], table, selection) : null;
 }
 //#endregion
-export { $updateDOMForSelection };
+export { $updateDOMForSelection, createDefaultTableColWidths, getTableSelectionIndexes, isTableFullySelected, syncTableWidthDOM };

package/es/react/EditorProvider/index.d.ts

@@ -1,6 +1,6 @@
 import { _default } from "../../locale/index.js";
+import * as _$react from "react";
 import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react/EditorProvider/index.d.ts
 type LocaleType = typeof _default;
@@ -20,7 +20,7 @@ declare const EditorProvider: {
   ({
     children,
     config
-  }: EditorProviderProps): _$react_jsx_runtime0.JSX.Element;
+  }: EditorProviderProps): _$react.JSX.Element;
   displayName: string;
 };
 declare const useEditorContent: () => EditorContextValue;

package/es/renderer/LexicalDiff.d.ts

@@ -1,8 +1,8 @@
 import { DiffAppearance } from "./diff/style.js";
 import { LexicalDiffBlockRenderContext, LexicalDiffBlockRenderer, LexicalDiffCell, LexicalDiffRow, LexicalDiffRowKind } from "./diff/types.js";
 import { LexicalRendererProps } from "./types.js";
+import * as _$react from "react";
 import { CSSProperties, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { SerializedEditorState } from "lexical";
 
 //#region src/renderer/LexicalDiff.d.ts
@@ -36,6 +36,6 @@ declare function LexicalDiff({
   renderBlockDiff,
   className,
   style
-}: LexicalDiffProps): _$react_jsx_runtime0.JSX.Element;
+}: LexicalDiffProps): _$react.JSX.Element;
 //#endregion
 export { LexicalDiff, LexicalDiffProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.15.2",
+  "version": "4.16.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",