@blocklet/editor 1.6.233 → 1.6.236

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/FilePlugin/FileNode.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export declare const getAbsoluteUrl: ({ fileUrl, name }: {
+    fileUrl: string;
+    name?: string | undefined;
+}) => string;
+export interface FilePayload {
+    key?: NodeKey;
+    src: string;
+    name?: string;
+    mimetype?: string;
+    width?: number | string;
+    height?: number | string;
+}
+export type SerializedFileNode = Spread<{
+    height?: number | string;
+    src: string;
+    name?: string;
+    mimetype?: string;
+    width?: number | string;
+}, SerializedLexicalNode>;
+export declare class FileNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __name?: string;
+    __mimetype?: string;
+    __width: 'inherit' | number | string;
+    __height: 'inherit' | number | string;
+    static getType(): string;
+    static clone(node: FileNode): FileNode;
+    static importJSON(serializedNode: SerializedFileNode): FileNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, name?: string, mimetype?: string, width?: 'inherit' | number | string, height?: 'inherit' | number | string, key?: NodeKey);
+    exportJSON(): SerializedFileNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    setSrc(src: string): void;
+    decorate(): JSX.Element;
+}
+export declare function $createFileNode({ height, src, name, mimetype, width, key }: FilePayload): FileNode;
+export declare function $isFileNode(node: LexicalNode | null | undefined): node is FileNode;

package/lib/ext/FilePlugin/FileNode.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip } from '@mui/material';
+import { useEffect, Suspense, useState } from 'react';
+import { Link } from 'react-router-dom';
+import joinURL from 'url-join';
+import { Icon } from '@iconify/react';
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+import mime from 'mime-types';
+import TablerFileIcon from '@iconify/icons-tabler/file';
+import { withQuery } from 'ufo';
+const iconSize = 80;
+const baseColor = 'primary.main';
+const FileComponent = ({ src, mimetype, name }) => {
+    const [ext, setExt] = useState('file');
+    useEffect(() => {
+        setExt(mime.extension(mimetype || '') || 'file');
+    }, [mimetype]);
+    return (_jsx(Tooltip, { title: name, placement: "top", children: _jsxs(Box, { component: Link, to: src, target: "_blank", sx: {
+                // remove a tag underline and color
+                color: baseColor,
+                textDecoration: 'none',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 1,
+                pt: 1.25,
+                mt: 1,
+                border: 2,
+                borderColor: baseColor,
+                borderRadius: 1,
+                transition: 'all 0.3s',
+                userSelect: 'none',
+                ':hover': {
+                    opacity: 0.75,
+                },
+            }, children: [_jsxs(Box, { sx: {
+                        position: 'relative',
+                        display: 'inline-flex',
+                    }, children: [_jsx(Icon, { icon: TablerFileIcon, style: { fontSize: iconSize } }), _jsx(Box, { sx: {
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                top: '50%',
+                                textAlign: 'center',
+                                margin: 'auto',
+                                fontWeight: 900,
+                                maxWidth: iconSize * 0.45,
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                fontSize: 14,
+                            }, children: ext })] }), _jsx(Box, { sx: {
+                        bgcolor: baseColor,
+                        color: 'white',
+                        px: 1,
+                        lineHeight: 2,
+                        fontSize: 13,
+                        maxWidth: iconSize * 1.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        display: 'inline-block',
+                        '@keyframes scroll': {
+                            '0%': {
+                                ml: 0,
+                                transform: 'translateX(0)',
+                            },
+                            '100%': {
+                                ml: '100%',
+                                transform: 'translateX(-100%)',
+                            },
+                        },
+                    }, children: _jsx(Box, { sx: {
+                            animation: 'scroll linear 5s alternate infinite',
+                            float: 'left',
+                        }, children: name }) })] }) }));
+};
+export const getAbsoluteUrl = ({ fileUrl, name }) => {
+    if (!fileUrl || typeof fileUrl !== 'string') {
+        return '';
+    }
+    if (/^https?:\/\//.test(fileUrl)) {
+        return withQuery(fileUrl, {
+            filename: name,
+        });
+    }
+    // @ts-ignore
+    const { componentMountPoints = [] } = window.blocklet;
+    const mediaKit = componentMountPoints.find((x) => x.did === 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9');
+    const realUrl = mediaKit ? joinURL(window.location.origin, mediaKit.mountPoint || '/', '/uploads', fileUrl) : fileUrl;
+    return withQuery(realUrl, {
+        filename: name,
+    });
+};
+function convertFileElement(domNode) {
+    if (domNode instanceof HTMLObjectElement) {
+        // @ts-ignore
+        const { data, width, height, type, alt } = domNode;
+        const node = $createFileNode({ height, width, src: data, mimetype: type, name: alt });
+        return { node };
+    }
+    return null;
+}
+export class FileNode extends DecoratorNode {
+    __src;
+    __name;
+    __mimetype;
+    __width;
+    __height;
+    static getType() {
+        return 'file';
+    }
+    static clone(node) {
+        return new FileNode(node.__src, node.__name, node.__mimetype, node.__width, node.__height, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { height, width, src, mimetype, name } = serializedNode;
+        const node = $createFileNode({
+            height,
+            src,
+            width,
+            mimetype,
+            name,
+        });
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('object');
+        element.setAttribute('data', this.__src);
+        element.setAttribute('width', this.__width.toString());
+        element.setAttribute('height', this.__height.toString());
+        element.setAttribute('type', this.__mimetype || 'image/png');
+        element.setAttribute('loading', 'lazy');
+        element.setAttribute('alt', this.__name || '');
+        return { element };
+    }
+    static importDOM() {
+        return {
+            object: (node) => ({
+                conversion: convertFileElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, name, mimetype, width, height, key) {
+        super(key);
+        this.__src = src;
+        this.__name = name;
+        this.__mimetype = mimetype;
+        this.__width = width || 'inherit';
+        this.__height = height || 'inherit';
+    }
+    exportJSON() {
+        return {
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            src: this.getSrc(),
+            type: 'file',
+            version: 1,
+            width: this.__width === 'inherit' ? 0 : this.__width,
+            name: this.__name,
+            mimetype: this.__mimetype,
+        };
+    }
+    setWidthAndHeight(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+    }
+    createDOM(config) {
+        const span = document.createElement('span');
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    setSrc(src) {
+        const writable = this.getWritable();
+        writable.__src = src;
+    }
+    decorate() {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(FileComponent, { src: getAbsoluteUrl({
+                    fileUrl: this.__src,
+                    name: this.__name,
+                }), mimetype: this.__mimetype, name: this.__name }) }));
+    }
+}
+export function $createFileNode({ height, src, name, mimetype, width, key }) {
+    return $applyNodeReplacement(new FileNode(src, name, mimetype, width, height, key));
+}
+export function $isFileNode(node) {
+    return node instanceof FileNode;
+}

package/lib/ext/FilePlugin/FilePlugin.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LexicalCommand } from 'lexical';
+import { FilePayload } from './FileNode';
+export type InsertFilePayload = Readonly<FilePayload>;
+export declare const INSERT_FILE_COMMAND: LexicalCommand<InsertFilePayload>;
+export declare function FilePlugin(): JSX.Element | null;
+export declare const isFile: (filename: string) => string | undefined;

package/lib/ext/FilePlugin/FilePlugin.js

@@ -0,0 +1,27 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useEffect } from 'react';
+import { $createFileNode, FileNode } from './FileNode';
+export const INSERT_FILE_COMMAND = createCommand('INSERT_FILE_COMMAND');
+export function FilePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([FileNode])) {
+            throw new Error('FilePlugin: FileNode not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(INSERT_FILE_COMMAND, (payload) => {
+            const fileNode = $createFileNode(payload);
+            $insertNodes([fileNode]);
+            if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) {
+                $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    return null;
+}
+export const isFile = (filename) => {
+    const ext = filename.split('.').pop();
+    return ext;
+};

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

@@ -0,0 +1,2 @@
+export * from './FilePlugin';
+export { FileNode } from './FileNode';

package/lib/ext/FilePlugin/index.js

@@ -0,0 +1,2 @@
+export * from './FilePlugin';
+export { FileNode } from './FileNode';

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 {};