@datalayer/lexical-loro 0.2.4 → 0.2.5

package/lib/plugins/CodeActionMenuPlugin/components/CopyButton/index.d.ts

@@ -0,0 +1,7 @@
+import { LexicalEditor } from 'lexical';
+interface Props {
+    editor: LexicalEditor;
+    getCodeDOMNode: () => HTMLElement | null;
+}
+export declare function CopyButton({ editor, getCodeDOMNode }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/plugins/CodeActionMenuPlugin/components/CopyButton/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $isCodeNode } from '@lexical/code';
+import { $getNearestNodeFromDOMNode, $getSelection, $setSelection, } from 'lexical';
+import { useState } from 'react';
+import { useDebounce } from '../../utils';
+export function CopyButton({ editor, getCodeDOMNode }) {
+    const [isCopyCompleted, setCopyCompleted] = useState(false);
+    const removeSuccessIcon = useDebounce(() => {
+        setCopyCompleted(false);
+    }, 1000);
+    async function handleClick() {
+        const codeDOMNode = getCodeDOMNode();
+        if (!codeDOMNode) {
+            return;
+        }
+        let content = '';
+        editor.update(() => {
+            const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+            if ($isCodeNode(codeNode)) {
+                content = codeNode.getTextContent();
+            }
+            const selection = $getSelection();
+            $setSelection(selection);
+        });
+        try {
+            await navigator.clipboard.writeText(content);
+            setCopyCompleted(true);
+            removeSuccessIcon();
+        }
+        catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+    }
+    return (_jsx("button", { className: "menu-item", onClick: handleClick, "aria-label": "copy", children: isCopyCompleted ? (_jsx("i", { className: "format success" })) : (_jsx("i", { className: "format copy" })) }));
+}

package/lib/plugins/CodeActionMenuPlugin/components/PrettierButton/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './index.css';
+import { LexicalEditor } from 'lexical';
+interface Props {
+    lang: string;
+    editor: LexicalEditor;
+    getCodeDOMNode: () => HTMLElement | null;
+}
+export declare function canBePrettier(lang: string): boolean;
+export declare function PrettierButton({ lang, editor, getCodeDOMNode }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/plugins/CodeActionMenuPlugin/components/PrettierButton/index.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './index.css';
+import { $isCodeNode } from '@lexical/code';
+import { $getNearestNodeFromDOMNode } from 'lexical';
+import { useState } from 'react';
+const PRETTIER_PARSER_MODULES = {
+    css: [() => import('prettier/parser-postcss')],
+    html: [() => import('prettier/parser-html')],
+    js: [
+        () => import('prettier/parser-babel'),
+        //    () => import('prettier/plugins/estree'),
+    ],
+    markdown: [() => import('prettier/parser-markdown')],
+    typescript: [
+        () => import('prettier/parser-typescript'),
+        //    () => import('prettier/plugins/estree'),
+    ],
+};
+async function loadPrettierParserByLang(lang) {
+    const dynamicImports = PRETTIER_PARSER_MODULES[lang];
+    const modules = await Promise.all(dynamicImports.map((dynamicImport) => dynamicImport()));
+    return modules;
+}
+async function loadPrettierFormat() {
+    const { format } = await import('prettier/standalone');
+    return format;
+}
+const PRETTIER_OPTIONS_BY_LANG = {
+    css: { parser: 'css' },
+    html: { parser: 'html' },
+    js: { parser: 'babel' },
+    markdown: { parser: 'markdown' },
+    typescript: { parser: 'typescript' },
+};
+const LANG_CAN_BE_PRETTIER = Object.keys(PRETTIER_OPTIONS_BY_LANG);
+export function canBePrettier(lang) {
+    return LANG_CAN_BE_PRETTIER.includes(lang);
+}
+function getPrettierOptions(lang) {
+    const options = PRETTIER_OPTIONS_BY_LANG[lang];
+    if (!options) {
+        throw new Error(`CodeActionMenuPlugin: Prettier does not support this language: ${lang}`);
+    }
+    return options;
+}
+export function PrettierButton({ lang, editor, getCodeDOMNode }) {
+    const [syntaxError, setSyntaxError] = useState('');
+    const [tipsVisible, setTipsVisible] = useState(false);
+    async function handleClick() {
+        const codeDOMNode = getCodeDOMNode();
+        if (!codeDOMNode) {
+            return;
+        }
+        let content = '';
+        editor.update(() => {
+            const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+            if ($isCodeNode(codeNode)) {
+                content = codeNode.getTextContent();
+            }
+        });
+        if (content === '') {
+            return;
+        }
+        try {
+            const format = await loadPrettierFormat();
+            const options = getPrettierOptions(lang);
+            const prettierParsers = await loadPrettierParserByLang(lang);
+            options.plugins = prettierParsers.map((parser) => parser.default || parser);
+            const formattedCode = await format(content, options);
+            editor.update(() => {
+                const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+                if ($isCodeNode(codeNode)) {
+                    const selection = codeNode.select(0);
+                    selection.insertText(formattedCode);
+                    setSyntaxError('');
+                    setTipsVisible(false);
+                }
+            });
+        }
+        catch (error) {
+            setError(error);
+        }
+    }
+    function setError(error) {
+        if (error instanceof Error) {
+            setSyntaxError(error.message);
+            setTipsVisible(true);
+        }
+        else {
+            console.error('Unexpected error: ', error);
+        }
+    }
+    function handleMouseEnter() {
+        if (syntaxError !== '') {
+            setTipsVisible(true);
+        }
+    }
+    function handleMouseLeave() {
+        if (syntaxError !== '') {
+            setTipsVisible(false);
+        }
+    }
+    return (_jsxs("div", { className: "prettier-wrapper", children: [_jsx("button", { className: "menu-item", onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-label": "prettier", children: syntaxError ? (_jsx("i", { className: "format prettier-error" })) : (_jsx("i", { className: "format prettier" })) }), tipsVisible ? (_jsx("pre", { className: "code-error-tips", children: syntaxError })) : null] }));
+}

package/lib/plugins/CodeActionMenuPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+import * as React from 'react';
+export default function CodeActionMenuPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): React.ReactPortal | null;

package/lib/plugins/CodeActionMenuPlugin/index.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './index.css';
+import { $isCodeNode, CodeNode, getLanguageFriendlyName, normalizeCodeLang, } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CopyButton } from './components/CopyButton';
+import { canBePrettier, PrettierButton } from './components/PrettierButton';
+import { useDebounce } from './utils';
+const CODE_PADDING = 8;
+function CodeActionMenuContainer({ anchorElem, }) {
+    const [editor] = useLexicalComposerContext();
+    const [lang, setLang] = useState('');
+    const [isShown, setShown] = useState(false);
+    const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false);
+    const [position, setPosition] = useState({
+        right: '0',
+        top: '0',
+    });
+    const codeSetRef = useRef(new Set());
+    const codeDOMNodeRef = useRef(null);
+    function getCodeDOMNode() {
+        return codeDOMNodeRef.current;
+    }
+    const debouncedOnMouseMove = useDebounce((event) => {
+        const { codeDOMNode, isOutside } = getMouseInfo(event);
+        if (isOutside) {
+            setShown(false);
+            return;
+        }
+        if (!codeDOMNode) {
+            return;
+        }
+        codeDOMNodeRef.current = codeDOMNode;
+        let codeNode = null;
+        let _lang = '';
+        editor.update(() => {
+            const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+            if ($isCodeNode(maybeCodeNode)) {
+                codeNode = maybeCodeNode;
+                _lang = codeNode.getLanguage() || '';
+            }
+        });
+        if (codeNode) {
+            const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
+            const { y, right } = codeDOMNode.getBoundingClientRect();
+            setLang(_lang);
+            setShown(true);
+            setPosition({
+                right: `${editorElemRight - right + CODE_PADDING}px`,
+                top: `${y - editorElemY}px`,
+            });
+        }
+    }, 50, 1000);
+    useEffect(() => {
+        if (!shouldListenMouseMove) {
+            return;
+        }
+        document.addEventListener('mousemove', debouncedOnMouseMove);
+        return () => {
+            setShown(false);
+            debouncedOnMouseMove.cancel();
+            document.removeEventListener('mousemove', debouncedOnMouseMove);
+        };
+    }, [shouldListenMouseMove, debouncedOnMouseMove]);
+    useEffect(() => {
+        return editor.registerMutationListener(CodeNode, (mutations) => {
+            editor.getEditorState().read(() => {
+                for (const [key, type] of mutations) {
+                    switch (type) {
+                        case 'created':
+                            codeSetRef.current.add(key);
+                            break;
+                        case 'destroyed':
+                            codeSetRef.current.delete(key);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+            setShouldListenMouseMove(codeSetRef.current.size > 0);
+        }, { skipInitialization: false });
+    }, [editor]);
+    const normalizedLang = normalizeCodeLang(lang);
+    const codeFriendlyName = getLanguageFriendlyName(lang);
+    return (_jsx(_Fragment, { children: isShown ? (_jsxs("div", { className: "code-action-menu-container", style: { ...position }, children: [_jsx("div", { className: "code-highlight-language", children: codeFriendlyName }), _jsx(CopyButton, { editor: editor, getCodeDOMNode: getCodeDOMNode }), canBePrettier(normalizedLang) ? (_jsx(PrettierButton, { editor: editor, getCodeDOMNode: getCodeDOMNode, lang: normalizedLang })) : null] })) : null }));
+}
+function getMouseInfo(event) {
+    const target = event.target;
+    if (isHTMLElement(target)) {
+        const codeDOMNode = target.closest('code.PlaygroundEditorTheme__code');
+        const isOutside = !(codeDOMNode ||
+            target.closest('div.code-action-menu-container'));
+        return { codeDOMNode, isOutside };
+    }
+    else {
+        return { codeDOMNode: null, isOutside: true };
+    }
+}
+export default function CodeActionMenuPlugin({ anchorElem = document.body, }) {
+    return createPortal(_jsx(CodeActionMenuContainer, { anchorElem: anchorElem }), anchorElem);
+}

package/lib/plugins/CodeActionMenuPlugin/utils.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T extends (...args: never[]) => void>(fn: T, ms: number, maxWait?: number): import("lodash").DebouncedFunc<(...args: Parameters<T>) => void>;

package/lib/plugins/CodeActionMenuPlugin/utils.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { debounce } from 'lodash-es';
+import { useMemo, useRef } from 'react';
+export function useDebounce(fn, ms, maxWait) {
+    const funcRef = useRef(null);
+    funcRef.current = fn;
+    return useMemo(() => debounce((...args) => {
+        if (funcRef.current) {
+            funcRef.current(...args);
+        }
+    }, ms, { maxWait }), [ms, maxWait]);
+}

package/lib/plugins/CodeHighlightPrismPlugin/index.d.ts

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

package/lib/plugins/CodeHighlightPrismPlugin/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { registerCodeHighlighting } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export default function CodeHighlightPrismPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}

package/lib/plugins/CodeHighlightShikiPlugin/index.d.ts

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

package/lib/plugins/CodeHighlightShikiPlugin/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { registerCodeHighlighting } from '@lexical/code-shiki';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export default function CodeHighlightShikiPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}

package/lib/plugins/CollapsiblePlugin/CollapsibleContainerNode.d.ts

@@ -0,0 +1,25 @@
+import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, NodeKey, RangeSelection, SerializedElementNode, Spread } from 'lexical';
+type SerializedCollapsibleContainerNode = Spread<{
+    open: boolean;
+}, SerializedElementNode>;
+export declare function $convertDetailsElement(domNode: HTMLDetailsElement): DOMConversionOutput | null;
+export declare class CollapsibleContainerNode extends ElementNode {
+    __open: boolean;
+    constructor(open: boolean, key?: NodeKey);
+    static getType(): string;
+    static clone(node: CollapsibleContainerNode): CollapsibleContainerNode;
+    isShadowRoot(): boolean;
+    collapseAtStart(selection: RangeSelection): boolean;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLDetailsElement): boolean;
+    static importDOM(): DOMConversionMap<HTMLDetailsElement> | null;
+    static importJSON(serializedNode: SerializedCollapsibleContainerNode): CollapsibleContainerNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedCollapsibleContainerNode;
+    setOpen(open: boolean): void;
+    getOpen(): boolean;
+    toggleOpen(): void;
+}
+export declare function $createCollapsibleContainerNode(isOpen: boolean): CollapsibleContainerNode;
+export declare function $isCollapsibleContainerNode(node: LexicalNode | null | undefined): node is CollapsibleContainerNode;
+export {};

package/lib/plugins/CollapsiblePlugin/CollapsibleContainerNode.js

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { IS_CHROME } from '@lexical/utils';
+import { $getSiblingCaret, $isElementNode, $rewindSiblingCaret, ElementNode, isHTMLElement, } from 'lexical';
+import { setDomHiddenUntilFound } from './CollapsibleUtils';
+export function $convertDetailsElement(domNode) {
+    const isOpen = domNode.open !== undefined ? domNode.open : true;
+    const node = $createCollapsibleContainerNode(isOpen);
+    return {
+        node,
+    };
+}
+export class CollapsibleContainerNode extends ElementNode {
+    __open;
+    constructor(open, key) {
+        super(key);
+        this.__open = open;
+    }
+    static getType() {
+        return 'collapsible-container';
+    }
+    static clone(node) {
+        return new CollapsibleContainerNode(node.__open, node.__key);
+    }
+    isShadowRoot() {
+        return true;
+    }
+    collapseAtStart(selection) {
+        // Unwrap the CollapsibleContainerNode by replacing it with the children
+        // of its children (CollapsibleTitleNode, CollapsibleContentNode)
+        const nodesToInsert = [];
+        for (const child of this.getChildren()) {
+            if ($isElementNode(child)) {
+                nodesToInsert.push(...child.getChildren());
+            }
+        }
+        const caret = $rewindSiblingCaret($getSiblingCaret(this, 'previous'));
+        caret.splice(1, nodesToInsert);
+        // Merge the first child of the CollapsibleTitleNode with the
+        // previous sibling of the CollapsibleContainerNode
+        const [firstChild] = nodesToInsert;
+        if (firstChild) {
+            firstChild.selectStart().deleteCharacter(true);
+        }
+        return true;
+    }
+    createDOM(config, editor) {
+        // details is not well supported in Chrome #5582
+        let dom;
+        if (IS_CHROME) {
+            dom = document.createElement('div');
+            dom.setAttribute('open', '');
+        }
+        else {
+            const detailsDom = document.createElement('details');
+            detailsDom.open = this.__open;
+            detailsDom.addEventListener('toggle', () => {
+                const open = editor.getEditorState().read(() => this.getOpen());
+                if (open !== detailsDom.open) {
+                    editor.update(() => this.toggleOpen());
+                }
+            });
+            dom = detailsDom;
+        }
+        dom.classList.add('Collapsible__container');
+        return dom;
+    }
+    updateDOM(prevNode, dom) {
+        const currentOpen = this.__open;
+        if (prevNode.__open !== currentOpen) {
+            // details is not well supported in Chrome #5582
+            if (IS_CHROME) {
+                const contentDom = dom.children[1];
+                if (!isHTMLElement(contentDom)) {
+                    throw new Error('Expected contentDom to be an HTMLElement');
+                }
+                if (currentOpen) {
+                    dom.setAttribute('open', '');
+                    contentDom.hidden = false;
+                }
+                else {
+                    dom.removeAttribute('open');
+                    setDomHiddenUntilFound(contentDom);
+                }
+            }
+            else {
+                dom.open = this.__open;
+            }
+        }
+        return false;
+    }
+    static importDOM() {
+        return {
+            details: (domNode) => {
+                return {
+                    conversion: $convertDetailsElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        return $createCollapsibleContainerNode(serializedNode.open).updateFromJSON(serializedNode);
+    }
+    exportDOM() {
+        const element = document.createElement('details');
+        element.classList.add('Collapsible__container');
+        element.setAttribute('open', this.__open.toString());
+        return { element };
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            open: this.__open,
+        };
+    }
+    setOpen(open) {
+        const writable = this.getWritable();
+        writable.__open = open;
+    }
+    getOpen() {
+        return this.getLatest().__open;
+    }
+    toggleOpen() {
+        this.setOpen(!this.getOpen());
+    }
+}
+export function $createCollapsibleContainerNode(isOpen) {
+    return new CollapsibleContainerNode(isOpen);
+}
+export function $isCollapsibleContainerNode(node) {
+    return node instanceof CollapsibleContainerNode;
+}

package/lib/plugins/CollapsiblePlugin/CollapsibleContentNode.d.ts

@@ -0,0 +1,16 @@
+import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, SerializedElementNode } from 'lexical';
+type SerializedCollapsibleContentNode = SerializedElementNode;
+export declare function $convertCollapsibleContentElement(domNode: HTMLElement): DOMConversionOutput | null;
+export declare class CollapsibleContentNode extends ElementNode {
+    static getType(): string;
+    static clone(node: CollapsibleContentNode): CollapsibleContentNode;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    static importJSON(serializedNode: SerializedCollapsibleContentNode): CollapsibleContentNode;
+    isShadowRoot(): boolean;
+}
+export declare function $createCollapsibleContentNode(): CollapsibleContentNode;
+export declare function $isCollapsibleContentNode(node: LexicalNode | null | undefined): node is CollapsibleContentNode;
+export {};

package/lib/plugins/CollapsiblePlugin/CollapsibleContentNode.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { IS_CHROME } from '@lexical/utils';
+import { ElementNode, } from 'lexical';
+import { $isCollapsibleContainerNode } from './CollapsibleContainerNode';
+import { domOnBeforeMatch, setDomHiddenUntilFound } from './CollapsibleUtils';
+export function $convertCollapsibleContentElement(domNode) {
+    const node = $createCollapsibleContentNode();
+    return {
+        node,
+    };
+}
+export class CollapsibleContentNode extends ElementNode {
+    static getType() {
+        return 'collapsible-content';
+    }
+    static clone(node) {
+        return new CollapsibleContentNode(node.__key);
+    }
+    createDOM(config, editor) {
+        const dom = document.createElement('div');
+        dom.classList.add('Collapsible__content');
+        if (IS_CHROME) {
+            editor.getEditorState().read(() => {
+                const containerNode = this.getParentOrThrow();
+                if (!$isCollapsibleContainerNode(containerNode)) {
+                    throw new Error('Expected parent node to be a CollapsibleContainerNode');
+                }
+                if (!containerNode.__open) {
+                    setDomHiddenUntilFound(dom);
+                }
+            });
+            domOnBeforeMatch(dom, () => {
+                editor.update(() => {
+                    const containerNode = this.getParentOrThrow().getLatest();
+                    if (!$isCollapsibleContainerNode(containerNode)) {
+                        throw new Error('Expected parent node to be a CollapsibleContainerNode');
+                    }
+                    if (!containerNode.__open) {
+                        containerNode.toggleOpen();
+                    }
+                });
+            });
+        }
+        return dom;
+    }
+    updateDOM(prevNode, dom) {
+        return false;
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-collapsible-content')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertCollapsibleContentElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        element.classList.add('Collapsible__content');
+        element.setAttribute('data-lexical-collapsible-content', 'true');
+        return { element };
+    }
+    static importJSON(serializedNode) {
+        return $createCollapsibleContentNode().updateFromJSON(serializedNode);
+    }
+    isShadowRoot() {
+        return true;
+    }
+}
+export function $createCollapsibleContentNode() {
+    return new CollapsibleContentNode();
+}
+export function $isCollapsibleContentNode(node) {
+    return node instanceof CollapsibleContentNode;
+}

package/lib/plugins/CollapsiblePlugin/CollapsibleTitleNode.d.ts

@@ -0,0 +1,16 @@
+import { DOMConversionOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, RangeSelection } from 'lexical';
+export declare function $convertSummaryElement(domNode: HTMLElement): DOMConversionOutput | null;
+/** @noInheritDoc */
+export declare class CollapsibleTitleNode extends ElementNode {
+    /** @internal */
+    $config(): import("lexical").StaticNodeConfigRecord<"collapsible-title", {
+        $transform(node: CollapsibleTitleNode): void;
+        extends: typeof ElementNode;
+        importDOM: import("lexical").DOMConversionMap<HTMLElement>;
+    }>;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement): boolean;
+    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): ElementNode;
+}
+export declare function $createCollapsibleTitleNode(): CollapsibleTitleNode;
+export declare function $isCollapsibleTitleNode(node: LexicalNode | null | undefined): node is CollapsibleTitleNode;