@blocklet/editor 1.6.257 → 1.6.258

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

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

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

@@ -2,13 +2,17 @@ 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) => {
+export const useMediumZoom = (imageRef, options) => {
     const [editor] = useLexicalComposerContext();
     const editable = editor.isEditable();
     const openedImageRef = useRef(null);
     const [zoomOpened, setZoomOpened] = useState(false);
+    const enabled = options?.enabled ?? true;
     useEffect(() => {
         if (!editable && imageRef.current) {
+            if (!enabled) {
+                return () => { };
+            }
             const zoom = mediumZoom(imageRef.current, { background: 'rgba(0,0,0,.5)' });
             zoom.on('opened', (e) => {
                 const openedImage = document.querySelector('.medium-zoom-image--opened');
@@ -25,6 +29,6 @@ export const useMediumZoom = (imageRef) => {
                 zoom.detach();
             };
         }
-    }, [editable, imageRef.current]);
+    }, [editable, imageRef.current, enabled]);
     return { zoomOpened, openedImageRef };
 };

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

@@ -8,7 +8,6 @@
 /// <reference types="react" />
 import { LexicalEditor, NodeKey } from 'lexical';
 import './ImageNode.css';
-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;
@@ -23,6 +22,6 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
     width: 'inherit' | number;
     captionsEnabled: boolean;
     markerState?: string;
-    frame?: DeviceFrame;
+    frame?: string;
     sizeMode?: ImageSizeMode;
 }): JSX.Element;

package/lib/main/nodes/ImageComponent.js

@@ -17,7 +17,7 @@ import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@lexical/utils';
-import { Alert, Button, LinearProgress } from '@mui/material';
+import { Alert, Box, Button, Dialog, 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';
@@ -35,6 +35,7 @@ import './ImageNode.css';
 import { ImageAnnotation, ImageAnnotationView, ImageEnhancer } from '../ui/ImageEnhancer';
 import { useImageDisplayWidth } from '../hooks/hooks';
 import { useMediumZoom } from '../hooks/medium-zoom';
+import { FrameMockup, isDeviceFrame } from '../ui/FrameMockup';
 const imageCache = new Set();
 // Min size that require user confirm to upload image
 const REQUIRE_CONFIRM_UPLOAD_SIZE = 10 << 20;
@@ -63,6 +64,7 @@ function LazyImage({ altText, className, imageRef, src, width, height, }) {
     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, markerState, frame, sizeMode, }) {
+    const imageFrameRef = useRef(null);
     const imageRef = useRef(null);
     const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -70,6 +72,9 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
     const [editor] = useLexicalComposerContext();
     const [selection, setSelection] = useState(null);
     const activeEditorRef = useRef(null);
+    const [markerEditing, setMarkerEditing] = useState(false);
+    const isDeviceFrameUsed = frame && isDeviceFrame(frame);
+    const [zoomImageVisible, setZoomImageVisible] = useState(false);
     const onDelete = useCallback((payload) => {
         if (isSelected && $isNodeSelection($getSelection())) {
             const event = payload;
@@ -161,11 +166,12 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
             }
         });
     };
-    const setFrame = (deviceFrame) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const setFrame = (frame) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
             if ($isImageNode(node)) {
-                node.setFrame(deviceFrame);
+                node.setFrame(frame);
             }
         });
     };
@@ -240,7 +246,7 @@ 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;
     const imageDisplayWidth = useImageDisplayWidth({ src: src || objectUrl, sizeMode, width });
-    const { zoomOpened, openedImageRef } = useMediumZoom(imageRef);
+    const { zoomOpened, openedImageRef } = useMediumZoom(imageRef, { enabled: !frame });
     const renderImageAnnotationView = () => {
         if (!markerState)
             return null;
@@ -254,11 +260,67 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
                     },
                 }),
             } }));
+        // 若使用了 device frame, 禁用 marker view (目前存在冲突, device frame 对图片拉伸导致 marker view 位置不准确)
+        if (isDeviceFrameUsed) {
+            return null;
+        }
         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, 
+    const renderImage = (imgSrc) => {
+        if (frame) {
+            return (_jsxs(_Fragment, { children: [_jsxs(FrameMockup, { type: frame, className: "editor-image-frame-container", 
+                        // fix: 点击外壳无法选中 img 并进入 resize 模式
+                        onClick: (e) => {
+                            if (!editor.isEditable()) {
+                                // 点击图片外壳时, 若不是编辑状态, 则放大图片 (因为需要放大的元素也包括 frame, 这里无法基于 medium-zoom 实现)
+                                setZoomImageVisible(true);
+                                return;
+                            }
+                            e.stopPropagation();
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if ($isImageNode(node)) {
+                                    node.selectEnd();
+                                }
+                            });
+                            if (imageRef.current) {
+                                editor.dispatchCommand(CLICK_COMMAND, { ...e, target: imageRef.current });
+                            }
+                        }, sx: {
+                            width: imageDisplayWidth,
+                            height: 'auto!important',
+                            overflow: 'hidden',
+                        }, ref: imageFrameRef, children: [_jsx(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: imgSrc, altText: altText, imageRef: imageRef, width: "100%", height: "auto" }), renderImageAnnotationView()] }, `${frame}-${sizeMode}-${imageDisplayWidth}`), zoomImageVisible && (_jsx(Dialog, { open: zoomImageVisible, onClose: () => setZoomImageVisible(false), PaperProps: {
+                            sx: {
+                                maxWidth: '100%',
+                                maxHeight: '100%',
+                                overflow: 'hidden',
+                                bgcolor: 'transparent',
+                                boxShadow: 'none',
+                            },
+                        }, children: _jsxs(FrameMockup, { type: frame, ref: imageFrameRef, children: [_jsx(Box, { component: "img", src: src, alt: altText, ref: imageRef, sx: { maxWidth: '100%', maxHeight: '90vh' } }), renderImageAnnotationView()] }) }))] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: imgSrc, altText: altText, imageRef: imageRef, width: imageDisplayWidth, height: height }), renderImageAnnotationView()] }));
+    };
+    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsxs(ImageContainer, { draggable: draggable, children: [renderImage(src), editor.isEditable() && (_jsx(ImageAnnotation, { editing: markerEditing, setEditing: setMarkerEditing, 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: imageFrameRef.current ? imageFrameRef : imageRef, 
                             // maxWidth={maxWidth}
-                            onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: captionsEnabled }), _jsx(ImageEnhancer, { deviceFrame: frame, sizeMode: width === 'inherit' ? sizeMode || 'best-fit' : undefined, onSizeModeChange: setSizeMode, onFrameChange: setFrame })] }))] }) }));
+                            onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: false }), _jsxs(ImageEnhancer, { frame: frame, sizeMode: width === 'inherit' ? sizeMode || 'best-fit' : undefined, onSizeModeChange: setSizeMode, onFrameChange: setFrame, children: [_jsx(Button, { disabled: !!isDeviceFrameUsed, onClick: () => setMarkerEditing(true), variant: "outlined", size: "small", sx: {
+                                        minWidth: 36,
+                                        height: 36,
+                                        ml: 1,
+                                        p: 0,
+                                        borderColor: 'grey.400',
+                                        '.MuiButton-icon': { m: 0 },
+                                    }, startIcon: _jsx("i", { className: "iconify", "data-icon": "tabler:photo-edit" }) }), captionsEnabled && (_jsx(Button, { onClick: () => {
+                                        setShowCaption(!showCaption);
+                                    }, variant: "outlined", size: "small", sx: {
+                                        minWidth: 36,
+                                        height: 36,
+                                        ml: 1,
+                                        p: 0,
+                                        borderColor: 'grey.400',
+                                        '.MuiButton-icon': { m: 0 },
+                                    }, startIcon: showCaption ? (_jsx("i", { className: "iconify", "data-icon": "tabler:heading-off" })) : (_jsx("i", { className: "iconify", "data-icon": "tabler:text-caption" })), title: showCaption ? 'Remove Caption' : 'Add Caption' }))] })] }))] }) }));
 }
 const ImageContainer = ({ success, loading, error, confirmText, uploadImage, placeholder, placeholderProps, ...props }) => {
     const [showMask, setShowMask] = useState(false);

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

@@ -8,7 +8,6 @@
 /// <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;
@@ -22,7 +21,7 @@ export interface ImagePayload {
     width?: number;
     captionsEnabled?: boolean;
     markerState?: string;
-    frame?: DeviceFrame;
+    frame?: string;
     sizeMode?: ImageSizeMode;
 }
 export type SerializedImageNode = Spread<{
@@ -34,7 +33,7 @@ export type SerializedImageNode = Spread<{
     src?: string;
     width?: number;
     markerState?: string;
-    frame?: DeviceFrame;
+    frame?: string;
     sizeMode?: ImageSizeMode;
     type: 'image';
     version: 1;
@@ -49,7 +48,7 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __showCaption: boolean;
     __caption: LexicalEditor;
     __markerState?: string;
-    __frame?: DeviceFrame;
+    __frame?: string;
     __sizeMode?: ImageSizeMode;
     __captionsEnabled: boolean;
     static getType(): string;
@@ -57,12 +56,12 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     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, markerState?: string, frame?: DeviceFrame, sizeMode?: ImageSizeMode);
+    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?: string, sizeMode?: ImageSizeMode);
     exportJSON(): SerializedImageNode;
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     setShowCaption(showCaption: boolean): void;
     setMarkerState(markerState: string): void;
-    setFrame(frame?: DeviceFrame): void;
+    setFrame(frame?: string): void;
     setSizeMode(sizeMode?: ImageSizeMode): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;

package/lib/main/ui/FrameMockup/browser.css

@@ -0,0 +1,52 @@
+.browser-mockup {
+  border-top: 2em solid rgba(230, 230, 230, 0.7);
+  box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
+  position: relative;
+  border-radius: 3px 3px 0 0;
+}
+
+.browser-mockup:before {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -1.25em;
+  left: 1em;
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+  background-color: #f44;
+  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+}
+
+.browser-mockup.with-tab:after {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -2em;
+  left: 5.5em;
+  width: 20%;
+  height: 0em;
+  border-bottom: 2em solid white;
+  border-left: 0.8em solid transparent;
+  border-right: 0.8em solid transparent;
+}
+
+.browser-mockup.with-url:after {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -1.6em;
+  left: 5.5em;
+  width: calc(100% - 6em);
+  height: 1.2em;
+  border-radius: 2px;
+  background-color: white;
+}
+
+.browser-mockup > * {
+  display: block;
+}
+.browser-mockup {
+  margin: 2em;
+  flex: 1;
+}

package/lib/main/ui/FrameMockup/browser.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import './browser.css';
+export declare const browsers: readonly [{
+    readonly id: "chrome";
+    readonly name: "Chrome";
+}, {
+    readonly id: "chrome-with-url";
+    readonly name: "Chrome (With URL)";
+}];
+export declare const isBrowserType: (id: string) => boolean;
+export declare function BrowserMockup({ type, ...rest }: PropsWithChildren<{
+    type: string;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/main/ui/FrameMockup/browser.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import './browser.css';
+function Chrome({ children, ...rest }) {
+    return (_jsx(Box, { className: "browser-mockup", ...rest, children: children }));
+}
+function ChromeWithUrl({ children, ...rest }) {
+    return (_jsx(Box, { className: "browser-mockup with-url", ...rest, children: children }));
+}
+export const browsers = [
+    { id: 'chrome', name: 'Chrome' },
+    { id: 'chrome-with-url', name: 'Chrome (With URL)' },
+];
+export const isBrowserType = (id) => browsers.some((frame) => frame.id === id);
+const Components = {
+    chrome: Chrome,
+    'chrome-with-url': ChromeWithUrl,
+};
+export function BrowserMockup({ type, ...rest }) {
+    const Compnent = Components[type];
+    return _jsx(Compnent, { ...rest });
+}

package/lib/main/ui/FrameMockup/index.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+export declare const deviceFrames: readonly [{
+    readonly id: "iphone-x";
+    readonly name: "iPhone X";
+}, {
+    readonly id: "iphone-8";
+    readonly name: "iPhone 8";
+}, {
+    readonly id: "ipad-pro";
+    readonly name: "iPad Pro";
+}, {
+    readonly id: "imac-pro";
+    readonly name: "iMac Pro";
+}, {
+    readonly id: "macbook";
+    readonly name: "MacBook";
+}, {
+    readonly id: "macbook-pro";
+    readonly name: "MacBook Pro";
+}, {
+    readonly id: "surface-pro";
+    readonly name: "Surface Pro";
+}, {
+    readonly id: "surface-book";
+    readonly name: "Surface Book";
+}, {
+    readonly id: "surface-studio";
+    readonly name: "Surface Studio";
+}, {
+    readonly id: "galaxy-s8";
+    readonly name: "Galaxy S8";
+}, {
+    readonly id: "google-pixel";
+    readonly name: "Google Pixel";
+}, {
+    readonly id: "google-pixel-2-xl";
+    readonly name: "Google Pixel 2 XL";
+}, {
+    readonly id: "apple-watch";
+    readonly name: "Apple Watch";
+}];
+export declare const isDeviceFrame: (id: string) => boolean;
+export declare const shadowFrames: readonly [{
+    readonly id: "shadow";
+    readonly name: "Shadow";
+}, {
+    readonly id: "shadow-sm";
+    readonly name: "Shadow Small";
+}, {
+    readonly id: "shadow-lg";
+    readonly name: "Shadow Large";
+}];
+export declare const isShadowFrame: (id: string) => boolean;
+export declare const frames: ({
+    readonly id: "chrome";
+    readonly name: "Chrome";
+} | {
+    readonly id: "chrome-with-url";
+    readonly name: "Chrome (With URL)";
+} | {
+    readonly id: "iphone-x";
+    readonly name: "iPhone X";
+} | {
+    readonly id: "iphone-8";
+    readonly name: "iPhone 8";
+} | {
+    readonly id: "ipad-pro";
+    readonly name: "iPad Pro";
+} | {
+    readonly id: "imac-pro";
+    readonly name: "iMac Pro";
+} | {
+    readonly id: "macbook";
+    readonly name: "MacBook";
+} | {
+    readonly id: "macbook-pro";
+    readonly name: "MacBook Pro";
+} | {
+    readonly id: "surface-pro";
+    readonly name: "Surface Pro";
+} | {
+    readonly id: "surface-book";
+    readonly name: "Surface Book";
+} | {
+    readonly id: "surface-studio";
+    readonly name: "Surface Studio";
+} | {
+    readonly id: "galaxy-s8";
+    readonly name: "Galaxy S8";
+} | {
+    readonly id: "google-pixel";
+    readonly name: "Google Pixel";
+} | {
+    readonly id: "google-pixel-2-xl";
+    readonly name: "Google Pixel 2 XL";
+} | {
+    readonly id: "apple-watch";
+    readonly name: "Apple Watch";
+} | {
+    readonly id: "shadow";
+    readonly name: "Shadow";
+} | {
+    readonly id: "shadow-sm";
+    readonly name: "Shadow Small";
+} | {
+    readonly id: "shadow-lg";
+    readonly name: "Shadow Large";
+})[];
+interface FrameMockupProps {
+    type: string;
+}
+export declare const FrameMockup: import("react").ForwardRefExoticComponent<Omit<FrameMockupProps & import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme> | keyof import("@mui/material/OverridableComponent").CommonProps>, "ref"> & import("react").RefAttributes<unknown>>;
+export {};

package/lib/main/ui/FrameMockup/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Screenshot from '@arcblock/ux/lib/Screenshot';
+import { forwardRef } from 'react';
+import { Box } from '@mui/material';
+import { isBrowserType, BrowserMockup, browsers } from './browser';
+export const deviceFrames = [
+    { id: 'iphone-x', name: 'iPhone X' },
+    { id: 'iphone-8', name: 'iPhone 8' },
+    { id: 'ipad-pro', name: 'iPad Pro' },
+    { id: 'imac-pro', name: 'iMac Pro' },
+    { id: 'macbook', name: 'MacBook' },
+    { id: 'macbook-pro', name: 'MacBook Pro' },
+    { id: 'surface-pro', name: 'Surface Pro' },
+    { id: 'surface-book', name: 'Surface Book' },
+    { id: 'surface-studio', name: 'Surface Studio' },
+    { id: 'galaxy-s8', name: 'Galaxy S8' },
+    { id: 'google-pixel', name: 'Google Pixel' },
+    { id: 'google-pixel-2-xl', name: 'Google Pixel 2 XL' },
+    { id: 'apple-watch', name: 'Apple Watch' },
+];
+export const isDeviceFrame = (id) => deviceFrames.some((frame) => frame.id === id);
+export const shadowFrames = [
+    { id: 'shadow', name: 'Shadow' },
+    { id: 'shadow-sm', name: 'Shadow Small' },
+    { id: 'shadow-lg', name: 'Shadow Large' },
+];
+export const isShadowFrame = (id) => shadowFrames.some((frame) => frame.id === id);
+export const frames = [...deviceFrames, ...browsers, ...shadowFrames];
+export const FrameMockup = forwardRef(function FrameMockup({ type, sx, children, ...rest }, ref) {
+    const mergedSx = [{}, ...(Array.isArray(sx) ? sx : [sx])];
+    const renderInner = () => {
+        if (isDeviceFrame(type)) {
+            mergedSx.push({
+                img: {
+                    objectFit: 'contain!important',
+                    bgcolor: '#000!important',
+                    borderRadius: '0!important',
+                },
+            });
+            return _jsx(Screenshot, { type: type, children: children });
+        }
+        if (isBrowserType(type)) {
+            mergedSx.push({
+                img: {
+                    borderRadius: '0!important',
+                },
+            });
+            return _jsx(BrowserMockup, { type: type, children: children });
+        }
+        if (isShadowFrame(type)) {
+            const styles = {
+                'shadow-sm': { boxShadow: '0 0.1em 0.5em 0 rgba(0, 0, 0, 0.2);' },
+                shadow: { boxShadow: '0 0.1em 1em 0 rgba(0, 0, 0, 0.3);' },
+                'shadow-lg': { boxShadow: '0 0.1em 1.5em 0 rgba(0, 0, 0, 0.4);' },
+            };
+            return _jsx(Box, { sx: { p: 3, img: styles[type] }, children: children });
+        }
+    };
+    return (_jsx(Box, { ref: ref, sx: mergedSx, ...rest, children: renderInner() }));
+});

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

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

package/lib/main/ui/ImageEnhancer.js

@@ -1,8 +1,9 @@
 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 { Box, ToggleButtonGroup, ToggleButton, Select, MenuItem } from '@mui/material';
+import { useEffect, useRef } from 'react';
 import * as markerjs2 from 'markerjs2';
 import * as mjslive from 'markerjs-live';
+import { frames } from './FrameMockup';
 const parseMarkerState = (markerState) => {
     if (!markerState)
         return null;
@@ -14,8 +15,7 @@ const parseMarkerState = (markerState) => {
         return null;
     }
 };
-export function ImageAnnotation({ imageRef, markerState, onChange }) {
-    const [editing, setEditing] = useState(false);
+export function ImageAnnotation({ editing, setEditing, imageRef, markerState, onChange }) {
     useEffect(() => {
         if (editing && imageRef.current) {
             const markerArea = new markerjs2.MarkerArea(imageRef.current);
@@ -37,7 +37,7 @@ export function ImageAnnotation({ imageRef, markerState, onChange }) {
             };
         }
     }, [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" }) }) }));
+    return null;
 }
 export function ImageAnnotationView({ imageRef, markerState, sx, ...rest }) {
     const viewRef = useRef(null);
@@ -60,17 +60,23 @@ export function ImageAnnotationView({ imageRef, markerState, sx, ...rest }) {
         if (parsed && imageRef.current && viewRef.current) {
             const markerView = new mjslive.MarkerView(imageRef.current);
             // fix error - "Failed to execute 'setRotate' on 'SVGTransform'"
-            setTimeout(() => {
+            const timer = setTimeout(() => {
                 markerView.targetRoot = viewRef.current;
                 markerView.show(parsed);
             }, 10);
             return () => {
+                clearTimeout(timer);
                 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" })] }) }) }));
+export function ImageEnhancer({ sizeMode, frame, onSizeModeChange, onFrameChange, children, }) {
+    const handleFrameChange = (value) => {
+        onFrameChange(value === 'none' ? undefined : value);
+    };
+    return (_jsx(Box, { sx: { position: 'relative', zIndex: 'tooltip', whiteSpace: 'nowrap', mt: 1 }, children: _jsxs(Box, { sx: { position: 'absolute', display: 'flex', alignItems: 'center', 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" })] }), _jsxs(Select, { value: frame ?? 'none', onChange: (e) => handleFrameChange(e.target.value), sx: { ml: 1 }, children: [_jsx(MenuItem, { value: "none", children: "Select frame mockup" }), frames.map((x) => {
+                            return (_jsx(MenuItem, { value: x.id, children: x.name }, x.id));
+                        })] }), children] }) }));
 }

package/lib/main/ui/ImageResizer.js

@@ -138,16 +138,12 @@ export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, im
     };
     return (_jsxs("div", { ref: controlWrapperRef, children: [captionsEnabled && (_jsx("button", { className: "image-caption-button", ref: buttonRef, onClick: () => {
                     setShowCaption(!showCaption);
-                }, children: showCaption ? 'Remove Caption' : 'Add Caption' })), _jsx("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
-                    handlePointerDown(event, Direction.north);
-                } }), _jsx("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
+                }, children: showCaption ? 'Remove Caption' : 'Add Caption' })), _jsx("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
                     handlePointerDown(event, Direction.north | Direction.east);
                 } }), _jsx("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
                     handlePointerDown(event, Direction.east);
                 } }), _jsx("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
                     handlePointerDown(event, Direction.south | Direction.east);
-                } }), _jsx("div", { className: "image-resizer image-resizer-s", onPointerDown: (event) => {
-                    handlePointerDown(event, Direction.south);
                 } }), _jsx("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
                     handlePointerDown(event, Direction.south | Direction.west);
                 } }), _jsx("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.257",
+  "version": "1.6.258",
   "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.257",
+    "@blocklet/pdf": "1.6.258",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "427c78b7cf9dbaaab2f6576e8da87d761156e280"
+  "gitHead": "6b5469534e4b90a352a6e9af359e5bf57daac880"
 }

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

@@ -1,2 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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',
-];