@lobehub/editor 4.15.2 → 4.16.1

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

@@ -0,0 +1,264 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/TableController/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const selectedBackground = `color-mix(in srgb, ${cssVar.colorPrimaryBg} 72%, ${cssVar.colorPrimary} 28%)`;
+	const hoverable = `
+    cursor: pointer;
+    background-color: ${cssVar.colorFillTertiary};
+    transition: background-color 0.12s ease;
+
+    &:hover {
+      background-color: ${cssVar.colorPrimaryBg};
+    }
+  `;
+	return {
+		col: css`
+      ${hoverable};
+      position: relative;
+
+      flex-shrink: 0;
+
+      block-size: 14px;
+      border-color: ${cssVar.colorFillSecondary};
+      border-style: solid;
+      border-width: 1px 0 0 1px;
+    `,
+		colDragIndicator: css`
+      inset-block-start: 14px;
+      transform: translateX(-50%);
+      inline-size: 2px;
+    `,
+		colLast: css`
+      border-width: 1px 1px 0;
+      border-start-end-radius: 8px;
+    `,
+		colSelectionDots: css`
+      grid-template-columns: repeat(3, 2px);
+    `,
+		colTop: css`
+      position: relative;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+
+      block-size: 14px;
+    `,
+		corner: css`
+      ${hoverable};
+      position: absolute;
+      z-index: 4;
+      inset-block-start: 0;
+      inset-inline-start: -14px;
+
+      box-sizing: border-box;
+      inline-size: 15px;
+      block-size: 15px;
+      border: 1px solid ${cssVar.colorFillSecondary};
+      border-start-start-radius: 8px;
+    `,
+		deleteButton: css`
+      pointer-events: none;
+      cursor: pointer;
+
+      position: fixed;
+      z-index: 5;
+      transform: translate(-50%, -50%);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      inline-size: 28px;
+      block-size: 28px;
+      padding: 0;
+      border: 1px solid ${cssVar.colorBorder};
+      border-radius: 4px;
+
+      color: ${cssVar.colorText};
+
+      opacity: 0;
+      background: ${cssVar.colorBgElevated};
+      box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
+
+      &:hover {
+        border-color: ${cssVar.colorErrorBorder};
+        color: ${cssVar.colorError};
+        background: ${cssVar.colorErrorBg};
+      }
+    `,
+		deleteButtonVisible: css`
+      pointer-events: auto;
+      opacity: 1;
+    `,
+		dragIndicator: css`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 6;
+
+      border-radius: 999px;
+
+      opacity: 0;
+      background: ${cssVar.colorPrimary};
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};
+    `,
+		dragIndicatorVisible: css`
+      opacity: 1;
+    `,
+		insertButton: css`
+      pointer-events: none;
+      cursor: pointer;
+
+      position: fixed;
+      z-index: 5;
+      transform: translate(-50%, -50%);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      inline-size: 24px;
+      block-size: 24px;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+
+      color: ${cssVar.colorTextSecondary};
+
+      opacity: 0;
+      background: ${cssVar.colorFillTertiary};
+
+      &:hover {
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFillSecondary};
+      }
+    `,
+		insertButtonVisible: css`
+      pointer-events: auto;
+      opacity: 1;
+    `,
+		menu: css`
+      pointer-events: auto;
+
+      position: fixed;
+      z-index: 1000;
+
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      box-sizing: border-box;
+      padding: 6px;
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      border-radius: 8px;
+
+      background: ${cssVar.colorBgElevated};
+      box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent);
+    `,
+		menuItem: css`
+      cursor: pointer;
+
+      display: flex;
+      align-items: center;
+
+      min-block-size: 32px;
+      padding-block: 0;
+      padding-inline: 10px;
+      border: 0;
+      border-radius: 5px;
+
+      font: inherit;
+      color: ${cssVar.colorText};
+      text-align: start;
+      white-space: nowrap;
+
+      background: transparent;
+
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+    `,
+		menuItemDanger: css`
+      color: ${cssVar.colorError};
+
+      &:hover {
+        background: ${cssVar.colorErrorBg};
+      }
+    `,
+		menuSeparator: css`
+      block-size: 1px;
+      margin-block: 4px;
+      margin-inline: -6px;
+      background: ${cssVar.colorSplit};
+    `,
+		row: css`
+      ${hoverable};
+      position: relative;
+
+      box-sizing: border-box;
+      inline-size: 15px;
+      border-color: ${cssVar.colorFillSecondary};
+      border-style: solid;
+      border-width: 1px 0.5px 0 1px;
+    `,
+		rowDragIndicator: css`
+      inset-inline-start: 15px;
+      transform: translateY(-50%);
+      block-size: 2px;
+    `,
+		rowLast: css`
+      border-width: 1px 0.5px 1px 1px;
+      border-end-start-radius: 8px;
+    `,
+		rowLeft: css`
+      position: absolute;
+      z-index: 3;
+      inset-block-start: 14px;
+      inset-inline-start: -14px;
+
+      inline-size: 15px;
+    `,
+		rowSelectionDots: css`
+      grid-template-columns: repeat(2, 2px);
+    `,
+		selected: css`
+      cursor: move;
+      background-color: ${selectedBackground};
+
+      &:hover {
+        background-color: ${selectedBackground};
+      }
+    `,
+		selectedCorner: css`
+      cursor: pointer;
+    `,
+		selectionDots: css`
+      pointer-events: none;
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+
+      display: grid;
+      gap: 2px;
+
+      opacity: 0;
+
+      > span {
+        inline-size: 2px;
+        block-size: 2px;
+        border-radius: 50%;
+        background: ${cssVar.colorTextLightSolid};
+      }
+    `,
+		selectionDotsVisible: css`
+      opacity: 1;
+    `
+	};
+});
+//#endregion
+export { styles };

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

@@ -0,0 +1,25 @@
+//#region src/plugins/table/react/TableController/utils.ts
+const createTableDragImage = (label) => {
+	const element = document.createElement("div");
+	element.textContent = label;
+	element.style.cssText = `
+    position: fixed;
+    top: -1000px;
+    left: -1000px;
+    z-index: -1;
+    padding: 6px 10px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+    background: rgba(0, 0, 0, 0.78);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  `;
+	document.body.append(element);
+	setTimeout(() => element.remove());
+	return element;
+};
+//#endregion
+export { createTableDragImage };

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

@@ -0,0 +1,81 @@
+import { memo, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { createPortal } from "react-dom";
+//#region src/plugins/table/react/TableControllerButton.tsx
+const BUTTON_SIZE = 24;
+const getPortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.querySelector(".ant-app") || document.body;
+};
+const getButtonStyle = (reference, position, offset = 0, gap) => {
+	if (!reference) return {};
+	const rect = reference.getBoundingClientRect();
+	const minCenter = BUTTON_SIZE / 2 + gap;
+	const maxInlineCenter = window.innerWidth - BUTTON_SIZE / 2 - gap;
+	const maxBlockCenter = window.innerHeight - BUTTON_SIZE / 2 - gap;
+	const clampCenter = (value, max) => {
+		return Math.min(Math.max(value, minCenter), max);
+	};
+	if (position === "top") {
+		const preferredTop = rect.top - BUTTON_SIZE / 2 - gap;
+		const fallbackTop = rect.bottom + BUTTON_SIZE / 2 + gap;
+		return {
+			insetBlockStart: preferredTop >= minCenter ? preferredTop : clampCenter(fallbackTop, maxBlockCenter),
+			insetInlineStart: clampCenter(rect.left + offset, maxInlineCenter)
+		};
+	}
+	const preferredLeft = rect.left - BUTTON_SIZE / 2 - gap;
+	const fallbackLeft = rect.right + BUTTON_SIZE / 2 + gap;
+	return {
+		insetBlockStart: clampCenter(rect.top + offset, maxBlockCenter),
+		insetInlineStart: preferredLeft >= minCenter ? preferredLeft : clampCenter(fallbackLeft, maxInlineCenter)
+	};
+};
+const TableControllerButton = memo(({ ariaLabel, children, className, gap = 6, offset, onClick, onMouseEnter, onMouseLeave, position, reference, visible, visibleClassName }) => {
+	const [style, setStyle] = useState(() => getButtonStyle(reference, position, offset, gap));
+	const container = getPortalContainer();
+	useEffect(() => {
+		if (!visible || !reference) return;
+		const updateStyle = () => {
+			setStyle(getButtonStyle(reference, position, offset, gap));
+		};
+		updateStyle();
+		window.addEventListener("scroll", updateStyle, true);
+		window.addEventListener("resize", updateStyle);
+		const observer = new ResizeObserver(updateStyle);
+		observer.observe(reference);
+		return () => {
+			window.removeEventListener("scroll", updateStyle, true);
+			window.removeEventListener("resize", updateStyle);
+			observer.disconnect();
+		};
+	}, [
+		gap,
+		offset,
+		position,
+		reference,
+		visible
+	]);
+	if (!container) return null;
+	return createPortal(/* @__PURE__ */ jsx("button", {
+		"aria-hidden": !visible,
+		"aria-label": ariaLabel,
+		className: cx(className, visible && visibleClassName),
+		onMouseDown: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!visible) return;
+			onClick();
+		},
+		onMouseEnter,
+		onMouseLeave,
+		style,
+		tabIndex: visible ? 0 : -1,
+		type: "button",
+		children
+	}), container);
+});
+TableControllerButton.displayName = "TableControllerButton";
+//#endregion
+export { TableControllerButton as default };

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

@@ -0,0 +1,123 @@
+import { styles } from "./TableController/style.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { createPortal } from "react-dom";
+//#region src/plugins/table/react/TableControllerMenu.tsx
+const MENU_GAP = 8;
+const MENU_MIN_WIDTH = 168;
+const BLOCK_MENU_SUPPRESSOR_KEY = "__table_controller_menu";
+const isSeparatorItem = (item) => {
+	return "type" in item && item.type === "separator";
+};
+const getPortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.querySelector(".ant-app") || document.body;
+};
+const getMenuStyle = (anchorElement, items, position, menuElement) => {
+	if (!anchorElement || typeof window === "undefined") return {};
+	const rect = anchorElement.getBoundingClientRect();
+	const menuWidth = MENU_MIN_WIDTH;
+	const estimatedHeight = menuElement?.getBoundingClientRect().height || items.reduce((height, item) => height + (isSeparatorItem(item) ? 9 : 32), 12);
+	const maxLeft = Math.max(MENU_GAP, window.innerWidth - menuWidth - MENU_GAP);
+	const maxTop = Math.max(MENU_GAP, window.innerHeight - estimatedHeight - MENU_GAP);
+	const clamp = (value, max) => Math.min(Math.max(value, MENU_GAP), max);
+	if (position === "top") {
+		const preferredTop = rect.top - estimatedHeight - MENU_GAP;
+		const fallbackTop = rect.bottom + MENU_GAP;
+		return {
+			insetBlockStart: preferredTop >= MENU_GAP ? preferredTop : clamp(fallbackTop, maxTop),
+			insetInlineStart: clamp(rect.left + rect.width / 2 - menuWidth / 2, maxLeft),
+			minInlineSize: menuWidth
+		};
+	}
+	const preferredLeft = rect.left - menuWidth - MENU_GAP;
+	const fallbackLeft = rect.right + MENU_GAP;
+	return {
+		insetBlockStart: clamp(rect.top + rect.height / 2 - estimatedHeight / 2, maxTop),
+		insetInlineStart: preferredLeft >= MENU_GAP ? preferredLeft : clamp(fallbackLeft, maxLeft),
+		minInlineSize: menuWidth
+	};
+};
+const TableControllerMenu = memo(({ anchorElement, blockMenuService, items, onOpenChange, open, position }) => {
+	const [style, setStyle] = useState(() => getMenuStyle(anchorElement, items, position));
+	const menuRef = useRef(null);
+	const container = getPortalContainer();
+	useEffect(() => {
+		blockMenuService?.setMenuSuppressed(BLOCK_MENU_SUPPRESSOR_KEY, open);
+		return () => {
+			blockMenuService?.setMenuSuppressed(BLOCK_MENU_SUPPRESSOR_KEY, false);
+		};
+	}, [blockMenuService, open]);
+	useEffect(() => {
+		if (!open || !anchorElement) return;
+		const updateStyle = () => {
+			setStyle(getMenuStyle(anchorElement, items, position, menuRef.current));
+		};
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (target instanceof Node && (anchorElement.contains(target) || menuRef.current?.contains(target))) return;
+			onOpenChange(false);
+		};
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") onOpenChange(false);
+		};
+		updateStyle();
+		requestAnimationFrame(updateStyle);
+		window.addEventListener("scroll", updateStyle, true);
+		window.addEventListener("resize", updateStyle);
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		const observer = new ResizeObserver(updateStyle);
+		observer.observe(anchorElement);
+		return () => {
+			window.removeEventListener("scroll", updateStyle, true);
+			window.removeEventListener("resize", updateStyle);
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+			observer.disconnect();
+		};
+	}, [
+		anchorElement,
+		container,
+		items,
+		onOpenChange,
+		open,
+		position
+	]);
+	if (!container || !open) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: styles.menu,
+		contentEditable: false,
+		ref: menuRef,
+		role: "menu",
+		style,
+		children: items.map((item) => {
+			if (isSeparatorItem(item)) return /* @__PURE__ */ jsx("div", {
+				className: styles.menuSeparator,
+				role: "separator"
+			}, item.key);
+			return /* @__PURE__ */ jsx("button", {
+				className: cx(styles.menuItem, item.danger && styles.menuItemDanger),
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					item.onClick();
+					onOpenChange(false);
+				},
+				onMouseDown: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onMouseEnter: item.onMouseEnter,
+				onMouseLeave: item.onMouseLeave,
+				role: "menuitem",
+				type: "button",
+				children: item.label
+			}, item.key);
+		})
+	}), container);
+});
+TableControllerMenu.displayName = "TableControllerMenu";
+//#endregion
+export { TableControllerMenu as default };

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 };