@blocklet/editor 2.3.80 → 2.3.82

package/lib/main/editor.js

@@ -64,7 +64,6 @@ import Placeholder from './ui/Placeholder';
 import { useEditorConfig } from '../config';
 import AidePlugin from '../ext/AIPlugin';
 import MarkdownHeadTextPlugin from '../ext/HeadTextPlugin';
-import { AiImagePlugin } from '../ext/AiImage';
 import { EditorRefPlugin } from '../ext/LexicalEditorRefPlugin';
 import AlertPlugin from '../ext/Alert/AlertPlugin';
 import { HeadingsIdPlugin } from '../ext/HeadingsIdPlugin';
@@ -109,7 +108,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
         }
     }, [hasNodes('image'), hasUploader]);
     if (minimalMode) {
-        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
+        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }

package/lib/main/plugins/ComponentPickerPlugin/index.js

@@ -21,7 +21,6 @@ import { INSERT_IMAGE_COMMAND, isImage } from '../ImagesPlugin';
 import { InsertTableDialog } from '../TablePlugin';
 import { useEditorConfig } from '../../../config';
 import createPortal from '../../../components/createPortal';
-import { isExistAiKit } from '../../../ext/AiImage';
 import { $insertAlert } from '../../../ext/Alert/AlertPlugin';
 import { INSERT_VIDEO_COMMAND, isVideo } from '../../../ext/VideoPlugin';
 import { INSERT_TEMPLATE_COMMAND } from '../../../ext/TemplatePlugin';
@@ -272,7 +271,7 @@ export default function ComponentPickerMenuPlugin() {
                     }))),
             hasNodes('image') &&
                 hasUploader &&
-                new ComponentPickerOption(isExistAiKit() ? 'Media (Support AI)' : 'Media', {
+                new ComponentPickerOption('Media', {
                     icon: _jsx("i", { className: "iconify", "data-icon": icons.media }),
                     keywords: ['image', 'photo', 'picture', 'file', 'video', 'media', 'pdf'],
                     onSelect: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.80",
+  "version": "2.3.82",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -56,7 +56,6 @@
     "leven": "^4.0.0",
     "lexical": "^0.30.0",
     "lodash": "^4.17.21",
-    "lottie-react": "^2.4.0",
     "marked": "^15.0.8",
     "markerjs-live": "^1.2.1",
     "markerjs2": "^2.32.2",
@@ -69,7 +68,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.3.80"
+    "@blocklet/pdf": "^2.3.82"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/lib/ext/AiImage/generate/context.d.ts

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-interface AiImageContextType {
-    disabledSize: boolean;
-    multiple: boolean;
-    loading: boolean;
-    embed: boolean;
-    onLoading: (loading: boolean) => void;
-}
-interface AiImageProviderProps {
-    children: ReactNode;
-    multiple?: boolean;
-    disabledSize: boolean;
-    embed: boolean;
-}
-export interface AiImagePromptProps {
-    prompt: string;
-    sizeWidth: number;
-    number: number;
-}
-export declare const AiImageContext: import("react").Context<AiImageContextType>;
-export declare const useAiImageContext: () => AiImageContextType;
-export declare function AiImageProvider({ multiple, disabledSize, embed, children, }: AiImageProviderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/ext/AiImage/generate/context.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
-import { useGetState } from 'ahooks';
-export const AiImageContext = createContext({});
-export const useAiImageContext = () => useContext(AiImageContext);
-export function AiImageProvider({ multiple = false, disabledSize = false, embed = false, children, }) {
-    const [state, setState] = useGetState({
-        embed,
-        multiple,
-        loading: false,
-        disabledSize,
-    });
-    const onLoading = (loading) => setState((prev) => ({ ...prev, loading }));
-    const value = useMemo(() => ({ ...state, onLoading }), [state]);
-    return _jsx(AiImageContext.Provider, { value: value, children: children });
-}

package/lib/ext/AiImage/generate/index.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-    onSelect: (data: any) => void;
-    api: any;
-    width?: number | string;
-    height?: number | string;
-    embed?: boolean;
-    disabledSize?: boolean;
-}
-declare function AiImage({ onSelect, api, width, height, embed, disabledSize }: Props): import("react/jsx-runtime").JSX.Element;
-export default AiImage;

package/lib/ext/AiImage/generate/index.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import IconButton from '@mui/material/IconButton';
-import { Close as CloseIcon } from '@mui/icons-material';
-import Prompt from './prompt';
-import Output from './output';
-import { AiImageProvider } from './context';
-function AiImage({ onSelect, api, width, height, embed = false, disabledSize = false }) {
-    const [parameters, setParameters] = useState();
-    const [open, setOpen] = useState(false);
-    const onFinish = () => setParameters(undefined);
-    const onClose = () => setOpen(false);
-    if (embed) {
-        const onUseImage = (data) => {
-            onSelect(data);
-            onClose();
-        };
-        return (_jsxs(AiImageProvider, { disabledSize: disabledSize, embed: embed, children: [_jsx(Box, { width: 1, height: 1, children: _jsx(Prompt, { onSubmit: (data) => {
-                            setParameters(data);
-                            setOpen(true);
-                        } }) }), open && (_jsxs(Box, { sx: {
-                        position: 'fixed',
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        bottom: 0,
-                        zIndex: 13001,
-                        background: '#fff',
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: [_jsx(Box, { sx: { position: 'relative' }, children: _jsx(IconButton, { onClick: onClose, sx: {
-                                    position: 'absolute',
-                                    right: 8,
-                                    top: 8,
-                                }, children: _jsx(CloseIcon, {}) }) }), _jsx(Box, { p: 2, flex: 1, children: _jsx(Output, { options: parameters, handleApi: api, onSelect: onUseImage, onFinish: onFinish }) })] }))] }));
-    }
-    return (_jsx(AiImageProvider, { disabledSize: disabledSize, embed: embed, children: _jsx(Box, { sx: {
-                display: 'flex',
-                width: { xs: width || '100%', sm: width || 1200 },
-                height: { xs: height || '100%', sm: height || 600 },
-            }, children: _jsxs(Grid, { container: true, sx: { flexGrow: 1 }, spacing: { xs: 2 }, children: [_jsx(Grid, { item: true, xs: 12, sm: 3, sx: { borderRight: { sm: '1px solid #eee', height: '100%' } }, children: _jsx(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column', px: 1.5 }, children: _jsx(Prompt, { onSubmit: setParameters }) }) }), _jsx(Grid, { item: true, xs: 12, sm: 9, sx: { height: '100%', overflow: 'hidden' }, children: _jsx(Output, { options: parameters, handleApi: api, onSelect: onSelect, onFinish: onFinish }) })] }) }) }));
-}
-export default AiImage;

package/lib/ext/AiImage/generate/output/index.d.ts

@@ -1,7 +0,0 @@
-import { AiImagePromptProps } from '../context';
-export default function Output({ options, handleApi, onSelect, onFinish, }: {
-    options?: AiImagePromptProps;
-    handleApi: (data: any) => any;
-    onSelect: (data?: string[]) => void;
-    onFinish: () => void;
-}): import("react/jsx-runtime").JSX.Element;

package/lib/ext/AiImage/generate/output/index.js

@@ -1,182 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Skeleton from '@mui/material/Skeleton';
-import { useState } from 'react';
-import { useReactive } from 'ahooks';
-import { useAsyncEffect } from 'ahooks';
-import { useAiImageContext } from '../context';
-import LoadingImage from './loading-image';
-import Lottie from './lottie';
-import lottieJsonErrorUrl from './lottie-error.json';
-import lottieJsonLoadingUrl from './lottie-loading.json';
-import lottieJsonWelcomeUrl from './lottie-welcome.json';
-export default function Output({ options, handleApi, onSelect, onFinish, }) {
-    const { loading, multiple, embed, onLoading } = useAiImageContext();
-    const [response, setResponse] = useState([]);
-    const [error, setError] = useState();
-    const selected = useReactive({});
-    const selectedUrls = Object.keys(selected).filter((key) => selected[key]);
-    useAsyncEffect(async () => {
-        if (!options) {
-            return;
-        }
-        setError(undefined);
-        onLoading(true);
-        try {
-            const res = await handleApi({ ...options, responseFormat: embed ? 'b64_json' : 'url' });
-            if (res.data) {
-                const list = res.data || [];
-                const arr = embed
-                    ? list.map((item) => ({
-                        src: `data:image/png;base64,${item.b64_json}`,
-                        width: options.sizeWidth,
-                    }))
-                    : list.map((item) => ({ src: `${item.url}`, width: options.sizeWidth }));
-                if (response) {
-                    setResponse([...arr, ...response]);
-                }
-                else {
-                    setResponse(arr);
-                }
-            }
-            else {
-                setError(res);
-            }
-        }
-        catch (err) {
-            console.error('AiImage generate error: ', err);
-            setError(err?.response?.data || err);
-        }
-        finally {
-            onLoading(false);
-            onFinish();
-        }
-    }, [options?.number, options?.prompt, options?.sizeWidth]);
-    const onSelectImage = (src) => {
-        if (!multiple) {
-            Object.keys(selected).forEach((key) => {
-                selected[key] = false;
-            });
-        }
-        selected[src] = !selected[src];
-    };
-    const onDelete = (src) => {
-        if (response) {
-            const index = response.findIndex((item) => item.src === src);
-            if (index > -1) {
-                selected[src] = false;
-                response.splice(index, 1);
-                setResponse([...response]);
-            }
-        }
-    };
-    const Loading = () => {
-        return (_jsx(_Fragment, { children: Array.from({ length: options?.number || 1 }).map((_, index) => {
-                return (_jsx(Grid, { item: true, children: _jsx(Skeleton, { className: "lazy-image-skeleton", animation: "wave", variant: "rectangular", style: {
-                            width: options?.sizeWidth || 256,
-                            height: options?.sizeWidth || 256,
-                        } }) }, index));
-            }) }));
-    };
-    const render = () => {
-        if (error) {
-            return (_jsxs(Box, { width: 300, height: 300, m: "auto", mt: "100px", children: [_jsx(Lottie, { src: lottieJsonErrorUrl }, "error"), _jsx(Box, { sx: {
-                            textAlign: 'center',
-                            color: '#25292F',
-                            wordBreak: 'break-all',
-                        }, children: error?.message })] }));
-        }
-        if (response && Array.isArray(response) && response.length > 0) {
-            return (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1, sx: { height: 0, overflowX: 'hidden', overflowY: 'auto' }, children: _jsx(ResponseItemRoot, { sx: { p: 2 }, children: _jsxs(Grid, { spacing: 2, container: true, className: "photo-wrapper", children: [loading && _jsx(Loading, {}), response.map((item, index) => {
-                                        return (_jsx(Grid, { item: true, className: "photo-item", children: _jsx(LoadingImage, { ...item, selected: selected[item.src], style: {
-                                                    objectFit: 'cover',
-                                                    width: item.width,
-                                                    height: item.width,
-                                                    cursor: 'pointer',
-                                                    transition: 'all 0.3s',
-                                                    border: selected[item.src] ? '2px solid #2482F6' : '2px solid transparent',
-                                                }, onClick: () => {
-                                                    onSelectImage(item.src);
-                                                }, onDelete: () => {
-                                                    onDelete(item.src);
-                                                } }) }, item.src));
-                                    })] }) }) }), _jsx(Button, { size: "small", color: "primary", variant: "contained", sx: { alignSelf: 'end', mt: 2 }, disabled: !Boolean(selectedUrls.length) || loading, onClick: () => {
-                            onSelect(selectedUrls);
-                        }, children: Boolean(selectedUrls.length) ? 'Use selected images' : 'Please select images' })] }));
-        }
-        if (options) {
-            return (_jsxs(Box, { width: 240, height: 240, m: "auto", mt: "100px", children: [_jsx(Lottie, { src: lottieJsonLoadingUrl }, "loading"), _jsx(Box, { textAlign: "center", color: "#25292F", fontSize: 14, className: "tips", children: `Generating image with promot ${options?.prompt}...` })] }));
-        }
-        return (_jsx(Box, { width: 300, height: 300, m: "auto", mt: "100px", children: _jsx(Lottie, { src: lottieJsonWelcomeUrl }, "welcome") }));
-    };
-    return _jsx(Root, { children: render() });
-}
-const Root = styled(Box) `
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .lazy-image-wrapper {
-    border-radius: 12px;
-
-    img {
-      border-radius: 12px;
-    }
-  }
-
-  .tips {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-`;
-const ResponseItemRoot = styled(Box) `
-  display: flex;
-  flex-direction: column;
-  background: #fbfbfb;
-  border: 1px solid #f6f6f6;
-  border-radius: 12px;
-  min-height: 100%;
-
-  &:has(.Mui-focused) {
-    border: 1px solid #a482fe;
-  }
-
-  > .input {
-    padding: 12px;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 19px;
-    color: #25292f;
-  }
-
-  > .footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0 12px 12px;
-
-    > .counter {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      color: #9397a1;
-    }
-
-    > .copy {
-      height: 25px;
-      width: 25px;
-      min-width: 0;
-      padding: 0;
-      color: #9397a1;
-    }
-  }
-`;

package/lib/ext/AiImage/generate/output/loading-image.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare const LoadingImage: import("react").ForwardRefExoticComponent<Omit<{
-    [key: string]: any;
-    onDelete: (src: string) => void;
-    selected: boolean;
-    onLoad?: (() => void) | undefined;
-    src: string;
-}, "ref"> & import("react").RefAttributes<unknown>>;
-export default LoadingImage;

package/lib/ext/AiImage/generate/output/loading-image.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable import/no-extraneous-dependencies */
-import { Skeleton } from '@mui/material';
-import { forwardRef, useRef } from 'react';
-import { useReactive } from 'ahooks';
-import IconButton from '@mui/material/IconButton';
-import { Delete as DeleteIcon } from '@mui/icons-material';
-import styled from '@emotion/styled';
-import { RadioButtonUnchecked as RadioButtonUncheckedIcon } from '@mui/icons-material';
-import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
-import Box from '@mui/material/Box';
-const LoadingImage = forwardRef(
-// @ts-ignore
-({ onDelete, selected, onLoad, src, width, ...rest }, ref) => {
-    const imageRef = useRef(null);
-    const state = useReactive({
-        loading: true,
-    });
-    return (_jsxs("div", { style: { position: 'relative' }, ref: ref || imageRef, children: [_jsx("div", { className: "lazy-image-wrapper", style: {
-                    visibility: state.loading ? 'hidden' : 'visible',
-                    background: '#f4f4f4',
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: _jsx("img", { alt: "", src: src, ...rest, onLoad: () => {
-                        state.loading = false;
-                        try {
-                            onLoad?.();
-                        }
-                        catch (error) {
-                            console.error('image onLoad error: ', error);
-                        }
-                    }, loading: "eager" // must be eager to make sure the image is loaded
-                 }) }), state.loading && (_jsx(Skeleton, { className: "lazy-image-skeleton", animation: "wave", variant: "rectangular", style: {
-                    width: width,
-                    height: width,
-                    position: 'absolute',
-                    top: 0,
-                } })), _jsx(DeleteButton, { onClick: () => onDelete(src), sx: { position: 'absolute', left: 10, bottom: 10 }, children: _jsx(DeleteIcon, { sx: { fontSize: 20 } }) }), _jsx(Box, { sx: { position: 'absolute', left: 10, top: 10 }, onClick: rest?.onClick, children: selected ? (_jsx(CheckCircleIcon, { sx: { fontSize: 30, color: '#2482F6' } })) : (_jsx(RadioButtonUncheckedIcon, { sx: { fontSize: 30, color: '#fff' } })) })] }));
-});
-export default LoadingImage;
-const DeleteButton = styled(IconButton) `
-  height: 36px;
-  width: 36px;
-  padding: 0;
-  background: rgba(0, 0, 0, 0.42);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
-  color: #f7f8f8;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.69);
-  }
-`;