@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,2 @@
+export * from './EditorHolderPlugin';
+export * from './EditorHolderContext';

package/lib/ext/EditorHolderPlugin/index.js

@@ -0,0 +1,2 @@
+export * from './EditorHolderPlugin';
+export * from './EditorHolderContext';

package/lib/ext/EditorReadyPlugin.d.ts

@@ -0,0 +1,3 @@
+export declare function EditorReadyPlugin({ onReady }: {
+    onReady: () => void;
+}): null;

package/lib/ext/EditorReadyPlugin.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+export function EditorReadyPlugin({ onReady }) {
+    const [editor] = useLexicalComposerContext();
+    const readyRef = useRef(false);
+    useEffect(() => {
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            if (rootElement && !readyRef.current) {
+                readyRef.current = true;
+                onReady();
+            }
+        });
+    }, [editor]);
+    return null;
+}

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

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

package/lib/ext/FilePlugin/FileNode.js

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

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

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

package/lib/ext/FilePlugin/FilePlugin.js

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

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

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

package/lib/ext/FilePlugin/index.js

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

package/lib/ext/HeadingsIdPlugin.d.ts

@@ -0,0 +1 @@
+export declare function HeadingsIdPlugin(): null;

package/lib/ext/HeadingsIdPlugin.js

@@ -0,0 +1,67 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { HeadingNode } from '@lexical/rich-text';
+import { $createTextNode } from 'lexical';
+import { useEffect, useRef } from 'react';
+import { $createLinkNode, $isLinkNode } from '@lexical/link';
+// Generates a random ID
+function genRandomId() {
+    return Math.random().toString(36).substr(2, 3);
+}
+function removeAnchors(headingNode) {
+    headingNode.getChildren().forEach((child) => {
+        if ($isLinkNode(child) && child.getURL().startsWith('#')) {
+            child.remove();
+        }
+    });
+}
+const headingIdTransform = (headingNode, editor) => {
+    // enable this transformer only when editor is not editable
+    if (editor.isEditable()) {
+        // 编辑模式下, 清理多余的 anchors (因在阅读模式下勾选 checkbox 导致 anchors 被持久化, #1737)
+        removeAnchors(headingNode);
+        return;
+    }
+    const el = editor.getElementByKey(headingNode.getKey());
+    if (el) {
+        const id = el.getAttribute('id');
+        if (!id) {
+            const randomId = genRandomId();
+            const textContent = headingNode.getTextContent();
+            const headingId = encodeURIComponent(textContent
+                .toLowerCase()
+                .replace(/\s+/g, '-')
+                .replace(/(^-|-$)/g, '') || randomId);
+            // avoid duplicate id
+            const uniqueId = document.getElementById(headingId) ? `${headingId}-${randomId}` : headingId;
+            el.setAttribute('id', uniqueId);
+            // 先清理 heading 内的 anchor, 再添加新的 anchor, 避免 heading 内出现重复的 anchor (#1737)
+            removeAnchors(headingNode);
+            const linkNode = $createLinkNode(`#${uniqueId}`).append($createTextNode('#'));
+            headingNode.append(linkNode);
+        }
+    }
+};
+// refer to: https://gist.github.com/ericdcobb/b9dc0e9d985c8bd0d9a3ecf9ec87d417#file-scrolltolocation-js
+const useScrollToLocation = () => {
+    const scrolledRef = useRef(false);
+    const { hash } = window.location;
+    useEffect(() => {
+        if (hash && !scrolledRef.current) {
+            const id = hash.replace('#', '');
+            const element = document.getElementById(id);
+            if (element) {
+                // @see https://github.com/facebook/react/issues/23396
+                element.scrollIntoView();
+                scrolledRef.current = true;
+            }
+        }
+    });
+};
+export function HeadingsIdPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerNodeTransform(HeadingNode, (node) => headingIdTransform(node, editor));
+    }, [editor]);
+    useScrollToLocation();
+    return null;
+}

package/lib/ext/ImagePathFixerPlugin.d.ts

@@ -0,0 +1 @@
+export default function ImagePathFixerPlugin(): null;

package/lib/ext/ImagePathFixerPlugin.js

@@ -0,0 +1,31 @@
+import { useLayoutEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { joinURL } from 'ufo';
+import { discussKitUploadsUrl } from './utils';
+import { ImageNode } from '../main/nodes/ImageNode';
+const originalExportJSON = ImageNode.prototype.exportJSON;
+const ensureLeadingSlash = (str) => (str.startsWith('/') ? str : `/${str}`);
+ImageNode.prototype.exportJSON = function exportJSON() {
+    const json = originalExportJSON.call(this);
+    // 保存 editor content 时恢复 image src (剥除 discussKitUploadsUrl)
+    if (json.src && json.src.startsWith(discussKitUploadsUrl)) {
+        json.src = json.src.replace(discussKitUploadsUrl, '');
+        json.src = ensureLeadingSlash(json.src);
+    }
+    return json;
+};
+function imageNodeTransform(node) {
+    const targetNode = node;
+    const src = targetNode.getSrc();
+    // 仅处理以 "/" 为前缀的 image src, 并且避免重复处理
+    if (src?.startsWith('/') && !src.startsWith(discussKitUploadsUrl)) {
+        targetNode.setSrc(joinURL(discussKitUploadsUrl, src));
+    }
+}
+export default function ImagePathFixerPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useLayoutEffect(() => {
+        return editor.registerNodeTransform(ImageNode, imageNodeTransform);
+    }, [editor]);
+    return null;
+}

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

@@ -0,0 +1,42 @@
+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 preprocessEditorState;
+    private nodeKeyToSidMap;
+    private sidToNodeKeyMap;
+    private translations;
+    private sourceItems;
+    isTranslating: boolean;
+    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;
+    preprocessNodes(): Promise<void>;
+    getOriginalText(sid: string): string | undefined;
+    getTranslationText(sid: string): string | undefined;
+}
+export declare function useEditorTranslator(options: EditorTranslatorOptions): EditorTranslator;

package/lib/ext/InlineTranslationPlugin/EditorTranslator.js

@@ -0,0 +1,199 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+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 { $isVideoNode } from '../VideoPlugin/VideoNode';
+import { $isFileNode } from '../FilePlugin/FileNode';
+export class EditorTranslator {
+    editor;
+    options;
+    originalEditorState;
+    preprocessEditorState = null;
+    nodeKeyToSidMap = new Map();
+    sidToNodeKeyMap = new Map();
+    translations = [];
+    sourceItems = [];
+    isTranslating = false;
+    constructor(editor, options) {
+        this.editor = editor;
+        this.options = options;
+        this.originalEditorState = editor.getEditorState();
+    }
+    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.preprocessEditorState || this.originalEditorState);
+            this.applyTranslations();
+        }, 10);
+    }
+    async translate({ targetLanguage, translateService, detectLanguage, useCache, }) {
+        if (this.isTranslating) {
+            return;
+        }
+        this.isTranslating = true;
+        // 翻译前备份 editor state (fix 恢复原文时图片路径错误的问题)
+        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 = [];
+        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.sourceItems = nodes.map(({ node, html }) => ({
+                sid: this.nodeKeyToSidMap.get(node.getKey()),
+                text: html,
+            }));
+            this.translations = await translateService({
+                sourceItems: this.sourceItems,
+                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();
+        }
+        this.isTranslating = false;
+    }
+    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.getChildren().forEach((child) => child.remove());
+                            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);
+                this.translations = [];
+            }
+            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);
+                }
+            }
+        });
+    }
+    async preprocessNodes() {
+        const isSpecialNode = (node) => {
+            return $isExcalidrawNode(node) || $isImageNode(node) || $isVideoNode(node) || $isFileNode(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();
+    }
+    getOriginalText(sid) {
+        return this.sourceItems.find((item) => item.sid === sid)?.text;
+    }
+    getTranslationText(sid) {
+        return this.translations.find((item) => item.sid === sid)?.text;
+    }
+}
+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

@@ -0,0 +1,12 @@
+import { TranslateService } from './EditorTranslator';
+interface Props {
+    translateService: TranslateService;
+    detectLanguage: (text: string) => string | null;
+    onTranslate?: ({ targetLanguage }: {
+        targetLanguage: string;
+    }) => void;
+    onRestore?: () => void;
+    showTranslationBadge?: boolean;
+}
+export declare function InlineTranslationPlugin(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};