@blocklet/editor-lite 2.6.0

package/lib/ext/Aide/index.js

@@ -0,0 +1,2 @@
+export * from './Aide';
+export * from './context';

package/lib/ext/Aide/types.d.ts

@@ -0,0 +1,84 @@
+export type Status = 'initial' | 'activated' | 'waiting' | 'completed' | 'copied';
+export type Mode = 'normal' | 'templates';
+export declare class Template {
+    id: string;
+    name: string;
+    icon: string;
+    private data;
+    options?: string[] | undefined;
+    constructor(id: string, name: string, icon: string, data: string, options?: string[] | undefined);
+    private formatString;
+    hasOptions(): boolean | undefined;
+    getPrompt(text: string, ...args: string[]): string;
+}
+export type FetchTemplateTags = () => Promise<string[]>;
+export interface FetchTemplatesRequest {
+    offset?: number;
+    limit?: number;
+    tag?: string;
+}
+export type FetchTemplates = (payload?: FetchTemplatesRequest) => Promise<ParameterizedTemplate[]>;
+export type Completions = (payload: CompletionsPayload) => Promise<string>;
+export type Parameter = StringParameter | NumberParameter | SelectParameter | LanguageParameter;
+export interface ParameterizedTemplate {
+    id: string;
+    type: 'image' | 'function' | 'prompt' | 'api';
+    name: string;
+    icon: string;
+    description: string;
+    parameters?: Parameter[];
+    createdAt: string;
+    updatedAt: string;
+    source: string;
+    projectId?: string;
+    ref?: string;
+    resourceComponentDid?: string;
+}
+export interface BaseParameter {
+    key?: string;
+    label?: string;
+    placeholder?: string;
+    helper?: string;
+    required?: boolean;
+}
+export interface StringParameter extends BaseParameter {
+    type?: 'string';
+    value?: string;
+    defaultValue?: string;
+    multiline?: boolean;
+    minLength?: number;
+    maxLength?: number;
+}
+export interface NumberParameter extends BaseParameter {
+    type: 'number';
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+}
+export interface SelectParameter extends BaseParameter {
+    type: 'select';
+    value?: string;
+    defaultValue?: string;
+    options?: {
+        id: string;
+        label: string;
+        value: string;
+    }[];
+}
+export interface LanguageParameter extends BaseParameter {
+    type: 'language';
+    value?: string;
+    defaultValue?: string;
+}
+export interface ParameterizedTemplateCompletionsPayload {
+    source: string;
+    projectId?: string;
+    ref?: string;
+    resourceComponentDid?: string;
+    assistantId: string;
+    parameters: {
+        [key: string]: any;
+    };
+}
+export type CompletionsPayload = string | ParameterizedTemplateCompletionsPayload;

package/lib/ext/Aide/types.js

@@ -0,0 +1,25 @@
+export class Template {
+    id;
+    name;
+    icon;
+    data;
+    options;
+    constructor(id, name, icon, data, options) {
+        this.id = id;
+        this.name = name;
+        this.icon = icon;
+        this.data = data;
+        this.options = options;
+    }
+    formatString(str, ...args) {
+        return str.replace(/{([0-9]+)}/g, (match, index) => {
+            return typeof args[index] === 'undefined' ? match : args[index];
+        });
+    }
+    hasOptions() {
+        return this.options && this.options.length > 0;
+    }
+    getPrompt(text, ...args) {
+        return this.data ? this.formatString(this.data, text, ...args) : text;
+    }
+}

package/lib/ext/Aide/withAiAvailable.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function withAiAvailable<T extends object>(WrappedComponent: React.ComponentType<T>): {
+    (props: T): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/lib/ext/Aide/withAiAvailable.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAideContext } from './context';
+export function withAiAvailable(WrappedComponent) {
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    const ComponentWithAiAvailable = (props) => {
+        const { available } = useAideContext();
+        return available ? _jsx(WrappedComponent, { ...props }) : null;
+    };
+    ComponentWithAiAvailable.displayName = `withAiAvailable(${displayName})`;
+    return ComponentWithAiAvailable;
+}

package/lib/ext/Alert/AlertComponent.d.ts

@@ -0,0 +1,10 @@
+import { AlertColor } from '@mui/material';
+import { RangeSelection } from 'lexical';
+import { type JSX } from 'react';
+type AlertComponentProps = {
+    text: string;
+    severity: AlertColor;
+    onChange?: (text: string, selection?: RangeSelection) => void;
+};
+export default function AlertComponent({ text, severity, onChange }: AlertComponentProps): JSX.Element;
+export {};

package/lib/ext/Alert/AlertComponent.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Alert, Box } from '@mui/material';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+export default function AlertComponent({ text, severity, onChange }) {
+    const [editor] = useLexicalComposerContext();
+    const [editing, setEditing] = useState(false);
+    const [value, setValue] = useState(text);
+    const selectionRef = useRef(undefined);
+    // 初始化时若 text 为空则自动进入 editing 状态
+    useEffect(() => {
+        if (!text) {
+            setTimeout(edit);
+        }
+    }, []);
+    const handleChange = () => {
+        setEditing(false);
+        // 若 value 为空值则保存一个 "空格", 避免 editor 初始化时因 text 为空导致 Alert 自动进入 editing 状态
+        onChange?.(value || ' ', selectionRef.current);
+    };
+    const edit = () => {
+        if (editor.isEditable()) {
+            const selection = editor.getEditorState().read($getSelection);
+            if ($isRangeSelection(selection)) {
+                selectionRef.current = selection;
+            }
+            setEditing(true);
+        }
+    };
+    return (_jsxs(Alert, { severity: severity, sx: { '.MuiAlert-message': { width: '100%' } }, children: [!editing && (_jsx(Box, { onClick: edit, sx: { ...(!text && { height: '1em' }) }, children: text })), editing && (_jsx(Box, { component: "input", type: "text", value: value, onClick: (e) => e.stopPropagation(), onChange: (e) => setValue(e.target.value), onBlur: handleChange, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleChange();
+                    }
+                }, autoFocus: true, sx: { width: '100%', border: 0, outline: 0, lineHeight: '24px' } }))] }));
+}

package/lib/ext/Alert/AlertNode.d.ts

@@ -0,0 +1,28 @@
+import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type ElementFormatType, type LexicalEditor, type LexicalNode, type NodeKey, type Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { AlertColor } from '@mui/material/Alert';
+import type { JSX } from 'react';
+export type SerializedAlertNode = Spread<{
+    type: 'alert';
+    text: string;
+    severity: AlertColor;
+}, SerializedDecoratorBlockNode>;
+export declare class AlertNode extends DecoratorBlockNode {
+    __text: string;
+    __severity: AlertColor;
+    static getType(): string;
+    static clone(node: AlertNode): AlertNode;
+    constructor(text: string, severity: AlertColor, format?: ElementFormatType, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedAlertNode): AlertNode;
+    exportJSON(): SerializedAlertNode;
+    getText(): string;
+    setText(text: string): void;
+    getSeverity(): string;
+    setSeverity(severity: AlertColor): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createAlertNode(text: string, severity: AlertColor): AlertNode;
+export declare function $isAlertNode(node: LexicalNode | null | undefined): node is AlertNode;

package/lib/ext/Alert/AlertNode.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $setSelection, } from 'lexical';
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import AlertComponent from './AlertComponent';
+function convertAlertElement(domNode) {
+    const alertStr = domNode.getAttribute('data-lexical-alert');
+    try {
+        const parsed = JSON.parse(alertStr);
+        if (parsed) {
+            const node = $createAlertNode(parsed.text, parsed.severity);
+            return { node };
+        }
+    }
+    catch (e) {
+        console.warn(`Failed to parse: ${alertStr}`, e);
+    }
+    return null;
+}
+export class AlertNode extends DecoratorBlockNode {
+    __text;
+    __severity;
+    static getType() {
+        return 'alert';
+    }
+    static clone(node) {
+        return new AlertNode(node.__text, node.__severity, node.__format, node.__key);
+    }
+    constructor(text, severity, format, key) {
+        super(format, key);
+        this.__text = text;
+        this.__severity = severity;
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        element.setAttribute('data-lexical-alert', JSON.stringify({ text: this.__text, severity: this.__severity }));
+        return { element };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-alert')) {
+                    return null;
+                }
+                return {
+                    conversion: convertAlertElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        const node = $createAlertNode(serializedNode.text, serializedNode.severity);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'alert',
+            text: this.__text,
+            severity: this.__severity,
+            version: 1,
+        };
+    }
+    getText() {
+        return this.__text;
+    }
+    setText(text) {
+        const writable = this.getWritable();
+        writable.__text = text;
+    }
+    getSeverity() {
+        return this.__severity;
+    }
+    setSeverity(severity) {
+        const writable = this.getWritable();
+        writable.__severity = severity;
+    }
+    decorate(editor, config) {
+        const alertTheme = config.theme.alert || {};
+        const className = {
+            base: alertTheme.base || '',
+            focus: alertTheme.focus || '',
+        };
+        const handleOnChange = (text, selection) => {
+            editor.update(() => {
+                this.setText(text);
+                if (selection) {
+                    $setSelection(selection.clone());
+                }
+            });
+        };
+        return (_jsx(BlockWithAlignableContents, { className: className, format: this.__format, nodeKey: this.__key, children: _jsx(AlertComponent, { text: this.__text, severity: this.__severity, onChange: handleOnChange }) }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createAlertNode(text, severity) {
+    const alertNode = new AlertNode(text, severity);
+    return alertNode;
+}
+export function $isAlertNode(node) {
+    return node instanceof AlertNode;
+}

package/lib/ext/Alert/AlertPlugin.d.ts

@@ -0,0 +1,11 @@
+import { LexicalCommand, LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
+import { AlertColor } from '@mui/material/Alert';
+type CommandPayload = {
+    text: string;
+    severity: AlertColor;
+};
+export declare const INSERT_ALERT_COMMAND: LexicalCommand<CommandPayload>;
+export default function AlertPlugin(): JSX.Element | null;
+export declare const $insertAlert: (editor: LexicalEditor, severity: AlertColor) => void;
+export {};

package/lib/ext/Alert/AlertPlugin.js

@@ -0,0 +1,41 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useEffect } from 'react';
+import { $createAlertNode, AlertNode } from './AlertNode';
+export const INSERT_ALERT_COMMAND = createCommand('INSERT_ALERT_COMMAND');
+export default function AlertPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([AlertNode])) {
+            throw new Error('AlertPlugins: AlertNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_ALERT_COMMAND, (payload) => {
+            const { text, severity } = payload;
+            const alertNode = $createAlertNode(text, severity);
+            $insertNodeToNearestRoot(alertNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}
+export const $insertAlert = (editor, severity) => {
+    editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const { anchor } = selection;
+            const anchorNode = anchor.getNode();
+            const anchorNodeParent = anchorNode.getParent();
+            if ($isRootOrShadowRoot(anchorNodeParent)) {
+                editor.dispatchCommand(INSERT_ALERT_COMMAND, { text: '', severity });
+            }
+            else if (anchorNodeParent) {
+                editor.dispatchCommand(INSERT_ALERT_COMMAND, {
+                    text: anchorNodeParent.getTextContent(),
+                    severity,
+                });
+                selection.getNodes().forEach((x) => x.remove());
+            }
+        }
+    });
+};

package/lib/ext/BilibiliPlugin/BilibiliNode.d.ts

@@ -0,0 +1,31 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
+export interface BilibiliVideoPayload {
+    id: string;
+    page: string | undefined;
+}
+export type SerializedBilibiliNode = Spread<{
+    videoID: string;
+    page?: string;
+    type: 'bilibili';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class BilibiliNode extends DecoratorBlockNode {
+    __id: string;
+    __page?: string;
+    static getType(): string;
+    static clone(node: BilibiliNode): BilibiliNode;
+    static importJSON(serializedNode: SerializedBilibiliNode): BilibiliNode;
+    exportJSON(): SerializedBilibiliNode;
+    constructor(id: string, page: string | undefined, format?: ElementFormatType, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(): false;
+    getId(): string;
+    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
+    decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createBilibiliNode({ id, page }: BilibiliVideoPayload): BilibiliNode;
+export declare function $isBilibiliNode(node: BilibiliNode | LexicalNode | null | undefined): node is BilibiliNode;

package/lib/ext/BilibiliPlugin/BilibiliNode.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import BilibiliVideo from './BilibiliVideo';
+function BilibiliComponent({ className, format, nodeKey, videoID, page }) {
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(BilibiliVideo, { videoID: videoID, page: page }) }));
+}
+function convertBilibiliElement(domNode) {
+    const videoID = domNode.getAttribute('data-lexical-bilibili');
+    const page = domNode.getAttribute('data-lexical-bilibili-page') || undefined;
+    if (videoID) {
+        const node = $createBilibiliNode({ id: videoID, page });
+        return { node };
+    }
+    return null;
+}
+export class BilibiliNode extends DecoratorBlockNode {
+    __id;
+    __page;
+    static getType() {
+        return 'bilibili';
+    }
+    static clone(node) {
+        return new BilibiliNode(node.__id, node.__page, node.__format, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createBilibiliNode({ id: serializedNode.videoID, page: serializedNode.page });
+        node.setFormat(serializedNode.format);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'bilibili',
+            version: 1,
+            videoID: this.__id,
+            page: this.__page,
+        };
+    }
+    constructor(id, page, format, key) {
+        super(format, key);
+        this.__id = id;
+        this.__page = page;
+    }
+    exportDOM() {
+        const element = document.createElement('iframe');
+        element.setAttribute('data-lexical-bilibili', this.__id);
+        element.setAttribute('data-lexical-bilibili-page', this.__page || '');
+        element.setAttribute('width', '560');
+        element.setAttribute('height', '315');
+        element.setAttribute('src', `//player.bilibili.com/player.html?bvid=${this.__id}&page=${this.__page}`);
+        element.setAttribute('frameborder', '0');
+        element.setAttribute('title', 'Bilibili video');
+        return { element };
+    }
+    static importDOM() {
+        return {
+            iframe: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-bilibili')) {
+                    return null;
+                }
+                return {
+                    conversion: convertBilibiliElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    updateDOM() {
+        return false;
+    }
+    getId() {
+        return this.__id;
+    }
+    getTextContent(_includeInert, _includeDirectionless) {
+        return `//player.bilibili.com/player.html?bvid=${this.__id}&page=${this.__page}`;
+    }
+    decorate(_editor, config) {
+        const embedBlockTheme = config.theme.embedBlock || {};
+        const className = {
+            base: embedBlockTheme.base || '',
+            focus: embedBlockTheme.focus || '',
+        };
+        return (_jsx(BilibiliComponent, { className: className, format: this.__format, nodeKey: this.getKey(), videoID: this.__id, page: this.__page }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createBilibiliNode({ id, page }) {
+    return new BilibiliNode(id, page);
+}
+export function $isBilibiliNode(node) {
+    return node instanceof BilibiliNode;
+}

package/lib/ext/BilibiliPlugin/BilibiliVideo.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    videoID: string;
+    page?: string;
+}
+export default function BilibiliVideo({ videoID, page }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/BilibiliPlugin/BilibiliVideo.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+export default function BilibiliVideo({ videoID, page }) {
+    return (_jsx(BilibiliVideoRoot, { children: _jsx("div", { className: "be-bilibili-video-inner", children: _jsx("div", { className: "be-bilibili-video-box", children: _jsx("iframe", { src: `//player.bilibili.com/player.html?bvid=${videoID}&high_quality=1&page=${page}`, style: { border: 0 }, title: "Bilibili video", allowFullScreen: true }) }) }) }));
+}
+const BilibiliVideoRoot = styled.div `
+  .be-bilibili-video-inner {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .be-bilibili-video-box {
+    display: flex;
+    position: relative;
+    padding-top: 75%;
+
+    iframe {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;

package/lib/ext/BilibiliPlugin/config.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundEmbedConfig } from '../../main/plugins/AutoEmbedPlugin';
+export declare const BilibiliEmbedConfig: PlaygroundEmbedConfig;

package/lib/ext/BilibiliPlugin/config.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INSERT_BILIBILI_COMMAND } from '.';
+import { wrap } from '../../main/plugins/AutoEmbedPlugin/urlParseCache';
+const parsePage = (url) => {
+    try {
+        const urlObj = new URL(url);
+        return urlObj.searchParams.get('p') || '';
+    }
+    catch (e) {
+        console.error(e);
+        return '';
+    }
+};
+export const BilibiliEmbedConfig = {
+    contentName: 'Bilibili Video',
+    exampleUrl: 'https://www.bilibili.com/video/BV1w7411g7jn/?vd_source=d607e476d26705d4d7bd9852f9a3f5bf',
+    // Icon for display.
+    icon: _jsx("i", { className: "iconify", "data-icon": "ri:bilibili-fill" }),
+    insertNode: (editor, result) => {
+        editor.dispatchCommand(INSERT_BILIBILI_COMMAND, {
+            id: result.id,
+            page: result.data.page,
+        });
+    },
+    keywords: ['bilibili', 'video'],
+    // Determine if a given URL is a match and return url data.
+    parseUrl: wrap((url) => {
+        const match = /^https?:\/\/(?:www\.)?bilibili\.(?:com|tv)\/(?:video\/)?([BV][A-Za-z0-9]{10,})/.exec(url);
+        const id = match?.[1];
+        if (id) {
+            return {
+                id,
+                url,
+                data: { page: parsePage(url) },
+            };
+        }
+        return null;
+    }, 'bilibili-video'),
+    type: 'bilibili-video',
+};

package/lib/ext/BilibiliPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
+import { BilibiliVideoPayload } from './BilibiliNode';
+export declare const INSERT_BILIBILI_COMMAND: LexicalCommand<BilibiliVideoPayload>;
+export default function BilibiliPlugin(): JSX.Element | null;

package/lib/ext/BilibiliPlugin/index.js

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { $createBilibiliNode, BilibiliNode } from './BilibiliNode';
+export const INSERT_BILIBILI_COMMAND = createCommand('INSERT_BILIBILI_COMMAND');
+export default function BilibiliPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([BilibiliNode])) {
+            throw new Error('BilibiliPlugin: BilibiliNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_BILIBILI_COMMAND, (payload) => {
+            const bilibiliNode = $createBilibiliNode(payload);
+            $insertNodeToNearestRoot(bilibiliNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/ext/BlockletEmbedPlugin/BlockletEmbed.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+declare function BlockletEmbed({ title, url, originalUrl }: {
+    title: string;
+    url: string;
+    originalUrl: string;
+}): JSX.Element;
+export default BlockletEmbed;

package/lib/ext/BlockletEmbedPlugin/BlockletEmbed.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useReactive, useTimeout } from 'ahooks';
+import { Box, CircularProgress, IconButton } from '@mui/material';
+import CachedIcon from '@mui/icons-material/Cached';
+import WarningTwoToneIcon from '@mui/icons-material/WarningTwoTone';
+// @ts-ignore
+import { EmbedIframe } from '@blocklet/embed/react';
+const getHost = (url) => {
+    try {
+        return new URL(url).host;
+    }
+    catch (e) {
+        return url;
+    }
+};
+const timeout = 8000;
+function BlockletEmbed({ title, url, originalUrl }) {
+    const id = `embed_${useId()}`;
+    const state = useReactive({
+        loading: true,
+        error: '',
+    });
+    const [delay, setDelay] = useState(timeout);
+    useTimeout(() => {
+        if (state.loading) {
+            state.error = 'Timeout';
+            setDelay(undefined);
+        }
+    }, delay);
+    const handleLoadIframe = () => {
+        state.loading = false;
+        // 取消 timeout
+        setDelay(undefined);
+    };
+    const reload = (e) => {
+        e.stopPropagation();
+        state.error = '';
+        setDelay(timeout);
+    };
+    return (_jsxs(Box, { sx: { display: 'inline-block', width: '100%', my: 1 }, children: [(state.loading || state.error) && (_jsxs(Box, { onClick: () => window.open(originalUrl, '_blank'), sx: {
+                    position: 'relative',
+                    p: 2,
+                    border: '1px solid rgba(55, 53, 47, 0.16)',
+                    borderRadius: '4px',
+                    color: 'grey.700',
+                    cursor: 'pointer',
+                    ':hover': { bgcolor: 'grey.50' },
+                }, children: [state.loading && !state.error && (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(CircularProgress, { size: 14, sx: { color: 'grey.400' } }), _jsx("span", { children: "Discovering" })] }), _jsx(Box, { sx: { mt: 0.5, fontSize: 12 }, children: originalUrl })] })), state.error && (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(WarningTwoToneIcon, { sx: { color: 'warning.light' } }), _jsx(Box, { children: getHost(originalUrl) })] }), _jsx(Box, { sx: { mt: 0.5, fontSize: 12 }, children: originalUrl }), _jsx(Box, { sx: { position: 'absolute', right: 8, top: 8 }, children: _jsx(IconButton, { size: "small", sx: { borderRadius: 2 }, onClick: reload, children: _jsx(CachedIcon, {}) }) })] }))] })), !state.error && _jsx(EmbedIframe, { embedId: id, src: url, onLoad: handleLoadIframe, height: "100%" })] }));
+}
+export default BlockletEmbed;