@blocklet/editor-lite 2.6.0

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+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';
+import { useInlineTranslationStore, useStatus, useTargetLanguage } from './store';
+import { useEditorTranslator } from './EditorTranslator';
+import { NODE_TYPE } from './TranslationNode';
+const translations = {
+    translatedContent: {
+        en: 'AI-Translated Content',
+        zh: 'AI 翻译内容',
+    },
+    original: {
+        en: 'Original',
+        zh: '原文',
+    },
+    translation: {
+        en: 'Translation',
+        zh: '翻译',
+    },
+};
+function InternalInlineTranslationPlugin({ translateService, detectLanguage, onTranslate, onRestore, showTranslationBadge = true, }) {
+    const [editor] = useLexicalComposerContext();
+    const [inViewport] = useInViewport(editor.getRootElement());
+    const setStatus = useInlineTranslationStore((s) => s.setStatus);
+    const registerEditor = useInlineTranslationStore((s) => s.registerEditor);
+    const displayMode = useInlineTranslationStore((s) => s.displayMode);
+    const useCache = useInlineTranslationStore((s) => s.editorTranslateStates.get(editor)?.useCache);
+    const targetLanguage = useTargetLanguage();
+    const status = useStatus(editor);
+    const previousStatus = usePrevious(status);
+    const editorTranslator = useEditorTranslator({ displayMode });
+    const { locale } = useLocaleContext();
+    const handleTranslate = async () => {
+        try {
+            setStatus(editor, 'processing');
+            onTranslate?.({ targetLanguage });
+            await editorTranslator.translate({
+                translateService,
+                targetLanguage,
+                detectLanguage,
+                useCache,
+            });
+            setStatus(editor, 'completed');
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    const handleRestore = () => {
+        onRestore?.();
+        editorTranslator.restore();
+        setStatus(editor, 'idle');
+    };
+    useEffect(() => {
+        return registerEditor(editor);
+    }, [editor]);
+    useEffect(() => {
+        if (inViewport && status === 'pending') {
+            handleTranslate();
+        }
+    }, [editor, status, inViewport]);
+    useEffect(() => {
+        if (previousStatus === 'completed' && status === 'idle') {
+            handleRestore();
+        }
+    }, [editor, status, previousStatus]);
+    useEffect(() => {
+        editorTranslator.updateOptions({ displayMode });
+    }, [editorTranslator, displayMode]);
+    // 对于翻译后的内容，禁止 checkbox 点击交互
+    useEffect(() => {
+        const onClick = (event) => {
+            const target = event.target;
+            if ((editorTranslator.isTranslating || editorTranslator.isTranslated) && target.closest('li[role="checkbox"]')) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            if (prevRootElement) {
+                prevRootElement.removeEventListener('click', onClick, { capture: true });
+            }
+            if (rootElement) {
+                rootElement.addEventListener('click', onClick, { capture: true });
+            }
+        });
+    }, [editor, editorTranslator]);
+    if (editor.isEditable()) {
+        return null;
+    }
+    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();
+    if (editor.isEditable()) {
+        return null;
+    }
+    return _jsx(InternalInlineTranslationPlugin, { ...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 (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(() => {
+        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);
+            }
+            if (rootElement) {
+                rootElement.addEventListener('mouseover', handleMouseOver);
+                rootElement.addEventListener('mouseout', handleMouseOut);
+            }
+        });
+    }, [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", onClick: () => setOriginalText(originalText ? null : editorTranslator.getOriginalText(hoveringTranslationElement.dataset.sid) || ''), sx: {
+                        alignItems: hoveringTranslationElement.clientHeight > 100 ? 'center' : 'flex-start',
+                        pr: 1,
+                        pt: 0.5,
+                        color: 'text.secondary',
+                        fontSize: 12,
+                        cursor: 'pointer',
+                        height: hoveringTranslationElement.clientHeight,
+                    }, children: _jsxs(Stack, { direction: "row", sx: {
+                            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.d.ts

@@ -0,0 +1,23 @@
+import { EditorConfig, ElementNode, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DisplayMode } from './types';
+interface TranslationNodeProps {
+    sid: string;
+    displayMode: DisplayMode;
+}
+export type SerializedTranslationNode = Spread<TranslationNodeProps, SerializedLexicalNode>;
+export declare const NODE_TYPE = "inline-translation-node";
+export declare class TranslationNode extends ElementNode {
+    __data: TranslationNodeProps;
+    constructor(data: TranslationNodeProps, key?: NodeKey);
+    static getType(): string;
+    static clone(node: TranslationNode): TranslationNode;
+    static importJSON(serializedNode: SerializedTranslationNode): TranslationNode;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+}
+export declare function $createTranslationNode({ translatedNodes, data, }: {
+    translatedNodes: LexicalNode[];
+    data: TranslationNodeProps;
+}): TranslationNode;
+export declare function $isTranslationNode(node: LexicalNode | null | undefined): node is TranslationNode;
+export {};

package/lib/ext/InlineTranslationPlugin/TranslationNode.js

@@ -0,0 +1,49 @@
+import { $isElementNode, ElementNode, } from 'lexical';
+export const NODE_TYPE = 'inline-translation-node';
+export class TranslationNode extends ElementNode {
+    __data;
+    constructor(data, key) {
+        super(key);
+        this.__data = data;
+    }
+    static getType() {
+        return NODE_TYPE;
+    }
+    static clone(node) {
+        return new TranslationNode(node.__data, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return null;
+    }
+    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;
+    }
+    updateDOM(prevNode, dom, config) {
+        // Returning false tells Lexical that this node does not need its
+        // DOM element replacing with a new copy from createDOM.
+        return false;
+    }
+}
+export function $createTranslationNode({ translatedNodes, data, }) {
+    const node = new TranslationNode(data);
+    if (translatedNodes.length === 1) {
+        const first = translatedNodes[0];
+        if ($isElementNode(first)) {
+            node.append(...first.getChildren());
+        }
+        else {
+            node.append(first);
+        }
+    }
+    else {
+        node.append(...translatedNodes);
+    }
+    return node;
+}
+export function $isTranslationNode(node) {
+    return node instanceof TranslationNode;
+}

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

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

package/lib/ext/InlineTranslationPlugin/index.js

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

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

@@ -0,0 +1,50 @@
+import { LexicalEditor } from 'lexical';
+import { DisplayMode } from './types';
+type TranslateStatus = 'idle' | 'pending' | 'processing' | 'completed';
+interface EditorTranslateState {
+    useCache: boolean;
+}
+interface State {
+    targetLanguage: string | null;
+    autoTranslate: boolean;
+    displayMode: DisplayMode;
+    editors: Map<LexicalEditor, TranslateStatus>;
+    editorTranslateStates: Map<LexicalEditor, EditorTranslateState>;
+}
+interface Action {
+    translate: (editor?: LexicalEditor, options?: {
+        useCache?: boolean;
+    }) => void;
+    showOriginal: (editor?: LexicalEditor) => void;
+    setTargetLanguage: (targetLanguage: string) => void;
+    setAutoTranslate: (autoTranslate: boolean) => void;
+    setStatus: (editor: LexicalEditor, status: TranslateStatus) => void;
+    setDisplayMode: (displayMode: DisplayMode) => 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;
+            displayMode: DisplayMode;
+        }>>) => 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;
+            displayMode: DisplayMode;
+        }>>;
+    };
+}>;
+export declare const useStatus: (editor: LexicalEditor) => TranslateStatus | undefined;
+export declare const useIsIdle: () => boolean;
+export declare const useIsTranslating: () => boolean;
+export declare const useIsTranslated: () => boolean;
+export declare const useTargetLanguage: () => string;
+export {};

package/lib/ext/InlineTranslationPlugin/store.js

@@ -0,0 +1,94 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
+import { useContext } from 'react';
+export const useInlineTranslationStore = create()(persist((set, get) => ({
+    targetLanguage: null,
+    autoTranslate: false,
+    displayMode: 'translationOnly',
+    editors: new Map(),
+    editorTranslateStates: new Map(),
+    translate: (editor, options) => {
+        if (editor) {
+            set((state) => ({
+                editors: new Map(state.editors).set(editor, 'pending'),
+                ...(options?.useCache !== undefined && {
+                    editorTranslateStates: new Map(state.editorTranslateStates).set(editor, { useCache: options.useCache }),
+                }),
+            }));
+        }
+        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'),
+                editorTranslateStates: new Map(Array.from(state.editorTranslateStates.entries()).filter(([k]) => k !== editor)),
+            }));
+        }
+        else {
+            set((state) => ({
+                editors: new Map(Array.from(state.editors.entries()).map(([k]) => [k, 'idle'])),
+                editorTranslateStates: new Map(),
+            }));
+        }
+    },
+    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) }));
+    },
+    setDisplayMode: (displayMode) => set({ displayMode }),
+    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,
+        displayMode: state.displayMode,
+    }),
+}));
+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 useIsTranslating = () => {
+    return useInlineTranslationStore((state) => Array.from(state.editors.values()).some((x) => x === 'processing'));
+};
+export const useIsTranslated = () => {
+    return useInlineTranslationStore((state) => {
+        const statusArr = Array.from(state.editors.values());
+        return statusArr.length > 0 && statusArr.every((x) => x === 'completed' || x === 'pending');
+    });
+};
+export const useTargetLanguage = () => {
+    const { locale, languages } = useLocaleContext();
+    const { session } = useContext(SessionContext);
+    // session.user.locale 可能是无效值, 安全起见从 languages 中查找, 参考: https://github.com/ArcBlock/blocklet-server/issues/10660
+    const preferredLanguage = languages.find((x) => x.code === session?.user?.locale);
+    return preferredLanguage?.code ?? locale;
+};

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

@@ -0,0 +1 @@
+export type DisplayMode = 'inline' | 'translationOnly';

package/lib/ext/InlineTranslationPlugin/types.js

@@ -0,0 +1 @@
+export {};

package/lib/ext/LexicalEditorRefPlugin.d.ts

@@ -0,0 +1,14 @@
+import { LexicalEditor } from 'lexical';
+import { MutableRefObject } from 'react';
+import * as React from 'react';
+/**
+ * TODO: 最新版 lexical 已经内置在 lexical-react package 中
+ *
+ * Use this plugin to access the editor instance outside of the
+ * LexicalComposer. This can help with things like buttons or other
+ * UI components that need to update or read EditorState but need to
+ * be positioned outside the LexicalComposer in the React tree.
+ */
+export declare function EditorRefPlugin({ editorRef, }: {
+    editorRef: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor | null>;
+}): null;

package/lib/ext/LexicalEditorRefPlugin.js

@@ -0,0 +1,26 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+/**
+ * TODO: 最新版 lexical 已经内置在 lexical-react package 中
+ *
+ * Use this plugin to access the editor instance outside of the
+ * LexicalComposer. This can help with things like buttons or other
+ * UI components that need to update or read EditorState but need to
+ * be positioned outside the LexicalComposer in the React tree.
+ */
+export function EditorRefPlugin({ editorRef, }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (typeof editorRef === 'function') {
+            editorRef(editor);
+            return () => editorRef(null);
+        }
+        if (typeof editorRef === 'object') {
+            editorRef.current = editor;
+            return () => {
+                editorRef.current = null;
+            };
+        }
+    }, [editor]);
+    return null;
+}

package/lib/ext/OnContentChangePlugin.d.ts

@@ -0,0 +1,14 @@
+import type { EditorState, LexicalEditor } from 'lexical';
+type OnChange = (editorState: EditorState, editor: LexicalEditor) => void;
+/**
+ * 检听内容变化
+ * - 忽略 selection 事件
+ * - 默认忽略首次 onChange 事件 (autofocus 开启时 editor 初始化后会自动触发 onChange)
+ *
+ * 注意: Editor#autofocus 与 OnChangePlugin 行为有关系: https://github.com/facebook/lexical/issues/4493
+ */
+export declare function OnContentChangePlugin({ onChange, ignoreInitialChange, }: {
+    onChange: OnChange;
+    ignoreInitialChange?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/OnContentChangePlugin.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLayoutEffect, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+/**
+ * 检听内容变化
+ * - 忽略 selection 事件
+ * - 默认忽略首次 onChange 事件 (autofocus 开启时 editor 初始化后会自动触发 onChange)
+ *
+ * 注意: Editor#autofocus 与 OnChangePlugin 行为有关系: https://github.com/facebook/lexical/issues/4493
+ */
+export function OnContentChangePlugin({ onChange, ignoreInitialChange = true, }) {
+    const [editor] = useLexicalComposerContext();
+    const initialContentRef = useRef(undefined);
+    const changedRef = useRef(false);
+    useLayoutEffect(() => {
+        if (initialContentRef.current === undefined) {
+            const editorState = editor.getEditorState();
+            initialContentRef.current = editorState ? JSON.stringify(editorState) : '';
+        }
+    }, [editor]);
+    const handleOnChange = (editorState, lexicalEditor) => {
+        if (changedRef.current) {
+            onChange(editorState, lexicalEditor);
+        }
+        else {
+            const content = editorState ? JSON.stringify(editorState) : '';
+            if (content !== initialContentRef.current || !ignoreInitialChange) {
+                onChange(editorState, lexicalEditor);
+                changedRef.current = true;
+            }
+        }
+    };
+    return _jsx(OnChangePlugin, { onChange: handleOnChange, ignoreSelectionChange: true });
+}

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

@@ -0,0 +1,2 @@
+import { type JSX } from 'react';
+export default function PasteSlackImagePlugin(): JSX.Element | null;

package/lib/ext/PasteSlackImagePlugin/index.js

@@ -0,0 +1,22 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { COMMAND_PRIORITY_CRITICAL, PASTE_COMMAND } from 'lexical';
+import { useEffect } from 'react';
+import { DRAG_DROP_PASTE, eventFiles } from '@lexical/rich-text';
+export default function PasteSlackImagePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        const unregister = editor.registerCommand(PASTE_COMMAND, (e) => {
+            const [, files] = eventFiles(e);
+            if (files.length && files.every((file) => file.type.startsWith('image/'))) {
+                editor.dispatchCommand(DRAG_DROP_PASTE, files);
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL // 使用最高优先级
+        );
+        return () => {
+            unregister();
+        };
+    }, [editor]);
+    return null;
+}

package/lib/ext/PostLinkEmbedPlugin/PostLinkNode.d.ts

@@ -0,0 +1,32 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
+export interface PostInfo {
+    id: string;
+    title: string;
+    link: string;
+    type: 'post' | 'blog' | 'doc' | 'task';
+    boardId: string;
+    external?: boolean;
+}
+export type SerializedPostLinkNode = Spread<{
+    postInfo: string;
+    type: 'post-link';
+    version: 1;
+}, SerializedLexicalNode>;
+export declare class PostLinkNode extends DecoratorNode<JSX.Element> {
+    __postInfo: PostInfo;
+    static getType(): string;
+    static clone(node: PostLinkNode): PostLinkNode;
+    static importJSON(serializedNode: SerializedPostLinkNode): PostLinkNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(postInfo: PostInfo, key?: NodeKey);
+    exportJSON(): SerializedPostLinkNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getPostInfo(): PostInfo;
+    decorate(): JSX.Element;
+}
+export declare function $createPostLinkNode(postInfo: PostInfo): PostLinkNode;
+export declare function $isPostLinkNode(node: PostLinkNode | LexicalNode | null | undefined): node is PostLinkNode;