@blocklet/editor 2.1.90 → 2.1.91

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -1,26 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { useInViewport } from 'ahooks';
-import { restoreTranslation, translateEditorNodes } from './utils';
+import { applyTranslations, translateEditorNodes } from './utils';
 import { useInlineTranslationStore, useStatus, useTargetLanguage } from './store';
+// 原始 editor 状态, 用于恢复
+const originalEditorStates = {};
 function InternalInlineTranslationPlugin({ translateService, detectLanguage }) {
     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 targetLanguage = useTargetLanguage();
     const status = useStatus(editor);
+    const translationsRef = useRef(null);
     const handleTranslate = async () => {
         try {
             setStatus(editor, 'processing');
-            await translateEditorNodes({
+            originalEditorStates[editor.getKey()] = editor.getEditorState();
+            const translations = await translateEditorNodes({
                 editor,
                 translateService,
                 targetLanguage,
                 detectLanguage,
+                displayMode,
             });
+            translationsRef.current = translations ?? null;
             setStatus(editor, 'completed');
         }
         catch (err) {
@@ -28,12 +35,21 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage }) {
         }
     };
     const handleRestore = () => {
-        restoreTranslation(editor);
+        if (originalEditorStates[editor.getKey()]) {
+            editor.setEditorState(originalEditorStates[editor.getKey()]);
+            delete originalEditorStates[editor.getKey()];
+        }
         setStatus(editor, 'idle');
     };
     useEffect(() => {
         return registerEditor(editor);
     }, [editor]);
+    // 清理备份的 editor 状态
+    useEffect(() => {
+        return () => {
+            delete originalEditorStates[editor.getKey()];
+        };
+    }, [editor]);
     useEffect(() => {
         if (inViewport && status === 'pending') {
             handleTranslate();
@@ -44,6 +60,15 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage }) {
             handleRestore();
         }
     }, [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);
+            }
+        }, 0);
+    }, [displayMode]);
     if (editor.isEditable()) {
         return null;
     }

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

@@ -1,25 +1,29 @@
 /// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { DisplayMode } from './types';
 export interface TranslationPayload {
     key?: NodeKey;
     html: string;
+    displayMode: DisplayMode;
 }
 export type SerializedTranslationNode = Spread<{
     html: string;
+    displayMode: DisplayMode;
 }, SerializedLexicalNode>;
 export declare class TranslationNode extends DecoratorNode<JSX.Element> {
     __html: string;
+    __displayMode: DisplayMode;
     static getType(): string;
     static clone(node: TranslationNode): TranslationNode;
     static importJSON(serializedNode: SerializedTranslationNode): TranslationNode;
     exportDOM(): DOMExportOutput;
     static importDOM(): DOMConversionMap | null;
-    constructor(html: string, key?: NodeKey);
+    constructor(html: string, key?: NodeKey, displayMode?: DisplayMode);
     exportJSON(): SerializedTranslationNode;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
     decorate(): JSX.Element;
 }
-export declare function $createTranslationNode({ html, key }: TranslationPayload): TranslationNode;
+export declare function $createTranslationNode({ html, key, displayMode }: TranslationPayload): TranslationNode;
 export declare function $isTranslationNode(node: LexicalNode | null | undefined): node is TranslationNode;

package/lib/ext/InlineTranslationPlugin/TranslationNode.js

@@ -4,42 +4,62 @@ import { Box } from '@mui/material';
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
 function $convertTranslationElement(domNode) {
     const element = domNode;
-    const node = $createTranslationNode({ html: element.innerHTML });
+    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);
+    }
+    const node = $createTranslationNode({ html: element.innerHTML, displayMode });
     return { node };
 }
 export class TranslationNode extends DecoratorNode {
     __html;
+    __displayMode;
     static getType() {
         return 'translation';
     }
     static clone(node) {
-        return new TranslationNode(node.__html, node.__key);
+        return new TranslationNode(node.__html, node.__key, node.__displayMode);
     }
     static importJSON(serializedNode) {
-        const { html } = serializedNode;
-        const node = $createTranslationNode({ html });
+        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: (node) => ({
-                conversion: $convertTranslationElement,
-                priority: 0,
-            }),
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-inline-translation')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertTranslationElement,
+                    priority: 0,
+                };
+            },
         };
     }
-    constructor(html, key) {
+    constructor(html, key, displayMode = 'translationOnly') {
         super(key);
         this.__html = html;
+        this.__displayMode = displayMode;
     }
     exportJSON() {
         return {
             html: this.__html,
+            displayMode: this.__displayMode,
             type: 'translation',
             version: 1,
         };
@@ -53,11 +73,13 @@ export class TranslationNode extends DecoratorNode {
         return false;
     }
     decorate() {
-        return (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(Box, { component: "span", sx: { borderBottom: '2px dashed', borderColor: 'info.light' }, dangerouslySetInnerHTML: { __html: this.__html } })] }));
+        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 }) {
-    return $applyNodeReplacement(new TranslationNode(html, key));
+export function $createTranslationNode({ html, key, displayMode }) {
+    return $applyNodeReplacement(new TranslationNode(html, key, displayMode));
 }
 export function $isTranslationNode(node) {
     return node instanceof TranslationNode;

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

@@ -1,8 +1,10 @@
 import { LexicalEditor } from 'lexical';
+import { DisplayMode } from './types';
 type TranslateStatus = 'idle' | 'pending' | 'processing' | 'completed';
 interface State {
     targetLanguage: string | null;
     autoTranslate: boolean;
+    displayMode: DisplayMode;
     editors: Map<LexicalEditor, TranslateStatus>;
 }
 interface Action {
@@ -11,6 +13,7 @@ interface Action {
     setTargetLanguage: (targetLanguage: string) => void;
     setAutoTranslate: (autoTranslate: boolean) => void;
     setStatus: (editor: LexicalEditor, status: TranslateStatus) => void;
+    setDisplayMode: (displayMode: DisplayMode) => void;
     registerEditor: (editor: LexicalEditor) => () => void;
     unregisterEditor: (editor: LexicalEditor) => void;
 }
@@ -19,6 +22,7 @@ export declare const useInlineTranslationStore: import("zustand").UseBoundStore<
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<State & Action, {
             targetLanguage: string | null;
             autoTranslate: boolean;
+            displayMode: DisplayMode;
         }>>) => void;
         clearStorage: () => void;
         rehydrate: () => void | Promise<void>;
@@ -28,10 +32,13 @@ export declare const useInlineTranslationStore: import("zustand").UseBoundStore<
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<State & Action, {
             targetLanguage: string | null;
             autoTranslate: boolean;
+            displayMode: DisplayMode;
         }>>;
     };
 }>;
 export declare const useStatus: (editor: LexicalEditor) => TranslateStatus | undefined;
 export declare const useIsIdle: () => boolean;
-export declare const useTargetLanguage: () => string;
+export declare const useIsTranslating: () => boolean;
+export declare const useIsTranslated: () => boolean;
+export declare const useTargetLanguage: () => any;
 export {};

package/lib/ext/InlineTranslationPlugin/store.js

@@ -1,9 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext } from 'react';
 export const useInlineTranslationStore = create()(persist((set, get) => ({
     targetLanguage: null,
     autoTranslate: false,
+    displayMode: 'translationOnly',
     editors: new Map(),
     translate: (editor) => {
         if (editor) {
@@ -35,6 +38,7 @@ export const useInlineTranslationStore = create()(persist((set, get) => ({
     setStatus: (editor, status) => {
         set((state) => ({ editors: new Map(state.editors).set(editor, status) }));
     },
+    setDisplayMode: (displayMode) => set({ displayMode }),
     registerEditor: (editor) => {
         set((state) => ({
             editors: new Map(state.editors).set(editor, state.autoTranslate ? 'pending' : 'idle'),
@@ -53,6 +57,7 @@ export const useInlineTranslationStore = create()(persist((set, get) => ({
     partialize: (state) => ({
         targetLanguage: state.targetLanguage,
         autoTranslate: state.autoTranslate,
+        displayMode: state.displayMode,
     }),
 }));
 export const useStatus = (editor) => {
@@ -61,7 +66,17 @@ export const useStatus = (editor) => {
 export const useIsIdle = () => {
     return useInlineTranslationStore((state) => Array.from(state.editors.values()).every((x) => x === 'idle'));
 };
+export const useIsTranslating = () => {
+    return useInlineTranslationStore((state) => Array.from(state.editors.values()).some((x) => x === 'processing'));
+};
+export const useIsTranslated = () => {
+    return useInlineTranslationStore((state) => {
+        const statusArr = Array.from(state.editors.values());
+        return statusArr.length > 0 && statusArr.every((x) => x === 'completed' || x === 'pending');
+    });
+};
 export const useTargetLanguage = () => {
     const { locale } = useLocaleContext();
-    return useInlineTranslationStore((state) => state.targetLanguage ?? locale);
+    const { session } = useContext(SessionContext);
+    return useInlineTranslationStore((state) => state.targetLanguage ?? session?.user?.locale ?? locale);
 };

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

@@ -0,0 +1 @@
+export type DisplayMode = 'inline' | 'translationOnly';

package/lib/ext/InlineTranslationPlugin/types.js

@@ -0,0 +1 @@
+export {};

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

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

package/lib/ext/InlineTranslationPlugin/utils.js

@@ -1,10 +1,10 @@
-import { $isParagraphNode, $isTextNode, $isElementNode, $createNodeSelection, $nodesOfType, $getNodeByKey, } from 'lexical';
+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, TranslationNode } from './TranslationNode';
+import { $createTranslationNode } from './TranslationNode';
 import { $isExcalidrawNode } from '../../main/nodes/ExcalidrawNode';
 /**
  * Creates a mapping between node keys and sequential IDs
@@ -41,7 +41,7 @@ const nodeToHtml = (editor, node) => {
     const html = $generateHtmlFromNodes(editor, selection);
     return html;
 };
-export const translateEditorNodes = async ({ editor, targetLanguage, translateService, detectLanguage, }) => {
+export const translateEditorNodes = async ({ editor, targetLanguage, translateService, detectLanguage, displayMode, }) => {
     let nodes = [];
     const nodeUniqueIdMap = editor.getEditorState().read(() => getNodeIds());
     editor.update(() => {
@@ -79,24 +79,31 @@ export const translateEditorNodes = async ({ editor, targetLanguage, translateSe
         });
     }
     if (translations) {
-        applyTranslations(editor, translations);
+        applyTranslations(editor, translations, displayMode);
     }
+    return translations;
 };
-const applyTranslations = (editor, translations) => {
+export const applyTranslations = (editor, translations, displayMode) => {
     editor.update(() => {
         const nodeUniqueIdMap = getNodeIds(true);
         translations.forEach(({ uid, text }) => {
-            const node = $getNodeByKey(nodeUniqueIdMap.get(uid));
-            if (node) {
-                node.append($createTranslationNode({ html: 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);
             }
-        });
-    });
-};
-export const restoreTranslation = (editor) => {
-    editor.update(() => {
-        $nodesOfType(TranslationNode).forEach((node) => {
-            node.remove();
         });
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.1.90",
+  "version": "2.1.91",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -65,7 +65,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.1.90"
+    "@blocklet/pdf": "^2.1.91"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",