@blocklet/editor-lite 2.6.0

package/lib/main/nodes/FigmaNode.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+function FigmaComponent({ className, format, nodeKey, documentID }) {
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx("iframe", { title: "figma", src: `https://www.figma.com/embed?embed_host=lexical&url=\
+        https://www.figma.com/file/${documentID}`, allowFullScreen: true, style: { width: '100%', maxWidth: '560px', aspectRatio: 16 / 9 } }) }));
+}
+export class FigmaNode extends DecoratorBlockNode {
+    __id;
+    static getType() {
+        return 'figma';
+    }
+    static clone(node) {
+        return new FigmaNode(node.__id, node.__format, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createFigmaNode(serializedNode.documentID);
+        node.setFormat(serializedNode.format);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            documentID: this.__id,
+            type: 'figma',
+            version: 1,
+        };
+    }
+    constructor(id, format, key) {
+        super(format, key);
+        this.__id = id;
+    }
+    updateDOM() {
+        return false;
+    }
+    getId() {
+        return this.__id;
+    }
+    getTextContent(_includeInert, _includeDirectionless) {
+        return `https://www.figma.com/file/${this.__id}`;
+    }
+    decorate(_editor, config) {
+        const embedBlockTheme = config.theme.embedBlock || {};
+        const className = {
+            base: embedBlockTheme.base || '',
+            focus: embedBlockTheme.focus || '',
+        };
+        return (_jsx(FigmaComponent, { className: className, format: this.__format, nodeKey: this.getKey(), documentID: this.__id }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createFigmaNode(documentID) {
+    return new FigmaNode(documentID);
+}
+export function $isFigmaNode(node) {
+    return node instanceof FigmaNode;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { LexicalEditor, NodeKey } from 'lexical';
+import { type JSX } from 'react';
+import './ImageNode.css';
+import type { ImageSizeMode } from '../../types';
+export default function ImageComponentWrapper({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }: {
+    file?: File;
+    altText: string;
+    caption: LexicalEditor;
+    height: 'inherit' | number;
+    maxWidth: number;
+    nodeKey: NodeKey;
+    resizable: boolean;
+    showCaption: boolean;
+    src?: string;
+    width: 'inherit' | number;
+    captionsEnabled: boolean;
+    markerState?: string;
+    frame?: string;
+    sizeMode?: ImageSizeMode;
+}): JSX.Element;

package/lib/main/nodes/ImageComponent.js

@@ -0,0 +1,432 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import styled from '@emotion/styled';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+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, Box, Button, Dialog, LinearProgress, Skeleton } 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, lazy, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { withQuery, getQuery } from 'ufo';
+import { useEditorConfig } from '../../config';
+import { useSharedHistoryContext } from '../context/SharedHistoryContext';
+import ContentEditable from '../ui/ContentEditable';
+import ImageResizer from '../ui/ImageResizer';
+import Placeholder from '../ui/Placeholder';
+import { $isImageNode } from './ImageNode';
+import './ImageNode.css';
+import { useImageDisplayWidth } from '../hooks/hooks';
+import { useMediumZoom } from '../hooks/medium-zoom';
+import { FrameMockup, isDeviceFrame } from '../ui/FrameMockup';
+import { useSafeArea } from '../../ext/SafeAreaPlugin';
+import { UPDATE_BUSY_COMMAND } from '../../ext/BusyPlugin';
+import { getDevicePixelRatio } from '../utils/images';
+import { HistoryPlugin } from '../../vendor/history/LexicalHistoryPlugin';
+const ImageAnnotation = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageAnnotation })));
+const ImageAnnotationView = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageAnnotationView })));
+const ImageEnhancer = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageEnhancer })));
+const imageCache = new Set();
+// Min size that require user confirm to upload image
+const REQUIRE_CONFIRM_UPLOAD_SIZE = 10 << 20;
+function useSuspenseImage(src) {
+    if (!imageCache.has(src)) {
+        throw new Promise((resolve) => {
+            const img = new Image();
+            img.src = src;
+            img.onload = () => {
+                imageCache.add(src);
+                resolve(null);
+            };
+        });
+    }
+}
+function LazyImage({ altText, className, imageRef, src, width, height, }) {
+    useSuspenseImage(src);
+    const imgProps = {
+        style: {
+            height,
+            width,
+            // 图片为 svg 时设置最小宽度以避免图片显示尺寸为 0 (https://github.com/blocklet/image-bin/issues/142)
+            ...(src?.endsWith('.svg') && { minWidth: 200 }),
+        },
+    };
+    return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, draggable: "false", crossOrigin: "anonymous", ...imgProps }));
+}
+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);
+    const [isResizing, setIsResizing] = useState(false);
+    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;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.remove();
+            }
+            setSelected(false);
+        }
+        return false;
+    }, [isSelected, nodeKey, setSelected]);
+    useEffect(() => {
+        caption.setEditable(editor.isEditable());
+        return editor.registerEditableListener((editable) => {
+            caption.setEditable(editable);
+        });
+    }, [editor, caption]);
+    const onEnter = useCallback((event) => {
+        const latestSelection = $getSelection();
+        const buttonElem = buttonRef.current;
+        if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+            if (showCaption) {
+                // Move focus into nested editor
+                $setSelection(null);
+                event.preventDefault();
+                caption.focus();
+                return true;
+            }
+            if (buttonElem !== null && buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [caption, isSelected, showCaption]);
+    const onEscape = useCallback((event) => {
+        if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+            $setSelection(null);
+            editor.update(() => {
+                setSelected(true);
+                const parentRootElement = editor.getRootElement();
+                if (parentRootElement !== null) {
+                    parentRootElement.focus();
+                }
+            });
+            return true;
+        }
+        return false;
+    }, [caption, editor, setSelected]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener((payload) => {
+            if (!payload)
+                return;
+            const { editorState } = payload;
+            setSelection(editorState.read(() => $getSelection()));
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
+            const event = payload;
+            if (isResizing || !editor.isEditable()) {
+                return true;
+            }
+            if (event.target === imageRef.current) {
+                if (event.shiftKey) {
+                    setSelected(!isSelected);
+                }
+                else {
+                    clearSelection();
+                    setSelected(true);
+                }
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
+    }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+    const setShowCaption = (value) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setShowCaption(value);
+            }
+        });
+    };
+    const setMarkerState = (state) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setMarkerState(state);
+            }
+        });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const setFrame = (frame) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setFrame(frame);
+            }
+        });
+    };
+    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(() => {
+            setIsResizing(false);
+        }, 200);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setWidthAndHeight(nextWidth, nextHeight);
+                node.setSizeMode(undefined);
+            }
+        });
+    };
+    const onResizeStart = () => {
+        setIsResizing(true);
+    };
+    const { historyState } = useSharedHistoryContext();
+    const draggable = isSelected && $isNodeSelection(selection);
+    const isFocused = isSelected || isResizing;
+    const [objectUrl] = useState(() => file && URL.createObjectURL(file));
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    useSafeArea({ enabled: draggable, size: '80px' });
+    const config = useEditorConfig();
+    const uploadImage = useCallback(async () => {
+        if (!config.uploader?.upload) {
+            throw new Error('Missing required config `uploader.upload` for Image');
+        }
+        if (!file) {
+            return;
+        }
+        try {
+            setLoading(true);
+            editor.dispatchCommand(UPDATE_BUSY_COMMAND, { busy: true });
+            setError(undefined);
+            const { url } = await config.uploader.upload(file);
+            editor.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                if ($isImageNode(node)) {
+                    node.setSrc(url);
+                }
+            });
+        }
+        catch (e) {
+            setError(e?.message || e?.toString() || 'Upload Failed');
+            throw e;
+        }
+        finally {
+            setLoading(false);
+            editor.dispatchCommand(UPDATE_BUSY_COMMAND, { busy: false });
+        }
+    }, [file]);
+    const confirmText = !!file && file.size > REQUIRE_CONFIRM_UPLOAD_SIZE
+        ? `Image file size is ${formatFileSize(file.size)}, are your sure upload?`
+        : false;
+    useEffect(() => {
+        if (!src && file && !confirmText) {
+            uploadImage();
+        }
+    }, [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 } }, showBorder: !frame })) : (_jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } }));
+    const imageDisplayWidth = useImageDisplayWidth({ src: src || objectUrl, sizeMode, width });
+    const { zoomOpened, openedImageRef } = useMediumZoom(imageRef, { enabled: !frame });
+    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,
+                    },
+                }),
+            } }));
+        // 若使用了 device frame, 禁用 marker view (目前存在冲突, device frame 对图片拉伸导致 marker view 位置不准确)
+        if (isDeviceFrameUsed) {
+            return null;
+        }
+        return zoomOpened ? createPortal(element, document.body) : element;
+    };
+    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 && editor.isEditable() ? `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, showBorder: !frame, 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(LinkPlugin, {}), _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: 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,
+                                        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,
+                                        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, showBorder = true, ...props }) => {
+    const [showMask, setShowMask] = useState(false);
+    return (_jsxs(Box, { sx: {
+            position: 'relative',
+            ...(showBorder && {
+                p: 1,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 2,
+            }),
+        }, children: [props.children ||
+                (!!placeholder && _jsx("img", { alt: "", ...placeholderProps, onLoad: () => setShowMask(true), src: placeholder })), !showMask || success ? null : loading ? (_jsx(Mask, { children: _jsx(LinearProgress, {}) })) : error ? (_jsx(Mask, { children: _jsx(Alert, { severity: "error", action: _jsx(Button, { size: "small", onClick: uploadImage, children: "Retry" }), children: error }) })) : confirmText ? (_jsx(Mask, { children: _jsx(Alert, { severity: "warning", action: _jsx(Button, { size: "small", onClick: uploadImage, children: "Upload" }), children: confirmText }) })) : null] }));
+};
+const Mask = styled.div `
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+
+  > .MuiAlert-root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    white-space: nowrap;
+  }
+`;
+const KB = 1 << 10;
+const MB = 1 << 20;
+const GB = 1 << 30;
+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);
+    const containerRef = useRef(null);
+    const hasFixedSize = typeof width === 'number' && typeof height === 'number' && width > 0 && height > 0;
+    const { maxContentWidth } = useEditorConfig();
+    const displaySrc = useMemo(() => {
+        if (!maxContentWidth)
+            return src;
+        try {
+            const qs = getQuery(src);
+            const dpr = getDevicePixelRatio();
+            if (qs?.imageFilter)
+                return src;
+            // 图片剪裁，限制最大宽度
+            return withQuery(src, {
+                imageFilter: 'resize',
+                f: 'webp',
+                w: Math.round(maxContentWidth * dpr),
+            });
+        }
+        catch {
+            return src;
+        }
+    }, [src, maxContentWidth]);
+    // 当图片出现在 viewport 中时，预加载原图
+    useEffect(() => {
+        if (!containerRef.current || displaySrc === src)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const preloadImg = new Image();
+                    preloadImg.src = src;
+                    observer.disconnect();
+                }
+            });
+        }, {
+            rootMargin: '50px',
+        });
+        observer.observe(containerRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [src, displaySrc]);
+    useMediumZoom(imageRef);
+    const renderSkeleton = () => {
+        if (hasFixedSize) {
+            return (_jsx(Box, { sx: { position: 'relative', height: 0, pt: `${100 / (width / height)}%`, maxWidth: width, mx: 'auto' }, children: _jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', borderRadius: 1 } }) }));
+        }
+        return _jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } });
+    };
+    return (_jsxs(_Fragment, { children: [!loaded && renderSkeleton(), _jsx(Box, { ref: containerRef, sx: {
+                    p: 1,
+                    border: 1,
+                    borderColor: 'divider',
+                    borderRadius: 2,
+                    display: loaded ? 'block' : 'none',
+                    ...(hasFixedSize && { maxWidth: width, mx: 'auto' }),
+                }, children: _jsx(Box, { component: "img", src: displaySrc, alt: altText || '', "data-zoom-src": src, 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/lib/main/nodes/ImageNode.css

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.ImageNode__contentEditable {
+  min-height: 20px;
+  border: 0px;
+  resize: none;
+  cursor: text;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  tab-size: 1;
+  outline: 0px;
+  padding: 10px;
+  user-select: text;
+
+  width: calc(100% - 20px);
+  white-space: pre-wrap;
+  word-break: break-word;
+  p {
+    font-size: 12px;
+  }
+}
+
+.ImageNode__placeholder {
+  font-size: 12px;
+  color: #888;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  left: 0;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+  padding: 10px;
+  line-height: inherit;
+}
+
+.image-control-wrapper--resizing {
+  touch-action: none;
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
+import type { ImageSizeMode } from '../../types';
+export interface ImagePayload {
+    file?: File;
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    maxWidth?: number;
+    showCaption?: boolean;
+    src?: string;
+    width?: number;
+    captionsEnabled?: boolean;
+    markerState?: string;
+    frame?: string;
+    sizeMode?: ImageSizeMode;
+}
+export type SerializedImageNode = Spread<{
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src?: string;
+    width?: number;
+    markerState?: string;
+    frame?: string;
+    sizeMode?: ImageSizeMode;
+    type: 'image';
+    version: 1;
+}, SerializedLexicalNode>;
+export declare class ImageNode extends DecoratorNode<JSX.Element> {
+    file?: File;
+    __src?: string;
+    __altText: string;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    __maxWidth: number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    __markerState?: string;
+    __frame?: string;
+    __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, 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?: string): void;
+    setSizeMode(sizeMode?: ImageSizeMode): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string | undefined;
+    setSrc(src: string): void;
+    getAltText(): string;
+    decorate(): JSX.Element;
+}
+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;