@blocklet/editor 2.1.40 → 2.1.42

package/lib/ext/AITranslationPlugin/selection.js

@@ -1,23 +1,21 @@
 import { $getSelection, $isRangeSelection } from 'lexical';
-import { $replaceTranslations, $extractTranslationBlocksFromSelection, defaultTranslateAPI, $preview, $insertTranslations, processPlaceholders, restorePlaceholders, } from './utils';
+import { $replaceTranslations, $extractTranslationBlocksFromSelection, defaultTranslateAPI, $preview, $insertTranslations, } from './utils';
 // const isTranslationBlockWithSelection = (o: any): o is TranslationBlockWithSelection => !!o.point;
 export const translateSelection = async (editor, options) => {
     const selection = editor.getEditorState().read($getSelection);
     if (!$isRangeSelection(selection) || selection.isCollapsed()) {
         return null;
     }
-    const translationBlocks = editor.getEditorState().read(() => $extractTranslationBlocksFromSelection(selection));
+    const translationBlocks = editor
+        .getEditorState()
+        .read(() => $extractTranslationBlocksFromSelection(editor, selection));
     const { sourceLanguage, targetLanguage } = options;
     const translateAPI = options.translateAPI || defaultTranslateAPI;
     if (translationBlocks && translationBlocks.length > 0) {
         const sourceTexts = translationBlocks.reduce((acc, cur) => ({ ...acc, [cur.key]: cur.text }), {});
-        const sourceTextsWithPlaceholder = { ...sourceTexts };
-        Object.entries(sourceTextsWithPlaceholder).forEach(([key, text]) => {
-            sourceTextsWithPlaceholder[key] = processPlaceholders(text);
-        });
         const targetTexts = {};
         await translateAPI({ texts: sourceTexts, sourceLanguage, targetLanguage }, ({ data, progress }) => {
-            targetTexts[data.key] = restorePlaceholders(sourceTexts[data.key], data.text);
+            targetTexts[data.key] = data.text;
             if (options.onProgress && progress) {
                 options.onProgress(progress);
             }
@@ -33,7 +31,7 @@ export const translateSelection = async (editor, options) => {
             },
             replace: () => {
                 editor.update(() => {
-                    $replaceTranslations(translations);
+                    $replaceTranslations(editor, translations);
                 });
             },
             insertBelow: () => {

package/lib/ext/AITranslationPlugin/translation.js

@@ -1,26 +1,25 @@
-import { $extractTranslationBlocks, $preview, $replaceTranslations, defaultTranslateAPI, processPlaceholders, restorePlaceholders, } from './utils';
+import { $extractTranslationBlocks, $preview, $replaceTranslations, defaultTranslateAPI } from './utils';
 export const translateFullContent = async (editor, options) => {
     const { sourceLanguage, targetLanguage, signal } = options;
     const translateAPI = options.translateAPI || defaultTranslateAPI;
-    const translationBlocks = editor.getEditorState().read(() => $extractTranslationBlocks());
+    let translationBlocks = [];
+    editor.update(() => {
+        translationBlocks = $extractTranslationBlocks(editor);
+    }, { discrete: true });
     // eslint-disable-next-line no-console
     console.log('translationBlocks: ', translationBlocks);
     if (translationBlocks) {
         const sourceTexts = translationBlocks.reduce((acc, cur) => ({ ...acc, [cur.key]: cur.text }), {});
-        const sourceTextsWithPlaceholder = { ...sourceTexts };
-        Object.entries(sourceTextsWithPlaceholder).forEach(([key, text]) => {
-            sourceTextsWithPlaceholder[key] = processPlaceholders(text);
-        });
         const targetTexts = {};
         const errorsMap = {};
-        await translateAPI({ texts: sourceTextsWithPlaceholder, sourceLanguage, targetLanguage }, ({ data, progress, error }) => {
+        await translateAPI({ texts: sourceTexts, sourceLanguage, targetLanguage }, ({ data, progress, error }) => {
             const sourceText = sourceTexts[data.key];
             if (error) {
                 targetTexts[data.key] = sourceText;
                 errorsMap[data.key] = error;
             }
             else {
-                targetTexts[data.key] = restorePlaceholders(sourceText, data.text);
+                targetTexts[data.key] = data.text;
             }
             if (options.onProgress && progress) {
                 options.onProgress(progress);
@@ -47,7 +46,7 @@ export const translateFullContent = async (editor, options) => {
         const autoReplace = options.autoReplace !== false;
         if (autoReplace && !signal?.aborted) {
             editor.update(() => {
-                $replaceTranslations(translations);
+                $replaceTranslations(editor, translations);
             });
         }
         return {
@@ -58,7 +57,7 @@ export const translateFullContent = async (editor, options) => {
             },
             replace: (e) => {
                 (e || editor).update(() => {
-                    $replaceTranslations(translations);
+                    $replaceTranslations(editor, translations);
                 });
             },
             insertBelow: () => { },

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

@@ -1,4 +1,4 @@
-import { ElementNode, LexicalNode, RangeSelection } from 'lexical';
+import { ElementNode, LexicalNode, RangeSelection, LexicalEditor } from 'lexical';
 import type { PointType } from 'lexical/LexicalSelection';
 import type { TranslationBlock, NonTextNodeMatch, TranslateAPI, TranslationBlockWithSelection } from './types';
 export declare const defaultTranslateAPI: TranslateAPI;
@@ -9,7 +9,7 @@ export declare const insertNodesAfter: (node: LexicalNode, nodesToInsert: Lexica
  * - $isTextNode => true
  * - format 不是 code
  */
-export declare const $isValidTextNode: (node: LexicalNode) => boolean;
+export declare const $isValidTextNode: (node: LexicalNode) => string | false;
 /**
  * 判断一个 top level node 是否含有效的 TextNode 的 child
  */
@@ -30,7 +30,7 @@ export declare const $extractTranslationNodes: (topLevelNodes: ElementNode[]) =>
  * - quote node
  */
 export declare const $extractTextContentFromTranslationNode: (translationNode: ElementNode, selectedNodes?: LexicalNode[]) => string;
-export declare const $extractTranslationBlocks: (translationNodes?: ElementNode[]) => TranslationBlock[];
+export declare const $extractTranslationBlocks: (editor: LexicalEditor, translationNodes?: ElementNode[]) => TranslationBlock[];
 /**
  * 处理带有 `###key###` 的文本, 将普通文本转成 TextNode, 将 `###key###` 替换成 key 对应的 Node
  * @param {string} text - 如: "a ###1### b ###20### c"
@@ -44,8 +44,8 @@ export declare const rearrangeNodes: (text: string, matches: NonTextNodeMatch[])
  * 比如: "a ###1### b ###20### c" => [{key: 1, index: 2, length: 7}, {key: 20, index: 12, length: 8}]
  */
 export declare const matchNonTextNodes: (text: string) => NonTextNodeMatch[];
-export declare const $replaceTranslation: (translationBlock: TranslationBlock) => LexicalNode | ElementNode | import("@lexical/link").LinkNode | null;
-export declare const $replaceTranslations: (translationBlocks: TranslationBlock[]) => (LexicalNode | ElementNode | import("@lexical/link").LinkNode | null)[];
+export declare const $replaceTranslation: (translationBlock: TranslationBlock, editor: LexicalEditor) => LexicalNode | ElementNode | null;
+export declare const $replaceTranslations: (editor: LexicalEditor, translationBlocks: TranslationBlock[]) => (LexicalNode | ElementNode | null)[];
 export declare const $insertTranslations: (translationBlocks: TranslationBlock[], selection: RangeSelection) => void;
 export declare const $preview: (translationBlocks: TranslationBlock[]) => string;
 /**
@@ -53,6 +53,4 @@ export declare const $preview: (translationBlocks: TranslationBlock[]) => string
  */
 export declare const $extractTranslationBlockWithSelection: (translationNode: ElementNode, point: PointType, backward?: boolean) => TranslationBlockWithSelection | null;
 export declare const getTopLevelNodesFromSelection: (selection: RangeSelection) => ElementNode[];
-export declare const $extractTranslationBlocksFromSelection: (selection: RangeSelection) => TranslationBlockWithSelection[];
-export declare const processPlaceholders: (text: string, placeholder?: string) => string;
-export declare const restorePlaceholders: (original: string, replacedText: string, placeholder?: string) => string;
+export declare const $extractTranslationBlocksFromSelection: (editor: LexicalEditor, selection: RangeSelection) => TranslationBlockWithSelection[];

package/lib/ext/AITranslationPlugin/utils.js

@@ -1,15 +1,14 @@
-import { $isParagraphNode, $isTextNode, $createTextNode, $getNodeByKey, $isElementNode, $copyNode, } from 'lexical';
+import { $isParagraphNode, $isTextNode, $createTextNode, $getNodeByKey, $isElementNode, $copyNode, $createNodeSelection, } 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 { $createLinkNode, $isLinkNode } from '@lexical/link';
 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';
 const REGEX_INVALID_SEQUENCE = /^[#$%^&*()_+\-=\\[\]{};':"\\|,.<>/?]+$/;
-const PLACEHOLDER = '[[PLACEHOLDER]]';
 export const defaultTranslateAPI = async ({ texts, sourceLanguage, targetLanguage }, onData) => {
     if (!blockletExists('did-comments')) {
         throw new Error('Discuss Kit component must be installed.');
@@ -85,7 +84,7 @@ export const insertNodesAfter = (node, nodesToInsert) => {
  * - format 不是 code
  */
 export const $isValidTextNode = (node) => {
-    return $isTextNode(node) && !node.hasFormat('code');
+    return $isTextNode(node) && node.getTextContent().trim();
 };
 /**
  * 判断一个 top level node 是否含有效的 TextNode 的 child
@@ -143,24 +142,25 @@ 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 = (translationNodes) => {
+export const $extractTranslationBlocks = (editor, translationNodes) => {
     const _translationNodes = translationNodes ||
         $extractTranslationNodes($dfs()
             .map((x) => x.node)
             .filter((x) => $isElementNode(x)));
-    const keys = new Set(_translationNodes.map((x) => x.getKey()));
-    // 某些类型的特殊结点 (如 link node, nested list item), 也需要翻译
-    $dfs().forEach(({ node }) => {
-        if ($isElementNode(node) && !keys.has(node.getKey())) {
-            if ($isLinkNode(node) || $isListItemNode(node)) {
-                _translationNodes.push(node);
-            }
-        }
-    });
     return _translationNodes
         .map((node) => {
-        const text = $extractTextContentFromTranslationNode(node);
+        const text = $nodeToHtml(editor, node);
         return { key: node.getKey(), text };
     })
         .filter((item) => {
@@ -214,29 +214,36 @@ export const matchNonTextNodes = (text) => {
     }
     return matches;
 };
-export const $replaceTranslation = (translationBlock) => {
+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;
         const blockNode = $getNodeByKey(key);
-        /**
-         * ===== 特殊结点处理 =====
-         */
-        if ($isLinkNode(blockNode)) {
-            const linkNode = $createLinkNode(blockNode.getURL(), { title: blockNode.getTitle() });
-            linkNode.append($createTextNode(text));
-            blockNode.replace(linkNode);
-            return linkNode;
-        }
-        /**
-         * ===== 非特殊结点 =====
-         */
-        const matches = matchNonTextNodes(text);
-        const newNodes = rearrangeNodes(text, matches);
         if ($isElementNode(blockNode)) {
             // 清除所有 children
             blockNode.getChildren().forEach((child) => child.remove());
-            // 将新生成的 nodes 插入
-            blockNode.append(...newNodes);
+            const nodes = $htmlToNodes(editor, text);
+            if (nodes.length === 1) {
+                const node = nodes[0];
+                if ($isElementNode(node)) {
+                    blockNode.append(...node.getChildren());
+                }
+                else {
+                    blockNode.append(node);
+                }
+            }
+            else {
+                blockNode.append(...nodes);
+            }
         }
         return blockNode;
     }
@@ -245,8 +252,8 @@ export const $replaceTranslation = (translationBlock) => {
         return null;
     }
 };
-export const $replaceTranslations = (translationBlocks) => {
-    return translationBlocks.map($replaceTranslation);
+export const $replaceTranslations = (editor, translationBlocks) => {
+    return translationBlocks.map((item) => $replaceTranslation(item, editor));
 };
 export const $insertTranslations = (translationBlocks, selection) => {
     const nodes = translationBlocks
@@ -270,15 +277,6 @@ export const $insertTranslations = (translationBlocks, selection) => {
         insertNodesAfter(topLevelNodeOfInsertPoint, nodes);
     }
 };
-// const $getTextContentFromNodes = (nodes: LexicalNode[]) => {
-//   let textContent = '';
-//   nodes.forEach((node) => {
-//     if ($isElementNode(node)) {
-//       textContent += node.getTextContent();
-//     }
-//   });
-//   return textContent;
-// };
 export const $preview = (translationBlocks) => {
     const result = translationBlocks.map((item) => {
         const { text = '', key } = item;
@@ -303,7 +301,6 @@ export const $preview = (translationBlocks) => {
     });
     return result.join('\n');
 };
-// export const stripInvalidNodes = (nodes: LexicalNode[]) => {};
 /**
  * TODO: 剥除未选中的部分
  */
@@ -351,7 +348,7 @@ export const getTopLevelNodesFromSelection = (selection) => {
 };
 // TODO: 选中非首个 list item 进行翻译时, firstTranslationNode 为首个 list item
 // TODO: topLevelNode 内的简单选择, 比如只选择了一个段落或 list item 中的一个词语
-export const $extractTranslationBlocksFromSelection = (selection) => {
+export const $extractTranslationBlocksFromSelection = (editor, selection) => {
     const topLevelNodes = getTopLevelNodesFromSelection(selection);
     const translationNodes = $extractTranslationNodes(topLevelNodes);
     const startPoint = selection.isBackward() ? selection.focus : selection.anchor;
@@ -374,23 +371,7 @@ export const $extractTranslationBlocksFromSelection = (selection) => {
     const lastNode = translationNodes[translationNodes.length - 1];
     const lastTranslationBlock = $extractTranslationBlockWithSelection(lastNode, endPoint, true);
     // 去掉首尾 node
-    const blocks = $extractTranslationBlocks(translationNodes.slice(1, -1));
+    const blocks = $extractTranslationBlocks(editor, translationNodes.slice(1, -1));
     // console.log({ firstTranslationBlock, blocks, lastTranslationBlock });
     return [firstTranslationBlock, ...blocks, lastTranslationBlock].filter((item) => !!item?.text);
 };
-export const processPlaceholders = (text, placeholder = PLACEHOLDER) => {
-    const matches = text.match(/###\d+###/g);
-    if (matches) {
-        return text.replaceAll(/###\d+###/g, placeholder);
-    }
-    return text;
-};
-export const restorePlaceholders = (original, replacedText, placeholder = PLACEHOLDER) => {
-    const matches = original.match(/###\d+###/g);
-    if (matches) {
-        return matches.reduce((acc, cur) => {
-            return acc.replace(placeholder, cur);
-        }, replacedText);
-    }
-    return replacedText;
-};

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

@@ -19,7 +19,7 @@ export declare const restoreTranslation: (editor: LexicalEditor) => void;
  * - $isTextNode => true
  * - format 不是 code
  */
-export declare const $isValidTextNode: (node: LexicalNode) => boolean;
+export declare const $isValidTextNode: (node: LexicalNode) => string | false;
 /**
  * 判断一个 top level node 是否含有效的 TextNode 的 child
  */

package/lib/ext/InlineTranslationPlugin/utils.js

@@ -103,7 +103,7 @@ export const restoreTranslation = (editor) => {
  * - format 不是 code
  */
 export const $isValidTextNode = (node) => {
-    return $isTextNode(node) && !node.hasFormat('code');
+    return $isTextNode(node) && node.getTextContent().trim();
 };
 /**
  * 判断一个 top level node 是否含有效的 TextNode 的 child

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.1.40",
+  "version": "2.1.42",
   "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.40"
+    "@blocklet/pdf": "^2.1.42"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",