@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,25 @@
+/**
+ * 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 { ReactNode, type JSX } from 'react';
+import * as React from 'react';
+export declare function DropDownItem({ children, className, onClick, title, }: {
+    children: React.ReactNode;
+    className: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default function DropDown({ disabled, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, buttonIconData, children, stopCloseOnClickSelf, }: {
+    disabled?: boolean;
+    buttonAriaLabel?: string;
+    buttonClassName: string;
+    buttonIconClassName?: string;
+    buttonIconData?: string;
+    buttonLabel?: string;
+    children: ReactNode;
+    stopCloseOnClickSelf?: boolean;
+}): JSX.Element;

package/lib/main/ui/DropDown.js

@@ -0,0 +1,146 @@
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { Box } from '@mui/material';
+const DropDownContext = React.createContext(null);
+export function DropDownItem({ children, className, onClick, title, }) {
+    const ref = useRef(null);
+    const dropDownContext = React.useContext(DropDownContext);
+    if (dropDownContext === null) {
+        throw new Error('DropDownItem must be used within a DropDown');
+    }
+    const { registerItem } = dropDownContext;
+    useEffect(() => {
+        if (ref && ref.current) {
+            registerItem(ref);
+        }
+    }, [ref, registerItem]);
+    return (_jsx("button", { className: className, onClick: onClick, ref: ref, title: title, children: children }));
+}
+function DropDownItems({ children, dropDownRef, onClose, }) {
+    const [items, setItems] = useState();
+    const [highlightedItem, setHighlightedItem] = useState();
+    const registerItem = useCallback((itemRef) => {
+        setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
+    }, [setItems]);
+    const handleKeyDown = (event) => {
+        if (!items)
+            return;
+        const { key } = event;
+        if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
+            event.preventDefault();
+        }
+        if (key === 'Escape' || key === 'Tab') {
+            onClose();
+        }
+        else if (key === 'ArrowUp') {
+            setHighlightedItem((prev) => {
+                if (!prev)
+                    return items[0];
+                const index = items.indexOf(prev) - 1;
+                return items[index === -1 ? items.length - 1 : index];
+            });
+        }
+        else if (key === 'ArrowDown') {
+            setHighlightedItem((prev) => {
+                if (!prev)
+                    return items[0];
+                return items[items.indexOf(prev) + 1];
+            });
+        }
+    };
+    const contextValue = useMemo(() => ({
+        registerItem,
+    }), [registerItem]);
+    useEffect(() => {
+        if (items && !highlightedItem) {
+            setHighlightedItem(items[0]);
+        }
+        if (highlightedItem && highlightedItem.current) {
+            highlightedItem.current.focus();
+        }
+    }, [items, highlightedItem]);
+    return (_jsx(DropDownContext.Provider, { value: contextValue, children: _jsx(Box, { className: "dropdown", ref: dropDownRef, onKeyDown: handleKeyDown, children: children }) }));
+}
+export default function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, buttonIconData, children, stopCloseOnClickSelf, }) {
+    const dropDownRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [showDropDown, setShowDropDown] = useState(false);
+    const handleClose = () => {
+        setShowDropDown(false);
+        if (buttonRef && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    };
+    useEffect(() => {
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (showDropDown && button !== null && dropDown !== null) {
+            const { top, left } = button.getBoundingClientRect();
+            const dropDownRect = dropDown.getBoundingClientRect();
+            const dropDownTop = top + 40;
+            dropDown.style.top = `${dropDownTop}px`;
+            dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`;
+            // 避免 dropdown menu 溢出 viewport 底部
+            if (dropDownTop + dropDownRect.height > window.innerHeight) {
+                dropDown.style.bottom = '8px';
+                dropDown.style.overflowY = 'auto';
+                // fix: safari dropdown menu 出现水平滚动条
+                dropDown.style.overflowX = 'hidden';
+            }
+            // dropdown menu 显示后监听页面所有的 (除 dropdown menu) scroll 事件, 触发时隐藏 dropdown menu (#299)
+            const onScroll = (e) => {
+                if (e.target !== dropDown) {
+                    handleClose();
+                }
+            };
+            document.addEventListener('scroll', onScroll, true);
+            return () => document.removeEventListener('scroll', onScroll, true);
+        }
+    }, [dropDownRef, buttonRef, showDropDown]);
+    useEffect(() => {
+        const button = buttonRef.current;
+        if (button !== null && showDropDown) {
+            const handle = (event) => {
+                const { target } = event;
+                if (stopCloseOnClickSelf) {
+                    if (dropDownRef.current && dropDownRef.current.contains(target))
+                        return;
+                }
+                if (!button.contains(target)) {
+                    setShowDropDown(false);
+                }
+            };
+            document.addEventListener('click', handle);
+            return () => {
+                document.removeEventListener('click', handle);
+            };
+        }
+    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownButton, { disabled: disabled, "aria-label": buttonAriaLabel || buttonLabel, className: buttonClassName, onClick: () => setShowDropDown(!showDropDown), ref: buttonRef, children: [buttonIconClassName && _jsx("span", { className: `icon ${buttonIconClassName}`, "data-icon": buttonIconData }), buttonLabel && _jsx("span", { className: "text dropdown-button-text", children: buttonLabel })] }), showDropDown &&
+                createPortal(_jsx(DropDownItems, { dropDownRef: dropDownRef, onClose: handleClose, children: children }), document.body)] }));
+}
+const DropdownButton = styled.button `
+  display: flex;
+  align-items: center;
+
+  > .icon {
+    font-size: 1.4em;
+    width: 1.6em;
+    opacity: 0.6;
+  }
+
+  > .chevron-down {
+    font-size: 1em;
+    color: gray;
+  }
+`;

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

@@ -0,0 +1,17 @@
+/**
+ * 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 { JSX } from 'react';
+import './Input.css';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    accept?: string;
+    label: string;
+    onChange: (files: FileList | null) => void;
+}>;
+export default function FileInput({ accept, label, onChange, 'data-test-id': dataTestId }: Props): JSX.Element;
+export {};

package/lib/main/ui/FileInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Input.css';
+export default function FileInput({ accept, label, onChange, 'data-test-id': dataTestId }) {
+    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", children: label }), _jsx("input", { type: "file", accept: accept, className: "Input__input", onChange: (e) => onChange(e.target.files), "data-test-id": dataTestId })] }));
+}

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,113 @@
+import { type BoxProps } from '@mui/material';
+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 function FrameMockup({ ref, type, sx, children, ...rest }: FrameMockupProps & BoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Screenshot from '@arcblock/ux/lib/Screenshot';
+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];
+// @ts-ignore
+export function FrameMockup({ ref = undefined, type, sx, children, ...rest }) {
+    const mergedSx = [{}, ...(Array.isArray(sx) ? sx : [sx])];
+    const renderInner = () => {
+        if (isDeviceFrame(type)) {
+            mergedSx.push({
+                img: {
+                    objectFit: 'contain!important',
+                    bgcolor: '#000!important',
+                    borderRadius: '0!important',
+                },
+            });
+            // @ts-ignore
+            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

@@ -0,0 +1,29 @@
+import { type BoxProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+import { ImageSizeMode } from '../../types';
+interface ImageAnnotationProps {
+    editing: boolean;
+    setEditing: (editing: boolean) => void;
+    imageRef: {
+        current: null | HTMLImageElement;
+    };
+    markerState?: string;
+    onChange: (markerState: string) => void;
+}
+export declare function ImageAnnotation({ editing, setEditing, imageRef, markerState, onChange }: ImageAnnotationProps): null;
+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;
+    frame?: string;
+    onSizeModeChange: (sizeMode: ImageSizeMode) => void;
+    onFrameChange: (frame?: string) => void;
+}
+export declare function ImageEnhancer({ sizeMode, frame, onSizeModeChange, onFrameChange, children, }: PropsWithChildren<ImageEnhancerProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/main/ui/ImageEnhancer.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { useEditorSize } from '../hooks/hooks';
+const parseMarkerState = (markerState) => {
+    if (!markerState)
+        return null;
+    try {
+        return JSON.parse(markerState);
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+};
+export function ImageAnnotation({ editing, setEditing, imageRef, markerState, onChange }) {
+    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) {
+                setTimeout(() => markerArea.restoreState(parsed), 400);
+            }
+            return () => {
+                markerArea.close();
+            };
+        }
+    }, [editing]);
+    return null;
+}
+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'"
+            const timer = setTimeout(() => {
+                markerView.targetRoot = viewRef.current;
+                markerView.show(parsed);
+                if (imageRef.current) {
+                    const scaleFactor = imageRef.current.width / parsed.width;
+                    markerView.markers.forEach((marker) => {
+                        // @ts-ignore
+                        if (marker.setStrokeWidth)
+                            marker.setStrokeWidth(marker.strokeWidth * scaleFactor);
+                        if (marker instanceof mjslive.ArrowMarker) {
+                            // @ts-ignore
+                            marker.arrowBaseWidth *= scaleFactor;
+                            // @ts-ignore
+                            marker.arrowBaseHeight *= scaleFactor;
+                        }
+                    });
+                }
+            }, 400);
+            return () => {
+                clearTimeout(timer);
+                markerView.close();
+            };
+        }
+    }, [markerState, imageRef]);
+    return _jsx(Box, { sx: mergedSx, ref: viewRef, ...rest });
+}
+export function ImageEnhancer({ sizeMode, frame, onSizeModeChange, onFrameChange, children, }) {
+    const handleFrameChange = (value) => {
+        onFrameChange(value === 'none' ? undefined : value);
+    };
+    const size = useEditorSize();
+    return (
+    // zIndex 必须为 modal (或以下), 否则如果高于 Select.MuiPaper-root, 会导致点击 Select 无法显示选项, 且导致 image 失焦
+    // 上述问题在 discussion/blog 中可复现, doc 中未复现, 其它的解决方法是在 Select#onClick 中调用 e.stopPropagation 或提高 Select.MuiPaper-root 的 zIndex
+    _jsx(Box, { sx: {
+            position: 'relative',
+            zIndex: 'modal',
+            whiteSpace: 'nowrap',
+            mt: 1,
+        }, children: _jsxs(Box, { sx: {
+                position: 'absolute',
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                gap: 1,
+                ...(size?.width && { width: size.width - 36 }),
+            }, children: [_jsxs(ToggleButtonGroup, { color: "standard", value: sizeMode, size: "small", exclusive: true, onChange: (_, v) => onSizeModeChange(v), sx: { bgcolor: 'background.default' }, 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: { width: { xs: 100, sm: 'auto' } }, MenuProps: { sx: { '.MuiPaper-root': { maxHeight: 400 } }, disablePortal: false }, 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.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 { LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
+export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled, }: {
+    editor: LexicalEditor;
+    buttonRef: {
+        current: null | HTMLButtonElement;
+    };
+    imageRef: {
+        current: null | HTMLElement;
+    };
+    maxWidth?: number;
+    onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
+    onResizeStart: () => void;
+    setShowCaption: (show: boolean) => void;
+    showCaption: boolean;
+    captionsEnabled: boolean;
+}): JSX.Element;