@blocklet/editor-lite 2.6.0

package/lib/main/nodes/ExcalidrawNode/ExcalidrawImage.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { ExcalidrawElement, NonDeleted } from '@excalidraw/excalidraw/dist/types/excalidraw/element/types';
+import type { AppState, BinaryFiles } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
+import * as React from 'react';
+import { type JSX } from 'react';
+type ImageType = 'svg' | 'canvas';
+type Props = {
+    /**
+     * Configures the export setting for SVG/Canvas
+     */
+    appState: AppState;
+    /**
+     * The css class applied to image to be rendered
+     */
+    className?: string;
+    /**
+     * The Excalidraw elements to be rendered as an image
+     */
+    elements: NonDeleted<ExcalidrawElement>[];
+    /**
+     * The Excalidraw elements to be rendered as an image
+     */
+    files: BinaryFiles;
+    /**
+     * The height of the image to be rendered
+     */
+    height?: number | null;
+    /**
+     * The ref object to be used to render the image
+     */
+    imageContainerRef: {
+        current: null | HTMLDivElement;
+    };
+    /**
+     * The type of image to be rendered
+     */
+    imageType?: ImageType;
+    /**
+     * The css class applied to the root element of this component
+     */
+    rootClassName?: string | null;
+    /**
+     * The width of the image to be rendered
+     */
+    width?: number | null;
+};
+/**
+ * @explorer-desc
+ * A component for rendering Excalidraw elements as a static image
+ */
+export default function ExcalidrawImage({ elements, files, imageContainerRef, appState, rootClassName, ...rest }: Props & React.HTMLProps<HTMLDivElement>): JSX.Element;
+export {};

package/lib/main/nodes/ExcalidrawNode/ExcalidrawImage.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } 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 { exportToSvg } from '@excalidraw/excalidraw';
+import { useTheme } from '@mui/material';
+import { useEffect, useState } from 'react';
+// exportToSvg has fonts from excalidraw.com
+// We don't want them to be used in open source
+const removeStyleFromSvg_HACK = (svg) => {
+    const styleTag = svg?.firstElementChild?.firstElementChild;
+    // Generated SVG is getting double-sized by height and width attributes
+    // We want to match the real size of the SVG element
+    const viewBox = svg.getAttribute('viewBox');
+    if (viewBox != null) {
+        const viewBoxDimensions = viewBox.split(' ');
+        svg.setAttribute('width', viewBoxDimensions[2]);
+        svg.setAttribute('height', viewBoxDimensions[3]);
+    }
+    if (styleTag && styleTag.tagName === 'style') {
+        styleTag.remove();
+    }
+};
+/**
+ * @explorer-desc
+ * A component for rendering Excalidraw elements as a static image
+ */
+export default function ExcalidrawImage({ elements, files, imageContainerRef, appState, rootClassName = null, ...rest }) {
+    const [Svg, setSvg] = useState(null);
+    const theme = useTheme();
+    useEffect(() => {
+        const setContent = async () => {
+            const svg = await exportToSvg({
+                appState: {
+                    ...appState,
+                    ...(theme.palette.mode === 'dark' && {
+                        theme: 'dark',
+                        viewBackgroundColor: theme.palette.background.default,
+                        // exportWithDarkMode: true,
+                    }),
+                },
+                elements,
+                files,
+            });
+            removeStyleFromSvg_HACK(svg);
+            svg.setAttribute('width', '100%');
+            svg.setAttribute('height', '100%');
+            svg.setAttribute('display', 'block');
+            setSvg(svg);
+        };
+        setContent();
+    }, [elements, files, appState]);
+    return (_jsx("div", { ref: imageContainerRef, className: rootClassName ?? '', 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: Svg?.outerHTML ?? '' }, ...rest }));
+}

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.css

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.ExcalidrawModal__overlay {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 10001;
+  background-color: rgba(40, 40, 40, 0.6);
+}
+.ExcalidrawModal__actions {
+  display: flex;
+  text-align: end;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 1;
+}
+.ExcalidrawModal__actions button {
+  background-color: #fff;
+  border-radius: 5px;
+}
+.ExcalidrawModal__row {
+  position: relative;
+  padding: 42px 5px 5px;
+  width: 90vw;
+  height: 90vh;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+.ExcalidrawModal__row > div {
+  border-radius: 5px;
+}
+.ExcalidrawModal__modal {
+  position: relative;
+  z-index: 99999;
+  top: 50px;
+  width: auto;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background-color: #eee;
+}
+
+.ExcalidrawModal__discardModal {
+  margin-top: 60px;
+  text-align: center;
+}
+
+.ExcalidrawModal__fullscreen .ExcalidrawModal__modal {
+  top: 0;
+}
+.ExcalidrawModal__fullscreen .ExcalidrawModal__row {
+  width: 100vw;
+  height: 100vh;
+}
+
+body .excalidraw-modal-container {
+  z-index: 99999 !important;
+}

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.d.ts

@@ -0,0 +1,49 @@
+import { ReactPortal } from 'react';
+import type { AppState, BinaryFiles, LibraryItems } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
+import '@excalidraw/excalidraw/index.css';
+export type ExcalidrawElementFragment = {
+    isDeleted?: boolean;
+};
+type Props = {
+    closeOnClickOutside?: boolean;
+    /**
+     * The initial set of elements to draw into the scene
+     */
+    initialElements: ReadonlyArray<ExcalidrawElementFragment>;
+    /**
+     * The initial set of elements to draw into the scene
+     */
+    initialAppState: AppState;
+    /**
+     * The initial set of files to draw into the scene
+     */
+    initialFiles: BinaryFiles;
+    /**
+     * The initial set of library items to draw into the scene
+     */
+    initialLibraryItems?: LibraryItems;
+    /**
+     * Controls the visibility of the modal
+     */
+    isShown?: boolean;
+    /**
+     * Callback when closing and discarding the new changes
+     */
+    onClose: () => void;
+    /**
+     * Completely remove Excalidraw component
+     */
+    onDelete: () => void;
+    /**
+     * Callback when the save button is clicked
+     */
+    onSave: (elements: ReadonlyArray<ExcalidrawElementFragment>, appState: Partial<AppState>, files: BinaryFiles) => void;
+    readonly?: boolean;
+};
+/**
+ * @explorer-desc
+ * A component which renders a modal with Excalidraw (a painting app)
+ * which can be used to export an editable image
+ */
+export default function ExcalidrawModal({ closeOnClickOutside, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems, isShown, onDelete, onClose, readonly, }: Props): ReactPortal | null;
+export {};

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.js

@@ -0,0 +1,197 @@
+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 { Excalidraw, useHandleLibrary, serializeLibraryAsJSON } from '@excalidraw/excalidraw';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import LoadingButton from '@mui/lab/LoadingButton';
+import '@excalidraw/excalidraw/index.css';
+import { useTheme } from '@mui/material';
+import Button from '../../ui/Button';
+import Modal from '../../ui/Modal';
+import { uploadImageToMediaKit } from './utils';
+const safeParseJSON = (json) => {
+    try {
+        return JSON.parse(json);
+    }
+    catch (error) {
+        return null;
+    }
+};
+const LIBRARY_KEY = 'excalidraw-library';
+/**
+ * @explorer-desc
+ * A component which renders a modal with Excalidraw (a painting app)
+ * which can be used to export an editable image
+ */
+export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems = safeParseJSON(localStorage.getItem(LIBRARY_KEY))?.libraryItems, isShown = false, onDelete, onClose, readonly, }) {
+    const excaliDrawModelRef = useRef(null);
+    const excaliDrawSceneRef = useRef(null);
+    const [discardModalOpen, setDiscardModalOpen] = useState(false);
+    const [elements, setElements] = useState(initialElements);
+    const [files, setFiles] = useState(initialFiles);
+    const [loading, setLoading] = useState(false);
+    const [saveText, setSaveText] = useState('Save');
+    const [fullScreen, setFullScreen] = useState(false);
+    const theme = useTheme();
+    const markBlockletDirtyState = () => {
+        if (!readonly) {
+            window.dispatchEvent(new CustomEvent('blocklet:markDirty', { detail: { key: 'excalidraw' } }));
+        }
+    };
+    const resetBlockletDirtyState = () => {
+        window.dispatchEvent(new CustomEvent('blocklet:resetDirty', { detail: { key: 'excalidraw' } }));
+    };
+    useEffect(() => {
+        // @ts-ignore set window.name to add library target
+        window.name = window.location.href;
+        if (excaliDrawModelRef.current !== null) {
+            excaliDrawModelRef.current.focus();
+        }
+    }, []);
+    useHandleLibrary({
+        excalidrawAPI: excaliDrawSceneRef.current,
+        getInitialLibraryItems: () => {
+            return initialLibraryItems;
+        },
+    });
+    useEffect(() => {
+        let modalOverlayElement = null;
+        const clickOutsideHandler = (event) => {
+            const { target } = event;
+            if (excaliDrawModelRef.current !== null &&
+                !excaliDrawModelRef.current.contains(target) &&
+                closeOnClickOutside) {
+                onDelete();
+            }
+        };
+        if (excaliDrawModelRef.current !== null) {
+            modalOverlayElement = excaliDrawModelRef.current?.parentElement;
+            if (modalOverlayElement !== null) {
+                modalOverlayElement?.addEventListener('click', clickOutsideHandler);
+            }
+        }
+        return () => {
+            if (modalOverlayElement !== null) {
+                modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+            }
+        };
+    }, [closeOnClickOutside, onDelete]);
+    useLayoutEffect(() => {
+        const currentModalRef = excaliDrawModelRef.current;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setDiscardModalOpen(true);
+            }
+        };
+        if (currentModalRef !== null) {
+            currentModalRef.addEventListener('keydown', onKeyDown);
+        }
+        return () => {
+            if (currentModalRef !== null) {
+                currentModalRef.removeEventListener('keydown', onKeyDown);
+            }
+        };
+    }, [elements, files, onDelete]);
+    const save = async () => {
+        setLoading(true);
+        setSaveText('Saving...');
+        try {
+            if (elements.filter((el) => !el.isDeleted).length > 0) {
+                const appState = excaliDrawSceneRef?.current?.getAppState();
+                // We only need a subset of the state
+                const partialState = appState
+                    ? {
+                        exportBackground: appState.exportBackground,
+                        exportScale: appState.exportScale,
+                        exportWithDarkMode: appState.theme === 'dark',
+                        isBindingEnabled: appState.isBindingEnabled,
+                        isLoading: appState.isLoading,
+                        name: appState.name,
+                        theme: appState.theme,
+                        viewBackgroundColor: appState.viewBackgroundColor,
+                        zenModeEnabled: appState.zenModeEnabled,
+                        zoom: appState.zoom,
+                    }
+                    : {};
+                setSaveText('Uploading...');
+                await uploadImageToMediaKit(elements, files);
+                setSaveText('Saving...');
+                await onSave(elements, partialState, files);
+            }
+            else {
+                // delete node if the scene is clear
+                await onDelete();
+            }
+        }
+        catch (error) {
+            console.error('Error saving Excalidraw', error);
+        }
+        finally {
+            setLoading(false);
+            setSaveText('Save');
+            resetBlockletDirtyState();
+        }
+    };
+    const discard = () => {
+        if (elements.filter((el) => !el.isDeleted).length === 0) {
+            // delete node if the scene is clear
+            onDelete();
+            resetBlockletDirtyState();
+        }
+        else {
+            // Otherwise, show confirmation dialog before closing
+            setDiscardModalOpen(true);
+        }
+    };
+    // eslint-disable-next-line react/no-unstable-nested-components
+    function ShowDiscardDialog() {
+        return (_jsxs(Modal, { title: "Discard", onClose: () => {
+                setDiscardModalOpen(false);
+            }, closeOnClickOutside: false, children: ["Are you sure you want to discard the changes?", _jsxs("div", { className: "ExcalidrawModal__discardModal", children: [_jsx(Button, { onClick: () => {
+                                resetBlockletDirtyState();
+                                setDiscardModalOpen(false);
+                                if (!initialElements?.length) {
+                                    onDelete();
+                                }
+                                else {
+                                    onClose();
+                                }
+                            }, children: "Discard" }), ' ', _jsx(Button, { onClick: () => {
+                                setDiscardModalOpen(false);
+                            }, children: "Cancel" })] })] }));
+    }
+    if (isShown === false) {
+        return null;
+    }
+    const onChange = (els, _, fls) => {
+        markBlockletDirtyState();
+        setElements(els);
+        setFiles(fls);
+    };
+    const onLibraryChange = (items) => {
+        const serializeJSON = serializeLibraryAsJSON(items);
+        localStorage.setItem(LIBRARY_KEY, serializeJSON);
+    };
+    // This is a hacky work-around for Excalidraw + Vite.
+    // In DEV, Vite pulls this in fine, in prod it doesn't. It seems
+    // like a module resolution issue with ESM vs CJS?
+    // @ts-ignore
+    const _Excalidraw = Excalidraw.$$typeof != null ? Excalidraw : Excalidraw.default;
+    const appState = {
+        ...initialAppState,
+        ...(theme.palette.mode === 'dark' && {
+            theme: 'dark',
+        }),
+    };
+    return createPortal(_jsx("div", { className: `ExcalidrawModal__overlay ${fullScreen ? 'ExcalidrawModal__fullscreen' : ''}`, role: "dialog", children: _jsx("div", { className: "ExcalidrawModal__modal", ref: excaliDrawModelRef, tabIndex: -1, style: { backgroundColor: theme.palette.grey[100] }, children: _jsxs("div", { className: "ExcalidrawModal__row", children: [discardModalOpen && _jsx(ShowDiscardDialog, {}), _jsx(_Excalidraw, { onChange: onChange, onLibraryChange: onLibraryChange, ref: excaliDrawSceneRef, initialData: {
+                            appState: appState || { isLoading: false },
+                            elements: initialElements,
+                            files: initialFiles,
+                        } }), _jsxs("div", { className: "ExcalidrawModal__actions", children: [!fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(true), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen", "data-height": "18" }) })), fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(false), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen-exit", "data-height": "18" }) })), !readonly && (_jsxs(_Fragment, { children: [_jsx(LoadingButton, { loadingPosition: "start", disabled: loading, className: "action-button", onClick: discard, children: "Discard" }), _jsx(LoadingButton, { loadingPosition: "start", loading: loading, className: "action-button", onClick: save, children: saveText })] })), readonly && (_jsx(LoadingButton, { className: "action-button", onClick: () => onClose(), children: "Close" }))] })] }) }) }), document.body);
+}

package/lib/main/nodes/ExcalidrawNode/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 './ExcalidrawModal.css';
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
+export type SerializedExcalidrawNode = Spread<{
+    data: string;
+}, SerializedLexicalNode>;
+export declare class ExcalidrawNode extends DecoratorNode<JSX.Element> {
+    __data: string;
+    static getType(): string;
+    static clone(node: ExcalidrawNode): ExcalidrawNode;
+    static importJSON(serializedNode: SerializedExcalidrawNode): ExcalidrawNode;
+    exportJSON(): SerializedExcalidrawNode;
+    constructor(data?: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    static importDOM(): DOMConversionMap<HTMLSpanElement> | null;
+    exportDOM(editor: LexicalEditor): DOMExportOutput;
+    setData(data: string): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+}
+export declare function $createExcalidrawNode(): ExcalidrawNode;
+export declare function $isExcalidrawNode(node: LexicalNode | null): node is ExcalidrawNode;

package/lib/main/nodes/ExcalidrawNode/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } 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 './ExcalidrawModal.css';
+import { DecoratorNode } from 'lexical';
+import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
+import { Suspense } from 'react';
+const ExcalidrawComponent = lazy(() => import('./ExcalidrawComponent'));
+function convertExcalidrawElement(domNode) {
+    const excalidrawData = domNode.getAttribute('data-lexical-excalidraw-json');
+    if (excalidrawData) {
+        const node = $createExcalidrawNode();
+        node.__data = excalidrawData;
+        return {
+            node,
+        };
+    }
+    return null;
+}
+export class ExcalidrawNode extends DecoratorNode {
+    __data;
+    static getType() {
+        return 'excalidraw';
+    }
+    static clone(node) {
+        return new ExcalidrawNode(node.__data, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return new ExcalidrawNode(serializedNode.data);
+    }
+    exportJSON() {
+        return {
+            data: this.__data,
+            type: 'excalidraw',
+            version: 1,
+        };
+    }
+    constructor(data = '[]', key) {
+        super(key);
+        this.__data = data;
+    }
+    // View
+    createDOM(config) {
+        const span = document.createElement('span');
+        const { theme } = config;
+        span.className = `${theme.image ?? ''} ${theme.responsiveContainer ?? ''}`;
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-excalidraw-json')) {
+                    return null;
+                }
+                return {
+                    conversion: convertExcalidrawElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    exportDOM(editor) {
+        const element = document.createElement('span');
+        const content = editor.getElementByKey(this.getKey());
+        if (content !== null) {
+            const svg = content.querySelector('svg');
+            if (svg !== null) {
+                element.innerHTML = svg.outerHTML;
+            }
+        }
+        element.setAttribute('data-lexical-excalidraw-json', this.__data);
+        return { element };
+    }
+    setData(data) {
+        const self = this.getWritable();
+        self.__data = data;
+    }
+    decorate(editor, config) {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(ExcalidrawComponent, { nodeKey: this.getKey(), data: this.__data }) }));
+    }
+}
+export function $createExcalidrawNode() {
+    return new ExcalidrawNode();
+}
+export function $isExcalidrawNode(node) {
+    return node instanceof ExcalidrawNode;
+}

package/lib/main/nodes/ExcalidrawNode/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const getBlockletMountPointInfo: (name: string) => any;
+export declare function isLocalImage(src: string): boolean;
+export declare function joinImageUrl(src: string): string;
+export declare function uploadImageToMediaKit(elements: any, files: any): Promise<void>;
+export declare function covertImageWithMediaKitPath(elements: any, files: any): void;

package/lib/main/nodes/ExcalidrawNode/utils.js

@@ -0,0 +1,71 @@
+import { joinURL } from 'ufo';
+// chain promise
+const runPromiseInSequence = (list, fn) => {
+    return list.reduce((p, item) => {
+        return p.then(() => fn(item));
+    }, Promise.resolve()); // initial
+};
+export const getBlockletMountPointInfo = (name) => {
+    return window.blocklet?.componentMountPoints?.find((x) => x.name === name || x.did === name);
+};
+export function isLocalImage(src) {
+    return src.startsWith('data:image') || src.startsWith('blob:');
+}
+export function joinImageUrl(src) {
+    if (src?.startsWith('http')) {
+        return src;
+    }
+    // media kit
+    // const mountPoint = getBlockletMountPointInfo('z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9');
+    // discuss kit
+    const mountPoint = getBlockletMountPointInfo('did-comments')?.mountPoint;
+    if (mountPoint) {
+        const prefix = joinURL(window.location.origin, mountPoint, 'uploads');
+        // not add prefix
+        if (!src.startsWith(prefix)) {
+            return joinURL(prefix, src);
+        }
+    }
+    return src;
+}
+export async function uploadImageToMediaKit(elements, files) {
+    const filteredImages = elements?.filter((el) => el.type === 'image');
+    if (filteredImages.length > 0) {
+        // upload image to Media Kit
+        await runPromiseInSequence(filteredImages, async (el) => {
+            const fileItem = files[el.fileId];
+            // @ts-ignore
+            const uploader = window?.uploaderRef?.current?.getUploader?.();
+            const prefix = joinImageUrl('/');
+            // if not uploaded yet and is has uploader
+            if (isLocalImage(fileItem.dataURL) && !!uploader) {
+                // try to upload the image
+                const blobFile = await fetch(fileItem.dataURL).then((res) => res.blob());
+                const { data } = await uploader.uploadFile(blobFile).then((result) => {
+                    // https://uppy.io/docs/uppy/#options
+                    return result?.response;
+                });
+                // only save filename
+                files[el.fileId].dataURL = data.filename;
+            }
+            else if (fileItem.dataURL?.startsWith(prefix)) {
+                // remove the prefix
+                files[el.fileId].dataURL = fileItem.dataURL.replace(prefix, '');
+            }
+        });
+        // promise all to chain the upload
+    }
+}
+export function covertImageWithMediaKitPath(elements, files) {
+    const filteredImages = elements?.filter((el) => el.type === 'image') || [];
+    if (filteredImages?.length > 0) {
+        // upload image to Media Kit
+        filteredImages.forEach((el) => {
+            const fileItem = files[el.fileId];
+            if (!isLocalImage(fileItem.dataURL)) {
+                // replace dataURL with Media Kit URL
+                files[el.fileId].dataURL = joinImageUrl(fileItem.dataURL);
+            }
+        });
+    }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * 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 { EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
+export type SerializedFigmaNode = Spread<{
+    documentID: string;
+    type: 'figma';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class FigmaNode extends DecoratorBlockNode {
+    __id: string;
+    static getType(): string;
+    static clone(node: FigmaNode): FigmaNode;
+    static importJSON(serializedNode: SerializedFigmaNode): FigmaNode;
+    exportJSON(): SerializedFigmaNode;
+    constructor(id: string, format?: ElementFormatType, key?: NodeKey);
+    updateDOM(): false;
+    getId(): string;
+    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
+    decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createFigmaNode(documentID: string): FigmaNode;
+export declare function $isFigmaNode(node: FigmaNode | LexicalNode | null | undefined): node is FigmaNode;