@blocklet/editor 2.1.127 → 2.1.129

package/lib/ext/BookmarkPlugin/Bookmark.js

@@ -85,9 +85,9 @@ const Root = styled.a `
   .be-bookmark-image {
     flex: 0 0 auto;
     margin-left: auto;
+    // The recommended size for an Open Graph (OG) image is 1200 x 630 pixels with an aspect ratio of 1.91:1
     width: 300px;
-    min-height: 128px;
-    max-height: 144px;
+    height: 158px;
     background-size: cover;
     background-position: center center;
   }
@@ -95,6 +95,7 @@ const Root = styled.a `
   @media (max-width: 768px) {
     .be-bookmark-image {
       width: 200px;
+      height: 105px;
     }
   }
 

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

@@ -20,6 +20,7 @@ export declare class EditorTranslator {
     private nodeKeyToSidMap;
     private sidToNodeKeyMap;
     private translations;
+    private sourceItems;
     constructor(editor: LexicalEditor, options: EditorTranslatorOptions);
     get isTranslated(): boolean;
     setEditor(editor: LexicalEditor): void;
@@ -34,5 +35,7 @@ export declare class EditorTranslator {
     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

@@ -15,6 +15,7 @@ export class EditorTranslator {
     nodeKeyToSidMap = new Map();
     sidToNodeKeyMap = new Map();
     translations = [];
+    sourceItems = [];
     constructor(editor, options) {
         this.editor = editor;
         this.options = options;
@@ -62,11 +63,12 @@ export class EditorTranslator {
             return;
         }
         try {
+            this.sourceItems = nodes.map(({ node, html }) => ({
+                sid: this.nodeKeyToSidMap.get(node.getKey()),
+                text: html,
+            }));
             this.translations = await translateService({
-                sourceItems: nodes.map(({ node, html }) => ({
-                    sid: this.nodeKeyToSidMap.get(node.getKey()),
-                    text: html,
-                })),
+                sourceItems: this.sourceItems,
                 targetLanguage,
                 useCache,
             });
@@ -102,10 +104,12 @@ export class EditorTranslator {
                             node.append(translationNode);
                         }
                         else {
-                            node.append(translationNode, $createTranslationNode({
-                                translatedNodes: node.getChildren(),
-                                data: { sid, displayMode: this.options.displayMode },
-                            }) // 利用一个隐藏的 TranslationNode 来存储 original nodes, 用于单个结点恢复
+                            node.getChildren().forEach((child) => child.remove());
+                            node.append(translationNode
+                            // $createTranslationNode({
+                            //   translatedNodes: node.getChildren(),
+                            //   data: { sid, displayMode: this.options.displayMode },
+                            // }) // 利用一个隐藏的 TranslationNode 来存储 original nodes, 用于单个结点恢复
                             );
                         }
                     }
@@ -168,6 +172,12 @@ export class EditorTranslator {
         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();

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

@@ -6,6 +6,7 @@ interface Props {
         targetLanguage: string;
     }) => void;
     onRestore?: () => void;
+    showTranslationBadge?: boolean;
 }
 export declare function InlineTranslationPlugin(props: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -1,17 +1,31 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useEffect, useRef } from 'react';
-import { Box } from '@mui/material';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Box, ClickAwayListener, Stack } from '@mui/material';
 import { useInViewport, usePrevious } from 'ahooks';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { usePopper } from 'react-popper';
+import { createPortal } from 'react-dom';
+import { css, Global } from '@emotion/react';
+import blue from '@mui/material/colors/blue';
 import { useInlineTranslationStore, useStatus, useTargetLanguage } from './store';
 import { useEditorTranslator } from './EditorTranslator';
 import { NODE_TYPE } from './TranslationNode';
 const translations = {
-    en: 'AI-Translated Content',
-    zh: 'AI 翻译内容',
+    translatedContent: {
+        en: 'AI-Translated Content',
+        zh: 'AI 翻译内容',
+    },
+    original: {
+        en: 'Original',
+        zh: '原文',
+    },
+    translation: {
+        en: 'Translation',
+        zh: '翻译',
+    },
 };
-function InternalInlineTranslationPlugin({ translateService, detectLanguage, onTranslate, onRestore }) {
+function InternalInlineTranslationPlugin({ translateService, detectLanguage, onTranslate, onRestore, showTranslationBadge = true, }) {
     const [editor] = useLexicalComposerContext();
     const [inViewport] = useInViewport(editor.getRootElement());
     const setStatus = useInlineTranslationStore((s) => s.setStatus);
@@ -22,7 +36,6 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage, onT
     const status = useStatus(editor);
     const previousStatus = usePrevious(status);
     const editorTranslator = useEditorTranslator({ displayMode });
-    const hoveringTranslationElementRef = useHoveringTranslationElement();
     const { locale } = useLocaleContext();
     const handleTranslate = async () => {
         try {
@@ -61,17 +74,6 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage, onT
     useEffect(() => {
         editorTranslator.updateOptions({ displayMode });
     }, [editorTranslator, displayMode]);
-    useEffect(() => {
-        const handler = (event) => {
-            if (event.ctrlKey && hoveringTranslationElementRef.current?.dataset?.sid) {
-                editorTranslator.restore(hoveringTranslationElementRef.current.dataset.sid);
-            }
-        };
-        document.addEventListener('keydown', handler);
-        return () => {
-            document.removeEventListener('keydown', handler);
-        };
-    }, [editor, editorTranslator]);
     // 对于翻译后的内容，禁止 checkbox 点击交互
     useEffect(() => {
         const onClick = (event) => {
@@ -93,17 +95,18 @@ function InternalInlineTranslationPlugin({ translateService, detectLanguage, onT
     if (editor.isEditable()) {
         return null;
     }
-    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,
-                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' } }));
+    return (_jsxs(_Fragment, { children: [_jsx(TranslationElementPopper, { editorTranslator: editorTranslator }), showTranslationBadge && 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,
+                        fontWeight: 'medium',
+                        color: 'text.secondary',
+                        bgcolor: 'grey.50',
+                        border: 1,
+                        borderColor: 'divider',
+                        borderRadius: 0.5,
+                    }, children: ["\uD83E\uDD16", ' ', translations.translatedContent[locale] ||
+                            translations.translatedContent.en] }) })) : (_jsx(Box, { sx: { position: 'absolute', top: 0, bottom: 0, left: 0, width: '1px' } }))] }));
 }
 export function InlineTranslationPlugin(props) {
     const [editor] = useLexicalComposerContext();
@@ -112,23 +115,114 @@ export function InlineTranslationPlugin(props) {
     }
     return _jsx(InternalInlineTranslationPlugin, { ...props });
 }
-function useHoveringTranslationElement() {
+function TranslationElementPopper({ editorTranslator }) {
     const [editor] = useLexicalComposerContext();
-    const hoveringElementRef = useRef(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const popperElementRef = useRef(null);
+    const [hoveringTranslationElement, setHoveringTranslationElement] = useState(null);
+    const [originalText, setOriginalText] = useState(null);
+    const { locale } = useLocaleContext();
+    useLayoutEffect(() => {
+        popperElementRef.current = popperElement;
+    }, [popperElement]);
+    const reset = () => {
+        setHoveringTranslationElement(null);
+        setOriginalText(null);
+    };
+    const isInsidePopper = (element) => {
+        return (popperElementRef.current && (popperElementRef.current === element || popperElementRef.current.contains(element)));
+    };
+    const hoveringTranslationElementPopper = usePopper(hoveringTranslationElement, popperElement, {
+        strategy: 'fixed',
+        placement: 'left-start',
+        modifiers: [
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: ['bottom-start'],
+                },
+            },
+        ],
+    });
+    const translationPreviewPopper = usePopper(hoveringTranslationElement, popperElement, {
+        strategy: 'fixed',
+        placement: 'bottom-start',
+        modifiers: [
+            {
+                name: 'flip',
+            },
+        ],
+    });
     useEffect(() => {
-        const handler = (event) => {
-            const translationElement = event.target.closest(`.${NODE_TYPE}`);
-            if (translationElement && editor.getRootElement()?.contains(translationElement)) {
-                hoveringElementRef.current = translationElement;
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            const handleMouseOver = (event) => {
+                const target = event.target;
+                if (isInsidePopper(target)) {
+                    return;
+                }
+                const translationElement = target.closest(`.${NODE_TYPE}`);
+                if (translationElement) {
+                    setHoveringTranslationElement(translationElement);
+                }
+                else {
+                    reset();
+                }
+            };
+            let timer = null;
+            const handleMouseOut = (event) => {
+                const relatedTarget = event.relatedTarget;
+                if (timer) {
+                    clearTimeout(timer);
+                }
+                timer = setTimeout(() => {
+                    if (rootElement && !rootElement?.contains(relatedTarget) && !isInsidePopper(relatedTarget)) {
+                        reset();
+                    }
+                }, 100);
+            };
+            if (prevRootElement) {
+                prevRootElement.removeEventListener('mouseover', handleMouseOver);
+                prevRootElement.removeEventListener('mouseout', handleMouseOut);
             }
-            else {
-                hoveringElementRef.current = null;
+            if (rootElement) {
+                rootElement.addEventListener('mouseover', handleMouseOver);
+                rootElement.addEventListener('mouseout', handleMouseOut);
             }
-        };
-        document.addEventListener('mouseover', handler);
-        return () => {
-            document.removeEventListener('mouseover', handler);
-        };
-    }, []);
-    return hoveringElementRef;
+        });
+    }, [editor]);
+    if (!hoveringTranslationElement) {
+        return null;
+    }
+    const globalStyles = css `
+    .inline-translation-node[data-eid='${editor.getKey()}'][data-sid='${hoveringTranslationElement.dataset.sid}'] > * {
+      background-color: ${blue[50]};
+      border-radius: 4px;
+    }
+  `;
+    return createPortal(_jsxs(_Fragment, { children: [!!originalText && (_jsxs(_Fragment, { children: [_jsx(Global, { styles: globalStyles }), _jsx(ClickAwayListener, { onClickAway: reset, children: _jsxs(Box, { style: translationPreviewPopper.styles.popper, ...translationPreviewPopper.attributes.popper, sx: {
+                                position: 'relative',
+                                zIndex: 'modal',
+                                maxWidth: 600,
+                                maxHeight: 400,
+                                p: 2,
+                                border: 1,
+                                borderColor: 'divider',
+                                borderRadius: 1,
+                                fontSize: 13,
+                                bgcolor: '#fff',
+                                boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+                                'h1,h2,h3,h4,h5,h6': {
+                                    margin: 0,
+                                },
+                            }, children: [_jsxs(Box, { children: [_jsx(Box, { sx: { color: 'text.secondary', fontWeight: 'medium' }, children: translations.original[locale] || translations.original.en }), _jsx(Box, { dangerouslySetInnerHTML: { __html: originalText } })] }), _jsxs(Box, { sx: { mt: 1.5 }, children: [_jsx(Box, { sx: { color: 'text.secondary', fontWeight: 'medium' }, children: translations.translation[locale] ||
+                                                translations.translation.en }), _jsx(Box, { dangerouslySetInnerHTML: {
+                                                __html: editorTranslator.getTranslationText(hoveringTranslationElement.dataset.sid) || '',
+                                            } })] })] }) })] })), _jsx(Box, { ref: setPopperElement, style: hoveringTranslationElementPopper.styles.popper, ...hoveringTranslationElementPopper.attributes.popper, sx: { zIndex: 'modal' }, onMouseLeave: reset, children: !originalText && (_jsx(Stack, { direction: "row", alignItems: hoveringTranslationElement.clientHeight > 100 ? 'center' : 'flex-start', sx: {
+                        pr: 1,
+                        pt: 0.5,
+                        color: 'text.secondary',
+                        fontSize: 12,
+                        cursor: 'pointer',
+                        height: hoveringTranslationElement.clientHeight,
+                    }, onClick: () => setOriginalText(originalText ? null : editorTranslator.getOriginalText(hoveringTranslationElement.dataset.sid) || ''), children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 0.25, children: [_jsx("i", { className: "iconify", "data-icon": "tabler:tooltip", "data-height": 16 }), translations.original[locale] || translations.original.en] }) })) })] }), document.body);
 }

package/lib/ext/InlineTranslationPlugin/TranslationNode.js

@@ -15,6 +15,7 @@ export class TranslationNode extends ElementNode {
     createDOM(config, editor) {
         const dom = document.createElement('div');
         dom.classList.add(NODE_TYPE, `${NODE_TYPE}-${this.__data.displayMode}`);
+        dom.dataset.eid = editor.getKey();
         dom.dataset.sid = this.__data.sid;
         return dom;
     }

package/package.json

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