@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,10 @@
+type Props = {
+    charset: 'UTF-8' | 'UTF-16';
+    onChange?: ({ words, textLength, readTime }: {
+        words: number;
+        textLength: number;
+        readTime: number;
+    }) => void;
+};
+export default function CharacterCountPlugin({ charset, onChange }: Props): null;
+export {};

package/lib/ext/CharacterCountPlugin/index.js

@@ -0,0 +1,39 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useMemo } from 'react';
+import useCharacterCount from './useCharacterCount';
+let textEncoderInstance = null;
+function textEncoder() {
+    if (window.TextEncoder === undefined) {
+        return null;
+    }
+    if (textEncoderInstance === null) {
+        textEncoderInstance = new window.TextEncoder();
+    }
+    return textEncoderInstance;
+}
+function utf8Length(text) {
+    const currentTextEncoder = textEncoder();
+    if (currentTextEncoder === null) {
+        // http://stackoverflow.com/a/5515960/210370
+        const m = encodeURIComponent(text).match(/%[89ABab]/g);
+        return text.length + (m ? m.length : 0);
+    }
+    return currentTextEncoder.encode(text).length;
+}
+export default function CharacterCountPlugin({ charset = 'UTF-8', onChange }) {
+    const [editor] = useLexicalComposerContext();
+    const characterCountProps = useMemo(() => ({
+        strlen: (text) => {
+            if (charset === 'UTF-8') {
+                return utf8Length(text);
+            }
+            if (charset === 'UTF-16') {
+                return text.length;
+            }
+            throw new Error('Unrecognized charset');
+        },
+        onChange,
+    }), [charset]);
+    useCharacterCount(editor, characterCountProps);
+    return null;
+}

package/lib/ext/CharacterCountPlugin/useCharacterCount.d.ts

@@ -0,0 +1,11 @@
+import type { LexicalEditor } from 'lexical';
+type OptionalProps = {
+    strlen?: (input: string) => number;
+    onChange?: ({ words, textLength, readTime }: {
+        words: number;
+        textLength: number;
+        readTime: number;
+    }) => void;
+};
+export default function useCharacterCount(editor: LexicalEditor, optional?: OptionalProps): void;
+export {};

package/lib/ext/CharacterCountPlugin/useCharacterCount.js

@@ -0,0 +1,49 @@
+import { $rootTextContent } from '@lexical/text';
+import { mergeRegister } from '@lexical/utils';
+import { useEffect } from 'react';
+// 判断阅读时间，根据字节数判断
+function estimateReadingTime(words) {
+    const readingSpeed = 200; // 200字/分钟
+    const readingTime = words / readingSpeed;
+    return parseInt(String(readingTime * 60), 10) || 1;
+}
+// 给出一个文本，判断单词个数，其中包括中文和英文
+function countWords(text) {
+    const chineseWords = text.match(/[\u4e00-\u9fa5]/g);
+    const englishWords = text.match(/\w+/g);
+    const chineseWordsCount = chineseWords ? chineseWords.length : 0;
+    const englishWordsCount = englishWords ? englishWords.length : 0;
+    return chineseWordsCount + englishWordsCount;
+}
+// 获取文本节点的单词个数
+const getTextWordsContent = (text) => {
+    return countWords(text);
+};
+export default function useCharacterCount(editor, optional = Object.freeze({})) {
+    const { strlen = (input) => input.length, onChange = () => { } } = optional;
+    useEffect(() => {
+        let text = editor.getEditorState().read($rootTextContent);
+        return mergeRegister(editor.registerTextContentListener((currentText) => {
+            text = currentText;
+        }), editor.registerUpdateListener((payload) => {
+            if (!payload)
+                return;
+            const { dirtyLeaves } = payload;
+            const isComposing = editor.isComposing();
+            const hasDirtyLeaves = dirtyLeaves.size > 0;
+            if (isComposing || !hasDirtyLeaves) {
+                return;
+            }
+            editor.getEditorState().read(() => {
+                const textLength = strlen(text);
+                const words = getTextWordsContent(text);
+                const readTime = estimateReadingTime(words);
+                onChange({
+                    words,
+                    textLength,
+                    readTime,
+                });
+            });
+        }));
+    }, [editor, strlen]);
+}

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

@@ -0,0 +1,9 @@
+import { SxProps } from '@mui/material';
+import { type JSX } from 'react';
+interface CharacterLimitPluginProps {
+    maxLength?: number;
+    charLimitIndicatorStyle?: SxProps;
+    alignLeft?: boolean;
+}
+export declare function CharacterLimitPlugin({ maxLength, charLimitIndicatorStyle, alignLeft, }: CharacterLimitPluginProps): JSX.Element | null;
+export {};

package/lib/ext/CharacterLimitPlugin/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Box } from '@mui/material';
+import { CharacterLimitPlugin as LexicalCharacterLimitPlugin } from '../../vendor/LexicalCharacterLimitPlugin';
+import { MaxLengthPlugin } from '../../main/plugins/MaxLengthPlugin';
+export function CharacterLimitPlugin({ maxLength, charLimitIndicatorStyle, alignLeft = false, }) {
+    const [editor] = useLexicalComposerContext();
+    if (!editor.isEditable()) {
+        return null;
+    }
+    if (!editor.isEditable() || !maxLength) {
+        return null;
+    }
+    const mergedSx = Array.isArray(charLimitIndicatorStyle) ? charLimitIndicatorStyle : [charLimitIndicatorStyle];
+    if (alignLeft) {
+        const left = editor.getRootElement()?.getBoundingClientRect()?.left ?? 0;
+        mergedSx.push({ left: left + 24 });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(MaxLengthPlugin, { maxLength: maxLength }), _jsx(LexicalCharacterLimitPlugin, { charset: "UTF-16", maxLength: maxLength, renderer: ({ remainingCharacters }) => {
+                    return (_jsx(CharLimitIndicator, { currentCount: maxLength - remainingCharacters, maxLength: maxLength, sx: mergedSx }));
+                } })] }));
+}
+function CharLimitIndicator({ currentCount, maxLength, sx }) {
+    const percentage = (currentCount / maxLength) * 100;
+    const isNearLimit = percentage >= 80;
+    const isOverLimit = currentCount > maxLength;
+    // Calculate the circumference for the circular progress
+    const radius = 8;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+    if (percentage === 0) {
+        return null;
+    }
+    const mergedSx = [
+        { display: 'flex', alignItems: 'center', position: 'absolute', bottom: 6, left: 32 },
+        ...(Array.isArray(sx) ? sx : [sx]),
+    ];
+    return (_jsxs(Box, { sx: mergedSx, children: [_jsx(Box, { sx: { position: 'relative', width: 20, height: 20 }, children: _jsxs(Box, { component: "svg", sx: { width: 20, height: 20, transform: 'rotate(-90deg)' }, viewBox: "0 0 20 20", children: [_jsx(Box, { component: "circle", cx: "10", cy: "10", r: radius, stroke: "currentColor", strokeWidth: "2", fill: "none", sx: { opacity: 0.2 } }), _jsx(Box, { component: "circle", cx: "10", cy: "10", r: radius, stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, strokeLinecap: "round", sx: {
+                                transition: 'all 0.3s ease-out',
+                                color: isOverLimit ? 'error.main' : isNearLimit ? 'warning.main' : 'primary.main',
+                            } })] }) }), _jsxs(Box, { component: "span", sx: {
+                    display: 'inline-block',
+                    ml: 0.5,
+                    fontSize: 13,
+                    fontWeight: 500,
+                    transition: 'all 0.3s ease-out',
+                    color: isOverLimit ? 'error.main' : isNearLimit ? 'warning.main' : 'primary.main',
+                }, children: [currentCount.toLocaleString(), "/", maxLength.toLocaleString()] })] }));
+}

package/lib/ext/CheckboxPlugin.d.ts

@@ -0,0 +1,3 @@
+export default function CheckboxPlugin({ send }: {
+    send?: (content: string) => Promise<any>;
+}): null;

package/lib/ext/CheckboxPlugin.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNearestNodeFromDOMNode } from 'lexical';
+import { $isListItemNode } from '@lexical/list';
+import { minDelay } from './utils';
+export default function CheckboxPlugin({ send }) {
+    const [editor] = useLexicalComposerContext();
+    const [busy, setBusy] = useState(false);
+    const content = useRef('');
+    const submit = async () => {
+        if (!send) {
+            return;
+        }
+        try {
+            setBusy(true);
+            await minDelay(send(JSON.stringify(editor.getEditorState())), 800);
+        }
+        catch (e) {
+            const editorStateStr = editor.parseEditorState(content.current);
+            editor.setEditorState(editorStateStr);
+            console.error(e);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const onClick = (e) => {
+        const editable = editor.isEditable();
+        if (editable || busy)
+            return false;
+        const domNode = e.target;
+        editor.update(() => {
+            content.current = JSON.stringify(editor.getEditorState());
+            if (domNode.nodeName === 'LI' && domNode.getAttribute('role') === 'checkbox') {
+                try {
+                    const node = $getNearestNodeFromDOMNode(domNode);
+                    if ($isListItemNode(node)) {
+                        // 判断鼠标点击的位置与当前元素左侧位置距离, 如果小于 20px 则认为点击了 checkbox
+                        const left = domNode.getBoundingClientRect()?.left || 0;
+                        const checkboxLeft = e.clientX - left;
+                        const inCheckBox = checkboxLeft <= 20;
+                        if (!inCheckBox)
+                            return;
+                        domNode.focus();
+                        node.toggleChecked();
+                        domNode.blur();
+                        setTimeout(submit, 0);
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+        });
+    };
+    useEffect(() => {
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            if (prevRootElement !== null) {
+                prevRootElement.removeEventListener('click', onClick);
+            }
+            if (rootElement !== null) {
+                rootElement.addEventListener('click', onClick);
+            }
+            if (rootElement) {
+                if (busy) {
+                    rootElement.classList.add('blocklet-editor-busy');
+                }
+                else {
+                    rootElement.classList.remove('blocklet-editor-busy');
+                }
+            }
+        });
+    }, [editor, send, busy]);
+    return null;
+}

package/lib/ext/CodeCopyPlugin/CodeCopyPlugin.d.ts

@@ -0,0 +1,2 @@
+import './style.css';
+export declare function CodeCopyPlugin(): import("react/jsx-runtime").JSX.Element;

package/lib/ext/CodeCopyPlugin/CodeCopyPlugin.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { CodeNode } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Box, IconButton } from '@mui/material';
+import { $getNodeByKey } from 'lexical';
+import { useEffect, useMemo, useState } from 'react';
+import { Icon } from '@iconify/react';
+import { usePopper } from 'react-popper';
+import './style.css';
+function isPointInsideElement(point, element) {
+    if (!element) {
+        return false;
+    }
+    const rect = element.getBoundingClientRect();
+    return point.x > rect.left && point.x < rect.right && point.y > rect.top && point.y < rect.bottom;
+}
+export function CodeCopyPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [codeNodes, setCodeNodes] = useState([]);
+    useEffect(() => {
+        return editor.registerMutationListener(CodeNode, (mutatedNodes) => {
+            const nodes = Array.from(mutatedNodes.keys())
+                .map((key) => $getNodeByKey(key, editor.getEditorState()))
+                .filter(Boolean);
+            setCodeNodes(nodes);
+        }, { skipInitialization: false });
+    }, [editor]);
+    return (_jsx(_Fragment, { children: codeNodes.map((codeNode) => (_jsx(CodeCopyButton, { editor: editor, codeNode: codeNode }, codeNode.getKey()))) }));
+}
+function CodeCopyButton({ editor, codeNode }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const [buttonElement, setButtonElement] = useState(null);
+    const codeElement = useMemo(() => editor.getElementByKey(codeNode.getKey()), [editor, codeNode]);
+    const [isActivated, setIsActivated] = useState(false);
+    const popper = usePopper(codeElement, buttonElement, {
+        placement: 'right-start',
+        modifiers: [
+            { name: 'flip', enabled: false },
+            {
+                name: 'offset',
+                options: {
+                    offset: [8, -36],
+                },
+            },
+        ],
+    });
+    useEffect(() => {
+        const handleMouseEnter = () => setIsActivated(true);
+        const handleMouseLeave = (e) => {
+            if (!isPointInsideElement(e, codeElement)) {
+                setIsActivated(false);
+            }
+        };
+        if (codeElement) {
+            codeElement.addEventListener('mouseenter', handleMouseEnter);
+            codeElement.addEventListener('mouseleave', handleMouseLeave);
+            return () => {
+                codeElement.removeEventListener('mouseenter', handleMouseEnter);
+                codeElement.removeEventListener('mouseleave', handleMouseLeave);
+            };
+        }
+    }, [codeElement]);
+    if (!isActivated && !isCopied) {
+        return null;
+    }
+    return (_jsx(IconButton, { ref: setButtonElement, style: popper.styles.popper, ...popper.attributes.popper, sx: {
+            color: 'text.secondary',
+            fontSize: 18,
+            bgcolor: 'background.paper',
+            '&:hover': {
+                color: 'text.primary',
+                bgcolor: 'background.paper',
+            },
+        }, onClick: async () => {
+            let content = '';
+            editor.update(() => {
+                content = codeNode.getTextContent();
+            });
+            try {
+                await navigator.clipboard.writeText(content);
+                setIsCopied(true);
+                setTimeout(() => {
+                    setIsCopied(false);
+                }, 1500);
+            }
+            catch (err) {
+                console.error('Failed to copy: ', err);
+            }
+        }, children: isCopied ? (_jsx(Box, { component: Icon, icon: "tabler:check", sx: { color: 'success.main' } })) : (_jsx(Icon, { icon: "tabler:copy" })) }));
+}

package/lib/ext/CodeCopyPlugin/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z"/><path d="M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1"/></g></svg>

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

@@ -0,0 +1 @@
+export * from './CodeCopyPlugin';

package/lib/ext/CodeCopyPlugin/index.js

@@ -0,0 +1 @@
+export * from './CodeCopyPlugin';

package/lib/ext/CodeCopyPlugin/style.css

@@ -0,0 +1,12 @@
+.be-editable > code:after {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+
+  display: block;
+  content: ' ';
+  background-image: url('./copy.svg');
+  background-size: 18px 18px;
+  height: 18px;
+  width: 18px;
+}

package/lib/ext/ContentLocale.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+interface ContextType {
+    locale: string;
+}
+export declare const useContentLocale: () => string;
+export declare const ContentLocaleProvider: ({ locale, children }: PropsWithChildren & ContextType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/ContentLocale.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { createContext, useContext, useMemo } from 'react';
+const ContentLocaleContext = createContext(null);
+// 该 hook 关注 editor content 的 locale, 区别于 LocaleContext
+// (编辑 post 翻译版本时, 会切换 ContentLocaleContext)
+export const useContentLocale = () => {
+    const { locale: contextLocale } = useLocaleContext();
+    const ctx = useContext(ContentLocaleContext);
+    return ctx?.locale || contextLocale;
+};
+export const ContentLocaleProvider = ({ locale, children }) => {
+    const value = useMemo(() => ({ locale }), [locale]);
+    return _jsx(ContentLocaleContext.Provider, { value: value, children: children });
+};

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export * from './utils';
+export declare const CustomOnChangePlugin: ({ placeholder }: {
+    placeholder?: ReactNode;
+}) => null;

package/lib/ext/CustomOnChangePlugin/index.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { setNodePlaceholderFromSelection, setNodePlaceholderFromState } from './utils';
+export * from './utils';
+export const CustomOnChangePlugin = ({ placeholder }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener((_listener) => {
+            setNodePlaceholderFromSelection(editor, placeholder);
+        }));
+    }, [editor]);
+    useEffect(() => {
+        setNodePlaceholderFromState(editor, placeholder);
+    }, []);
+    return null;
+};

package/lib/ext/CustomOnChangePlugin/styles.css

@@ -0,0 +1,14 @@
+.lexical-node-placeholder:has(br):not(:has(span))::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  color: #999;
+  opacity: 0.4;
+  /* no wrap */
+  overflow-x: hidden;
+  white-space: nowrap;
+  width: -webkit-fill-available;
+}
+
+.lexical-node-template > *:not(:first-child) {
+  opacity: 0.4;
+}

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

@@ -0,0 +1,30 @@
+import { LexicalEditor, RangeSelection, LexicalNode } from 'lexical';
+import './styles.css';
+export declare const PLACEHOLDER_EMPTY_TEXT = "Press '/' for commands...";
+export declare const PLACEHOLDER_CLASS_NAME = "lexical-node-placeholder";
+export declare const TEMPLATE_CLASS_NAME = "lexical-node-template";
+export declare const isHtmlHeadingElement: (el: HTMLElement) => el is HTMLHeadingElement;
+export declare const getNodePlaceholder: (lexicalNode: LexicalNode, emptyPlaceholder: string) => string | undefined;
+export declare const isFocusEditor: () => boolean;
+export declare const removeHtmlElementPlaceholder: (htmlElement: HTMLElement) => void;
+export declare const setPlaceholderOnSelection: ({ selection, editor, placeholder, }: {
+    selection: RangeSelection;
+    editor: LexicalEditor;
+    placeholder?: any;
+}) => void;
+export declare const tryToSetNodePlaceholder: ({ htmlElement, node, emptyPlaceholder, }: {
+    htmlElement: HTMLElement | null;
+    node: LexicalNode | null;
+    emptyPlaceholder?: string | undefined;
+}) => void;
+export declare const setNodePlaceholderFromSelection: (editor: LexicalEditor, placeholder: any) => void;
+export declare const setNodePlaceholderFromState: (editor: LexicalEditor, placeholder: any) => void;
+export declare const stopAddPlaceholder: ({ children, placeholder }: {
+    children: any[];
+    placeholder?: any;
+}) => any;
+export declare const getAllLexicalChildren: (editor: LexicalEditor) => {
+    key: string;
+    node: LexicalNode;
+    htmlElement: HTMLElement | null;
+}[];

package/lib/ext/CustomOnChangePlugin/utils.js

@@ -0,0 +1,148 @@
+import { $getSelection, $isRangeSelection, $isParagraphNode, } from 'lexical';
+import { $isHeadingNode } from '@lexical/rich-text';
+import { $dfs } from '@lexical/utils';
+import './styles.css';
+export const PLACEHOLDER_EMPTY_TEXT = "Press '/' for commands...";
+export const PLACEHOLDER_CLASS_NAME = 'lexical-node-placeholder';
+export const TEMPLATE_CLASS_NAME = 'lexical-node-template';
+export const isHtmlHeadingElement = (el) => {
+    return el instanceof HTMLHeadingElement;
+};
+export const getNodePlaceholder = (lexicalNode, emptyPlaceholder) => {
+    let placeholder;
+    if ($isHeadingNode(lexicalNode)) {
+        const tag = lexicalNode.getTag();
+        const headerTagMap = {
+            h1: '1',
+            h2: '2',
+            h3: '3',
+            h4: '4',
+            h5: '5',
+            h6: '6',
+        };
+        placeholder = `Heading ${headerTagMap[tag]}`;
+    }
+    if ($isParagraphNode(lexicalNode) && emptyPlaceholder) {
+        // Like in https://www.notion.so/
+        placeholder = emptyPlaceholder;
+    }
+    return placeholder;
+};
+export const isFocusEditor = () => {
+    return !!document.activeElement?.classList?.contains?.('be-editable');
+};
+export const removeHtmlElementPlaceholder = (htmlElement) => {
+    if (isHtmlHeadingElement(htmlElement)) {
+        return;
+    }
+    const { classList } = htmlElement;
+    if (classList.length && classList.contains(PLACEHOLDER_CLASS_NAME)) {
+        classList.remove(PLACEHOLDER_CLASS_NAME);
+        htmlElement?.removeAttribute('data-placeholder');
+    }
+};
+export const setPlaceholderOnSelection = ({ selection, editor, placeholder, }) => {
+    /**
+     * 1. Get all lexical nodes as HTML elements
+     */
+    const children = getAllLexicalChildren(editor);
+    /**
+     * 2. Remove "placeholder" class if it was added before
+     */
+    children.forEach(({ htmlElement }) => {
+        if (!htmlElement)
+            return;
+        removeHtmlElementPlaceholder(htmlElement);
+    });
+    /**
+     * 3. Do nothing if there is only one lexical child,
+     * because we already have a placeholder
+     * in <RichTextPlugin/> component
+     * With on exception: If we converted default node to the "Heading"
+     */
+    if (stopAddPlaceholder({
+        children,
+        placeholder,
+    })) {
+        return;
+    }
+    /**
+     * 4. Get "PointType" object, that contain Nodes data
+     * (that is selected)
+     * {
+     *    key: "5", <- Node's key
+     *    offset: 7,
+     *    type: "text"
+     * }
+     */
+    const { anchor } = selection;
+    /**
+     * 5. Get placeholder for type ('heading'/'paragraph'/etc...)
+     */
+    tryToSetNodePlaceholder({
+        htmlElement: editor.getElementByKey(anchor.key),
+        node: anchor.getNode(),
+        emptyPlaceholder: PLACEHOLDER_EMPTY_TEXT,
+    });
+};
+export const tryToSetNodePlaceholder = ({ htmlElement, node, emptyPlaceholder = '', }) => {
+    if (htmlElement && node) {
+        removeHtmlElementPlaceholder(htmlElement);
+        const nodePlaceholder = getNodePlaceholder(node, emptyPlaceholder);
+        if (nodePlaceholder) {
+            htmlElement?.classList.add(PLACEHOLDER_CLASS_NAME);
+            htmlElement?.setAttribute('data-placeholder', nodePlaceholder);
+        }
+    }
+};
+// only setting by selection
+export const setNodePlaceholderFromSelection = (editor, placeholder) => {
+    if (!editor.isEditable()) {
+        return;
+    }
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+            // Do nothing if user selected a text fragment
+            return;
+        }
+        setPlaceholderOnSelection({ selection, editor, placeholder });
+    });
+};
+// global setting by editor
+export const setNodePlaceholderFromState = (editor, placeholder) => {
+    if (!editor.isEditable()) {
+        return;
+    }
+    editor.getEditorState().read(() => {
+        const children = getAllLexicalChildren(editor);
+        children.forEach(({ htmlElement, node }) => {
+            tryToSetNodePlaceholder({
+                htmlElement,
+                node,
+                // not set emptyPlaceholder, avoid override placeholder
+                emptyPlaceholder: '',
+            });
+        });
+        // set current selection placeholder
+        setNodePlaceholderFromSelection(editor, placeholder);
+    });
+};
+export const stopAddPlaceholder = ({ children, placeholder }) => {
+    const [root, ...restChildren] = children;
+    const rootContentIsEmpty = root?.node?.getTextContent()?.length === 0;
+    const withoutHeading = !restChildren?.find(({ node }) => $isHeadingNode(node));
+    // if had placeholder and content is empty and without heading, do nothing
+    return placeholder && rootContentIsEmpty && withoutHeading;
+};
+export const getAllLexicalChildren = (editor) => {
+    const childrenKeys = editor.getEditorState().read(() => $dfs());
+    return childrenKeys?.map(({ node }) => {
+        const key = node.getKey();
+        return {
+            key,
+            node,
+            htmlElement: editor.getElementByKey(key),
+        };
+    });
+};

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;
+}