@blocklet/editor 2.4.72 → 2.4.73

package/lib/config.d.ts

@@ -26,6 +26,7 @@ export interface EditorConfig {
     minimalMode?: boolean;
     openLinkInNewTab?: boolean;
     characterLimitConfig?: CharacterLimitConfig;
+    simpleImageComponent?: boolean;
 }
 export declare function EditorConfigProvider({ children, value }: {
     children: React.ReactNode;

package/lib/main/nodes/ImageComponent.d.ts

@@ -9,7 +9,7 @@ import { LexicalEditor, NodeKey } from 'lexical';
 import { type JSX } from 'react';
 import './ImageNode.css';
 import type { ImageSizeMode } from '../../types';
-export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }: {
+export default function ImageComponentWrapper({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }: {
     file?: File;
     altText: string;
     caption: LexicalEditor;

package/lib/main/nodes/ImageComponent.js

@@ -61,7 +61,7 @@ function LazyImage({ altText, className, imageRef, src, width, height, }) {
     };
     return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, draggable: "false", crossOrigin: "anonymous", ...imgProps }));
 }
-export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }) {
+function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }) {
     const imageFrameRef = useRef(null);
     const imageRef = useRef(null);
     const buttonRef = useRef(null);
@@ -356,3 +356,25 @@ function formatFileSize(size) {
     const [factor, symbol] = size >= GB ? [GB, 'GB'] : size >= MB ? [MB, 'MB'] : size >= KB ? [KB, 'KB'] : [1, 'B'];
     return `${Number((size / factor).toFixed(2))}${symbol}`;
 }
+function SimpleImageComponent({ src, altText = '', width, height, }) {
+    const [loaded, setLoaded] = useState(false);
+    const imageRef = useRef(null);
+    useMediumZoom(imageRef);
+    return (_jsxs(_Fragment, { children: [!loaded && _jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } }), _jsx(Box, { sx: {
+                    p: 1,
+                    border: 1,
+                    borderColor: 'divider',
+                    borderRadius: 2,
+                    visibility: loaded ? 'visible' : 'hidden',
+                }, children: _jsx(Box, { component: "img", src: src, alt: altText || '', onLoad: () => {
+                        setLoaded(true);
+                    }, sx: { width, height }, ref: imageRef }) })] }));
+}
+export default function ImageComponentWrapper({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }) {
+    const [editor] = useLexicalComposerContext();
+    const config = useEditorConfig();
+    if (!editor.isEditable() && config.simpleImageComponent && src) {
+        return _jsx(SimpleImageComponent, { src: src, altText: altText, width: width, height: height });
+    }
+    return (_jsx(ImageComponent, { file: file, src: src, altText: altText, nodeKey: nodeKey, width: width, height: height, maxWidth: maxWidth, resizable: resizable, showCaption: showCaption, caption: caption, captionsEnabled: captionsEnabled, markerState: markerState, frame: frame, sizeMode: sizeMode }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.72",
+  "version": "2.4.73",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -70,7 +70,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.72"
+    "@blocklet/pdf": "2.4.73"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",