@blocklet/editor 2.1.39 → 2.1.41

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

@@ -0,0 +1,13 @@
+import { LexicalEditor } from 'lexical';
+import { ReactNode } from 'react';
+interface ContextValue {
+    editor: LexicalEditor | null;
+    setEditor: (editor: LexicalEditor | null) => void;
+}
+export declare const EditorHolderContext: import("react").Context<ContextValue | null>;
+export declare function useEditorHolder(): ContextValue | null;
+export declare function EditorHolderProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useEditor(): LexicalEditor | null;
+export {};

package/lib/ext/EditorHolderPlugin/EditorHolderContext.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from 'react';
+export const EditorHolderContext = createContext(null);
+export function useEditorHolder() {
+    return useContext(EditorHolderContext);
+}
+export function EditorHolderProvider({ children }) {
+    const [editor, setEditor] = useState(null);
+    const value = useMemo(() => ({ editor, setEditor }), [editor]);
+    return _jsx(EditorHolderContext.Provider, { value: value, children: children });
+}
+export function useEditor() {
+    const holder = useEditorHolder();
+    return holder?.editor ?? null;
+}

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

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

package/lib/ext/EditorHolderPlugin/EditorHolderPlugin.js

@@ -0,0 +1,11 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { useEditorHolder } from './EditorHolderContext';
+export function EditorHolderPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const holder = useEditorHolder();
+    useEffect(() => {
+        holder?.setEditor(editor);
+    }, [editor]);
+    return null;
+}

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/InlineTranslationPlugin/InlineTranslationPlugin.d.ts

@@ -0,0 +1,7 @@
+import { TranslateService } from './utils';
+interface Props {
+    translateService: TranslateService;
+    detectLanguage: (text: string) => string | null;
+}
+export declare function InlineTranslationPlugin(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { Box } from '@mui/material';
+import { useInViewport } from 'ahooks';
+import { restoreTranslation, translateEditorNodes } from './utils';
+import { useInlineTranslationStore, useStatus, useTargetLanguage } from './store';
+function InternalInlineTranslationPlugin({ translateService, detectLanguage }) {
+    const [editor] = useLexicalComposerContext();
+    const [inViewport] = useInViewport(editor.getRootElement());
+    const setStatus = useInlineTranslationStore((s) => s.setStatus);
+    const registerEditor = useInlineTranslationStore((s) => s.registerEditor);
+    const targetLanguage = useTargetLanguage();
+    const status = useStatus(editor);
+    const handleTranslate = async () => {
+        try {
+            setStatus(editor, 'processing');
+            await translateEditorNodes({
+                editor,
+                translateService,
+                targetLanguage,
+                detectLanguage,
+            });
+            setStatus(editor, 'completed');
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    const handleRestore = () => {
+        restoreTranslation(editor);
+        setStatus(editor, 'idle');
+    };
+    useEffect(() => {
+        return registerEditor(editor);
+    }, [editor]);
+    useEffect(() => {
+        if (inViewport && status === 'pending') {
+            handleTranslate();
+        }
+    }, [editor, status, inViewport]);
+    useEffect(() => {
+        if (status === 'idle') {
+            handleRestore();
+        }
+    }, [editor, status]);
+    if (editor.isEditable()) {
+        return null;
+    }
+    return _jsx(Box, { sx: { position: 'absolute', top: 0, bottom: 0, left: 0, width: '1px' } });
+}
+export function InlineTranslationPlugin(props) {
+    const [editor] = useLexicalComposerContext();
+    if (editor.isEditable()) {
+        return null;
+    }
+    return _jsx(InternalInlineTranslationPlugin, { ...props });
+}

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export interface TranslationPayload {
+    key?: NodeKey;
+    html: string;
+}
+export type SerializedTranslationNode = Spread<{
+    html: string;
+}, SerializedLexicalNode>;
+export declare class TranslationNode extends DecoratorNode<JSX.Element> {
+    __html: string;
+    static getType(): string;
+    static clone(node: TranslationNode): TranslationNode;
+    static importJSON(serializedNode: SerializedTranslationNode): TranslationNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(html: string, key?: NodeKey);
+    exportJSON(): SerializedTranslationNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    decorate(): JSX.Element;
+}
+export declare function $createTranslationNode({ html, key }: TranslationPayload): TranslationNode;
+export declare function $isTranslationNode(node: LexicalNode | null | undefined): node is TranslationNode;

package/lib/ext/InlineTranslationPlugin/TranslationNode.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { Box } from '@mui/material';
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+function $convertTranslationElement(domNode) {
+    const element = domNode;
+    const node = $createTranslationNode({ html: element.innerHTML });
+    return { node };
+}
+export class TranslationNode extends DecoratorNode {
+    __html;
+    static getType() {
+        return 'translation';
+    }
+    static clone(node) {
+        return new TranslationNode(node.__html, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { html } = serializedNode;
+        const node = $createTranslationNode({ html });
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('span');
+        element.innerHTML = this.__html;
+        return { element };
+    }
+    static importDOM() {
+        return {
+            span: (node) => ({
+                conversion: $convertTranslationElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(html, key) {
+        super(key);
+        this.__html = html;
+    }
+    exportJSON() {
+        return {
+            html: this.__html,
+            type: 'translation',
+            version: 1,
+        };
+    }
+    createDOM(config) {
+        const span = document.createElement('span');
+        span.className = 'lexical-editor-inline-translation';
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    decorate() {
+        return (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(Box, { component: "span", sx: { borderBottom: '2px dashed', borderColor: 'info.light' }, dangerouslySetInnerHTML: { __html: this.__html } })] }));
+    }
+}
+export function $createTranslationNode({ html, key }) {
+    return $applyNodeReplacement(new TranslationNode(html, key));
+}
+export function $isTranslationNode(node) {
+    return node instanceof TranslationNode;
+}

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

@@ -0,0 +1,4 @@
+export * from './TranslationNode';
+export * from './utils';
+export * from './InlineTranslationPlugin';
+export * from './store';

package/lib/ext/InlineTranslationPlugin/index.js

@@ -0,0 +1,4 @@
+export * from './TranslationNode';
+export * from './utils';
+export * from './InlineTranslationPlugin';
+export * from './store';

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

@@ -0,0 +1,37 @@
+import { LexicalEditor } from 'lexical';
+type TranslateStatus = 'idle' | 'pending' | 'processing' | 'completed';
+interface State {
+    targetLanguage: string | null;
+    autoTranslate: boolean;
+    editors: Map<LexicalEditor, TranslateStatus>;
+}
+interface Action {
+    translate: (editor?: LexicalEditor) => void;
+    showOriginal: (editor?: LexicalEditor) => void;
+    setTargetLanguage: (targetLanguage: string) => void;
+    setAutoTranslate: (autoTranslate: boolean) => void;
+    setStatus: (editor: LexicalEditor, status: TranslateStatus) => void;
+    registerEditor: (editor: LexicalEditor) => () => void;
+    unregisterEditor: (editor: LexicalEditor) => void;
+}
+export declare const useInlineTranslationStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<State & Action>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<State & Action, {
+            targetLanguage: string | null;
+            autoTranslate: boolean;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: State & Action) => void) => () => void;
+        onFinishHydration: (fn: (state: State & Action) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<State & Action, {
+            targetLanguage: string | null;
+            autoTranslate: boolean;
+        }>>;
+    };
+}>;
+export declare const useStatus: (editor: LexicalEditor) => TranslateStatus | undefined;
+export declare const useIsIdle: () => boolean;
+export declare const useTargetLanguage: () => any;
+export {};

package/lib/ext/InlineTranslationPlugin/store.js

@@ -0,0 +1,67 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+export const useInlineTranslationStore = create()(persist((set, get) => ({
+    targetLanguage: null,
+    autoTranslate: false,
+    editors: new Map(),
+    translate: (editor) => {
+        if (editor) {
+            set((state) => ({ editors: new Map(state.editors).set(editor, 'pending') }));
+        }
+        else {
+            set((state) => ({
+                editors: new Map(Array.from(state.editors.entries()).map(([k, v]) => [k, v === 'idle' ? 'pending' : v])),
+            }));
+        }
+    },
+    showOriginal: (editor) => {
+        if (editor) {
+            set((state) => ({ editors: new Map(state.editors).set(editor, 'idle') }));
+        }
+        else {
+            set((state) => ({
+                editors: new Map(Array.from(state.editors.entries()).map(([k]) => [k, 'idle'])),
+            }));
+        }
+    },
+    setTargetLanguage: (targetLanguage) => set({ targetLanguage }),
+    setAutoTranslate: (autoTranslate) => {
+        set({ autoTranslate });
+        if (autoTranslate) {
+            get().translate();
+        }
+    },
+    setStatus: (editor, status) => {
+        set((state) => ({ editors: new Map(state.editors).set(editor, status) }));
+    },
+    registerEditor: (editor) => {
+        set((state) => ({
+            editors: new Map(state.editors).set(editor, state.autoTranslate ? 'pending' : 'idle'),
+        }));
+        return () => {
+            get().unregisterEditor(editor);
+        };
+    },
+    unregisterEditor: (editor) => {
+        set((state) => ({
+            editors: new Map(Array.from(state.editors.entries()).filter(([k]) => k !== editor)),
+        }));
+    },
+}), {
+    name: 'inline-translation-settings',
+    partialize: (state) => ({
+        targetLanguage: state.targetLanguage,
+        autoTranslate: state.autoTranslate,
+    }),
+}));
+export const useStatus = (editor) => {
+    return useInlineTranslationStore((state) => state.editors.get(editor));
+};
+export const useIsIdle = () => {
+    return useInlineTranslationStore((state) => Array.from(state.editors.values()).every((x) => x === 'idle'));
+};
+export const useTargetLanguage = () => {
+    const { locale } = useLocaleContext();
+    return useInlineTranslationStore((state) => state.targetLanguage ?? locale);
+};

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

@@ -0,0 +1,27 @@
+import { ElementNode, LexicalNode, LexicalEditor } from 'lexical';
+interface TranslateItem {
+    uid: string;
+    text: string;
+}
+export type TranslateService = ({ sourceItems, targetLanguage, }: {
+    sourceItems: TranslateItem[];
+    targetLanguage: string;
+}) => Promise<TranslateItem[]>;
+export declare const translateEditorNodes: ({ editor, targetLanguage, translateService, detectLanguage, }: {
+    editor: LexicalEditor;
+    targetLanguage: string;
+    translateService: TranslateService;
+    detectLanguage: (text: string) => string | null;
+}) => Promise<void>;
+export declare const restoreTranslation: (editor: LexicalEditor) => void;
+/**
+ * 判断 node 是否是有效的 TextNode
+ * - $isTextNode => true
+ * - format 不是 code
+ */
+export declare const $isValidTextNode: (node: LexicalNode) => boolean;
+/**
+ * 判断一个 top level node 是否含有效的 TextNode 的 child
+ */
+export declare const $hasValidTextNode: (elementNode: ElementNode) => boolean;
+export {};

package/lib/ext/InlineTranslationPlugin/utils.js

@@ -0,0 +1,113 @@
+import { $isParagraphNode, $isTextNode, $isElementNode, $createNodeSelection, $nodesOfType, $getNodeByKey, } from 'lexical';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $isListNode, $isListItemNode } from '@lexical/list';
+import { $dfs } from '@lexical/utils';
+import { $generateHtmlFromNodes } from '@lexical/html';
+import { $createEmojiNode } from '../../main/nodes/EmojiNode';
+import { $createTranslationNode, TranslationNode } from './TranslationNode';
+/**
+ * Creates a mapping between node keys and sequential IDs
+ * @param reversed If true, maps ID -> key. If false, maps key -> ID
+ * @returns Map of either [key -> ID] or [ID -> key]
+ */
+const getNodeIds = (reversed = false) => {
+    const nodes = $dfs();
+    let counter = 0;
+    if (reversed) {
+        return new Map(nodes.map((x) => [`${counter++}`, x.node.getKey()]));
+    }
+    return new Map(nodes.map((x) => [x.node.getKey(), `${counter++}`]));
+};
+const collectTranslatableNodes = () => {
+    const nodes = $dfs()
+        .map((x) => x.node)
+        .filter((node) => $isElementNode(node) &&
+        ($isHeadingNode(node) || $isParagraphNode(node) || $isQuoteNode(node) || $isListItemNode(node)))
+        .filter((node) => {
+        return $hasValidTextNode(node) && !!node.getTextContent().trim();
+    });
+    return nodes;
+};
+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;
+};
+export const translateEditorNodes = async ({ editor, targetLanguage, translateService, detectLanguage, }) => {
+    let nodes = [];
+    const nodeUniqueIdMap = editor.getEditorState().read(() => getNodeIds());
+    editor.update(() => {
+        nodes = collectTranslatableNodes()
+            .filter((node) => detectLanguage(node.getTextContent()) !== targetLanguage)
+            .map((node) => {
+            const html = nodeToHtml(editor, node);
+            return { node, html };
+        });
+        nodes.forEach(({ node }) => {
+            node.append($createEmojiNode('global-loading', ''));
+        });
+    }, { discrete: true });
+    if (nodes.length === 0) {
+        return;
+    }
+    let translations = null;
+    try {
+        translations = await translateService({
+            sourceItems: nodes.map(({ node, html }) => ({ uid: nodeUniqueIdMap.get(node.getKey()), text: html })),
+            targetLanguage,
+        });
+    }
+    catch (err) {
+        console.error(err);
+    }
+    finally {
+        nodes.forEach(({ node }, index) => {
+            editor.update(() => {
+                const lastChild = node.getLastChild();
+                if (lastChild) {
+                    lastChild.remove();
+                }
+            });
+        });
+    }
+    if (translations) {
+        applyTranslations(editor, translations);
+    }
+};
+const applyTranslations = (editor, translations) => {
+    editor.update(() => {
+        const nodeUniqueIdMap = getNodeIds(true);
+        translations.forEach(({ uid, text }) => {
+            const node = $getNodeByKey(nodeUniqueIdMap.get(uid));
+            if (node) {
+                node.append($createTranslationNode({ html: text }));
+            }
+        });
+    });
+};
+export const restoreTranslation = (editor) => {
+    editor.update(() => {
+        $nodesOfType(TranslationNode).forEach((node) => {
+            node.remove();
+        });
+    });
+};
+/**
+ * 判断 node 是否是有效的 TextNode
+ * - $isTextNode => true
+ * - format 不是 code
+ */
+export const $isValidTextNode = (node) => {
+    return $isTextNode(node) && !node.hasFormat('code');
+};
+/**
+ * 判断一个 top level node 是否含有效的 TextNode 的 child
+ */
+export const $hasValidTextNode = (elementNode) => {
+    return elementNode.getChildren().some($isValidTextNode);
+};

package/lib/main/editor.js

@@ -82,6 +82,7 @@ import { BlurTextPlugin } from '../ext/BlurTextPlugin';
 import { useResponsiveTable } from './hooks/useResponsiveTable';
 import { useTranslationListener } from './hooks/useTranslationListener';
 import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
+import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
 export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -113,7 +114,7 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
     if (minimalMode) {
         return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }
 const EditorContent = styled.div `
   position: relative;

package/lib/main/nodes/PlaygroundNodes.js

@@ -39,6 +39,7 @@ import { PdfNode } from '../../ext/PdfPlugin';
 import { FileNode } from '../../ext/FilePlugin';
 import { SubpageListingNode } from '../../ext/SubpageListingPlugin/SubpageListingNode';
 import { PagesKitComponentNode } from '../../ext/PagesKitComponent/PagesKitComponentNode';
+import { TranslationNode } from '../../ext/InlineTranslationPlugin';
 const PlaygroundNodes = [
     HeadingNode,
     ListNode,
@@ -80,5 +81,6 @@ const PlaygroundNodes = [
     FileNode,
     SubpageListingNode,
     PagesKitComponentNode,
+    TranslationNode,
 ];
 export default PlaygroundNodes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.1.39",
+  "version": "2.1.41",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -64,7 +64,8 @@
     "react-popper": "^2.3.0",
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
-    "@blocklet/pdf": "^2.1.39"
+    "zustand": "^4.5.5",
+    "@blocklet/pdf": "^2.1.41"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",