@blocklet/editor 2.1.113 → 2.1.115

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

@@ -4,16 +4,6 @@ import type { TranslationBlock, NonTextNodeMatch, TranslateAPI, TranslationBlock
 export declare const defaultTranslateAPI: TranslateAPI;
 export declare function $copyNodeDeep<T extends LexicalNode>(node: T): T;
 export declare const insertNodesAfter: (node: LexicalNode, nodesToInsert: LexicalNode[]) => void;
-/**
- * 判断 node 是否是有效的 TextNode
- * - $isTextNode => true
- * - format 不是 code
- */
-export declare const $isValidTextNode: (node: LexicalNode) => boolean | "";
-/**
- * 判断一个 top level node 是否含有效的 TextNode 的 child
- */
-export declare const $hasValidTextNode: (elementNode: ElementNode) => boolean;
 /**
  * 遍历顶层结点，获取需要翻译的结点列表
  * - HeadingNode

package/lib/ext/AITranslationPlugin/utils.js

@@ -1,14 +1,13 @@
-import { $isParagraphNode, $isTextNode, $createTextNode, $getNodeByKey, $isElementNode, $copyNode, $createNodeSelection, } from 'lexical';
+import { $isParagraphNode, $createTextNode, $getNodeByKey, $isElementNode, $copyNode, } from 'lexical';
 import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
 import { $isListNode, $isListItemNode } from '@lexical/list';
 import { $dfs, $findMatchingParent } from '@lexical/utils';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { joinURL } from 'ufo';
 import { getCSRFToken } from '@blocklet/js-sdk';
-import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
 import { blockletExists, getBlockletMountPointInfo, isValidUrl } from '../utils';
 import { $getDepth } from '../../lexical-utils';
-import { $isMentionNode } from '../../main/nodes/MentionNode';
+import { $htmlToNodes, $nodeToHtml, $hasValidTextNode, $isValidTextNode } from '../translation/translation-utils';
 const REGEX_INVALID_SEQUENCE = /^[#$%^&*()_+\-=\\[\]{};':"\\|,.<>/?]+$/;
 export const defaultTranslateAPI = async ({ texts, sourceLanguage, targetLanguage }, onData) => {
     if (!blockletExists('did-comments')) {
@@ -79,20 +78,6 @@ export const insertNodesAfter = (node, nodesToInsert) => {
         currentNode = item;
     });
 };
-/**
- * 判断 node 是否是有效的 TextNode
- * - $isTextNode => true
- * - format 不是 code
- */
-export const $isValidTextNode = (node) => {
-    return $isTextNode(node) && node.getTextContent().trim() && !$isMentionNode(node);
-};
-/**
- * 判断一个 top level node 是否含有效的 TextNode 的 child
- */
-export const $hasValidTextNode = (elementNode) => {
-    return elementNode.getChildren().some($isValidTextNode);
-};
 /**
  * 遍历顶层结点，获取需要翻译的结点列表
  * - HeadingNode
@@ -143,16 +128,6 @@ export const $extractTextContentFromTranslationNode = (translationNode, selected
     });
     return text;
 };
-const $nodeToHtml = (editor, node) => {
-    const selection = $createNodeSelection();
-    const children = node.getChildren();
-    // 剔除嵌套 list 节点
-    children
-        .filter((x) => !$isListNode(x))
-        .forEach((child) => $dfs(child).forEach((x) => selection.add(x.node.getKey())));
-    const html = $generateHtmlFromNodes(editor, selection);
-    return html;
-};
 // translation nodes => translation blocks (若未传入 nodes, 默认为 editor 内所有的顶层结点)
 export const $extractTranslationBlocks = (editor, translationNodes) => {
     const _translationNodes = translationNodes ||
@@ -215,16 +190,6 @@ export const matchNonTextNodes = (text) => {
     }
     return matches;
 };
-function $htmlToNodes(editor, text) {
-    try {
-        const dom = new DOMParser().parseFromString(text, 'text/html');
-        return $generateNodesFromDOM(editor, dom);
-    }
-    catch (e) {
-        console.error(e, text);
-        return [$createTextNode(text)];
-    }
-}
 export const $replaceTranslation = (translationBlock, editor) => {
     try {
         const { text, key } = translationBlock;

package/lib/ext/InlineTranslationPlugin/EditorTranslator.d.ts

@@ -0,0 +1,36 @@
+import { LexicalEditor } from 'lexical';
+import { DisplayMode } from './types';
+export interface TranslateItem {
+    sid: string;
+    text: string;
+}
+export type TranslateService = ({ sourceItems, targetLanguage, useCache, }: {
+    sourceItems: TranslateItem[];
+    targetLanguage: string;
+    useCache?: boolean;
+}) => Promise<TranslateItem[]>;
+export interface EditorTranslatorOptions {
+    displayMode: DisplayMode;
+}
+export declare class EditorTranslator {
+    private editor;
+    private options;
+    private originalEditorState;
+    private nodeKeyToSidMap;
+    private sidToNodeKeyMap;
+    private translations;
+    constructor(editor: LexicalEditor, options: EditorTranslatorOptions);
+    get isTranslated(): boolean;
+    setEditor(editor: LexicalEditor): void;
+    updateOptions(options: EditorTranslatorOptions): void;
+    updateDisplayMode(): void;
+    translate({ targetLanguage, translateService, detectLanguage, useCache, }: {
+        targetLanguage: string;
+        translateService: TranslateService;
+        detectLanguage: (text: string) => string | null;
+        useCache?: boolean;
+    }): Promise<void>;
+    applyTranslations(): void;
+    restore(sid?: string): void;
+}
+export declare function useEditorTranslator(options: EditorTranslatorOptions): EditorTranslator;

package/lib/ext/InlineTranslationPlugin/EditorTranslator.js

@@ -0,0 +1,143 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey } from 'lexical';
+import { useRef, useEffect } from 'react';
+import { $createNodeKeyToSidMap, $createSidToNodeKeyMap, $nodeToHtml, $findTranslatableElementNodes, $htmlToNodes, } from '../translation/translation-utils';
+import { $createEmojiNode } from '../../main/nodes/EmojiNode';
+import { $createTranslationNode } from './TranslationNode';
+export class EditorTranslator {
+    editor;
+    options;
+    originalEditorState;
+    nodeKeyToSidMap;
+    sidToNodeKeyMap;
+    translations = [];
+    constructor(editor, options) {
+        this.editor = editor;
+        this.options = options;
+        this.originalEditorState = editor.getEditorState().clone();
+        this.nodeKeyToSidMap = this.editor.getEditorState().read(() => $createNodeKeyToSidMap());
+        this.sidToNodeKeyMap = this.editor.getEditorState().read(() => $createSidToNodeKeyMap());
+    }
+    get isTranslated() {
+        return this.translations.length > 0;
+    }
+    setEditor(editor) {
+        this.editor = editor;
+    }
+    updateOptions(options) {
+        const previousDisplayMode = this.options.displayMode;
+        this.options = options;
+        if (this.isTranslated && previousDisplayMode !== this.options.displayMode) {
+            this.updateDisplayMode();
+        }
+    }
+    updateDisplayMode() {
+        // Warning: flushSync was called from inside a lifecycle method
+        setTimeout(() => {
+            this.editor.setEditorState(this.originalEditorState);
+            this.applyTranslations();
+        }, 10);
+    }
+    async translate({ targetLanguage, translateService, detectLanguage, useCache, }) {
+        let nodes = [];
+        this.editor.update(() => {
+            nodes = $findTranslatableElementNodes()
+                .filter((node) => detectLanguage(node.getTextContent()) !== targetLanguage)
+                .map((node) => {
+                const html = $nodeToHtml(this.editor, node);
+                return { node, html };
+            });
+            nodes.forEach(({ node }) => {
+                node.append($createEmojiNode('global-loading', ''));
+            });
+        }, { discrete: true });
+        if (nodes.length === 0) {
+            return;
+        }
+        try {
+            this.translations = await translateService({
+                sourceItems: nodes.map(({ node, html }) => ({
+                    sid: this.nodeKeyToSidMap.get(node.getKey()),
+                    text: html,
+                })),
+                targetLanguage,
+                useCache,
+            });
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            nodes.forEach(({ node }, index) => {
+                this.editor.update(() => {
+                    const lastChild = node.getLastChild();
+                    if (lastChild) {
+                        lastChild.remove();
+                    }
+                });
+            });
+        }
+        if (this.isTranslated) {
+            this.applyTranslations();
+        }
+    }
+    applyTranslations() {
+        this.editor.update(() => {
+            this.translations.forEach(({ sid, text }) => {
+                try {
+                    const node = $getNodeByKey(this.sidToNodeKeyMap.get(sid));
+                    if (node) {
+                        const translationNode = $createTranslationNode({
+                            translatedNodes: $htmlToNodes(this.editor, text),
+                            data: { sid, displayMode: this.options.displayMode },
+                        });
+                        if (this.options.displayMode === 'inline') {
+                            node.append(translationNode);
+                        }
+                        else {
+                            node.append(translationNode, $createTranslationNode({
+                                translatedNodes: node.getChildren(),
+                                data: { sid, displayMode: this.options.displayMode },
+                            }) // 利用一个隐藏的 TranslationNode 来存储 original nodes, 用于单个结点恢复
+                            );
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error('Failed to apply translations to editor', e);
+                }
+            });
+        });
+    }
+    restore(sid) {
+        this.editor.update(() => {
+            if (!sid) {
+                this.editor.setEditorState(this.originalEditorState);
+            }
+            else if (this.options.displayMode === 'translationOnly') {
+                const nodeKey = this.sidToNodeKeyMap.get(sid);
+                if (!nodeKey) {
+                    return;
+                }
+                // TranslationNode 容器结点
+                const node = $getNodeByKey(nodeKey);
+                if (node && node.getChildren().length === 2) {
+                    const firstTranslationNode = node.getFirstChild();
+                    const secondTranslationNode = node.getLastChild();
+                    node.append(secondTranslationNode, firstTranslationNode);
+                }
+            }
+        });
+    }
+}
+export function useEditorTranslator(options) {
+    const [editor] = useLexicalComposerContext();
+    const ref = useRef(new EditorTranslator(editor, options));
+    useEffect(() => {
+        ref.current.setEditor(editor);
+    }, [editor]);
+    useEffect(() => {
+        ref.current.updateOptions(options);
+    }, [...Object.values(options)]);
+    return ref.current;
+}

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.d.ts

@@ -1,4 +1,4 @@
-import { TranslateService } from './utils';
+import { TranslateService } from './EditorTranslator';
 interface Props {
     translateService: TranslateService;
     detectLanguage: (text: string) => string | null;

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -1,34 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { useInViewport } from 'ahooks';
-import { applyTranslations, translateEditorNodes } from './utils';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useInlineTranslationStore, useStatus, useTargetLanguage } from './store';
-// 原始 editor 状态, 用于恢复
-const originalEditorStates = {};
+import { useEditorTranslator } from './EditorTranslator';
+import { NODE_TYPE } from './TranslationNode';
+const translations = {
+    en: 'AI-Translated Content',
+    zh: 'AI 翻译内容',
+};
 function InternalInlineTranslationPlugin({ translateService, detectLanguage, onTranslate, onRestore }) {
     const [editor] = useLexicalComposerContext();
     const [inViewport] = useInViewport(editor.getRootElement());
     const setStatus = useInlineTranslationStore((s) => s.setStatus);
     const registerEditor = useInlineTranslationStore((s) => s.registerEditor);
     const displayMode = useInlineTranslationStore((s) => s.displayMode);
+    const useCache = useInlineTranslationStore((s) => s.editorTranslateStates.get(editor)?.useCache);
     const targetLanguage = useTargetLanguage();
     const status = useStatus(editor);
-    const translationsRef = useRef(null);
+    const editorTranslator = useEditorTranslator({ displayMode });
+    const hoveringTranslationElementRef = useHoveringTranslationElement();
+    const { locale } = useLocaleContext();
     const handleTranslate = async () => {
         try {
             setStatus(editor, 'processing');
             onTranslate?.({ targetLanguage });
-            originalEditorStates[editor.getKey()] = editor.getEditorState();
-            const translations = await translateEditorNodes({
-                editor,
+            await editorTranslator.translate({
                 translateService,
                 targetLanguage,
                 detectLanguage,
-                displayMode,
+                useCache,
             });
-            translationsRef.current = translations ?? null;
             setStatus(editor, 'completed');
         }
         catch (err) {
@@ -36,22 +40,13 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage, onT
         }
     };
     const handleRestore = () => {
-        if (originalEditorStates[editor.getKey()]) {
-            onRestore?.();
-            editor.setEditorState(originalEditorStates[editor.getKey()]);
-            delete originalEditorStates[editor.getKey()];
-        }
+        onRestore?.();
+        editorTranslator.restore();
         setStatus(editor, 'idle');
     };
     useEffect(() => {
         return registerEditor(editor);
     }, [editor]);
-    // 清理备份的 editor 状态
-    useEffect(() => {
-        return () => {
-            delete originalEditorStates[editor.getKey()];
-        };
-    }, [editor]);
     useEffect(() => {
         if (inViewport && status === 'pending') {
             handleTranslate();
@@ -63,18 +58,33 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage, onT
         }
     }, [editor, status]);
     useEffect(() => {
-        // Warning: flushSync was called from inside a lifecycle method
-        setTimeout(() => {
-            if (translationsRef.current && originalEditorStates[editor.getKey()]) {
-                editor.setEditorState(originalEditorStates[editor.getKey()]);
-                applyTranslations(editor, translationsRef.current, displayMode);
+        editorTranslator.updateOptions({ displayMode });
+    }, [editorTranslator, displayMode]);
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.ctrlKey && hoveringTranslationElementRef.current?.dataset?.sid) {
+                editorTranslator.restore(hoveringTranslationElementRef.current.dataset.sid);
             }
-        }, 0);
-    }, [displayMode]);
+        };
+        document.addEventListener('keydown', handler);
+        return () => {
+            document.removeEventListener('keydown', handler);
+        };
+    }, [editor, editorTranslator]);
     if (editor.isEditable()) {
         return null;
     }
-    return _jsx(Box, { sx: { position: 'absolute', top: 0, bottom: 0, left: 0, width: '1px' } });
+    return status === 'completed' ? (_jsx(Box, { sx: { mb: 0.5 }, children: _jsxs(Box, { sx: {
+                display: 'inline-block',
+                px: 1,
+                fontSize: 12,
+                fontWeight: 'medium',
+                color: 'text.secondary',
+                bgcolor: 'grey.50',
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 0.5,
+            }, children: ["\uD83E\uDD16 ", translations[locale] || translations.en] }) })) : (_jsx(Box, { sx: { position: 'absolute', top: 0, bottom: 0, left: 0, width: '1px' } }));
 }
 export function InlineTranslationPlugin(props) {
     const [editor] = useLexicalComposerContext();
@@ -83,3 +93,23 @@ export function InlineTranslationPlugin(props) {
     }
     return _jsx(InternalInlineTranslationPlugin, { ...props });
 }
+function useHoveringTranslationElement() {
+    const [editor] = useLexicalComposerContext();
+    const hoveringElementRef = useRef(null);
+    useEffect(() => {
+        const handler = (event) => {
+            const translationElement = event.target.closest(`.${NODE_TYPE}`);
+            if (translationElement && editor.getRootElement()?.contains(translationElement)) {
+                hoveringElementRef.current = translationElement;
+            }
+            else {
+                hoveringElementRef.current = null;
+            }
+        };
+        document.addEventListener('mouseover', handler);
+        return () => {
+            document.removeEventListener('mouseover', handler);
+        };
+    }, []);
+    return hoveringElementRef;
+}

package/lib/ext/InlineTranslationPlugin/TranslationNode.d.ts

@@ -1,29 +1,22 @@
-/// <reference types="react" />
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
-import { DecoratorNode } from 'lexical';
+import { EditorConfig, ElementNode, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DisplayMode } from './types';
-export interface TranslationPayload {
-    key?: NodeKey;
-    html: string;
+interface TranslationNodeProps {
+    sid: string;
     displayMode: DisplayMode;
 }
-export type SerializedTranslationNode = Spread<{
-    html: string;
-    displayMode: DisplayMode;
-}, SerializedLexicalNode>;
-export declare class TranslationNode extends DecoratorNode<JSX.Element> {
-    __html: string;
-    __displayMode: DisplayMode;
+export type SerializedTranslationNode = Spread<TranslationNodeProps, SerializedLexicalNode>;
+export declare const NODE_TYPE = "inline-translation-node";
+export declare class TranslationNode extends ElementNode {
+    __data: TranslationNodeProps;
+    constructor(data: TranslationNodeProps, key?: NodeKey);
     static getType(): string;
     static clone(node: TranslationNode): TranslationNode;
-    static importJSON(serializedNode: SerializedTranslationNode): TranslationNode;
-    exportDOM(): DOMExportOutput;
-    static importDOM(): DOMConversionMap | null;
-    constructor(html: string, key?: NodeKey, displayMode?: DisplayMode);
-    exportJSON(): SerializedTranslationNode;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): false;
-    decorate(): JSX.Element;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
 }
-export declare function $createTranslationNode({ html, key, displayMode }: TranslationPayload): TranslationNode;
+export declare function $createTranslationNode({ translatedNodes, data, }: {
+    translatedNodes: LexicalNode[];
+    data: TranslationNodeProps;
+}): TranslationNode;
 export declare function $isTranslationNode(node: LexicalNode | null | undefined): node is TranslationNode;
+export {};

package/lib/ext/InlineTranslationPlugin/TranslationNode.js

@@ -1,85 +1,44 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import { Box } from '@mui/material';
-import { $applyNodeReplacement, DecoratorNode } from 'lexical';
-function $convertTranslationElement(domNode) {
-    const element = domNode;
-    const translationDataValue = element.getAttribute('data-lexical-inline-translation');
-    let displayMode = 'translationOnly';
-    try {
-        const parsed = JSON.parse(translationDataValue);
-        if (parsed?.displayMode) {
-            displayMode = parsed.displayMode;
-        }
-    }
-    catch (e) {
-        console.warn(`Failed to parse: ${translationDataValue}`, e);
+import { $isElementNode, ElementNode, } from 'lexical';
+export const NODE_TYPE = 'inline-translation-node';
+export class TranslationNode extends ElementNode {
+    __data;
+    constructor(data, key) {
+        super(key);
+        this.__data = data;
     }
-    const node = $createTranslationNode({ html: element.innerHTML, displayMode });
-    return { node };
-}
-export class TranslationNode extends DecoratorNode {
-    __html;
-    __displayMode;
     static getType() {
-        return 'translation';
+        return NODE_TYPE;
     }
     static clone(node) {
-        return new TranslationNode(node.__html, node.__key, node.__displayMode);
+        return new TranslationNode(node.__data, node.__key);
     }
-    static importJSON(serializedNode) {
-        const { html, displayMode } = serializedNode;
-        const node = $createTranslationNode({ html, displayMode });
-        return node;
-    }
-    exportDOM() {
-        const element = document.createElement('span');
-        element.innerHTML = this.__html;
-        element.setAttribute('data-lexical-inline-translation', JSON.stringify({ displayMode: this.__displayMode }));
-        return { element };
-    }
-    static importDOM() {
-        return {
-            span: (domNode) => {
-                if (!domNode.hasAttribute('data-lexical-inline-translation')) {
-                    return null;
-                }
-                return {
-                    conversion: $convertTranslationElement,
-                    priority: 0,
-                };
-            },
-        };
-    }
-    constructor(html, key, displayMode = 'translationOnly') {
-        super(key);
-        this.__html = html;
-        this.__displayMode = displayMode;
+    createDOM(config, editor) {
+        const dom = document.createElement('div');
+        dom.classList.add(NODE_TYPE, `${NODE_TYPE}-${this.__data.displayMode}`);
+        dom.dataset.sid = this.__data.sid;
+        return dom;
     }
-    exportJSON() {
-        return {
-            html: this.__html,
-            displayMode: this.__displayMode,
-            type: 'translation',
-            version: 1,
-        };
-    }
-    createDOM(config) {
-        const span = document.createElement('span');
-        span.className = 'lexical-editor-inline-translation';
-        return span;
-    }
-    updateDOM() {
+    updateDOM(prevNode, dom, config) {
+        // Returning false tells Lexical that this node does not need its
+        // DOM element replacing with a new copy from createDOM.
         return false;
     }
-    decorate() {
-        return (_jsxs(_Fragment, { children: [this.__displayMode === 'inline' && _jsx("br", {}), _jsx(Box, { component: "span", sx: {
-                        ...(this.__displayMode === 'inline' && { borderBottom: '2px dashed', borderColor: 'info.light' }),
-                    }, dangerouslySetInnerHTML: { __html: this.__html } })] }));
-    }
 }
-export function $createTranslationNode({ html, key, displayMode }) {
-    return $applyNodeReplacement(new TranslationNode(html, key, displayMode));
+export function $createTranslationNode({ translatedNodes, data, }) {
+    const node = new TranslationNode(data);
+    if (translatedNodes.length === 1) {
+        const first = translatedNodes[0];
+        if ($isElementNode(first)) {
+            node.append(...first.getChildren());
+        }
+        else {
+            node.append(first);
+        }
+    }
+    else {
+        node.append(...translatedNodes);
+    }
+    return node;
 }
 export function $isTranslationNode(node) {
     return node instanceof TranslationNode;

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

@@ -1,4 +1,3 @@
 export * from './TranslationNode';
-export * from './utils';
 export * from './InlineTranslationPlugin';
 export * from './store';

package/lib/ext/InlineTranslationPlugin/index.js

@@ -1,4 +1,3 @@
 export * from './TranslationNode';
-export * from './utils';
 export * from './InlineTranslationPlugin';
 export * from './store';

package/lib/ext/InlineTranslationPlugin/store.d.ts

@@ -1,14 +1,20 @@
 import { LexicalEditor } from 'lexical';
 import { DisplayMode } from './types';
 type TranslateStatus = 'idle' | 'pending' | 'processing' | 'completed';
+interface EditorTranslateState {
+    useCache: boolean;
+}
 interface State {
     targetLanguage: string | null;
     autoTranslate: boolean;
     displayMode: DisplayMode;
     editors: Map<LexicalEditor, TranslateStatus>;
+    editorTranslateStates: Map<LexicalEditor, EditorTranslateState>;
 }
 interface Action {
-    translate: (editor?: LexicalEditor) => void;
+    translate: (editor?: LexicalEditor, options?: {
+        useCache?: boolean;
+    }) => void;
     showOriginal: (editor?: LexicalEditor) => void;
     setTargetLanguage: (targetLanguage: string) => void;
     setAutoTranslate: (autoTranslate: boolean) => void;

package/lib/ext/InlineTranslationPlugin/store.js

@@ -8,9 +8,15 @@ export const useInlineTranslationStore = create()(persist((set, get) => ({
     autoTranslate: false,
     displayMode: 'translationOnly',
     editors: new Map(),
-    translate: (editor) => {
+    editorTranslateStates: new Map(),
+    translate: (editor, options) => {
         if (editor) {
-            set((state) => ({ editors: new Map(state.editors).set(editor, 'pending') }));
+            set((state) => ({
+                editors: new Map(state.editors).set(editor, 'pending'),
+                ...(options?.useCache !== undefined && {
+                    editorTranslateStates: new Map(state.editorTranslateStates).set(editor, { useCache: options.useCache }),
+                }),
+            }));
         }
         else {
             set((state) => ({
@@ -20,11 +26,15 @@ export const useInlineTranslationStore = create()(persist((set, get) => ({
     },
     showOriginal: (editor) => {
         if (editor) {
-            set((state) => ({ editors: new Map(state.editors).set(editor, 'idle') }));
+            set((state) => ({
+                editors: new Map(state.editors).set(editor, 'idle'),
+                editorTranslateStates: new Map(Array.from(state.editorTranslateStates.entries()).filter(([k]) => k !== editor)),
+            }));
         }
         else {
             set((state) => ({
                 editors: new Map(Array.from(state.editors.entries()).map(([k]) => [k, 'idle'])),
+                editorTranslateStates: new Map(),
             }));
         }
     },

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -84,7 +84,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
                                         }, 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.id] ??
+                                    return (_jsx(Box, { sx: { mt: 2 }, children: _jsx(PropertyField, { label: getPropertyLabel({ locale, locales: x.locales }) || x.key || '', type: x.type, value: pendingProperties[locale]?.[x.id] ??
                                                 getLocalizedValue({ key: 'defaultValue', locale, data: x.locales }), onChange: (v) => setPendingProperties({
                                                 ...pendingProperties,
                                                 [locale]: { ...pendingProperties[locale], [x.id]: v },

package/lib/ext/PagesKitComponent/PropertyField.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormControlLabel, IconButton, InputAdornment, Switch, TextField } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControlLabel, FormLabel, IconButton, InputAdornment, Stack, Switch, TextField } from '@mui/material';
 import UploadIcon from '@mui/icons-material/Upload';
+import { useRef } from 'react';
+import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
+import ColorPicker from '../../main/ui/ColorPicker';
+const CodeEditor = lazy(() => import('@blocklet/code-editor').then((module) => ({
+    default: module.CodeEditor,
+})));
 function getVideoSize(url) {
     return new Promise((resolve, reject) => {
         const video = document.createElement('video');
@@ -38,6 +44,22 @@ export function UploaderButton({ onChange }) {
     return (_jsx(IconButton, { size: "small", onClick: handleOpen, children: _jsx(UploadIcon, {}) }, "uploader-trigger"));
 }
 export function PropertyField({ type, multiline, label, value, onChange, ...rest }) {
+    const codeEditorUploadCallback = useRef(null);
+    const handleOpen = () => {
+        // @ts-ignore
+        const uploader = uploaderRef?.current?.getUploader();
+        uploader?.open();
+        if (codeEditorUploadCallback.current) {
+            // rewrite default emitter
+            uploader.onceUploadSuccess(({ response }) => {
+                let fileName = response?.data?.filename || '';
+                if (fileName) {
+                    fileName = `mediakit://${fileName}`;
+                }
+                codeEditorUploadCallback.current?.(fileName);
+            });
+        }
+    };
     const handleChange = (v) => {
         if (type === 'json') {
             try {
@@ -72,8 +94,61 @@ export function PropertyField({ type, multiline, label, value, onChange, ...rest
                         } }) })),
             }, ...rest }));
     }
-    return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: type === 'json' && typeof value !== 'string' ? JSON.stringify(value, null, 2) : value, onChange: (e) => handleChange(e.target.value), ...((multiline || type === 'json') && {
-            multiline: true,
-            rows: 5,
-        }), ...rest }));
+    if (type === 'color') {
+        return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => handleChange(e.target.value), InputProps: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", sx: {
+                        '.popup-item-color': {
+                            width: 24,
+                            height: 24,
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            backgroundColor: value || '#fff',
+                            border: '1px solid rgba(0, 0, 0, 0.23)',
+                            '&:hover': {
+                                opacity: 0.8,
+                            },
+                        },
+                    }, children: _jsx(ColorPicker, { color: value, onChange: handleChange, buttonClassName: "popup-item spaced popup-item-color" }) })),
+            }, ...rest }));
+    }
+    if (type === 'yaml' || type === 'json') {
+        let newValue = value;
+        if (type === 'json' && typeof value !== 'string') {
+            newValue = JSON.stringify(value, null, 2);
+        }
+        return (_jsxs(Stack, { sx: {
+                width: '100%',
+                position: 'relative',
+                pt: 1,
+                pb: '6px',
+                px: '1px',
+                minHeight: 50,
+                '.monaco-editor,.overflow-guard': { borderRadius: 1 },
+            }, children: [_jsx(FormLabel, { sx: {
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        transform: 'translate(0px, -7px) scale(0.75)',
+                    }, children: label }), _jsx(CodeEditor, { keyId: label, locale: "en", language: type === 'yaml' ? 'yaml' : 'json', value: newValue, onChange: (v) => {
+                        return handleChange(v);
+                    }, typeScriptNoValidation: false, onUpload: (callback) => {
+                        codeEditorUploadCallback.current = callback;
+                        handleOpen();
+                    } }), _jsx(Box, { component: "fieldset", sx: {
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                        left: 0,
+                        top: -5,
+                        width: '100%',
+                        height: '100%',
+                        border: 1,
+                        borderColor: 'rgba(0, 0, 0, 0.23)',
+                        borderRadius: 1,
+                        px: 1,
+                        py: 0,
+                        zIndex: 1,
+                        m: 0,
+                    } })] }));
+    }
+    return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => handleChange(e.target.value), multiline: true, rows: 5, ...rest }));
 }

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

@@ -1,5 +1,5 @@
 export declare const mode: string;
-export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url"];
+export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url", "yaml", "color"];
 export type PropertyType = (typeof propertyTypes)[number];
 export type Properties = {
     [locale: string]: {

package/lib/ext/PagesKitComponent/utils.js

@@ -1,5 +1,5 @@
 export const mode = process.env.NODE_ENV === 'development' ? 'draft' : 'production';
-export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url'];
+export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url', 'yaml', 'color'];
 export const isValidPropertyType = (type) => {
     return !type || propertyTypes.includes(type);
 };

package/lib/ext/translation/translation-utils.d.ts

@@ -0,0 +1,16 @@
+import { ElementNode, LexicalNode, LexicalEditor } from 'lexical';
+export declare const $nodeToHtml: (editor: LexicalEditor, node: ElementNode) => string;
+export declare const $htmlToNodes: (editor: LexicalEditor, text: string) => LexicalNode[] | import("lexical").TextNode[];
+/**
+ * 判断 node 是否是有效的 TextNode
+ * - $isTextNode => true
+ * - format 不是 code
+ */
+export declare const $isValidTextNode: (node: LexicalNode) => boolean | "";
+/**
+ * 判断一个 ElementNode 是否含有效的 TextNode 的 child
+ */
+export declare const $hasValidTextNode: (elementNode: ElementNode) => boolean;
+export declare const $findTranslatableElementNodes: () => ElementNode[];
+export declare const $createNodeKeyToSidMap: () => Map<string, string>;
+export declare const $createSidToNodeKeyMap: () => Map<string, string>;

package/lib/ext/translation/translation-utils.js

@@ -0,0 +1,63 @@
+import { $isParagraphNode, $isTextNode, $isElementNode, $createNodeSelection, $createTextNode, } from 'lexical';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $isListNode, $isListItemNode } from '@lexical/list';
+import { $dfs } from '@lexical/utils';
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
+import { $isExcalidrawNode } from '../../main/nodes/ExcalidrawNode';
+import { $isMentionNode } from '../../main/nodes/MentionNode';
+export const $nodeToHtml = (editor, node) => {
+    const selection = $createNodeSelection();
+    const children = node.getChildren();
+    // 剔除嵌套 list 节点
+    children
+        .filter((x) => !$isListNode(x))
+        .forEach((child) => $dfs(child)
+        .filter((x) => !$isExcalidrawNode(x.node))
+        .forEach((x) => selection.add(x.node.getKey())));
+    const html = $generateHtmlFromNodes(editor, selection);
+    return html;
+};
+export const $htmlToNodes = (editor, text) => {
+    try {
+        const dom = new DOMParser().parseFromString(text, 'text/html');
+        return $generateNodesFromDOM(editor, dom);
+    }
+    catch (e) {
+        console.error(e, text);
+        return [$createTextNode(text)];
+    }
+};
+/**
+ * 判断 node 是否是有效的 TextNode
+ * - $isTextNode => true
+ * - format 不是 code
+ */
+export const $isValidTextNode = (node) => {
+    return $isTextNode(node) && node.getTextContent().trim() && !$isMentionNode(node);
+};
+/**
+ * 判断一个 ElementNode 是否含有效的 TextNode 的 child
+ */
+export const $hasValidTextNode = (elementNode) => {
+    return elementNode.getChildren().some($isValidTextNode);
+};
+export const $findTranslatableElementNodes = () => {
+    const nodes = $dfs()
+        .map((x) => x.node)
+        .filter((node) => $isElementNode(node) &&
+        ($isHeadingNode(node) || $isParagraphNode(node) || $isQuoteNode(node) || $isListItemNode(node)))
+        .filter($hasValidTextNode);
+    return nodes;
+};
+// 创建映射表: node key -> node sequential ID
+export const $createNodeKeyToSidMap = () => {
+    const nodes = $dfs();
+    let counter = 0;
+    return new Map(nodes.map((x) => [x.node.getKey(), `${counter++}`]));
+};
+// 创建映射表: node sequential ID -> node key
+export const $createSidToNodeKeyMap = () => {
+    const nodes = $dfs();
+    let counter = 0;
+    return new Map(nodes.map((x) => [`${counter++}`, x.node.getKey()]));
+};

package/lib/main/editor.d.ts

@@ -9,6 +9,7 @@ import { MutableRefObject, ReactNode } from 'react';
 import { EditorState, LexicalEditor } from 'lexical';
 export interface EditorProps {
     children?: ReactNode;
+    prepend?: ReactNode;
     placeholder?: ReactNode;
     onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
     autoFocus?: boolean;
@@ -17,4 +18,4 @@ export interface EditorProps {
     onReady?: () => void;
     enableHeadingsIdPlugin?: boolean;
 }
-export default function Editor({ children, placeholder, onChange, autoFocus, showToolbar, editorRef, onReady, enableHeadingsIdPlugin, }: EditorProps): JSX.Element;
+export default function Editor({ children, prepend, placeholder, onChange, autoFocus, showToolbar, editorRef, onReady, enableHeadingsIdPlugin, }: EditorProps): JSX.Element;

package/lib/main/editor.js

@@ -83,7 +83,7 @@ import { useResponsiveTable } from './hooks/useResponsiveTable';
 import { useTranslationListener } from './hooks/useTranslationListener';
 import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
 import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
-export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
+export default function Editor({ children, prepend, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
     const config = useEditorConfig();
@@ -112,9 +112,9 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
         }
     }, [hasNodes('image'), hasUploader]);
     if (minimalMode) {
-        return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(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 }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
+        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(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 }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), _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('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), _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('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }
 const EditorContent = styled.div `
   position: relative;

package/lib/main/index.css

@@ -462,7 +462,10 @@ i.prettier-error {
   z-index: 10001;
   display: block;
   position: fixed;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-height: 40px;
   background-color: #fff;
@@ -1327,3 +1330,16 @@ li.embed-option-disabled > span:after {
 .medium-zoom-image--opened {
   z-index: 99999;
 }
+
+.inline-translation-node {
+  position: relative;
+}
+
+/* 紧挨的 2 个 TranslationNode 容器结点，分别用于包裹翻译结果结点和原文结点, 第 2 个 TranslationNode 是隐藏状态, 通过调换顺序来实现单个结点的原文/翻译切换 */
+.inline-translation-node + .inline-translation-node {
+  display: none;
+}
+
+.inline-translation-node-inline > * {
+  border-bottom: 2px dashed #3890f9;
+}

package/lib/main/index.d.ts

@@ -12,6 +12,7 @@ export interface BlockletEditorProps extends Omit<React.DetailedHTMLProps<React.
     editable?: boolean;
     editorState?: string;
     children?: ReactNode;
+    prepend?: ReactNode;
     nodes?: ReadonlyArray<Klass<LexicalNode>>;
     onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
     autoFocus?: boolean;

package/lib/main/index.js

@@ -34,7 +34,7 @@ export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, e
     };
     return (_jsx(SettingsContext, { children: _jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }) }) }) }) }));
 }
-function EditorShell({ placeholder, children, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, ...props }) {
+function EditorShell({ placeholder, children, prepend, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, ...props }) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         editor.setEditable(editable ?? true);
@@ -45,7 +45,7 @@ function EditorShell({ placeholder, children, editable, onChange, autoFocus, sho
             editor.focus();
         }
     }, []);
-    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, children: children }) }));
+    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, prepend: prepend, children: children }) }));
 }
 const EditorRoot = styled.div `
   container: blocklet-editor / inline-size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.1.113",
+  "version": "2.1.115",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -24,9 +24,10 @@
     ]
   },
   "dependencies": {
-    "@blocklet/embed": "^0.2.1",
+    "@blocklet/code-editor": "^0.4.201",
+    "@blocklet/embed": "^0.2.2",
     "@blocklet/js-sdk": "1.16.33",
-    "@blocklet/pages-kit": "^0.3.19",
+    "@blocklet/pages-kit": "^0.3.22",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -65,7 +66,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.1.113"
+    "@blocklet/pdf": "^2.1.115"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

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

@@ -1,18 +0,0 @@
-import { LexicalEditor } from 'lexical';
-import { DisplayMode } from './types';
-export interface TranslateItem {
-    uid: string;
-    text: string;
-}
-export type TranslateService = ({ sourceItems, targetLanguage, }: {
-    sourceItems: TranslateItem[];
-    targetLanguage: string;
-}) => Promise<TranslateItem[]>;
-export declare const translateEditorNodes: ({ editor, targetLanguage, translateService, detectLanguage, displayMode, }: {
-    editor: LexicalEditor;
-    targetLanguage: string;
-    translateService: TranslateService;
-    detectLanguage: (text: string) => string | null;
-    displayMode: DisplayMode;
-}) => Promise<TranslateItem[] | null | undefined>;
-export declare const applyTranslations: (editor: LexicalEditor, translations: TranslateItem[], displayMode: DisplayMode) => void;

package/lib/ext/InlineTranslationPlugin/utils.js

@@ -1,124 +0,0 @@
-import { $isParagraphNode, $isTextNode, $isElementNode, $createNodeSelection, $getNodeByKey, } from 'lexical';
-import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
-import { $isListNode, $isListItemNode } from '@lexical/list';
-import { $dfs } from '@lexical/utils';
-import { $generateHtmlFromNodes } from '@lexical/html';
-import { $createEmojiNode } from '../../main/nodes/EmojiNode';
-import { $createTranslationNode } from './TranslationNode';
-import { $isExcalidrawNode } from '../../main/nodes/ExcalidrawNode';
-import { $isMentionNode } from '../../main/nodes/MentionNode';
-/**
- * Creates a mapping between node keys and sequential IDs
- * @param reversed If true, maps ID -> key. If false, maps key -> ID
- * @returns Map of either [key -> ID] or [ID -> key]
- */
-const getNodeIds = (reversed = false) => {
-    const nodes = $dfs();
-    let counter = 0;
-    if (reversed) {
-        return new Map(nodes.map((x) => [`${counter++}`, x.node.getKey()]));
-    }
-    return new Map(nodes.map((x) => [x.node.getKey(), `${counter++}`]));
-};
-const collectTranslatableNodes = () => {
-    const nodes = $dfs()
-        .map((x) => x.node)
-        .filter((node) => $isElementNode(node) &&
-        ($isHeadingNode(node) || $isParagraphNode(node) || $isQuoteNode(node) || $isListItemNode(node)))
-        .filter((node) => {
-        return $hasValidTextNode(node) && !!node.getTextContent().trim();
-    });
-    return nodes;
-};
-const nodeToHtml = (editor, node) => {
-    const selection = $createNodeSelection();
-    const children = node.getChildren();
-    // 剔除嵌套 list 节点
-    children
-        .filter((x) => !$isListNode(x))
-        .forEach((child) => $dfs(child)
-        .filter((x) => !$isExcalidrawNode(x.node))
-        .forEach((x) => selection.add(x.node.getKey())));
-    const html = $generateHtmlFromNodes(editor, selection);
-    return html;
-};
-export const translateEditorNodes = async ({ editor, targetLanguage, translateService, detectLanguage, displayMode, }) => {
-    let nodes = [];
-    const nodeUniqueIdMap = editor.getEditorState().read(() => getNodeIds());
-    editor.update(() => {
-        nodes = collectTranslatableNodes()
-            .filter((node) => detectLanguage(node.getTextContent()) !== targetLanguage)
-            .map((node) => {
-            const html = nodeToHtml(editor, node);
-            return { node, html };
-        });
-        nodes.forEach(({ node }) => {
-            node.append($createEmojiNode('global-loading', ''));
-        });
-    }, { discrete: true });
-    if (nodes.length === 0) {
-        return;
-    }
-    let translations = null;
-    try {
-        translations = await translateService({
-            sourceItems: nodes.map(({ node, html }) => ({ uid: nodeUniqueIdMap.get(node.getKey()), text: html })),
-            targetLanguage,
-        });
-    }
-    catch (err) {
-        console.error(err);
-    }
-    finally {
-        nodes.forEach(({ node }, index) => {
-            editor.update(() => {
-                const lastChild = node.getLastChild();
-                if (lastChild) {
-                    lastChild.remove();
-                }
-            });
-        });
-    }
-    if (translations) {
-        applyTranslations(editor, translations, displayMode);
-    }
-    return translations;
-};
-export const applyTranslations = (editor, translations, displayMode) => {
-    editor.update(() => {
-        const nodeUniqueIdMap = getNodeIds(true);
-        translations.forEach(({ uid, text }) => {
-            try {
-                const node = $getNodeByKey(nodeUniqueIdMap.get(uid));
-                if (node) {
-                    if (displayMode === 'inline') {
-                        node.append($createTranslationNode({ html: text, displayMode: 'inline' }));
-                    }
-                    else {
-                        node.getChildren().forEach((child) => {
-                            child.remove();
-                        });
-                        node.append($createTranslationNode({ html: text, displayMode: 'translationOnly' }));
-                    }
-                }
-            }
-            catch (e) {
-                console.error('Failed to apply translations to editor', e);
-            }
-        });
-    });
-};
-/**
- * 判断 node 是否是有效的 TextNode
- * - $isTextNode => true
- * - format 不是 code
- */
-const $isValidTextNode = (node) => {
-    return $isTextNode(node) && node.getTextContent().trim() && !$isMentionNode(node);
-};
-/**
- * 判断一个 top level node 是否含有效的 TextNode 的 child
- */
-const $hasValidTextNode = (elementNode) => {
-    return elementNode.getChildren().some($isValidTextNode);
-};