@blocklet/editor 2.1.128 → 2.1.129

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

@@ -36,5 +36,6 @@ export declare class EditorTranslator {
     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

@@ -175,6 +175,9 @@ export class EditorTranslator {
     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.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useEffect, useState } from 'react';
-import { Box, Stack } 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';
@@ -17,6 +20,10 @@ const translations = {
         en: 'Original',
         zh: '原文',
     },
+    translation: {
+        en: 'Translation',
+        zh: '翻译',
+    },
 };
 function InternalInlineTranslationPlugin({ translateService, detectLanguage, onTranslate, onRestore, showTranslationBadge = true, }) {
     const [editor] = useLexicalComposerContext();
@@ -111,19 +118,40 @@ export function InlineTranslationPlugin(props) {
 function TranslationElementPopper({ editorTranslator }) {
     const [editor] = useLexicalComposerContext();
     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 popperElement && (popperElement === element || popperElement.contains(element));
+        return (popperElementRef.current && (popperElementRef.current === element || popperElementRef.current.contains(element)));
     };
-    const { styles, attributes } = usePopper(hoveringTranslationElement, popperElement, {
+    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(() => {
         return editor.registerRootListener((rootElement, prevRootElement) => {
@@ -147,10 +175,7 @@ function TranslationElementPopper({ editorTranslator }) {
                     clearTimeout(timer);
                 }
                 timer = setTimeout(() => {
-                    const editorContainer = rootElement?.closest('.be-shell');
-                    // - popper 在 editorContainer 与 editor root 之间, 所以使用 `editorContainer.contains(relatedTarget)` 来检测
-                    // - `editorContainer === relatedTarget` 也表示从 editor 移出
-                    if (rootElement && (editorContainer === relatedTarget || !editorContainer?.contains(relatedTarget))) {
+                    if (rootElement && !rootElement?.contains(relatedTarget) && !isInsidePopper(relatedTarget)) {
                         reset();
                     }
                 }, 100);
@@ -168,26 +193,36 @@ function TranslationElementPopper({ editorTranslator }) {
     if (!hoveringTranslationElement) {
         return null;
     }
-    return (_jsx(Box, { ref: setPopperElement, style: styles.popper, ...attributes.popper, sx: { zIndex: 'modal', mt: '-4px' }, onMouseLeave: reset, children: originalText ? (_jsxs(Box, { 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: [_jsx(Box, { sx: { color: 'text.secondary' }, children: translations.original[locale] || translations.original.en }), _jsx(Box, { dangerouslySetInnerHTML: { __html: originalText } })] })) : (_jsxs(Stack, { direction: "row", alignItems: "center", gap: 0.5, sx: {
-                height: 28,
-                pr: 2,
-                color: 'text.secondary',
-                fontSize: 12,
-                cursor: 'pointer',
-            }, onClick: () => setOriginalText(originalText ? null : editorTranslator.getOriginalText(hoveringTranslationElement.dataset.sid) || ''), children: [_jsx("i", { className: "iconify", "data-icon": "tabler:tooltip", "data-height": 16 }), translations.original[locale] || translations.original.en] })) }));
+    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.128",
+  "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.128"
+    "@blocklet/pdf": "^2.1.129"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",