@lobehub/editor 4.28.0 → 4.29.0

package/es/plugins/image/react/components/Image.js

@@ -11,19 +11,17 @@ import { ActionIcon } from "@lobehub/ui/base-ui";
 import { LoaderCircleIcon, ZoomInIcon } from "lucide-react";
 import { Suspense, memo, useCallback, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@lobehub/ui";
+import { Icon, useImagePreview } from "@lobehub/ui";
 import { cx } from "antd-style";
 import { COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
-import { Image } from "antd";
 //#region src/plugins/image/react/components/Image.tsx
 function getResizedImageWidth(startWidth, deltaX, maxWidth) {
 	const adjustedDeltaX = deltaX * 2;
 	return Math.max(50, Math.min(startWidth + adjustedDeltaX, maxWidth));
 }
-const Image$1 = memo(({ node, className, showScaleInfo = false, handleUpload, onPickFile }) => {
+const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPickFile }) => {
 	const [isSelected, setSelected] = useLexicalNodeSelection(node.getKey());
 	const [isHovered, setIsHovered] = useState(false);
-	const [previewOpen, setPreviewOpen] = useState(false);
 	const [scale, setScale] = useState(1);
 	const [size, setSize] = useState({
 		height: 0,
@@ -38,6 +36,8 @@ const Image$1 = memo(({ node, className, showScaleInfo = false, handleUpload, on
 	const editorRef = useRef(null);
 	const startWidthRef = useRef(0);
 	const lastLoadedSrcRef = useRef(null);
+	const previewImageRef = useRef(null);
+	const { open: openPreview, outlet: previewOutlet } = useImagePreview(previewImageRef);
 	const t = useTranslation();
 	const isBlock = useMemo(() => {
 		return $isBlockImageNode(node);
@@ -100,8 +100,9 @@ const Image$1 = memo(({ node, className, showScaleInfo = false, handleUpload, on
 	const handlePreview = useCallback((e) => {
 		e.preventDefault();
 		e.stopPropagation();
-		setPreviewOpen(true);
-	}, []);
+		previewImageRef.current = imageRef.current?.querySelector("img") ?? null;
+		openPreview();
+	}, [openPreview]);
 	const children = useMemo(() => {
 		switch (node.status) {
 			case "error": return /* @__PURE__ */ jsx(BrokenImage, {});
@@ -187,13 +188,7 @@ const Image$1 = memo(({ node, className, showScaleInfo = false, handleUpload, on
 					title: t("image.preview"),
 					variant: "filled"
 				}),
-				/* @__PURE__ */ jsx(Image.PreviewGroup, {
-					items: [node.src],
-					preview: {
-						open: previewOpen,
-						onOpenChange: setPreviewOpen
-					}
-				}),
+				previewOutlet,
 				showScaleInfo && isSelected && scale !== 1 && /* @__PURE__ */ jsxs("div", {
 					className: styles.scaleInfo,
 					children: [Math.round(scale * 100), "%"]
@@ -217,6 +212,6 @@ const Image$1 = memo(({ node, className, showScaleInfo = false, handleUpload, on
 		})
 	});
 });
-Image$1.displayName = "Image";
+Image.displayName = "Image";
 //#endregion
-export { Image$1 as default };
+export { Image as default };

package/es/plugins/image/react/components/style.js

@@ -9,6 +9,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     cursor: default;
     user-select: none;
 
+    isolation: isolate;
     position: relative;
 
     overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.28.0",
+  "version": "4.29.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -131,7 +131,7 @@
     "yjs": "^13.6.31"
   },
   "peerDependencies": {
-    "@lobehub/ui": "^5.54.0",
+    "@lobehub/ui": "^5.55.0",
     "antd": "^6.1.1",
     "motion": "^12.0.0",
     "react": "^19.0.0",