@lobehub/editor 4.25.1 → 4.26.0

package/es/headless.d.ts

@@ -76,6 +76,7 @@ declare const _default: {
   };
   image: {
     broken: string;
+    preview: string;
     replace: string;
   };
   link: {

package/es/headless.js

@@ -43,6 +43,7 @@ var locale_default = {
 	},
 	image: {
 		broken: "Broken image",
+		preview: "Preview image",
 		replace: "Replace"
 	},
 	link: {

package/es/locale/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
   };
   image: {
     broken: string;
+    preview: string;
     replace: string;
   };
   link: {

package/es/locale/index.js

@@ -26,6 +26,7 @@ var init_locale = __esmMin((() => {
 		},
 		image: {
 			broken: "Broken image",
+			preview: "Preview image",
 			replace: "Replace"
 		},
 		link: {

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

@@ -1,4 +1,5 @@
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { $isBlockImageNode } from "../../node/block-image-node.js";
 import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
 import { styles } from "./style.js";
@@ -6,20 +7,22 @@ import BrokenImage from "./BrokenImage.js";
 import ImageEditPopover from "./ImageEditPopover.js";
 import LazyImage from "./LazyImage.js";
 import { ResizeHandle } from "./ResizeHandle.js";
-import { Icon } from "@lobehub/ui";
-import { LoaderCircleIcon } from "lucide-react";
+import { ActionIcon, Icon } from "@lobehub/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 { cx } from "antd-style";
+import { Image } from "antd";
 import { COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
 //#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 = memo(({ node, className, showScaleInfo = false, handleUpload, onPickFile }) => {
+const Image$1 = 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,
@@ -34,6 +37,7 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 	const editorRef = useRef(null);
 	const startWidthRef = useRef(0);
 	const lastLoadedSrcRef = useRef(null);
+	const t = useTranslation();
 	const isBlock = useMemo(() => {
 		return $isBlockImageNode(node);
 	}, [node]);
@@ -92,6 +96,11 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 	const handleMouseLeave = useCallback(() => {
 		setIsHovered(false);
 	}, []);
+	const handlePreview = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setPreviewOpen(true);
+	}, []);
 	const children = useMemo(() => {
 		switch (node.status) {
 			case "error": return /* @__PURE__ */ jsx(BrokenImage, {});
@@ -167,6 +176,23 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 						spin: true
 					})
 				}),
+				(isHovered || isSelected) && node.status === "uploaded" && /* @__PURE__ */ jsx(ActionIcon, {
+					"aria-label": t("image.preview"),
+					glass: true,
+					className: styles.previewAction,
+					icon: ZoomInIcon,
+					onClick: handlePreview,
+					size: "small",
+					title: t("image.preview"),
+					variant: "filled"
+				}),
+				/* @__PURE__ */ jsx(Image.PreviewGroup, {
+					items: [node.src],
+					preview: {
+						open: previewOpen,
+						onOpenChange: setPreviewOpen
+					}
+				}),
 				showScaleInfo && isSelected && scale !== 1 && /* @__PURE__ */ jsxs("div", {
 					className: styles.scaleInfo,
 					children: [Math.round(scale * 100), "%"]
@@ -190,6 +216,6 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 		})
 	});
 });
-Image.displayName = "Image";
+Image$1.displayName = "Image";
 //#endregion
-export { Image as default };
+export { Image$1 as default };

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

@@ -78,6 +78,32 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     justify-content: center;
 
     color: ${cssVar.colorTextSecondary};
+  `,
+	previewAction: css`
+    position: absolute;
+    z-index: 10000;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+
+    && {
+      border: 1px solid rgb(255 255 255 / 24%);
+
+      color: rgb(255 255 255 / 96%);
+
+      background: rgb(0 0 0 / 58%);
+      backdrop-filter: saturate(120%) blur(12px);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 36%);
+    }
+
+    &&:hover {
+      color: rgb(255 255 255);
+      background: rgb(0 0 0 / 72%);
+    }
+
+    &&:active {
+      color: rgb(255 255 255);
+      background: rgb(0 0 0 / 80%);
+    }
   `,
 	resizeHandle: css`
     pointer-events: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.25.1",
+  "version": "4.26.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",