@blocklet/editor 2.1.120 → 2.1.122

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

@@ -16,6 +16,7 @@ export declare class EditorTranslator {
     private editor;
     private options;
     private originalEditorState;
+    private preprocessEditorState;
     private nodeKeyToSidMap;
     private sidToNodeKeyMap;
     private translations;
@@ -32,5 +33,6 @@ export declare class EditorTranslator {
     }): Promise<void>;
     applyTranslations(): void;
     restore(sid?: string): void;
+    preprocessNodes(): Promise<void>;
 }
 export declare function useEditorTranslator(options: EditorTranslatorOptions): EditorTranslator;

package/lib/ext/InlineTranslationPlugin/EditorTranslator.js

@@ -1,13 +1,17 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getNodeByKey } from 'lexical';
+import { $createParagraphNode, $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';
+import { $isExcalidrawNode } from '../../main/nodes/ExcalidrawNode';
+import { $isImageNode } from '../../main/nodes/ImageNode';
+import { $isPdfNode } from '../PdfPlugin/PdfNode';
 export class EditorTranslator {
     editor;
     options;
     originalEditorState;
+    preprocessEditorState = null;
     nodeKeyToSidMap = new Map();
     sidToNodeKeyMap = new Map();
     translations = [];
@@ -32,13 +36,14 @@ export class EditorTranslator {
     updateDisplayMode() {
         // Warning: flushSync was called from inside a lifecycle method
         setTimeout(() => {
-            this.editor.setEditorState(this.originalEditorState);
+            this.editor.setEditorState(this.preprocessEditorState || this.originalEditorState);
             this.applyTranslations();
         }, 10);
     }
     async translate({ targetLanguage, translateService, detectLanguage, useCache, }) {
         // 翻译前备份 editor state (fix 恢复原文时图片路径错误的问题)
-        this.originalEditorState = this.editor.getEditorState();
+        this.originalEditorState = this.editor.getEditorState().clone();
+        await this.preprocessNodes();
         this.nodeKeyToSidMap = this.editor.getEditorState().read(() => $createNodeKeyToSidMap());
         this.sidToNodeKeyMap = this.editor.getEditorState().read(() => $createSidToNodeKeyMap());
         let nodes = [];
@@ -115,6 +120,7 @@ export class EditorTranslator {
         this.editor.update(() => {
             if (!sid) {
                 this.editor.setEditorState(this.originalEditorState);
+                this.translations = [];
             }
             else if (this.options.displayMode === 'translationOnly') {
                 const nodeKey = this.sidToNodeKeyMap.get(sid);
@@ -131,6 +137,37 @@ export class EditorTranslator {
             }
         });
     }
+    async preprocessNodes() {
+        const isSpecialNode = (node) => {
+            return $isExcalidrawNode(node) || $isImageNode(node) || $isPdfNode(node);
+        };
+        this.editor.update(() => {
+            $findTranslatableElementNodes().forEach((node) => {
+                // 如果 children 中即包含特殊结点, 也包含普通结点, 则将特殊结点与普通结点分开
+                const children = node.getChildren();
+                if (!children.some(isSpecialNode) || children.every(isSpecialNode)) {
+                    return;
+                }
+                const normalNodes = [];
+                children.forEach((child) => {
+                    if (isSpecialNode(child)) {
+                        if (normalNodes.length > 0) {
+                            node.insertBefore($createParagraphNode().append(...normalNodes));
+                            normalNodes.length = 0;
+                        }
+                        node.insertBefore($createParagraphNode().append(child));
+                    }
+                    else {
+                        normalNodes.push(child);
+                    }
+                });
+            }, { discrete: true });
+        });
+        // 延时 10ms, 否则获取的 node-key <=> sid 映射不准确
+        // eslint-disable-next-line no-promise-executor-return
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        this.preprocessEditorState = this.editor.getEditorState().clone();
+    }
 }
 export function useEditorTranslator(options) {
     const [editor] = useLexicalComposerContext();

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -72,10 +72,28 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage, onT
             document.removeEventListener('keydown', handler);
         };
     }, [editor, editorTranslator]);
+    // 对于翻译后的内容，禁止 checkbox 点击交互
+    useEffect(() => {
+        const onClick = (event) => {
+            const target = event.target;
+            if (editorTranslator.isTranslated && target.closest('li[role="checkbox"]')) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            if (prevRootElement) {
+                prevRootElement.removeEventListener('click', onClick, { capture: true });
+            }
+            if (rootElement) {
+                rootElement.addEventListener('click', onClick, { capture: true });
+            }
+        });
+    }, [editor, editorTranslator]);
     if (editor.isEditable()) {
         return null;
     }
-    return status === 'completed' ? (_jsx(Box, { sx: { mb: 0.5 }, children: _jsxs(Box, { sx: {
+    return status === 'completed' && editorTranslator.isTranslated ? (_jsx(Box, { sx: { mb: 0.5 }, children: _jsxs(Box, { className: "inline-translation-badge", sx: {
                 display: 'inline-block',
                 px: 1,
                 fontSize: 12,

package/package.json

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