@blocklet/editor 1.6.247 → 1.6.248

package/lib/main/hooks/hooks.d.ts

@@ -0,0 +1,15 @@
+import { ImageSizeMode } from '../../types';
+export declare const useEditorSize: () => {
+    width: number;
+    height: number;
+} | undefined;
+export declare const useMaxImageWidth: () => number;
+export declare const useImageNaturalSize: (src: string) => {
+    width: number;
+    height: number;
+};
+export declare const useImageDisplayWidth: ({ src, sizeMode, width, }: {
+    src: string;
+    sizeMode?: ImageSizeMode | undefined;
+    width: number | 'inherit';
+}) => number;

package/lib/main/hooks/hooks.js

@@ -0,0 +1,43 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useSize } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { scaleImage } from '../utils/images';
+export const useEditorSize = () => {
+    const [editor] = useLexicalComposerContext();
+    return useSize(() => editor.getRootElement());
+};
+export const useMaxImageWidth = () => {
+    const size = useEditorSize();
+    if (size?.width) {
+        return size.width - 54;
+    }
+    return document.documentElement.clientWidth;
+};
+export const useImageNaturalSize = (src) => {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const img = new Image();
+        img.onload = () => setSize({ width: img.width, height: img.height });
+        img.src = src;
+    }, [src]);
+    return size;
+};
+export const useImageDisplayWidth = ({ src, sizeMode = 'best-fit', width, }) => {
+    const naturalSize = useImageNaturalSize(src);
+    const maxImageWidth = useMaxImageWidth();
+    // 显式设置过宽度
+    if (width !== 'inherit') {
+        return Math.min(width, maxImageWidth);
+    }
+    if (!naturalSize) {
+        return 0;
+    }
+    if (sizeMode === 'small') {
+        return scaleImage({ width: naturalSize.width, height: naturalSize.height, maxSize: 200 }).width;
+    }
+    if (sizeMode === 'original') {
+        return Math.min(maxImageWidth, naturalSize.width);
+    }
+    return scaleImage({ width: naturalSize.width, height: naturalSize.height, maxSize: Math.min(400, maxImageWidth) })
+        .width;
+};

package/lib/main/hooks/medium-zoom.d.ts

@@ -0,0 +1,5 @@
+import 'medium-zoom/dist/style.css';
+export declare const useMediumZoom: (imageRef: React.RefObject<HTMLImageElement>) => {
+    zoomOpened: boolean;
+    openedImageRef: import("react").MutableRefObject<HTMLImageElement | null>;
+};

package/lib/main/hooks/medium-zoom.js

@@ -0,0 +1,30 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect, useRef, useState } from 'react';
+import mediumZoom from 'medium-zoom/dist/pure';
+import 'medium-zoom/dist/style.css';
+export const useMediumZoom = (imageRef) => {
+    const [editor] = useLexicalComposerContext();
+    const editable = editor.isEditable();
+    const openedImageRef = useRef(null);
+    const [zoomOpened, setZoomOpened] = useState(false);
+    useEffect(() => {
+        if (!editable && imageRef.current) {
+            const zoom = mediumZoom(imageRef.current, { background: 'rgba(0,0,0,.5)' });
+            zoom.on('opened', (e) => {
+                const openedImage = document.querySelector('.medium-zoom-image--opened');
+                if (openedImage) {
+                    openedImageRef.current = openedImage;
+                    setZoomOpened(true);
+                }
+            });
+            zoom.on('close', (e) => {
+                openedImageRef.current = null;
+                setZoomOpened(false);
+            });
+            return () => {
+                zoom.detach();
+            };
+        }
+    }, [editable, imageRef.current]);
+    return { zoomOpened, openedImageRef };
+};

package/lib/main/index.css

@@ -1321,3 +1321,9 @@ li.embed-option-disabled > span:after {
 .be-editable h6[id]:hover a {
   opacity: 1;
 }
+
+/* https://github.com/francoischalifour/medium-zoom */
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 99999;
+}

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

@@ -8,7 +8,9 @@
 /// <reference types="react" />
 import { LexicalEditor, NodeKey } from 'lexical';
 import './ImageNode.css';
-export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, }: {
+import { type DeviceFrame } from '../utils/device-frame';
+import type { ImageSizeMode } from '../../types';
+export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }: {
     file?: File;
     altText: string;
     caption: LexicalEditor;
@@ -20,4 +22,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
     src?: string;
     width: 'inherit' | number;
     captionsEnabled: boolean;
+    markerState?: string;
+    frame?: DeviceFrame;
+    sizeMode?: ImageSizeMode;
 }): JSX.Element;

package/lib/main/nodes/ImageComponent.js

@@ -20,6 +20,7 @@ import { mergeRegister } from '@lexical/utils';
 import { Alert, Button, LinearProgress } from '@mui/material';
 import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useEditorConfig } from '../../config';
 import { useSettings } from '../context/SettingsContext';
 import { useSharedHistoryContext } from '../context/SharedHistoryContext';
@@ -31,6 +32,9 @@ import ImageResizer from '../ui/ImageResizer';
 import Placeholder from '../ui/Placeholder';
 import { $isImageNode } from './ImageNode';
 import './ImageNode.css';
+import { ImageAnnotation, ImageAnnotationView, ImageEnhancer } from '../ui/ImageEnhancer';
+import { useImageDisplayWidth } from '../hooks/hooks';
+import { useMediumZoom } from '../hooks/medium-zoom';
 const imageCache = new Set();
 // Min size that require user confirm to upload image
 const REQUIRE_CONFIRM_UPLOAD_SIZE = 10 << 20;
@@ -46,37 +50,19 @@ function useSuspenseImage(src) {
         });
     }
 }
-function LazyImage({ altText, className, imageRef, src, width, height, maxWidth, }) {
+function LazyImage({ altText, className, imageRef, src, width, height, }) {
     useSuspenseImage(src);
-    const [editor] = useLexicalComposerContext();
-    const editable = editor.isEditable();
     const imgProps = {
         style: {
             height,
-            maxWidth,
             width,
             // 图片为 svg 时设置最小宽度以避免图片显示尺寸为 0 (https://github.com/blocklet/image-bin/issues/142)
             ...(src?.endsWith('.svg') && { minWidth: 200 }),
         },
     };
-    if (!editable) {
-        imgProps.onClick = () => {
-            try {
-                // 点击图片时去除 imageFilter 参数以查看原图 (#1201)
-                const url = src.startsWith('/') ? new URL(src, window.location.origin) : new URL(src);
-                url.searchParams.delete('imageFilter');
-                window.open(url.href);
-            }
-            catch (e) {
-                window.open(src);
-            }
-        };
-        imgProps.role = 'presentation';
-        imgProps.style.cursor = 'pointer';
-    }
     return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, draggable: "false", ...imgProps }));
 }
-export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, }) {
+export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }) {
     const imageRef = useRef(null);
     const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -167,6 +153,31 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
             }
         });
     };
+    const setMarkerState = (state) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setMarkerState(state);
+            }
+        });
+    };
+    const setFrame = (deviceFrame) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setFrame(deviceFrame);
+            }
+        });
+    };
+    const setSizeMode = (imageSizeMode) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setSizeMode(imageSizeMode);
+                node.setWidthAndHeight('inherit', 'inherit');
+            }
+        });
+    };
     const onResizeEnd = (nextWidth, nextHeight) => {
         // Delay hiding the resize bars for click case
         setTimeout(() => {
@@ -176,6 +187,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
             const node = $getNodeByKey(nodeKey);
             if ($isImageNode(node)) {
                 node.setWidthAndHeight(nextWidth, nextHeight);
+                node.setSizeMode(undefined);
             }
         });
     };
@@ -227,9 +239,26 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
         }
     }, [src, file, confirmText]);
     const placeholder = objectUrl ? (_jsx(ImageContainer, { draggable: draggable, success: !!src, loading: loading, error: error, confirmText: confirmText, uploadImage: uploadImage, placeholder: objectUrl, placeholderProps: { style: { width, height, maxWidth } } })) : null;
-    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsx(ImageContainer, { draggable: draggable, children: _jsx(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "ImageNode__contentEditable" }), placeholder: editor.isEditable() ? (_jsx(Placeholder, { className: "ImageNode__placeholder", children: "Enter a caption..." })) : null, ErrorBoundary: LexicalErrorBoundary })] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageRef, 
-                    // maxWidth={maxWidth}
-                    onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: captionsEnabled }))] }) }));
+    const imageDisplayWidth = useImageDisplayWidth({ src: src || objectUrl, sizeMode, width });
+    const { zoomOpened, openedImageRef } = useMediumZoom(imageRef);
+    const renderImageAnnotationView = () => {
+        if (!markerState)
+            return null;
+        const element = (_jsx(ImageAnnotationView, { imageRef: zoomOpened ? openedImageRef : imageRef, markerState: markerState, sx: {
+                ...(zoomOpened && {
+                    zIndex: 999999,
+                    // transform: openedImageRef.current?.style.transform,
+                    '.__markerjslive_': {
+                        // ...pick(openedImageRef.current?.style, ['width', 'height', 'top', 'left']),
+                        transform: openedImageRef.current?.style.transform,
+                    },
+                }),
+            } }));
+        return zoomOpened ? createPortal(element, document.body) : element;
+    };
+    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsxs(ImageContainer, { draggable: draggable, children: [_jsx(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: imageDisplayWidth, height: height }), renderImageAnnotationView(), editor.isEditable() && (_jsx(ImageAnnotation, { imageRef: imageRef, markerState: markerState, onChange: setMarkerState }))] })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "ImageNode__contentEditable" }), placeholder: editor.isEditable() ? (_jsx(Placeholder, { className: "ImageNode__placeholder", children: "Enter a caption..." })) : null, ErrorBoundary: LexicalErrorBoundary })] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsxs(_Fragment, { children: [_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageRef, 
+                            // maxWidth={maxWidth}
+                            onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: captionsEnabled }), _jsx(ImageEnhancer, { deviceFrame: frame, sizeMode: width === 'inherit' ? sizeMode || 'best-fit' : undefined, onSizeModeChange: setSizeMode, onFrameChange: setFrame })] }))] }) }));
 }
 const ImageContainer = ({ success, loading, error, confirmText, uploadImage, placeholder, placeholderProps, ...props }) => {
     const [showMask, setShowMask] = useState(false);

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

@@ -8,6 +8,8 @@
 /// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import type { DeviceFrame } from '../utils/device-frame';
+import type { ImageSizeMode } from '../../types';
 export interface ImagePayload {
     file?: File;
     altText: string;
@@ -19,6 +21,9 @@ export interface ImagePayload {
     src?: string;
     width?: number;
     captionsEnabled?: boolean;
+    markerState?: string;
+    frame?: DeviceFrame;
+    sizeMode?: ImageSizeMode;
 }
 export type SerializedImageNode = Spread<{
     altText: string;
@@ -28,6 +33,9 @@ export type SerializedImageNode = Spread<{
     showCaption: boolean;
     src?: string;
     width?: number;
+    markerState?: string;
+    frame?: DeviceFrame;
+    sizeMode?: ImageSizeMode;
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;
@@ -40,16 +48,22 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __maxWidth: number;
     __showCaption: boolean;
     __caption: LexicalEditor;
+    __markerState?: string;
+    __frame?: DeviceFrame;
+    __sizeMode?: ImageSizeMode;
     __captionsEnabled: boolean;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportDOM(): DOMExportOutput;
     static importDOM(): DOMConversionMap | null;
-    constructor(src: string | undefined, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, captionsEnabled?: boolean, key?: NodeKey, file?: File);
+    constructor(src: string | undefined, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, captionsEnabled?: boolean, key?: NodeKey, file?: File, markerState?: string, frame?: DeviceFrame, sizeMode?: ImageSizeMode);
     exportJSON(): SerializedImageNode;
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     setShowCaption(showCaption: boolean): void;
+    setMarkerState(markerState: string): void;
+    setFrame(frame?: DeviceFrame): void;
+    setSizeMode(sizeMode?: ImageSizeMode): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
     getSrc(): string | undefined;
@@ -57,5 +71,5 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     getAltText(): string;
     decorate(): JSX.Element;
 }
-export declare function $createImageNode({ altText, height, maxWidth, captionsEnabled, src, width, showCaption, caption, key, file, }: ImagePayload): ImageNode;
+export declare function $createImageNode({ altText, height, maxWidth, captionsEnabled, src, width, showCaption, caption, key, file, markerState, frame, sizeMode, }: ImagePayload): ImageNode;
 export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

package/lib/main/nodes/ImageNode.js

@@ -19,16 +19,19 @@ export class ImageNode extends DecoratorNode {
     __maxWidth;
     __showCaption;
     __caption;
+    __markerState;
+    __frame;
+    __sizeMode;
     // Captions cannot yet be used within editor cells
     __captionsEnabled;
     static getType() {
         return 'image';
     }
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key, node.file);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key, node.file, node.__markerState, node.__frame, node.__sizeMode);
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, caption, src, showCaption } = serializedNode;
+        const { altText, height, width, maxWidth, caption, src, showCaption, markerState, frame, sizeMode } = serializedNode;
         const node = $createImageNode({
             altText,
             height,
@@ -36,6 +39,9 @@ export class ImageNode extends DecoratorNode {
             showCaption,
             src,
             width,
+            markerState,
+            frame,
+            sizeMode,
         });
         const nestedEditor = node.__caption;
         const editorState = nestedEditor.parseEditorState(caption.editorState);
@@ -58,7 +64,7 @@ export class ImageNode extends DecoratorNode {
             }),
         };
     }
-    constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key, file) {
+    constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key, file, markerState, frame, sizeMode) {
         super(key);
         this.__src = src;
         this.__altText = altText;
@@ -69,6 +75,9 @@ export class ImageNode extends DecoratorNode {
         this.__caption = caption || createEditor();
         this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
         this.file = file;
+        this.__markerState = markerState;
+        this.__frame = frame;
+        this.__sizeMode = sizeMode;
     }
     exportJSON() {
         return {
@@ -81,6 +90,9 @@ export class ImageNode extends DecoratorNode {
             type: 'image',
             version: 1,
             width: this.__width === 'inherit' ? 0 : this.__width,
+            markerState: this.__markerState,
+            frame: this.__frame,
+            sizeMode: this.__sizeMode,
         };
     }
     setWidthAndHeight(width, height) {
@@ -92,6 +104,18 @@ export class ImageNode extends DecoratorNode {
         const writable = this.getWritable();
         writable.__showCaption = showCaption;
     }
+    setMarkerState(markerState) {
+        const writable = this.getWritable();
+        writable.__markerState = markerState;
+    }
+    setFrame(frame) {
+        const writable = this.getWritable();
+        writable.__frame = frame;
+    }
+    setSizeMode(sizeMode) {
+        const writable = this.getWritable();
+        writable.__sizeMode = sizeMode;
+    }
     // View
     createDOM(config) {
         const span = document.createElement('span');
@@ -116,11 +140,11 @@ export class ImageNode extends DecoratorNode {
         return this.__altText;
     }
     decorate() {
-        return (_jsx(Suspense, { fallback: null, children: _jsx(ImageComponent, { src: this.__src, file: this.file, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), showCaption: this.__showCaption, caption: this.__caption, captionsEnabled: this.__captionsEnabled, resizable: true }) }));
+        return (_jsx(Suspense, { fallback: null, children: _jsx(ImageComponent, { src: this.__src, file: this.file, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), showCaption: this.__showCaption, caption: this.__caption, captionsEnabled: this.__captionsEnabled, markerState: this.__markerState, frame: this.__frame, sizeMode: this.__sizeMode, resizable: true }) }));
     }
 }
-export function $createImageNode({ altText, height, maxWidth = 500, captionsEnabled, src, width, showCaption, caption, key, file, }) {
-    return new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key, file);
+export function $createImageNode({ altText, height, maxWidth = 500, captionsEnabled, src, width, showCaption, caption, key, file, markerState, frame, sizeMode, }) {
+    return new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key, file, markerState, frame, sizeMode);
 }
 export function $isImageNode(node) {
     return node instanceof ImageNode;

package/lib/main/ui/ImageEnhancer.d.ts

@@ -0,0 +1,27 @@
+import { type BoxProps } from '@mui/material';
+import { ImageSizeMode } from '../../types';
+import { type DeviceFrame } from '../utils/device-frame';
+interface ImageAnnotationProps {
+    imageRef: {
+        current: null | HTMLImageElement;
+    };
+    markerState?: string;
+    onChange: (markerState: string) => void;
+}
+export declare function ImageAnnotation({ imageRef, markerState, onChange }: ImageAnnotationProps): import("react/jsx-runtime").JSX.Element;
+interface ImageAnnotationViewProps {
+    imageRef: {
+        current: null | HTMLImageElement;
+    };
+    markerState?: string;
+    sx?: BoxProps['sx'];
+}
+export declare function ImageAnnotationView({ imageRef, markerState, sx, ...rest }: ImageAnnotationViewProps & BoxProps): import("react/jsx-runtime").JSX.Element;
+interface ImageEnhancerProps {
+    sizeMode?: ImageSizeMode;
+    deviceFrame?: DeviceFrame;
+    onSizeModeChange: (sizeMode: ImageSizeMode) => void;
+    onFrameChange: (deviceFrame?: DeviceFrame) => void;
+}
+export declare function ImageEnhancer({ sizeMode, onSizeModeChange }: ImageEnhancerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/main/ui/ImageEnhancer.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton, ToggleButtonGroup, ToggleButton } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import * as markerjs2 from 'markerjs2';
+import * as mjslive from 'markerjs-live';
+const parseMarkerState = (markerState) => {
+    if (!markerState)
+        return null;
+    try {
+        return JSON.parse(markerState);
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+};
+export function ImageAnnotation({ imageRef, markerState, onChange }) {
+    const [editing, setEditing] = useState(false);
+    useEffect(() => {
+        if (editing && imageRef.current) {
+            const markerArea = new markerjs2.MarkerArea(imageRef.current);
+            markerArea.addEventListener('render', (event) => {
+                if (imageRef.current) {
+                    onChange(JSON.stringify(event.state));
+                }
+            });
+            markerArea.addEventListener('close', () => setEditing(false));
+            markerArea.settings.displayMode = 'popup';
+            markerArea.uiStyleSettings.zIndex = '99999999';
+            markerArea.show();
+            const parsed = parseMarkerState(markerState);
+            if (parsed) {
+                markerArea.restoreState(parsed);
+            }
+            return () => {
+                markerArea.close();
+            };
+        }
+    }, [editing]);
+    return (_jsx(Box, { sx: { position: 'absolute', bottom: 16, right: 16 }, children: _jsx(IconButton, { onClick: () => setEditing(!editing), color: "primary", sx: { borderRadius: 0.5, ':hover': { bgcolor: 'grey.200' } }, children: _jsx("i", { className: "iconify", "data-icon": "tabler:photo-edit" }) }) }));
+}
+export function ImageAnnotationView({ imageRef, markerState, sx, ...rest }) {
+    const viewRef = useRef(null);
+    const mergedSx = [
+        {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            zIndex: 0,
+            pointerEvents: 'none',
+            // fix: 点击 markerView 时可以正常触发原图片的点击, 进而进入 resize 模式
+            svg: { pointerEvents: 'none!important' },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+    ];
+    useEffect(() => {
+        const parsed = parseMarkerState(markerState);
+        if (parsed && imageRef.current && viewRef.current) {
+            const markerView = new mjslive.MarkerView(imageRef.current);
+            // fix error - "Failed to execute 'setRotate' on 'SVGTransform'"
+            setTimeout(() => {
+                markerView.targetRoot = viewRef.current;
+                markerView.show(parsed);
+            }, 10);
+            return () => {
+                markerView.close();
+            };
+        }
+    }, [markerState, imageRef]);
+    return _jsx(Box, { sx: mergedSx, ref: viewRef, ...rest });
+}
+export function ImageEnhancer({ sizeMode, onSizeModeChange }) {
+    return (_jsx(Box, { sx: { position: 'relative', zIndex: 'tooltip', whiteSpace: 'nowrap' }, children: _jsx(Box, { sx: { position: 'absolute', bgcolor: '#fff' }, children: _jsxs(ToggleButtonGroup, { color: "standard", value: sizeMode, size: "small", exclusive: true, onChange: (_, v) => onSizeModeChange(v), "aria-label": "Platform", children: [_jsx(ToggleButton, { value: "small", children: "Small" }), _jsx(ToggleButton, { value: "best-fit", children: "Best fit" }), _jsx(ToggleButton, { value: "original", children: "Original size" })] }) }) }));
+}

package/lib/main/utils/device-frame.d.ts

@@ -0,0 +1,2 @@
+export declare const deviceFrames: readonly ["iphone-x", "iphone-8", "ipad-pro", "imac-pro", "macbook", "macbook-pro", "surface-pro", "surface-book", "surface-studio", "galaxy-s8", "google-pixel", "google-pixel-2-xl", "apple-watch"];
+export type DeviceFrame = typeof deviceFrames[number];

package/lib/main/utils/device-frame.js

@@ -0,0 +1,15 @@
+export const deviceFrames = [
+    'iphone-x',
+    'iphone-8',
+    'ipad-pro',
+    'imac-pro',
+    'macbook',
+    'macbook-pro',
+    'surface-pro',
+    'surface-book',
+    'surface-studio',
+    'galaxy-s8',
+    'google-pixel',
+    'google-pixel-2-xl',
+    'apple-watch',
+];

package/lib/main/utils/images.d.ts

@@ -0,0 +1,9 @@
+export declare const scaleImage: ({ width, height, maxSize }: {
+    width: number;
+    height: number;
+    maxSize: number;
+}) => {
+    width: number;
+    height: number;
+    scaleFactor: number;
+};

package/lib/main/utils/images.js

@@ -0,0 +1,13 @@
+export const scaleImage = ({ width, height, maxSize }) => {
+    const longAxis = Math.max(width, height);
+    const scaleFactor = maxSize / longAxis;
+    let newWidth = maxSize;
+    let newHeight = maxSize;
+    if (width !== longAxis) {
+        newWidth = Math.floor(scaleFactor * width);
+    }
+    if (height !== longAxis) {
+        newHeight = Math.floor(scaleFactor * height);
+    }
+    return { width: newWidth, height: newHeight, scaleFactor };
+};

package/lib/types.d.ts

@@ -16,3 +16,4 @@ export interface AI {
     checkAvailable: () => Promise<boolean> | boolean;
     imageGenerations?: any;
 }
+export type ImageSizeMode = 'small' | 'best-fit' | 'original';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.247",
+  "version": "1.6.248",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.9.77",
     "@blocklet/embed": "^0.1.11",
     "@blocklet/pages-kit": "^0.2.302",
-    "@blocklet/pdf": "1.6.247",
+    "@blocklet/pdf": "1.6.248",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -70,6 +70,9 @@
     "lexical": "0.13.1",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
+    "markerjs-live": "^1.2.1",
+    "markerjs2": "^2.32.1",
+    "medium-zoom": "^1.1.0",
     "path-parser": "^6.1.0",
     "react-player": "^2.14.1",
     "react-popper": "^2.3.0",
@@ -110,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "792d8513fb2038b0cca372f8a921624e0906cd70"
+  "gitHead": "3c8c1ef53a2022d046862c57ba938b252d264525"
 }