@lobehub/editor 4.20.2 → 4.20.3

package/es/plugins/toolbar/react/index.js

@@ -6,21 +6,36 @@ import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command/index.j
 import { getDOMRangeRect } from "../utils/getDOMRangeRect.js";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition.js";
 import { styles } from "./style.js";
-import { Block } from "@lobehub/ui";
-import { useCallback, useRef } from "react";
+import { Block, LOBE_THEME_APP_ID } from "@lobehub/ui";
+import { useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
 import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
+import { createPortal } from "react-dom";
 //#region src/plugins/toolbar/react/index.tsx
 init_debug();
-const ReactToolbarPlugin = ({ className, children }) => {
+const resolveDefaultPortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.getElementById(LOBE_THEME_APP_ID) ?? document.body;
+};
+const ReactToolbarPlugin = ({ className, children, getPopupContainer, usePortal = true, zIndex }) => {
 	const popupCharStylesEditorRef = useRef(null);
 	const anchorElemRef = useRef(null);
+	const [portalContainer, setPortalContainer] = useState(null);
 	const [kernelEditor] = useLexicalComposerContext();
 	const { isDarkMode } = useThemeMode();
 	const isMouseDownRef = useRef(false);
 	const logger = createDebugLogger("plugin", "toolbar");
+	const resolvePortalContainer = useCallback(() => {
+		if (!usePortal) return null;
+		if (getPopupContainer) return getPopupContainer();
+		return resolveDefaultPortalContainer();
+	}, [getPopupContainer, usePortal]);
+	const syncPortalContainer = useCallback(() => {
+		const nextContainer = resolvePortalContainer();
+		setPortalContainer((current) => current === nextContainer ? current : nextContainer);
+	}, [resolvePortalContainer]);
 	const $updateTextFormatFloatingToolbar = useCallback((editor) => {
 		if (!anchorElemRef.current) return;
 		const selection = $getSelection();
@@ -65,6 +80,14 @@ const ReactToolbarPlugin = ({ className, children }) => {
 			};
 		}
 	}, []);
+	useLexicalEditor((editor) => {
+		if (!usePortal) {
+			setPortalContainer(null);
+			return;
+		}
+		syncPortalContainer();
+		return editor.registerRootListener(syncPortalContainer);
+	}, [syncPortalContainer, usePortal]);
 	useLexicalEditor((editor) => {
 		const handleMouseDown = handleMouseDownFactory(() => {
 			editor.dispatchCommand(HIDE_TOOLBAR_COMMAND, void 0);
@@ -75,10 +98,32 @@ const ReactToolbarPlugin = ({ className, children }) => {
 			});
 		});
 		const rootElement = editor.getRootElement();
+		const editorWindow = editor._window ?? rootElement?.ownerDocument.defaultView ?? globalThis.window ?? null;
+		let animationFrameId = null;
+		const updateToolbarPosition = () => {
+			if (!editorWindow || isMouseDownRef.current || animationFrameId !== null) return;
+			animationFrameId = editorWindow.requestAnimationFrame(() => {
+				animationFrameId = null;
+				editor.getEditorState().read(() => {
+					$updateTextFormatFloatingToolbar(editor);
+				});
+			});
+		};
+		const scrollListenerOptions = {
+			capture: true,
+			passive: true
+		};
+		const scrollCleanupOptions = { capture: true };
+		const resizeListenerOptions = { passive: true };
 		if (rootElement) {
 			rootElement.addEventListener("mousedown", handleMouseDown);
 			document.addEventListener("mouseup", handleMouseUp);
 		}
+		if (editorWindow) {
+			editorWindow.addEventListener("scroll", updateToolbarPosition, scrollListenerOptions);
+			editorWindow.document.addEventListener("scroll", updateToolbarPosition, scrollListenerOptions);
+			editorWindow.addEventListener("resize", updateToolbarPosition, resizeListenerOptions);
+		}
 		return mergeRegister(registerToolbarCommand(editor, { onHide: $hideFloatingToolbar }), editor.registerUpdateListener(({ editorState }) => {
 			if (!isMouseDownRef.current) editorState.read(() => {
 				$updateTextFormatFloatingToolbar(editor);
@@ -91,11 +136,18 @@ const ReactToolbarPlugin = ({ className, children }) => {
 				rootElement.removeEventListener("mousedown", handleMouseDown);
 				document.removeEventListener("mouseup", handleMouseUp);
 			}
+			if (editorWindow) {
+				editorWindow.removeEventListener("scroll", updateToolbarPosition, scrollCleanupOptions);
+				editorWindow.document.removeEventListener("scroll", updateToolbarPosition, scrollCleanupOptions);
+				editorWindow.removeEventListener("resize", updateToolbarPosition);
+				if (animationFrameId !== null) editorWindow.cancelAnimationFrame(animationFrameId);
+			}
 		});
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: styles.anchor,
+	const toolbarNode = /* @__PURE__ */ jsx("div", {
+		className: usePortal ? styles.portalAnchor : styles.anchor,
 		ref: anchorElemRef,
+		style: usePortal && zIndex !== void 0 ? { zIndex } : void 0,
 		children: /* @__PURE__ */ jsx(Block, {
 			className: cx(isDarkMode ? styles.toolbarDark : styles.toolbarLight, className),
 			padding: 4,
@@ -104,6 +156,8 @@ const ReactToolbarPlugin = ({ className, children }) => {
 			children
 		})
 	});
+	if (usePortal) return portalContainer ? createPortal(toolbarNode, portalContainer) : null;
+	return toolbarNode;
 };
 //#endregion
 export { ReactToolbarPlugin };

package/es/plugins/toolbar/react/style.js

@@ -3,8 +3,15 @@ import { createStaticStyles } from "antd-style";
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	anchor: css`
     position: relative;
+  `,
+	portalAnchor: css`
+    pointer-events: none;
+    position: fixed;
+    z-index: 1100;
+    inset: 0;
   `,
 	toolbarDark: css`
+    pointer-events: auto;
     will-change: transform;
 
     position: absolute;
@@ -28,6 +35,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition: opacity 0.12s ${cssVar.motionEaseOut};
   `,
 	toolbarLight: css`
+    pointer-events: auto;
     will-change: transform;
 
     position: absolute;

package/es/plugins/toolbar/react/type.d.ts

@@ -1,9 +1,12 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 //#region src/plugins/toolbar/react/type.d.ts
 interface ReactToolbarPluginProps {
   children?: ReactNode;
   className?: string;
+  getPopupContainer?: () => HTMLElement | null;
+  usePortal?: boolean;
+  zIndex?: CSSProperties['zIndex'];
 }
 //#endregion
 export { ReactToolbarPluginProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.20.2",
+  "version": "4.20.3",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",