@blocklet/editor 1.6.233 → 1.6.234

package/lib/config.js

@@ -1,20 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import memoize from 'lodash/memoize';
 import { createContext, useContext, useMemo } from 'react';
 const EditorConfigContext = createContext({});
 export function EditorConfigProvider({ children, value }) {
+    const parentCtx = useContext(EditorConfigContext);
     const _value = useMemo(() => {
-        const result = { ...value };
-        if (result.AI) {
-            result.AI.fetchTemplateTags = result.AI.fetchTemplateTags ? memoize(result.AI.fetchTemplateTags) : undefined;
-            // 注意 memoize 默认以首个参数作为 cache key, 两个属性值相同但引用不同的 object 会被认为是不同的 key
-            result.AI.fetchTemplates = result.AI.fetchTemplates
-                ? memoize(result.AI.fetchTemplates, (arg) => JSON.stringify(arg))
-                : undefined;
-            result.AI.checkAvailable = memoize(result.AI.checkAvailable);
-        }
+        const result = { ...parentCtx, ...value };
         return result;
-    }, [value]);
+    }, [value, parentCtx]);
     return _jsx(EditorConfigContext.Provider, { value: _value, children: children });
 }
 export const useEditorConfig = () => useContext(EditorConfigContext);

package/lib/ext/AIPlugin/index.js

@@ -189,7 +189,7 @@ export default function AidePluginWrapper() {
         const _copy = (output) => {
             copy(output);
         };
-        return (_jsx(AideProvider, { checkAvailable: AI.checkAvailable, fetchTemplateTags: AI.fetchTemplateTags, fetchTemplates: AI.fetchTemplates, completions: AI.completions, replaceSelection: _replaceSelection, copy: _copy, insertBelow: _insertBelow, children: _jsx(AidePlugin, {}) }));
+        return (_jsx(AideProvider, { checkAvailable: AI.checkAvailable, completions: AI.completions, replaceSelection: _replaceSelection, copy: _copy, insertBelow: _insertBelow, children: _jsx(AidePlugin, {}) }));
     }
     return null;
 }

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

@@ -1,10 +1,8 @@
 import { ReactNode } from 'react';
-import type { Completions, FetchTemplates, FetchTemplatesRequest, FetchTemplateTags, Mode, ParameterizedTemplate, ParameterizedTemplateCompletionsPayload, Status } from './types';
+import type { Completions, FetchTemplatesRequest, Mode, ParameterizedTemplate, ParameterizedTemplateCompletionsPayload, Status } from './types';
 import { Template } from './types';
 interface AideProviderProps {
     children: ReactNode;
-    fetchTemplateTags?: FetchTemplateTags;
-    fetchTemplates?: FetchTemplates;
     completions: Completions;
     checkAvailable: () => Promise<boolean> | boolean;
     replaceSelection?: (selection: any, output: string) => void;
@@ -46,5 +44,5 @@ interface AideContextType extends AideContextState, Pick<AideProviderProps, 'rep
 }
 export declare const AideContext: import("react").Context<AideContextType>;
 export declare const useAideContext: () => AideContextType;
-export declare function AideProvider({ checkAvailable, fetchTemplateTags, fetchTemplates, completions, replaceSelection, insertBelow, copy, children, }: AideProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AideProvider({ checkAvailable, completions, replaceSelection, insertBelow, copy, children, }: AideProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/ext/Aide/context.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { useGetState } from 'ahooks';
+import { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { useGetState, useRequest } from 'ahooks';
 import builtinTemplates from './builtin-templates';
 import { Template } from './types';
 export const AideContext = createContext({});
 export const useAideContext = () => useContext(AideContext);
-export function AideProvider({ checkAvailable, fetchTemplateTags, fetchTemplates, completions, replaceSelection, insertBelow, copy, children, }) {
+export function AideProvider({ checkAvailable, completions, replaceSelection, insertBelow, copy, children, }) {
     const [state, setState, getState] = useGetState({
         available: false,
         templates: builtinTemplates,
@@ -39,60 +39,12 @@ export function AideProvider({ checkAvailable, fetchTemplateTags, fetchTemplates
             ...params,
         }));
     };
-    const loadMoreTemplates = async (params = {}) => {
-        if (fetchTemplates) {
-            try {
-                setState((prev) => ({ ...prev, externalTemplates: { ...prev.externalTemplates, loading: true } }));
-                const { offset = state.externalTemplates.templates.length, limit = 20, tag } = params;
-                const result = await fetchTemplates({ offset, limit: limit + 1, tag });
-                if (result.length > 0) {
-                    const hasMore = result.length === limit + 1;
-                    const templates = hasMore ? result.slice(0, -1) : result;
-                    setState((prev) => ({
-                        ...prev,
-                        externalTemplates: {
-                            ...prev.externalTemplates,
-                            templates: offset === 0 ? templates : [...prev.externalTemplates.templates, ...templates],
-                            hasMore,
-                            tag,
-                            loading: false,
-                        },
-                    }));
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-        }
-    };
-    useEffect(() => {
-        const init = async () => {
-            const available = await checkAvailable();
-            if (available) {
-                setState((prev) => ({ ...prev, available }));
-                // load templates & tags
-                const loadTemplateTags = async () => {
-                    if (fetchTemplateTags) {
-                        try {
-                            const tags = await fetchTemplateTags();
-                            setState((prev) => ({
-                                ...prev,
-                                externalTemplates: {
-                                    ...prev.externalTemplates,
-                                    tags,
-                                },
-                            }));
-                        }
-                        catch (e) {
-                            console.error(e);
-                        }
-                    }
-                };
-                await Promise.all([loadTemplateTags(), loadMoreTemplates()]);
-            }
-        };
-        init();
-    }, []);
+    // @deprecated
+    const loadMoreTemplates = async () => { };
+    useRequest(async () => {
+        const available = await checkAvailable();
+        setState((prev) => ({ ...prev, available }));
+    }, { cacheKey: 'editor-aide-available' });
     const activateAI = useCallback(
     // eslint-disable-next-line require-await
     async ({ mode = 'normal', selectionText, selection }) => {

package/lib/ext/Alert/AlertNode.js

@@ -86,7 +86,7 @@ export class AlertNode extends DecoratorBlockNode {
             editor.update(() => {
                 this.setText(text);
                 if (selection) {
-                    $setSelection(selection);
+                    $setSelection(selection.clone());
                 }
             });
         };

package/lib/ext/ContentLocale.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+interface ContextType {
+    locale: string;
+}
+export declare const useContentLocale: () => string;
+export declare const ContentLocaleProvider: ({ locale, children }: PropsWithChildren & ContextType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/ContentLocale.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { createContext, useContext, useMemo } from 'react';
+const ContentLocaleContext = createContext(null);
+// 该 hook 关注 editor content 的 locale, 区别于 LocaleContext
+// (编辑 post 翻译版本时, 会切换 ContentLocaleContext)
+export const useContentLocale = () => {
+    const { locale: contextLocale } = useLocaleContext();
+    const ctx = useContext(ContentLocaleContext);
+    return ctx?.locale || contextLocale;
+};
+export const ContentLocaleProvider = ({ locale, children }) => {
+    const value = useMemo(() => ({ locale }), [locale]);
+    return _jsx(ContentLocaleContext.Provider, { value: value, children: children });
+};

package/lib/ext/PagesKitComponent/PagesKitComponentNode.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { Properties } from './utils';
+export interface ComponentData {
+    id: string;
+    name: string;
+    properties?: Properties;
+}
+export type SerializedPagesKitComponentNode = Spread<{
+    data: ComponentData;
+    type: 'pages-kit-component';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class PagesKitComponentNode extends DecoratorBlockNode {
+    __data: ComponentData;
+    static getType(): string;
+    static clone(node: PagesKitComponentNode): PagesKitComponentNode;
+    static importJSON(serializedNode: SerializedPagesKitComponentNode): PagesKitComponentNode;
+    exportJSON(): SerializedPagesKitComponentNode;
+    constructor(data: ComponentData, format?: ElementFormatType, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(): false;
+    getId(): string;
+    setProperties(properties: any): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createPagesKitComponentNode(data: ComponentData): PagesKitComponentNode;
+export declare function $isPagesKitComponentNode(node: PagesKitComponentNode | LexicalNode | null | undefined): node is PagesKitComponentNode;

package/lib/ext/PagesKitComponent/PagesKitComponentNode.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { PagesKitComponentRenderer } from './PagesKitComponentRenderer';
+function PagesKitComponent({ className, format, nodeKey, data, onPropertiesChange }) {
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(PagesKitComponentRenderer, { id: data.id, name: data.name, properties: data.properties, onPropertiesChange: onPropertiesChange }) }));
+}
+function convertPagesKitComponentElement(domNode) {
+    const pagesKitComponentStr = domNode.getAttribute('data-lexical-pages-kit-component');
+    try {
+        const parsed = JSON.parse(pagesKitComponentStr);
+        if (parsed) {
+            const node = $createPagesKitComponentNode(parsed);
+            return { node };
+        }
+    }
+    catch (e) {
+        console.warn(`Failed to parse: ${pagesKitComponentStr}`, e);
+    }
+    return null;
+}
+export class PagesKitComponentNode extends DecoratorBlockNode {
+    __data;
+    static getType() {
+        return 'pages-kit-component';
+    }
+    static clone(node) {
+        return new PagesKitComponentNode({ ...node.__data }, node.__format, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createPagesKitComponentNode(serializedNode.data);
+        node.setFormat(serializedNode.format);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'pages-kit-component',
+            version: 1,
+            data: this.__data,
+        };
+    }
+    constructor(data, format, key) {
+        super(format, key);
+        this.__data = data;
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        element.setAttribute('data-lexical-pages-kit-component', JSON.stringify(this.__data));
+        return { element };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-pages-kit-component')) {
+                    return null;
+                }
+                return {
+                    conversion: convertPagesKitComponentElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    updateDOM() {
+        return false;
+    }
+    getId() {
+        return this.__data.id;
+    }
+    setProperties(properties) {
+        const writable = this.getWritable();
+        writable.__data = { ...writable.__data, properties };
+    }
+    decorate(editor, config) {
+        const embedBlockTheme = config.theme.embedBlock || {};
+        const className = {
+            base: embedBlockTheme.base || '',
+            focus: embedBlockTheme.focus || '',
+        };
+        return (_jsx(PagesKitComponent, { className: className, format: this.__format, nodeKey: this.getKey(), data: this.__data, onPropertiesChange: (props) => {
+                editor.update(() => {
+                    this.setProperties(props);
+                });
+            } }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createPagesKitComponentNode(data) {
+    return new PagesKitComponentNode(data);
+}
+export function $isPagesKitComponentNode(node) {
+    return node instanceof PagesKitComponentNode;
+}

package/lib/ext/PagesKitComponent/PagesKitComponentPlugin.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { LexicalCommand } from 'lexical';
+type CommandPayload = {
+    id: string;
+    name: string;
+};
+export declare const INSERT_PAGES_KIT_COMPONENT_COMMAND: LexicalCommand<CommandPayload>;
+export declare function PagesKitComponentPlugin(): JSX.Element | null;
+export declare function usePagesKitComponents(): {
+    pagesKitComponents: {
+        id: string;
+        name: string;
+        properties?: {
+            [key: string]: any;
+        } | undefined;
+    }[];
+};
+export {};

package/lib/ext/PagesKitComponent/PagesKitComponentPlugin.js

@@ -0,0 +1,38 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { useRequest } from 'ahooks';
+import { joinURL } from 'ufo';
+import { $createPagesKitComponentNode, PagesKitComponentNode } from './PagesKitComponentNode';
+import { getBlockletMountPointInfo, isBlockletRunning } from '../utils';
+import { mode } from './utils';
+export const INSERT_PAGES_KIT_COMPONENT_COMMAND = createCommand('INSERT_PAGES_KIT_COMPONENT_COMMAND');
+export function PagesKitComponentPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([PagesKitComponentNode])) {
+            throw new Error('PagesKitComponentPlugin: PagesKitComponentNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_PAGES_KIT_COMPONENT_COMMAND, (payload) => {
+            const node = $createPagesKitComponentNode(payload);
+            $insertNodeToNearestRoot(node);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}
+export function usePagesKitComponents() {
+    const { data: pagesKitComponents = [] } = useRequest(() => {
+        if (!isBlockletRunning('pages-kit')) {
+            return Promise.resolve([]);
+        }
+        return fetch(joinURL(getBlockletMountPointInfo('pages-kit').mountPoint || '/', `/api/components?mode=${mode}`))
+            .then((res) => res.json())
+            .then((res) => res?.components || [])
+            .catch((res) => []);
+    }, {
+        cacheKey: 'editor-pages-kit-components',
+    });
+    return { pagesKitComponents };
+}

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.d.ts

@@ -0,0 +1,9 @@
+import { type Properties } from './utils';
+type PagesKitComponentProps = {
+    id: string;
+    name: string;
+    properties?: Properties;
+    onPropertiesChange: (properties: Properties) => void;
+};
+export declare function PagesKitComponentRenderer({ id, name, properties, onPropertiesChange }: PagesKitComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Box, Button, Divider, IconButton, Popover, useMediaQuery } from '@mui/material';
+import { useEffect, useState } from 'react';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
+import { isBlockletRunning } from '../utils';
+import { mode, isValidPropertyType, getLocalizedValue, getPropertyLabel } from './utils';
+import { PropertyField } from './PropertyField';
+import { useContentLocale } from '../ContentLocale';
+export function PagesKitComponentRenderer({ id, name, properties, onPropertiesChange }) {
+    const locale = useContentLocale();
+    const [editor] = useLexicalComposerContext();
+    const isEditable = editor.isEditable();
+    const [loading, setLoading] = useState(true);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const upMd = useMediaQuery((theme) => theme.breakpoints.up('md'));
+    const [pendingProperties, setPendingProperties] = useState(properties || {});
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleCancel = () => {
+        setAnchorEl(null);
+        setPendingProperties(properties || {});
+    };
+    const handleSave = () => {
+        onPropertiesChange(pendingProperties);
+        setAnchorEl(null);
+    };
+    useEffect(() => {
+        const load = async () => {
+            const state = customComponentStates.getState();
+            await state.loadComponents({
+                mode,
+                locale,
+                instances: [{ id, component: { name } }],
+            });
+            setLoading(false);
+        };
+        if (isBlockletRunning('pages-kit')) {
+            load();
+        }
+    }, [id, name]);
+    const component = customComponentStates.getState()?.state?.components?.[id]?.component;
+    if (loading || !component) {
+        return null;
+    }
+    // 暂时仅支持基础类型的组件参数配置
+    const propDefinitions = Object.values(component.properties || {})
+        .map((x) => x.data)
+        .filter((x) => !!x.key && isValidPropertyType(x.type));
+    return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [_jsx(CustomComponentRenderer, { componentId: id, locale: locale, dev: { mode }, props: properties?.[locale] }), isEditable && !!propDefinitions.length && upMd && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }, children: _jsxs(Box, { sx: { width: 440, maxHeight: 500, p: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 0.5,
+                                            color: 'text.secondary',
+                                            fontSize: 14,
+                                            fontWeight: 600,
+                                        }, children: [_jsx(Box, { component: "span", className: "iconify", "data-icon": "tabler:settings-2", sx: { fontSize: 20 } }), _jsx("span", { children: "Properties" })] }) }), _jsx(Divider, { sx: { mt: 0.75, mb: 2 } }), propDefinitions.map((x) => {
+                                    // @ts-ignore
+                                    const multiline = !!x.multiline;
+                                    return (_jsx(Box, { sx: { mt: 2 }, children: _jsx(PropertyField, { label: getPropertyLabel({ locale, locales: x.locales }), type: x.type, value: pendingProperties[locale]?.[x.key] ||
+                                                getLocalizedValue({ key: 'defaultValue', locale, data: x.locales }), onChange: (v) => setPendingProperties({
+                                                ...pendingProperties,
+                                                [locale]: { ...pendingProperties[locale], [x.key]: v },
+                                            }), multiline: multiline }) }, x.key));
+                                }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, py: 2 }, children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] }) })] }))] }));
+}

package/lib/ext/PagesKitComponent/PropertyField.d.ts

@@ -0,0 +1,13 @@
+import { type PropertyType } from './utils';
+interface PropertyFieldProps {
+    type?: PropertyType;
+    multiline?: boolean;
+    label: string;
+    value: any;
+    onChange: (value: any) => void;
+}
+export declare function UploaderButton({ onChange }: {
+    onChange?: Function;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyField({ type, multiline, label, value, onChange, ...rest }: PropertyFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/PagesKitComponent/PropertyField.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel, IconButton, InputAdornment, Switch, TextField } from '@mui/material';
+import UploadIcon from '@mui/icons-material/Upload';
+function getVideoSize(url) {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video');
+        video.src = url;
+        video.onloadedmetadata = () => {
+            const { videoWidth: naturalWidth, videoHeight: naturalHeight } = video;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        video.onerror = (e) => reject(e);
+    });
+}
+function getImageSize(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+        img.onload = () => {
+            const { naturalWidth, naturalHeight } = img;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        img.onerror = (e) => reject(e);
+    });
+}
+export function UploaderButton({ onChange }) {
+    const handleOpen = () => {
+        // @ts-ignore
+        const uploader = uploaderRef?.current?.getUploader();
+        uploader?.open();
+        if (onChange) {
+            // rewrite default emitter
+            uploader.onceUploadSuccess((...args) => {
+                onChange(...args);
+            });
+        }
+    };
+    return (_jsx(IconButton, { size: "small", onClick: handleOpen, children: _jsx(UploadIcon, {}) }, "uploader-trigger"));
+}
+export function PropertyField({ type, multiline, label, value, onChange, ...rest }) {
+    if (type === 'boolean') {
+        return (_jsx(FormControlLabel, { sx: { display: 'inline-flex', m: 0 }, label: label, labelPlacement: "start", control: _jsx(Switch, { checked: value === true, onChange: (_, checked) => onChange?.(checked) }) }));
+    }
+    if (type === 'number') {
+        return (_jsx(TextField, { type: "number", size: "small", sx: { width: 1 }, label: label, value: value, onChange: (e) => onChange(e.target.value), ...rest }));
+    }
+    if (type === 'url') {
+        return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value.url, onChange: (e) => onChange(e.target.value), InputProps: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(UploaderButton, { onChange: async ({ response }) => {
+                            const url = response?.data?.url || response?.data?.fileUrl;
+                            let size;
+                            if (url) {
+                                size = await getImageSize(url)
+                                    .catch(() => getVideoSize(url))
+                                    .catch(() => undefined);
+                            }
+                            onChange?.({ url, width: size?.naturalWidth, height: size?.naturalHeight });
+                        } }) })),
+            }, ...rest }));
+    }
+    return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => onChange(e.target.value), ...((multiline || type === 'json') && {
+            multiline: true,
+            rows: 2,
+        }), ...rest }));
+}

package/lib/ext/PagesKitComponent/utils.d.ts

@@ -0,0 +1,25 @@
+export declare const mode: string;
+export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url"];
+export type PropertyType = typeof propertyTypes[number];
+export type Properties = {
+    [locale: string]: {
+        [key: string]: any;
+    };
+};
+export declare const isValidPropertyType: (type: string | null | undefined) => boolean;
+type Locales = {
+    [locale: string]: {
+        name?: string;
+        defaultValue?: any;
+    };
+};
+export declare const getLocalizedValue: ({ key, locale, data }: {
+    key: string;
+    locale: string;
+    data?: Properties | undefined;
+}) => any;
+export declare const getPropertyLabel: ({ locale, locales }: {
+    locale: string;
+    locales?: Locales | undefined;
+}) => string;
+export {};

package/lib/ext/PagesKitComponent/utils.js

@@ -0,0 +1,16 @@
+export const mode = process.env.NODE_ENV === 'development' ? 'draft' : 'production';
+export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url'];
+export const isValidPropertyType = (type) => {
+    return !type || propertyTypes.includes(type);
+};
+// 依次尝试取值
+// - `data[locale][key]`
+// - `data.en[key]`
+// - 遍历所有 locale 取第一个有值的 `data[locale][key]`
+export const getLocalizedValue = ({ key, locale, data }) => {
+    data = data || {};
+    return data[locale]?.[key] || data.en?.[key] || Object.values(data).find((x) => x?.[key])?.[key] || '';
+};
+export const getPropertyLabel = ({ locale, locales }) => {
+    return getLocalizedValue({ key: 'name', locale, data: locales });
+};

package/lib/ext/SubpageListingPlugin/SubpageListingComponent.js

@@ -50,7 +50,7 @@ export default function SubpageListingComponent({ docPostId, mode, onModeChange,
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: 200 }, children: _jsx(CircularProgress, {}) }));
     }
-    return (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', position: 'relative', mx: -1 }, children: [isEmpty && (_jsx(Box, { sx: { width: 1, px: 1 }, children: _jsx(Alert, { severity: "info", sx: {}, children: "No subpages" }) })), isEditable && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
+    return (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', position: 'relative', mx: -1, ...(isEditable && { mt: 2 }) }, children: [isEmpty && (_jsx(Box, { sx: { width: 1, px: 1 }, children: _jsx(Alert, { severity: "info", sx: {}, children: "No subpages" }) })), isEditable && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right',
                         }, transformOrigin: {

package/lib/ext/utils.d.ts

@@ -17,3 +17,4 @@ export declare const sleep: (ms: number) => Promise<unknown>;
 export declare const minDelay: <T>(promise: Promise<T>, ms: number) => Promise<T>;
 export declare function exhaustiveGuard(_value: never): never;
 export declare const isSameHost: (url: string | URL) => boolean;
+export declare const isBlockletRunning: (name: string) => boolean;

package/lib/ext/utils.js

@@ -86,3 +86,6 @@ export const isSameHost = (url) => {
         return false;
     }
 };
+export const isBlockletRunning = (name) => {
+    return getBlockletMountPointInfo(name)?.status === 'running';
+};

package/lib/main/editor.js

@@ -82,6 +82,7 @@ import { PdfPlugin } from '../ext/PdfPlugin';
 import { BlurTextPlugin } from '../ext/BlurTextPlugin';
 import { useResponsiveTable } from './hooks/useResponsiveTable';
 import { useTranslationListener } from './hooks/useTranslationListener';
+import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
 export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -109,7 +110,7 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
             console.warn('You need to configure uploader to use ImagesPlugin');
         }
     }, [hasNodes('image'), hasUploader]);
-    return (_jsxs(_Fragment, { children: [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, {}), _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('keyword') && _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { 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 })), 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('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('equation') && _jsx(EquationsPlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), _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 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [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, {}), _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('keyword') && _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { 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 })), 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('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('equation') && _jsx(EquationsPlugin, {}), 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 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }
 const EditorContent = styled.div `
   position: relative;

package/lib/main/nodes/PlaygroundNodes.js

@@ -37,6 +37,7 @@ import { AlertNode } from '../../ext/Alert/AlertNode';
 import { VideoNode } from '../../ext/VideoPlugin';
 import { PdfNode } from '../../ext/PdfPlugin';
 import { SubpageListingNode } from '../../ext/SubpageListingPlugin/SubpageListingNode';
+import { PagesKitComponentNode } from '../../ext/PagesKitComponent/PagesKitComponentNode';
 const PlaygroundNodes = [
     HeadingNode,
     ListNode,
@@ -76,5 +77,6 @@ const PlaygroundNodes = [
     AlertNode,
     PdfNode,
     SubpageListingNode,
+    PagesKitComponentNode,
 ];
 export default PlaygroundNodes;

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

@@ -18,6 +18,7 @@ import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, createCommand, $insertNodes, $createTextNode, COMMAND_PRIORITY_EDITOR, } from 'lexical';
 import { mergeRegister } from '@lexical/utils';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box } from '@mui/material';
 import { LexicalTypeaheadMenuPlugin, TypeaheadOption, useBasicTypeaheadTriggerMatch, } from '../LexicalTypeaheadMenuPlugin';
 import useHasNodes from '../../hooks/useHasNodes';
 import useModal from '../../hooks/useModal';
@@ -35,6 +36,7 @@ import { INSERT_VIDEO_COMMAND, isVideo } from '../../../ext/VideoPlugin';
 import { INSERT_TEMPLATE_COMMAND } from '../../../ext/TemplatePlugin';
 import { INSERT_PDF_COMMAND, isPdf } from '../../../ext/PdfPlugin';
 import { $insertSubpageListing } from '../../../ext/SubpageListingPlugin/SubpageListingPlugin';
+import { INSERT_PAGES_KIT_COMPONENT_COMMAND, usePagesKitComponents, } from '../../../ext/PagesKitComponent/PagesKitComponentPlugin';
 class ComponentPickerOption extends TypeaheadOption {
     // What shows up in the editor
     title;
@@ -68,6 +70,7 @@ export default function ComponentPickerMenuPlugin() {
     const [modal, showModal] = useModal();
     const [queryString, setQueryString] = useState(null);
     const config = useEditorConfig();
+    const { pagesKitComponents } = usePagesKitComponents();
     const hasUploader = !!config.uploader;
     const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
         minLength: 0,
@@ -290,6 +293,13 @@ export default function ComponentPickerMenuPlugin() {
                     keywords: ['subpage', 'doc', 'list'],
                     onSelect: () => $insertSubpageListing(editor, 'children'),
                 }),
+            ...pagesKitComponents
+                .filter((x) => !!x.name)
+                .map((x) => new ComponentPickerOption(`${x.name}`, {
+                icon: (_jsx(Box, { component: "span", sx: { display: 'inline-flex', width: 20, px: 0.25, mr: '1px', fontSize: 13 }, title: "Pages kit custom component", children: "\uD83E\uDDE9" })),
+                keywords: [x.name],
+                onSelect: () => editor.dispatchCommand(INSERT_PAGES_KIT_COMPONENT_COMMAND, { id: x.id, name: x.name }),
+            })),
         ].filter(Boolean);
         const dynamicOptions = getDynamicOptions();
         return queryString

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

@@ -25,8 +25,6 @@ import { sanitizeUrl } from '../../utils/sanitizeUrl';
 // import { InsertEquationDialog } from "../EquationsPlugin";
 // import { INSERT_EXCALIDRAW_COMMAND } from "../ExcalidrawPlugin";
 import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
-import { AideToolbarButton } from '../../../ext/AIPlugin';
-import { AITranslateToolbarButton } from '../../../ext/AITranslationPlugin';
 import { uploadFile, INSERT_COMPONENT_COMMAND } from '../ComponentPickerPlugin';
 // import { InsertNewTableDialog, InsertTableDialog } from "../TablePlugin";
 const blockTypeToBlockName = {
@@ -463,8 +461,6 @@ export default function ToolbarPlugin() {
     if (menus.length === 0) {
         return null;
     }
-    menus.push(_jsx(AideToolbarButton, {}, "aide"));
-    menus.push(_jsx(AITranslateToolbarButton, {}, "ai-translate"));
     return (_jsxs(Toolbar, { className: "toolbar", children: [menus, modal] }));
 }
 const Toolbar = styled.div `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.233",
+  "version": "1.6.234",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -39,7 +39,8 @@
   "dependencies": {
     "@arcblock/ux": "^2.9.75",
     "@blocklet/embed": "^0.1.11",
-    "@blocklet/pdf": "1.6.233",
+    "@blocklet/pages-kit": "^0.2.283",
+    "@blocklet/pdf": "1.6.234",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@lexical/clipboard": "0.13.1",
@@ -108,5 +109,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "f402f1a003e98d6db8526534c95e724d5f3dfdb2"
+  "gitHead": "630c1a20241c7d3d65d3f90f78b7858d2198b25d"
 }