@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,354 @@
+import LexicalPortalContainer from "../../../editor-kernel/react/PortalContainer.js";
+import { INSERT_TABLE_COLUMN_COMMAND, MOVE_TABLE_COLUMN_COMMAND, SELECT_TABLE_COMMAND } from "../command/index.js";
+import { sum, useTableAxisDrag, useTableColumnMetrics } from "./TableController/hooks.js";
+import { styles } from "./TableController/style.js";
+import { createTableDragImage } from "./TableController/utils.js";
+import TableControllerMenu from "./TableControllerMenu.js";
+import TableInsertButton from "./TableInsertButton.js";
+import { useTableControllerSelection } from "./hooks.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { $computeTableMapSkipCellCheck } from "@lexical/table";
+//#region src/plugins/table/react/TableColController.tsx
+const INSERT_BUTTON_HIDE_DELAY = 160;
+const TABLE_DELETE_PREVIEW_CLASS = "lobe-editor-table-delete-preview";
+const DOTS = Array.from({ length: 6 }, (_, index) => index);
+const TableColController = memo((props) => {
+	const { blockMenuService, editor, menuService, node, onColumnMetricsChange, onInsertPreviewChange } = props;
+	const { colWidths, refreshColumnMetrics, tableHeight } = useTableColumnMetrics(editor, node);
+	const { isTableFocused, isTableSelected, selectedColumns } = useTableControllerSelection(editor, node);
+	const anchorColumnIndexRef = useRef(null);
+	const colTopRef = useRef(null);
+	const renderColWidths = Array.from({ length: colWidths.length }, (_, index) => colWidths[index] || 92);
+	const deletePreviewElementsRef = useRef([]);
+	const insertButtonHoveredRef = useRef(false);
+	const insertButtonHideTimerRef = useRef(null);
+	const showMenu = selectedColumns.length > 0 && !isTableSelected;
+	const [insertTarget, setInsertTarget] = useState(null);
+	const [menuAnchorElement, setMenuAnchorElement] = useState(null);
+	const [, setMenuVersion] = useState(0);
+	const pendingDragColumnsRef = useRef(null);
+	const [isControllerHovered, setControllerHovered] = useState(false);
+	const [isInsertButtonHovered, setInsertButtonHovered] = useState(false);
+	const clearInsertButtonHideTimer = () => {
+		if (insertButtonHideTimerRef.current) {
+			clearTimeout(insertButtonHideTimerRef.current);
+			insertButtonHideTimerRef.current = null;
+		}
+	};
+	const clearDeletePreview = useCallback(() => {
+		deletePreviewElementsRef.current.forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		deletePreviewElementsRef.current = [];
+	}, []);
+	const showDeletePreview = useCallback(() => {
+		clearDeletePreview();
+		if (!showMenu) return;
+		editor.getEditorState().read(() => {
+			const [tableMap] = $computeTableMapSkipCellCheck(node.getLatest(), null, null);
+			const previewCellKeys = /* @__PURE__ */ new Set();
+			for (const row of tableMap) for (const columnIndex of selectedColumns) {
+				const cell = row[columnIndex]?.cell;
+				if (cell) previewCellKeys.add(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,
+		node,
+		selectedColumns,
+		showMenu
+	]);
+	const closeMenu = useCallback(() => {
+		setMenuAnchorElement(null);
+		onInsertPreviewChange?.(null);
+		clearDeletePreview();
+	}, [clearDeletePreview, onInsertPreviewChange]);
+	const menuContext = {
+		axis: "column",
+		editor,
+		node,
+		selectedIndexes: selectedColumns
+	};
+	const menuItems = menuService?.getItems(menuContext).map((item) => {
+		if (item.type === "separator") return {
+			key: item.key,
+			type: "separator"
+		};
+		return {
+			danger: item.danger,
+			key: item.key,
+			label: typeof item.label === "function" ? item.label(menuContext) : item.label,
+			onClick: () => {
+				item.onClick(menuContext);
+			},
+			onMouseEnter: item.preview === "delete" ? showDeletePreview : item.preview === "insert-before" ? () => {
+				onInsertPreviewChange?.("left");
+			} : item.preview === "insert-after" ? () => {
+				onInsertPreviewChange?.("right");
+			} : void 0,
+			onMouseLeave: item.preview === "delete" ? clearDeletePreview : item.preview === "insert-before" || item.preview === "insert-after" ? () => {
+				onInsertPreviewChange?.(null);
+			} : void 0
+		};
+	}) ?? [];
+	const scheduleHideInsertButton = () => {
+		clearInsertButtonHideTimer();
+		insertButtonHideTimerRef.current = setTimeout(() => {
+			if (!insertButtonHoveredRef.current) {
+				setInsertTarget(null);
+				setInsertButtonHovered(false);
+			}
+		}, INSERT_BUTTON_HIDE_DELAY);
+	};
+	const { clearDragState, dragTarget, finishDrag: finishColumnDrag, isDragging, startDrag } = useTableAxisDrag({
+		getDropTarget: useCallback((event) => {
+			const controller = colTopRef.current;
+			if (!controller) return null;
+			const columns = Array.from(controller.querySelectorAll(".col"));
+			if (columns.length === 0) return null;
+			for (const [index, column] of columns.entries()) {
+				const rect = column.getBoundingClientRect();
+				if (event.clientX <= rect.left + rect.width / 2) return {
+					index,
+					insertAfter: false
+				};
+			}
+			return {
+				index: columns.length - 1,
+				insertAfter: true
+			};
+		}, []),
+		onMove: useCallback((target, selectedIndexes) => {
+			editor.dispatchCommand(MOVE_TABLE_COLUMN_COMMAND, {
+				columnIndex: target.index,
+				insertAfter: target.insertAfter,
+				selectedColumns: selectedIndexes,
+				table: node.getKey()
+			});
+		}, [editor, node])
+	});
+	const startColumnDrag = useCallback((event, selectedIndexes) => {
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.dropEffect = "move";
+		event.dataTransfer.setData("text/plain", "");
+		const dragImage = createTableDragImage(`拖拽 ${selectedIndexes.length} 列`);
+		event.dataTransfer.setDragImage(dragImage, dragImage.offsetWidth / 2, dragImage.offsetHeight / 2);
+		setInsertTarget(null);
+		closeMenu();
+		startDrag(event.nativeEvent, selectedIndexes);
+	}, [closeMenu, startDrag]);
+	const insertColumnOffset = insertTarget ? sum(renderColWidths.slice(0, insertTarget.index)) + (insertTarget.insertAfter ? renderColWidths[insertTarget.index] || 0 : 0) : 0;
+	const dragColumnOffset = dragTarget ? sum(renderColWidths.slice(0, dragTarget.index)) + (dragTarget.insertAfter ? renderColWidths[dragTarget.index] || 0 : 0) : 0;
+	const controllerWidth = sum(renderColWidths);
+	const showInsertButton = !isDragging && (Boolean(insertTarget) || isInsertButtonHovered);
+	useEffect(() => {
+		if (selectedColumns.length > 0) anchorColumnIndexRef.current = selectedColumns[0];
+	}, [selectedColumns]);
+	useEffect(() => {
+		onColumnMetricsChange?.();
+	}, [
+		colWidths,
+		onColumnMetricsChange,
+		tableHeight
+	]);
+	useEffect(() => {
+		return menuService?.subscribe(() => {
+			setMenuVersion((version) => version + 1);
+		});
+	}, [menuService]);
+	useEffect(() => {
+		return () => {
+			clearInsertButtonHideTimer();
+			clearDeletePreview();
+			onInsertPreviewChange?.(null);
+			setMenuAnchorElement(null);
+			pendingDragColumnsRef.current = null;
+			clearDragState();
+		};
+	}, [
+		clearDeletePreview,
+		clearDragState,
+		onInsertPreviewChange
+	]);
+	const shouldShowController = isTableFocused || isControllerHovered;
+	useEffect(() => {
+		if (!shouldShowController) {
+			clearInsertButtonHideTimer();
+			clearDeletePreview();
+			setInsertTarget(null);
+			setInsertButtonHovered(false);
+			onInsertPreviewChange?.(null);
+			setMenuAnchorElement(null);
+			pendingDragColumnsRef.current = null;
+			clearDragState();
+		}
+	}, [
+		clearDeletePreview,
+		clearDragState,
+		onInsertPreviewChange,
+		shouldShowController
+	]);
+	useEffect(() => {
+		if (!showMenu) closeMenu();
+	}, [closeMenu, showMenu]);
+	if (!shouldShowController) return null;
+	return /* @__PURE__ */ jsx(LexicalPortalContainer, {
+		editor,
+		node,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "table-controller-col",
+			contentEditable: false,
+			style: { inlineSize: controllerWidth },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cx("top", styles.colTop),
+				onMouseEnter: () => {
+					setControllerHovered(true);
+				},
+				onMouseLeave: () => {
+					setControllerHovered(false);
+					scheduleHideInsertButton();
+				},
+				ref: colTopRef,
+				style: { inlineSize: controllerWidth },
+				children: [
+					/* @__PURE__ */ jsx(TableControllerMenu, {
+						anchorElement: menuAnchorElement,
+						blockMenuService,
+						items: menuItems,
+						onOpenChange: (open) => {
+							if (!open) closeMenu();
+						},
+						open: Boolean(menuAnchorElement) && showMenu && menuItems.length > 0,
+						position: "top"
+					}),
+					renderColWidths.map((width, index) => {
+						const isLastCol = index + 1 === renderColWidths.length;
+						const isSelected = selectedColumns.includes(index);
+						const isSelectedController = isSelected && !isTableSelected;
+						const showSelectionDots = isSelected && !isTableSelected;
+						return /* @__PURE__ */ jsx("div", {
+							className: cx("col", styles.col, isLastCol && styles.colLast, isSelected && styles.selected),
+							draggable: true,
+							onClickCapture: (event) => {
+								if (isSelectedController) {
+									event.preventDefault();
+									event.stopPropagation();
+									clearInsertButtonHideTimer();
+									setInsertTarget(null);
+									setInsertButtonHovered(false);
+									setMenuAnchorElement(event.currentTarget);
+								}
+							},
+							onDragEnd: () => {
+								pendingDragColumnsRef.current = null;
+								finishColumnDrag();
+							},
+							onDragStart: (event) => {
+								event.stopPropagation();
+								startColumnDrag(event, pendingDragColumnsRef.current || (isSelectedController ? selectedColumns : [index]));
+							},
+							onMouseDown: (event) => {
+								event.stopPropagation();
+								if (isSelectedController) {
+									event.preventDefault();
+									pendingDragColumnsRef.current = selectedColumns;
+									return;
+								}
+								closeMenu();
+								pendingDragColumnsRef.current = [index];
+								const anchorIndex = event.shiftKey ? selectedColumns[0] ?? anchorColumnIndexRef.current : index;
+								editor.dispatchCommand(SELECT_TABLE_COMMAND, {
+									anchorIndex,
+									columnIndex: index,
+									extend: event.shiftKey,
+									table: node.getKey()
+								});
+								if (!event.shiftKey) anchorColumnIndexRef.current = index;
+							},
+							onMouseDownCapture: (event) => {
+								if (isSelectedController) {
+									event.stopPropagation();
+									pendingDragColumnsRef.current = selectedColumns;
+								}
+							},
+							onMouseMove: (event) => {
+								if (isDragging || isSelectedController) {
+									setInsertTarget(null);
+									return;
+								}
+								const rect = event.currentTarget.getBoundingClientRect();
+								setInsertTarget({
+									index,
+									insertAfter: event.clientX - rect.left > rect.width / 2
+								});
+							},
+							onMouseUpCapture: (event) => {
+								if (isSelectedController) {
+									event.preventDefault();
+									event.stopPropagation();
+								}
+							},
+							onPointerDownCapture: (event) => {
+								if (isSelectedController) {
+									event.stopPropagation();
+									pendingDragColumnsRef.current = selectedColumns;
+								}
+							},
+							style: { width },
+							children: /* @__PURE__ */ jsx("span", {
+								className: cx(styles.selectionDots, styles.colSelectionDots, showSelectionDots && styles.selectionDotsVisible),
+								children: DOTS.map((dot) => /* @__PURE__ */ jsx("span", {}, dot))
+							})
+						}, index);
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cx(styles.dragIndicator, styles.colDragIndicator, Boolean(dragTarget) && isDragging && styles.dragIndicatorVisible),
+						style: {
+							blockSize: tableHeight,
+							left: dragColumnOffset
+						}
+					}),
+					/* @__PURE__ */ jsx(TableInsertButton, {
+						ariaLabel: "Insert column",
+						offset: insertColumnOffset,
+						onInsert: () => {
+							if (!insertTarget) return;
+							editor.dispatchCommand(INSERT_TABLE_COLUMN_COMMAND, {
+								columnIndex: insertTarget.index,
+								insertAfter: insertTarget.insertAfter,
+								table: node.getKey()
+							});
+							refreshColumnMetrics();
+							setInsertTarget(null);
+						},
+						onMouseEnter: () => {
+							insertButtonHoveredRef.current = true;
+							clearInsertButtonHideTimer();
+							setInsertButtonHovered(true);
+						},
+						onMouseLeave: () => {
+							insertButtonHoveredRef.current = false;
+							scheduleHideInsertButton();
+						},
+						position: "top",
+						reference: colTopRef.current,
+						visible: showInsertButton
+					})
+				]
+			})
+		})
+	});
+});
+TableColController.displayName = "TableColController";
+//#endregion
+export { TableColController as default };

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

@@ -0,0 +1,201 @@
+import { syncTableWidthDOM } from "../../utils/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/plugins/table/react/TableController/hooks.ts
+const CONTROL_SIZE = 14;
+const ROW_BORDER_HEIGHT = .5;
+const sum = (values) => {
+	return values.reduce((total, value) => total + value, 0);
+};
+const getTableElement = (element) => {
+	if (element instanceof HTMLTableElement) return element;
+	return element?.querySelector("table.editor_table, table") || null;
+};
+const readNodeColWidths = (editor, node) => {
+	return editor.getEditorState().read(() => {
+		const latestNode = node.getLatest();
+		const columnCount = latestNode.getColumnCount();
+		const colWidths = latestNode.getColWidths();
+		return Array.from({ length: columnCount }, (_, index) => colWidths?.[index] || 92);
+	});
+};
+const normalizeRowControllerHeight = (height, isLastRow = false) => {
+	return Math.max(CONTROL_SIZE, Math.round(height) - (isLastRow ? 0 : ROW_BORDER_HEIGHT));
+};
+const getControlledRowHeights = (rowHeights, tableHeight) => {
+	if (rowHeights.length === 0 || tableHeight <= 0) return rowHeights;
+	const lastRowIndex = rowHeights.length - 1;
+	const previousRowsHeight = sum(rowHeights.slice(0, lastRowIndex));
+	const lastRowHeight = Math.max(CONTROL_SIZE, tableHeight - previousRowsHeight);
+	return rowHeights.map((height, index) => index === lastRowIndex ? lastRowHeight : height);
+};
+const useTableColumnMetrics = (editor, node) => {
+	const [colWidths, setColWidths] = useState(() => readNodeColWidths(editor, node));
+	const [tableHeight, setTableHeight] = useState(0);
+	const refreshColumnMetrics = useCallback(() => {
+		const nodeColWidths = readNodeColWidths(editor, node);
+		const tableElement = getTableElement(editor.getElementByKey(node.getKey()));
+		setColWidths((currentWidths) => {
+			if (currentWidths.length === nodeColWidths.length && currentWidths.every((width, index) => width === nodeColWidths[index])) return currentWidths;
+			return nodeColWidths;
+		});
+		if (tableElement) {
+			syncTableWidthDOM(editor, node.getKey(), nodeColWidths);
+			setTableHeight(tableElement.getBoundingClientRect().height);
+		}
+	}, [editor, node]);
+	useEffect(() => {
+		const tableElement = getTableElement(editor.getElementByKey(node.getKey()));
+		let frame = null;
+		const scheduleMeasure = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				refreshColumnMetrics();
+			});
+		};
+		scheduleMeasure();
+		if (!tableElement) {
+			const unregisterUpdate = editor.registerUpdateListener(scheduleMeasure);
+			return () => {
+				if (frame !== null) cancelAnimationFrame(frame);
+				unregisterUpdate();
+			};
+		}
+		const resizeObserver = new ResizeObserver(refreshColumnMetrics);
+		resizeObserver.observe(tableElement);
+		const mutationObserver = new MutationObserver(scheduleMeasure);
+		mutationObserver.observe(tableElement, {
+			childList: true,
+			subtree: true
+		});
+		const unregisterUpdate = editor.registerUpdateListener(scheduleMeasure);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			unregisterUpdate();
+		};
+	}, [
+		editor,
+		node,
+		refreshColumnMetrics
+	]);
+	return {
+		colWidths,
+		refreshColumnMetrics,
+		tableHeight
+	};
+};
+const useTableRowMetrics = (editor, node) => {
+	const [rowHeights, setRowHeights] = useState([]);
+	const [tableWidth, setTableWidth] = useState(0);
+	useEffect(() => {
+		const tableElement = editor.getElementByKey(node.getKey());
+		const table = tableElement?.querySelector("table.editor_table, table") ?? tableElement;
+		if (!(tableElement instanceof HTMLElement)) return;
+		let frame = null;
+		const measure = () => {
+			const rows = tableElement.querySelectorAll("tr");
+			if (rows.length === 0) return;
+			const tableRect = table instanceof HTMLElement ? table.getBoundingClientRect() : null;
+			const nextHeights = getControlledRowHeights(Array.from(rows, (row, index) => {
+				return normalizeRowControllerHeight(row.getBoundingClientRect().height, index + 1 === rows.length);
+			}), tableRect?.height || 0);
+			setRowHeights((currentHeights) => {
+				if (currentHeights.length === nextHeights.length && currentHeights.every((height, index) => height === nextHeights[index])) return currentHeights;
+				return nextHeights;
+			});
+			setTableWidth(tableRect?.width || 0);
+		};
+		const scheduleMeasure = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				measure();
+			});
+		};
+		scheduleMeasure();
+		const resizeObserver = new ResizeObserver(measure);
+		resizeObserver.observe(tableElement);
+		const mutationObserver = new MutationObserver(scheduleMeasure);
+		mutationObserver.observe(tableElement, {
+			childList: true,
+			subtree: true
+		});
+		const unregisterUpdate = editor.registerUpdateListener(scheduleMeasure);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			unregisterUpdate();
+		};
+	}, [editor, node]);
+	return {
+		rowHeights,
+		tableWidth
+	};
+};
+const useTableAxisDrag = ({ getDropTarget, onMove }) => {
+	const [dragTarget, setDragTarget] = useState(null);
+	const [isDragging, setDragging] = useState(false);
+	const selectedIndexesRef = useRef(null);
+	const dragTargetRef = useRef(null);
+	const cleanupRef = useRef(null);
+	const clearDragState = useCallback(() => {
+		cleanupRef.current?.();
+		cleanupRef.current = null;
+		selectedIndexesRef.current = null;
+		dragTargetRef.current = null;
+		setDragging(false);
+		setDragTarget(null);
+	}, []);
+	const updateDragTarget = useCallback((event) => {
+		const target = getDropTarget(event);
+		dragTargetRef.current = target;
+		setDragTarget(target);
+	}, [getDropTarget]);
+	const finishDrag = useCallback(() => {
+		const selectedIndexes = selectedIndexesRef.current;
+		const target = dragTargetRef.current;
+		if (selectedIndexes && target) onMove(target, selectedIndexes);
+		clearDragState();
+	}, [clearDragState, onMove]);
+	const startDrag = useCallback((event, selectedIndexes) => {
+		selectedIndexesRef.current = selectedIndexes;
+		setDragging(true);
+		updateDragTarget(event);
+		const body = document.body;
+		const handleDragOver = (dragEvent) => {
+			dragEvent.preventDefault();
+			dragEvent.stopPropagation();
+			if (dragEvent.dataTransfer) dragEvent.dataTransfer.dropEffect = "move";
+			updateDragTarget(dragEvent);
+		};
+		const handleDragEnd = (dragEvent) => {
+			dragEvent.preventDefault();
+			dragEvent.stopPropagation();
+			finishDrag();
+		};
+		cleanupRef.current?.();
+		cleanupRef.current = () => {
+			body.removeEventListener("dragover", handleDragOver);
+			body.removeEventListener("drop", handleDragEnd);
+			body.removeEventListener("dragend", handleDragEnd);
+		};
+		body.addEventListener("dragover", handleDragOver);
+		body.addEventListener("drop", handleDragEnd);
+		body.addEventListener("dragend", handleDragEnd);
+	}, [finishDrag, updateDragTarget]);
+	useEffect(() => {
+		return clearDragState;
+	}, [clearDragState]);
+	return {
+		clearDragState,
+		dragTarget,
+		finishDrag,
+		isDragging,
+		startDrag
+	};
+};
+//#endregion
+export { sum, useTableAxisDrag, useTableColumnMetrics, useTableRowMetrics };