@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,25 @@
+import { styles } from "./TableController/style.js";
+import TableControllerButton from "./TableControllerButton.js";
+import { PlusIcon } from "lucide-react";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/table/react/TableInsertButton.tsx
+const TableInsertButton = memo(({ ariaLabel, offset, onInsert, onMouseEnter, onMouseLeave, position, reference, visible }) => {
+	return /* @__PURE__ */ jsx(TableControllerButton, {
+		ariaLabel,
+		className: styles.insertButton,
+		gap: 4,
+		offset,
+		onClick: onInsert,
+		onMouseEnter,
+		onMouseLeave,
+		position,
+		reference,
+		visible,
+		visibleClassName: styles.insertButtonVisible,
+		children: /* @__PURE__ */ jsx(PlusIcon, { size: 14 })
+	});
+});
+TableInsertButton.displayName = "TableInsertButton";
+//#endregion
+export { TableInsertButton as default };

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

@@ -0,0 +1,328 @@
+import { createDefaultTableColWidths, syncTableWidthDOM } from "../../utils/index.js";
+import { styles } from "./style.js";
+import { getCellColumnIndex, getCellNodeHeight } from "./utils.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from "@lexical/table";
+import { $getNearestNodeFromDOMNode, $getNodeByKey, HISTORIC_TAG, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from "lexical";
+import { calculateZoomLevel, mergeRegister } from "@lexical/utils";
+import { createPortal } from "react-dom";
+//#region src/plugins/table/react/TableResize/index.tsx
+const isHeightChanging = (direction) => {
+	return direction === "bottom";
+};
+const getTableColWidths = (tableNode) => {
+	return tableNode.getColWidths() || createDefaultTableColWidths(tableNode.getColumnCount());
+};
+const $getTableNodeByKey = (tableKey) => {
+	const node = $getNodeByKey(tableKey);
+	return $isTableNode(node) ? node : null;
+};
+const getCurrentTableRect = (activeCell, fallbackRect) => {
+	return activeCell.elem.closest("table.editor_table, table")?.getBoundingClientRect() ?? fallbackRect;
+};
+const getResizeUpdateTags = (skipHistory) => {
+	return skipHistory ? [SKIP_SCROLL_INTO_VIEW_TAG, HISTORIC_TAG] : SKIP_SCROLL_INTO_VIEW_TAG;
+};
+const TableCellResize = memo(({ editor, eventEmitter, resizeMode }) => {
+	const targetRef = useRef(null);
+	const resizerRef = useRef(null);
+	const tableRectRef = useRef(null);
+	const [hasTable, setHasTable] = useState(false);
+	const resizeStartStateRef = useRef(null);
+	const [pointerCurrentPos, updatePointerCurrentPos] = useState(null);
+	const [activeCell, updateActiveCell] = useState(null);
+	const [draggingDirection, updateDraggingDirection] = useState(null);
+	const resetState = useCallback(() => {
+		updateActiveCell(null);
+		targetRef.current = null;
+		updateDraggingDirection(null);
+		updatePointerCurrentPos(null);
+		resizeStartStateRef.current = null;
+		tableRectRef.current = null;
+	}, []);
+	useEffect(() => {
+		const tableKeys = /* @__PURE__ */ new Set();
+		return mergeRegister(editor.registerMutationListener(TableNode, (nodeMutations) => {
+			for (const [nodeKey, mutation] of nodeMutations) if (mutation === "destroyed") tableKeys.delete(nodeKey);
+			else tableKeys.add(nodeKey);
+			setHasTable(tableKeys.size > 0);
+		}));
+	}, [editor]);
+	const getResizeStartState = useCallback((direction, startPos) => {
+		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+		let resizeState = null;
+		editor.getEditorState().read(() => {
+			const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+			if (!$isTableCellNode(tableCellNode)) throw new Error("TableCellResizer: Table cell node not found.");
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+			if (!isHeightChanging(direction)) {
+				const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+				const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
+				if (columnIndex === void 0) throw new Error("TableCellResizer: Table column not found.");
+				const width = getTableColWidths(tableNode)[columnIndex] ?? 92;
+				resizeState = {
+					...startPos,
+					columnIndex,
+					direction: "right",
+					size: width,
+					tableKey: tableNode.getKey()
+				};
+				return;
+			}
+			const baseRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+			const tableRows = tableNode.getChildren();
+			const rowIndex = tableCellNode.getColSpan() === tableNode.getColumnCount() ? baseRowIndex : baseRowIndex + tableCellNode.getRowSpan() - 1;
+			if (rowIndex >= tableRows.length || rowIndex < 0) throw new Error("Expected table cell to be inside of table row.");
+			const tableRow = tableRows[rowIndex];
+			if (!$isTableRowNode(tableRow)) throw new Error("Expected table row");
+			let height = tableRow.getHeight();
+			if (height === void 0) {
+				const rowCells = tableRow.getChildren();
+				height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
+			}
+			resizeState = {
+				...startPos,
+				direction: "bottom",
+				rowIndex,
+				size: height,
+				tableKey: tableNode.getKey()
+			};
+		}, { editor });
+		return resizeState;
+	}, [activeCell, editor]);
+	const updateRowHeight = useCallback((tableKey, rowIndex, nextHeight, skipHistory = false) => {
+		let didUpdate = false;
+		editor.update(() => {
+			const tableNode = $getTableNodeByKey(tableKey);
+			if (!tableNode) return;
+			const tableRows = tableNode.getChildren();
+			if (rowIndex >= tableRows.length || rowIndex < 0) throw new Error("Expected table cell to be inside of table row.");
+			const tableRow = tableRows[rowIndex];
+			if (!$isTableRowNode(tableRow)) throw new Error("Expected table row");
+			let height = tableRow.getHeight();
+			if (height === void 0) {
+				const rowCells = tableRow.getChildren();
+				height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
+			}
+			const newHeight = Math.max(nextHeight, 33);
+			tableRow.setHeight(newHeight);
+			didUpdate = true;
+			eventEmitter.emit("table:resize", {
+				heightChange: newHeight - height,
+				newHeight
+			});
+		}, { tag: getResizeUpdateTags(skipHistory) });
+		return didUpdate;
+	}, [editor, eventEmitter]);
+	const updateColumnWidth = useCallback((tableKey, columnIndex, nextWidth, skipHistory = false) => {
+		let didUpdate = false;
+		editor.update(() => {
+			const tableNode = $getTableNodeByKey(tableKey);
+			if (!tableNode) return;
+			const colWidths = getTableColWidths(tableNode);
+			if (colWidths[columnIndex] === void 0) return;
+			const newColWidths = [...colWidths];
+			newColWidths[columnIndex] = Math.max(nextWidth, 92);
+			tableNode.setColWidths(newColWidths);
+			didUpdate = true;
+			requestAnimationFrame(() => {
+				syncTableWidthDOM(editor, tableKey, newColWidths);
+				eventEmitter.emit("table:resize", { newColWidths });
+			});
+		}, { tag: getResizeUpdateTags(skipHistory) });
+		return didUpdate;
+	}, [editor, eventEmitter]);
+	const commitResizeChange = useCallback((currentPos, startState, target, options) => {
+		const zoom = calculateZoomLevel(target);
+		const skipHistory = options?.skipHistory ?? resizeMode === "realtime";
+		if (startState.direction === "bottom") {
+			const heightChange = (currentPos.y - startState.y) / zoom;
+			if (heightChange === 0) return false;
+			return updateRowHeight(startState.tableKey, startState.rowIndex, startState.size + heightChange, skipHistory);
+		}
+		const widthChange = (currentPos.x - startState.x) / zoom;
+		if (widthChange === 0) return false;
+		return updateColumnWidth(startState.tableKey, startState.columnIndex, startState.size + widthChange, skipHistory);
+	}, [
+		resizeMode,
+		updateColumnWidth,
+		updateRowHeight
+	]);
+	useEffect(() => {
+		if (!hasTable) return;
+		const onPointerMove = (event) => {
+			const target = event.target;
+			if (!isHTMLElement(target)) return;
+			if (draggingDirection) {
+				event.preventDefault();
+				event.stopPropagation();
+				const currentPos = {
+					x: event.clientX,
+					y: event.clientY
+				};
+				updatePointerCurrentPos(currentPos);
+				if (resizeMode === "realtime" && activeCell && resizeStartStateRef.current) commitResizeChange(currentPos, resizeStartStateRef.current, activeCell.elem);
+				return;
+			}
+			if (resizerRef.current && resizerRef.current.contains(target)) return;
+			if (targetRef.current !== target) {
+				targetRef.current = target;
+				const cell = getDOMCellFromTarget(target);
+				if (cell && activeCell !== cell) editor.getEditorState().read(() => {
+					const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
+					if (!tableCellNode) throw new Error("TableCellResizer: Table cell node not found.");
+					const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+					const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+					if (!tableElement) throw new Error("TableCellResizer: Table element not found.");
+					targetRef.current = target;
+					tableRectRef.current = tableElement.getBoundingClientRect();
+					updateActiveCell(cell);
+				}, { editor });
+				else if (!cell) resetState();
+			}
+		};
+		const onPointerDown = (event) => {
+			if (event.pointerType === "touch") onPointerMove(event);
+		};
+		const resizerContainer = resizerRef.current;
+		resizerContainer?.addEventListener("pointermove", onPointerMove, { capture: true });
+		const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("pointermove", onPointerMove);
+			prevRootElement?.removeEventListener("pointerdown", onPointerDown);
+			rootElement?.addEventListener("pointermove", onPointerMove);
+			rootElement?.addEventListener("pointerdown", onPointerDown);
+		});
+		return () => {
+			removeRootListener();
+			resizerContainer?.removeEventListener("pointermove", onPointerMove);
+		};
+	}, [
+		activeCell,
+		commitResizeChange,
+		draggingDirection,
+		editor,
+		hasTable,
+		resetState,
+		resizeMode
+	]);
+	const pointerUpHandler = useCallback(() => {
+		const handler = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+			if (resizeStartStateRef.current) {
+				if (activeCell === null) return;
+				commitResizeChange({
+					x: event.clientX,
+					y: event.clientY
+				}, resizeStartStateRef.current, activeCell.elem, { skipHistory: false });
+				resetState();
+				if (typeof document !== "undefined") document.removeEventListener("pointerup", handler);
+			}
+		};
+		return handler;
+	}, [
+		activeCell,
+		commitResizeChange,
+		resetState,
+		resizeMode
+	]);
+	const toggleResize = useCallback((direction) => (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+		const startPos = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const resizeStartState = getResizeStartState(direction, startPos);
+		if (!resizeStartState) return;
+		resizeStartStateRef.current = resizeStartState;
+		updatePointerCurrentPos(startPos);
+		updateDraggingDirection(direction);
+		if (typeof document !== "undefined") document.addEventListener("pointerup", pointerUpHandler());
+	}, [
+		activeCell,
+		getResizeStartState,
+		pointerUpHandler
+	]);
+	const resizerStyles = useCallback(() => {
+		if (activeCell) {
+			const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
+			const zoom = calculateZoomLevel(activeCell.elem);
+			const zoneWidth = 16;
+			const scrollX = typeof window !== "undefined" ? window.scrollX : 0;
+			const scrollY = typeof window !== "undefined" ? window.scrollY : 0;
+			const styles = {
+				bottom: {
+					backgroundColor: "none",
+					cursor: "row-resize",
+					height: `${zoneWidth}px`,
+					left: `${scrollX + left}px`,
+					top: `${scrollY + top + height - zoneWidth / 2}px`,
+					width: `${width}px`
+				},
+				right: {
+					backgroundColor: "none",
+					cursor: "col-resize",
+					height: `${height}px`,
+					left: `${scrollX + left + width - zoneWidth / 2}px`,
+					top: `${scrollY + top}px`,
+					width: `${zoneWidth}px`
+				}
+			};
+			const tableRect = getCurrentTableRect(activeCell, tableRectRef.current);
+			if (draggingDirection && pointerCurrentPos && tableRect) {
+				if (isHeightChanging(draggingDirection)) {
+					styles[draggingDirection].left = `${scrollX + tableRect.left}px`;
+					styles[draggingDirection].top = `${scrollY + pointerCurrentPos.y / zoom}px`;
+					styles[draggingDirection].height = "3px";
+					styles[draggingDirection].width = `${tableRect.width}px`;
+				} else {
+					styles[draggingDirection].top = `${scrollY + tableRect.top}px`;
+					styles[draggingDirection].left = `${scrollX + pointerCurrentPos.x / zoom}px`;
+					styles[draggingDirection].width = "3px";
+					styles[draggingDirection].height = `${tableRect.height}px`;
+				}
+				styles[draggingDirection].backgroundColor = cssVar.colorPrimary;
+				styles[draggingDirection].mixBlendMode = "unset";
+			}
+			return styles;
+		}
+		return {
+			bottom: null,
+			left: null,
+			right: null,
+			top: null
+		};
+	}, [
+		activeCell,
+		draggingDirection,
+		pointerCurrentPos
+	])();
+	return /* @__PURE__ */ jsx("div", {
+		ref: resizerRef,
+		children: activeCell && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: cx(styles, "TableCellResizer__resizer", "TableCellResizer__ui"),
+			onPointerDown: toggleResize("right"),
+			style: resizerStyles.right || void 0
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(styles, "TableCellResizer__resizer", "TableCellResizer__ui"),
+			onPointerDown: toggleResize("bottom"),
+			style: resizerStyles.bottom || void 0
+		})] })
+	});
+});
+var TableResize_default = memo(({ editor, eventEmitter, resizeMode }) => {
+	if (typeof document === "undefined") return null;
+	const container = document.querySelector(".ant-app") || document.body;
+	return createPortal(/* @__PURE__ */ jsx(TableCellResize, {
+		editor,
+		eventEmitter,
+		resizeMode
+	}), container);
+});
+//#endregion
+export { TableResize_default as default };

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

@@ -0,0 +1,16 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/TableResize/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return css`
+    touch-action: none;
+    position: absolute;
+    z-index: 1;
+
+    @media (pointer: coarse) {
+      background-color: ${cssVar.colorPrimary};
+      mix-blend-mode: color;
+    }
+  `;
+});
+//#endregion
+export { styles };

package/es/plugins/table/react/TableResize/utils.js

@@ -0,0 +1,9 @@
+//#region src/plugins/table/react/TableResize/utils.ts
+const getCellColumnIndex = (tableCellNode, tableMap) => {
+	for (const element of tableMap) for (const [column, element_] of element.entries()) if (element_.cell === tableCellNode) return column;
+};
+const getCellNodeHeight = (cell, activeEditor) => {
+	return activeEditor.getElementByKey(cell.getKey())?.clientHeight;
+};
+//#endregion
+export { getCellColumnIndex, getCellNodeHeight };