@lobehub/editor 4.15.1 → 4.15.2

package/es/plugins/block/react/ReactBlockPlugin.js

@@ -0,0 +1,457 @@
+"use client";
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { IBlockMenuService } from "../service/i-block-menu-service.js";
+import { BlockPlugin } from "../plugin/index.js";
+import { createRuntimeContext } from "./core/runtime-context.js";
+import { collectDragBlocks } from "./drag/drag-utils.js";
+import { startBlockDragSession } from "./drag/drag-session.js";
+import { styles } from "./style.js";
+import { Icon } from "@lobehub/ui";
+import { GripVerticalIcon, PlusIcon } from "lucide-react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Button as Button$1, Dropdown as Dropdown$1, theme } from "antd";
+import { createPortal } from "react-dom";
+//#region src/plugins/block/react/ReactBlockPlugin.tsx
+init_debug();
+const logger = createDebugLogger("plugin", "block-react");
+const OPERATION_MENU_OVERLAY_CLASS = "lobe-block-operation-dropdown";
+const ReactBlockPlugin = (props) => {
+	const { token } = theme.useToken();
+	const [editor] = useLexicalComposerContext();
+	const { rootClassName, className, attributeName, locale, onHoverBlockChange, onDragTargetChange, onDragTargetResolve } = props;
+	const mergedRootClassName = cx(styles.root, rootClassName?.trim() || className?.trim());
+	const menuRef = useRef(null);
+	const dragLayerRef = useRef(null);
+	const contextRef = useRef(createRuntimeContext());
+	const [hoveredBlock, setHoveredBlock] = useState(null);
+	const [menuVersion, setMenuVersion] = useState(0);
+	const [menuPosition, setMenuPosition] = useState({});
+	const [operationMenuOpen, setOperationMenuOpen] = useState(false);
+	const [operationMenuContext, setOperationMenuContext] = useState(null);
+	const [dragIndicator, setDragIndicator] = useState(null);
+	const [dragLayerContainer, setDragLayerContainer] = useState(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const [blockMenuService, setBlockMenuService] = useState(null);
+	useLayoutEffect(() => {
+		if (locale) editor.registerLocale(locale);
+		editor.registerPlugin(BlockPlugin, {
+			attributeName,
+			className: mergedRootClassName
+		});
+	}, [
+		attributeName,
+		editor,
+		locale,
+		mergedRootClassName
+	]);
+	useLexicalEditor(() => {
+		const service = editor.requireService(IBlockMenuService);
+		if (!service) {
+			logger.warn("BlockMenuService not found");
+			return;
+		}
+		setBlockMenuService(service);
+		return () => {
+			setBlockMenuService((current) => current === service ? null : current);
+		};
+	}, []);
+	useEffect(() => {
+		contextRef.current.hoveredBlock = hoveredBlock;
+	}, [hoveredBlock]);
+	useEffect(() => {
+		if (!blockMenuService) return;
+		return blockMenuService.subscribe(() => {
+			setMenuVersion((v) => v + 1);
+		});
+	}, [blockMenuService]);
+	useEffect(() => {
+		return () => {
+			contextRef.current.dragCleanup?.();
+			contextRef.current.dragCleanup = null;
+			setIsDragging(false);
+		};
+	}, []);
+	useEffect(() => {
+		let raf = null;
+		const syncDragLayerContainer = () => {
+			const container = editor.getRootElement()?.parentElement ?? null;
+			setDragLayerContainer((current) => current === container ? current : container);
+			if (!container) raf = window.requestAnimationFrame(syncDragLayerContainer);
+		};
+		syncDragLayerContainer();
+		return () => {
+			if (raf !== null) window.cancelAnimationFrame(raf);
+		};
+	}, [editor]);
+	useEffect(() => {
+		let hoverRaf = null;
+		let blockRectsCache = collectDragBlocks(editor.getRootElement());
+		let blockRectsDirty = true;
+		let latestPointer = null;
+		const markBlockRectsDirty = () => {
+			blockRectsDirty = true;
+		};
+		const getBlockRects = (root) => {
+			if (blockRectsDirty) {
+				blockRectsCache = collectDragBlocks(root);
+				blockRectsDirty = false;
+			}
+			return blockRectsCache;
+		};
+		const resolveBlockByY = (rects, y) => {
+			if (rects.length === 0) return null;
+			let left = 0;
+			let right = rects.length - 1;
+			while (left <= right) {
+				const mid = left + right >> 1;
+				const entry = rects[mid];
+				if (y < entry.rect.top) {
+					right = mid - 1;
+					continue;
+				}
+				if (y > entry.rect.bottom) {
+					left = mid + 1;
+					continue;
+				}
+				return entry;
+			}
+			const nextIndex = Math.min(Math.max(left, 0), rects.length - 1);
+			const prevIndex = Math.min(Math.max(right, 0), rects.length - 1);
+			const next = rects[nextIndex];
+			const prev = rects[prevIndex];
+			if (!next) return prev || null;
+			if (!prev) return next || null;
+			return Math.min(Math.abs(y - next.rect.top), Math.abs(y - next.rect.bottom)) < Math.min(Math.abs(y - prev.rect.top), Math.abs(y - prev.rect.bottom)) ? next : prev;
+		};
+		const isInRootLeftPaddingArea = (root, clientX, clientY) => {
+			const rootRect = root.getBoundingClientRect();
+			if (!(clientX >= rootRect.left && clientX <= rootRect.right && clientY >= rootRect.top && clientY <= rootRect.bottom)) return false;
+			const paddingLeft = Number.parseFloat(window.getComputedStyle(root).paddingLeft || "0");
+			if (paddingLeft <= 0) return false;
+			return clientX <= rootRect.left + paddingLeft;
+		};
+		const getHoveredBlock = (target, clientX, clientY) => {
+			const root = editor.getRootElement();
+			if (!root || !(target instanceof Node)) return null;
+			const targetElement = target instanceof Element ? target : target.parentElement;
+			if (!targetElement) return null;
+			if (menuRef.current?.contains(targetElement)) return contextRef.current.hoveredBlock;
+			if (targetElement.closest(`.${OPERATION_MENU_OVERLAY_CLASS}`)) return contextRef.current.hoveredBlock;
+			const blockElement = targetElement.closest("[data-block-id]");
+			if (blockElement instanceof HTMLElement && root.contains(blockElement)) {
+				const blockId = blockElement.dataset.blockId;
+				if (!blockId) return null;
+				return {
+					blockElement,
+					blockId
+				};
+			}
+			if (!root.contains(targetElement)) return null;
+			if (!isInRootLeftPaddingArea(root, clientX, clientY)) return null;
+			const rects = getBlockRects(root);
+			if (rects.length === 0) return null;
+			const entry = resolveBlockByY(rects, clientY);
+			if (!entry) return null;
+			return {
+				blockElement: entry.block,
+				blockId: entry.blockId
+			};
+		};
+		const processHover = () => {
+			if (!latestPointer) return;
+			if (contextRef.current.draggingSource) return;
+			const { clientX, clientY, target } = latestPointer;
+			const next = getHoveredBlock(target, clientX, clientY);
+			if (next) {
+				if (contextRef.current.hideTimer !== null) {
+					window.clearTimeout(contextRef.current.hideTimer);
+					contextRef.current.hideTimer = null;
+				}
+				setHoveredBlock((current) => {
+					if (!current) return next;
+					if (next.blockId === current.blockId && next.blockElement === current.blockElement) return current;
+					return next;
+				});
+				return;
+			}
+			if (contextRef.current.hideTimer !== null) return;
+			contextRef.current.hideTimer = window.setTimeout(() => {
+				contextRef.current.hideTimer = null;
+				setHoveredBlock((current) => current ? null : current);
+			}, 120);
+		};
+		const scheduleHoverProcess = () => {
+			if (hoverRaf !== null) return;
+			hoverRaf = window.requestAnimationFrame(() => {
+				hoverRaf = null;
+				processHover();
+			});
+		};
+		const handleMouseMove = (event) => {
+			const root = editor.getRootElement();
+			const target = event.target;
+			if (!root || !(target instanceof Node)) {
+				if (!contextRef.current.hoveredBlock) return;
+			} else {
+				const targetElement = target instanceof Element ? target : target.parentElement;
+				if (!targetElement) {
+					if (!contextRef.current.hoveredBlock) return;
+				} else {
+					const overMenu = menuRef.current?.contains(targetElement) || Boolean(targetElement.closest(`.${OPERATION_MENU_OVERLAY_CLASS}`));
+					const overBlock = targetElement.closest("[data-block-id]") instanceof HTMLElement && root.contains(targetElement);
+					const inPaddingArea = root.contains(targetElement) ? isInRootLeftPaddingArea(root, event.clientX, event.clientY) : false;
+					if (!overMenu && !overBlock && !inPaddingArea && !contextRef.current.hoveredBlock) return;
+				}
+			}
+			latestPointer = {
+				clientX: event.clientX,
+				clientY: event.clientY,
+				target
+			};
+			scheduleHoverProcess();
+		};
+		const handleViewportChange = () => {
+			markBlockRectsDirty();
+			scheduleHoverProcess();
+		};
+		const rootResizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+			markBlockRectsDirty();
+		}) : null;
+		const root = editor.getRootElement();
+		const unregisterUpdate = editor.getLexicalEditor()?.registerUpdateListener(() => {
+			markBlockRectsDirty();
+			scheduleHoverProcess();
+		}) || (() => {});
+		if (root) rootResizeObserver?.observe(root);
+		document.addEventListener("mousemove", handleMouseMove, true);
+		window.addEventListener("resize", handleViewportChange);
+		document.addEventListener("scroll", handleViewportChange, true);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove, true);
+			window.removeEventListener("resize", handleViewportChange);
+			document.removeEventListener("scroll", handleViewportChange, true);
+			rootResizeObserver?.disconnect();
+			unregisterUpdate();
+			if (hoverRaf !== null) {
+				window.cancelAnimationFrame(hoverRaf);
+				hoverRaf = null;
+			}
+			if (contextRef.current.hideTimer !== null) {
+				window.clearTimeout(contextRef.current.hideTimer);
+				contextRef.current.hideTimer = null;
+			}
+		};
+	}, [editor, isDragging]);
+	useEffect(() => {
+		if (!hoveredBlock) {
+			if (operationMenuOpen) return;
+			setMenuPosition({});
+			return;
+		}
+		const updateMenuPosition = () => {
+			const rect = hoveredBlock.blockElement.getBoundingClientRect();
+			const menuWidth = menuRef.current?.offsetWidth || 32;
+			const gap = 8;
+			const listItemOffset = hoveredBlock.blockElement.tagName === "LI" ? 16 : 0;
+			setMenuPosition({
+				left: Math.max(gap, rect.left - menuWidth - gap - listItemOffset),
+				top: rect.top
+			});
+		};
+		updateMenuPosition();
+		window.addEventListener("resize", updateMenuPosition);
+		document.addEventListener("scroll", updateMenuPosition, true);
+		return () => {
+			window.removeEventListener("resize", updateMenuPosition);
+			document.removeEventListener("scroll", updateMenuPosition, true);
+		};
+	}, [hoveredBlock]);
+	const menuContext = useMemo(() => {
+		if (!hoveredBlock) return null;
+		return {
+			blockElement: hoveredBlock.blockElement,
+			blockId: hoveredBlock.blockId,
+			editor
+		};
+	}, [editor, hoveredBlock]);
+	const operationMenus = useMemo(() => {
+		if (!operationMenuContext || !blockMenuService) return [];
+		return blockMenuService.getMenus(operationMenuContext);
+	}, [
+		blockMenuService,
+		operationMenuContext,
+		menuVersion
+	]);
+	const actionButtons = useMemo(() => {
+		if (!menuContext || !blockMenuService) return [];
+		return blockMenuService.getActionButtons(menuContext);
+	}, [
+		blockMenuService,
+		menuContext,
+		menuVersion
+	]);
+	useEffect(() => {
+		onHoverBlockChange?.(menuContext);
+	}, [menuContext, onHoverBlockChange]);
+	useEffect(() => {
+		if (!operationMenuOpen || !menuContext || !contextRef.current.operationMenuAnchorBlockId) return;
+		if (contextRef.current.operationMenuAnchorBlockId !== menuContext.blockId) {
+			setOperationMenuOpen(false);
+			setOperationMenuContext(null);
+		}
+	}, [menuContext, operationMenuOpen]);
+	useEffect(() => {
+		if (!operationMenuOpen) {
+			contextRef.current.operationMenuAnchorBlockId = null;
+			setOperationMenuContext(null);
+		}
+	}, [operationMenuOpen]);
+	useEffect(() => {
+		if (!operationMenuOpen) return;
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			if (menuRef.current?.contains(target)) return;
+			if (target.closest(`.${OPERATION_MENU_OVERLAY_CLASS}`)) return;
+			contextRef.current.operationMenuAnchorBlockId = null;
+			setOperationMenuOpen(false);
+			setOperationMenuContext(null);
+		};
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown, true);
+		};
+	}, [operationMenuOpen]);
+	useEffect(() => {
+		onDragTargetChange?.(contextRef.current.dragTarget);
+	}, [dragIndicator, onDragTargetChange]);
+	const preventEditorSelectionLost = (event) => {
+		if (event.target?.closest("[data-block-drag-handle=\"true\"]")) return;
+		event.preventDefault();
+	};
+	const clearDragPreview = () => {
+		contextRef.current.dragTarget = null;
+		setDragIndicator(null);
+	};
+	const toggleOperationMenu = (context) => {
+		if (!context) {
+			setOperationMenuOpen(false);
+			setOperationMenuContext(null);
+			return;
+		}
+		setOperationMenuOpen((open) => {
+			const shouldOpen = !(open && contextRef.current.operationMenuAnchorBlockId === context.blockId);
+			contextRef.current.operationMenuAnchorBlockId = shouldOpen ? context.blockId : null;
+			setOperationMenuContext(shouldOpen ? context : null);
+			return shouldOpen;
+		});
+	};
+	const handleDragHandlePointerDown = (event) => {
+		if (!menuContext) return;
+		event.stopPropagation();
+		startBlockDragSession({
+			clearDragPreview,
+			clientX: event.clientX,
+			clientY: event.clientY,
+			contextRef,
+			dragGhostContainer: dragLayerRef.current,
+			editor,
+			menuContext,
+			onDragTargetResolve,
+			onDraggingChange: setIsDragging,
+			setDragIndicator,
+			setOperationMenuContext,
+			setOperationMenuOpen,
+			toggleOperationMenu
+		});
+	};
+	const handleDragHandleClick = () => {
+		if (contextRef.current.ignoreNextHandleClick) {
+			contextRef.current.ignoreNextHandleClick = false;
+			return;
+		}
+		toggleOperationMenu(menuContext);
+	};
+	const dropdownItems = useMemo(() => operationMenus.map((item) => ({
+		key: item.key,
+		label: typeof item.label === "function" ? item.label(operationMenuContext) : item.label,
+		onClick: () => {
+			item.onClick(operationMenuContext);
+			setOperationMenuOpen(false);
+			setOperationMenuContext(null);
+		}
+	})), [operationMenus, operationMenuContext]);
+	const shouldRenderPortal = menuContext || dragIndicator;
+	const menuNode = menuContext && !isDragging ? /* @__PURE__ */ jsx("div", {
+		className: styles.menu,
+		ref: menuRef,
+		style: menuPosition,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.menuInner,
+			onMouseDown: preventEditorSelectionLost,
+			children: [actionButtons.map((item) => {
+				const title = typeof item.title === "function" ? item.title(menuContext) : item.title;
+				return /* @__PURE__ */ jsx(Button$1, {
+					"aria-label": title,
+					icon: item.icon === "plus" ? /* @__PURE__ */ jsx(Icon, {
+						icon: PlusIcon,
+						size: 14
+					}) : void 0,
+					onClick: () => item.onClick(menuContext),
+					size: "small",
+					title,
+					type: "text"
+				}, item.key);
+			}), /* @__PURE__ */ jsx(Dropdown$1, {
+				align: { points: ["tr", "tl"] },
+				classNames: { root: OPERATION_MENU_OVERLAY_CLASS },
+				menu: { items: dropdownItems },
+				onOpenChange: (open) => {
+					if (!open) {
+						setOperationMenuOpen(false);
+						setOperationMenuContext(null);
+						contextRef.current.operationMenuAnchorBlockId = null;
+					}
+				},
+				open: operationMenuOpen && operationMenuContext?.blockId === menuContext.blockId,
+				trigger: [],
+				children: /* @__PURE__ */ jsx(Button$1, {
+					"aria-label": "Block actions and drag",
+					className: styles.dragHandle,
+					"data-block-drag-handle": "true",
+					icon: /* @__PURE__ */ jsx(Icon, {
+						icon: GripVerticalIcon,
+						size: 14
+					}),
+					onClick: handleDragHandleClick,
+					onPointerDown: handleDragHandlePointerDown,
+					size: "small",
+					title: "Block actions and drag",
+					type: "text"
+				})
+			})]
+		})
+	}) : null;
+	const dragLayerNode = /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: styles.dragLayer,
+		"data-block-drag-layer": "true",
+		ref: dragLayerRef
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [dragLayerContainer ? createPortal(dragLayerNode, dragLayerContainer) : dragLayerNode, shouldRenderPortal && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [menuNode, dragIndicator && /* @__PURE__ */ jsx("div", {
+		className: styles.dragIndicator,
+		style: {
+			backgroundColor: token.colorPrimary,
+			left: dragIndicator.left,
+			top: dragIndicator.top,
+			width: dragIndicator.width
+		}
+	})] }), document.body)] });
+};
+ReactBlockPlugin.displayName = "ReactBlockPlugin";
+//#endregion
+export { ReactBlockPlugin as default };

package/es/plugins/block/react/core/runtime-context.js

@@ -0,0 +1,19 @@
+//#region src/plugins/block/react/core/runtime-context.ts
+const createRuntimeContext = () => ({
+	dragAutoScrollRaf: null,
+	dragBlocks: [],
+	dragCleanup: null,
+	dragMoved: false,
+	dragPointerY: null,
+	dragRaf: null,
+	dragStartPoint: null,
+	dragStarted: false,
+	dragTarget: null,
+	draggingSource: null,
+	hideTimer: null,
+	hoveredBlock: null,
+	ignoreNextHandleClick: false,
+	operationMenuAnchorBlockId: null
+});
+//#endregion
+export { createRuntimeContext };

package/es/plugins/block/react/core/types.d.ts

@@ -0,0 +1,6 @@
+import { BlockMovePayload } from "../../command/index.js";
+
+//#region src/plugins/block/react/core/types.d.ts
+type BlockDragTarget = BlockMovePayload;
+//#endregion
+export { BlockDragTarget };