@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,613 @@
+"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, getBlockMeasureRect, getTableBlockRect, isTableBlockElement } 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 { $findTableNode, $isTableSelection } from "@lexical/table";
+import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
+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 TABLE_FOCUSED_MENU_OFFSET = 8;
+const getTableMenuAnchorRect = (element) => {
+	const rect = getTableBlockRect(element);
+	if (!rect) return null;
+	return {
+		left: rect.left,
+		top: rect.top
+	};
+};
+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 [layoutVersion, setLayoutVersion] = useState(0);
+	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 [focusedTableBlockId, setFocusedTableBlockId] = useState(null);
+	const [blockMenuService, setBlockMenuService] = useState(null);
+	const blockMenuSuppressed = blockMenuService?.isMenuSuppressed() ?? false;
+	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(() => {
+		if (!blockMenuSuppressed) return;
+		setHoveredBlock(null);
+		setOperationMenuOpen(false);
+		setOperationMenuContext(null);
+		contextRef.current.operationMenuAnchorBlockId = null;
+	}, [blockMenuSuppressed]);
+	useLexicalEditor((lexicalEditor) => {
+		return lexicalEditor.registerUpdateListener(({ editorState }) => {
+			editorState.read(() => {
+				const selection = $getSelection();
+				if ($isTableSelection(selection)) {
+					setFocusedTableBlockId(selection.tableKey);
+					return;
+				}
+				if ($isRangeSelection(selection)) {
+					const anchorNode = $getNodeByKey(selection.anchor.key);
+					setFocusedTableBlockId((anchorNode ? $findTableNode(anchorNode) : null)?.getKey() ?? null);
+					return;
+				}
+				setFocusedTableBlockId(null);
+			});
+		});
+	}, [editor]);
+	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 resolveCurrentBlockElement = (root, blockId) => {
+			const currentBlock = Array.from(root.querySelectorAll("[data-block-id]")).find((element) => element.dataset.blockId === blockId);
+			return currentBlock && root.contains(currentBlock) ? currentBlock : null;
+		};
+		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 ? {
+				...contextRef.current.hoveredBlock,
+				source: "existing"
+			} : null;
+			if (targetElement.closest(`.${OPERATION_MENU_OVERLAY_CLASS}`)) return contextRef.current.hoveredBlock ? {
+				...contextRef.current.hoveredBlock,
+				source: "existing"
+			} : null;
+			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,
+					source: "direct"
+				};
+			}
+			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;
+			const currentBlockElement = resolveCurrentBlockElement(root, entry.blockId);
+			if (!currentBlockElement) {
+				markBlockRectsDirty();
+				return null;
+			}
+			return {
+				blockElement: currentBlockElement,
+				blockId: entry.blockId,
+				source: "padding"
+			};
+		};
+		const processHover = () => {
+			if (blockMenuSuppressed) return;
+			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) {
+						if (next.source === "padding") setLayoutVersion((version) => version + 1);
+						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) => {
+			if (blockMenuSuppressed) return;
+			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();
+			if (blockMenuSuppressed) return;
+			scheduleHoverProcess();
+		};
+		const clearMenuState = () => {
+			if (contextRef.current.hideTimer !== null) {
+				window.clearTimeout(contextRef.current.hideTimer);
+				contextRef.current.hideTimer = null;
+			}
+			latestPointer = null;
+			contextRef.current.operationMenuAnchorBlockId = null;
+			setHoveredBlock(null);
+			setOperationMenuOpen(false);
+			setOperationMenuContext(null);
+		};
+		const isInsideMenu = (target) => {
+			if (!(target instanceof Element)) return false;
+			return Boolean(menuRef.current?.contains(target)) || Boolean(target.closest(`.${OPERATION_MENU_OVERLAY_CLASS}`));
+		};
+		const handlePointerDown = (event) => {
+			const rootElement = editor.getRootElement();
+			const target = event.target;
+			if (!(target instanceof Node)) {
+				clearMenuState();
+				return;
+			}
+			if (rootElement?.contains(target) || isInsideMenu(target)) return;
+			clearMenuState();
+		};
+		const handleFocusOut = () => {
+			window.requestAnimationFrame(() => {
+				const rootElement = editor.getRootElement();
+				const activeElement = rootElement?.ownerDocument.activeElement;
+				if (!activeElement) {
+					clearMenuState();
+					return;
+				}
+				if (rootElement?.contains(activeElement) || isInsideMenu(activeElement)) return;
+				clearMenuState();
+			});
+		};
+		const rootResizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+			markBlockRectsDirty();
+			setLayoutVersion((version) => version + 1);
+			if (blockMenuSuppressed) return;
+			scheduleHoverProcess();
+		}) : null;
+		const root = editor.getRootElement();
+		const rootMutationObserver = root && typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+			markBlockRectsDirty();
+			setLayoutVersion((version) => version + 1);
+			if (blockMenuSuppressed) return;
+			scheduleHoverProcess();
+		}) : null;
+		const unregisterUpdate = editor.getLexicalEditor()?.registerUpdateListener(() => {
+			markBlockRectsDirty();
+			if (blockMenuSuppressed) {
+				setHoveredBlock(null);
+				setLayoutVersion((version) => version + 1);
+				return;
+			}
+			setHoveredBlock((current) => {
+				if (!current) return current;
+				const currentRoot = editor.getRootElement();
+				const currentBlockId = current.blockElement.dataset.blockId;
+				if (!currentRoot || !current.blockElement.isConnected || !currentRoot.contains(current.blockElement) || currentBlockId !== current.blockId) return null;
+				return current;
+			});
+			setLayoutVersion((version) => version + 1);
+			scheduleHoverProcess();
+		}) || (() => {});
+		if (root) {
+			rootResizeObserver?.observe(root);
+			rootMutationObserver?.observe(root, {
+				attributes: true,
+				childList: true,
+				subtree: true
+			});
+		}
+		document.addEventListener("mousemove", handleMouseMove, true);
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		window.addEventListener("resize", handleViewportChange);
+		document.addEventListener("scroll", handleViewportChange, true);
+		root?.addEventListener("focusout", handleFocusOut);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove, true);
+			document.removeEventListener("pointerdown", handlePointerDown, true);
+			window.removeEventListener("resize", handleViewportChange);
+			document.removeEventListener("scroll", handleViewportChange, true);
+			root?.removeEventListener("focusout", handleFocusOut);
+			rootResizeObserver?.disconnect();
+			rootMutationObserver?.disconnect();
+			unregisterUpdate();
+			if (hoverRaf !== null) {
+				window.cancelAnimationFrame(hoverRaf);
+				hoverRaf = null;
+			}
+			if (contextRef.current.hideTimer !== null) {
+				window.clearTimeout(contextRef.current.hideTimer);
+				contextRef.current.hideTimer = null;
+			}
+		};
+	}, [
+		blockMenuSuppressed,
+		editor,
+		isDragging
+	]);
+	useLayoutEffect(() => {
+		if (!hoveredBlock) {
+			if (operationMenuOpen) return;
+			setMenuPosition({});
+			return;
+		}
+		const updateMenuPosition = () => {
+			const blockRect = getBlockMeasureRect(hoveredBlock.blockElement);
+			if (!blockRect) {
+				setMenuPosition({});
+				return;
+			}
+			const menuWidth = menuRef.current?.offsetWidth || 32;
+			const gap = 8;
+			const listItemOffset = hoveredBlock.blockElement.tagName === "LI" ? 16 : 0;
+			const isTableBlock = isTableBlockElement(hoveredBlock.blockElement);
+			const tableMenuOffset = focusedTableBlockId === hoveredBlock.blockId && isTableBlock ? TABLE_FOCUSED_MENU_OFFSET : 0;
+			const tableAnchorRect = isTableBlock ? getTableMenuAnchorRect(hoveredBlock.blockElement) : null;
+			const root = editor.getRootElement();
+			const rootRect = root?.getBoundingClientRect();
+			const rootPaddingLeft = root ? Number.parseFloat(window.getComputedStyle(root).paddingLeft || "0") : 0;
+			const minTableLeft = rootRect ? rootRect.left + rootPaddingLeft : gap;
+			const anchorLeft = isTableBlock && tableAnchorRect ? Math.max(tableAnchorRect.left, minTableLeft) : blockRect.left;
+			const rawAnchorTop = tableAnchorRect?.top ?? blockRect.top;
+			const anchorTop = rawAnchorTop >= blockRect.top - 1 && rawAnchorTop <= blockRect.bottom + 1 ? rawAnchorTop : blockRect.top;
+			setMenuPosition({
+				left: Math.max(gap, anchorLeft - menuWidth - gap - listItemOffset - tableMenuOffset),
+				top: anchorTop
+			});
+		};
+		updateMenuPosition();
+		window.addEventListener("resize", updateMenuPosition);
+		document.addEventListener("scroll", updateMenuPosition, true);
+		return () => {
+			window.removeEventListener("resize", updateMenuPosition);
+			document.removeEventListener("scroll", updateMenuPosition, true);
+		};
+	}, [
+		editor,
+		focusedTableBlockId,
+		hoveredBlock,
+		layoutVersion,
+		operationMenuOpen
+	]);
+	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 = !blockMenuSuppressed && menuContext || dragIndicator;
+	const menuNode = menuContext && !isDragging && !blockMenuSuppressed ? /* @__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 };