@datalayer/lexical-loro 1.0.2 → 1.0.5

package/lib/nodes/InlineImageNode/InlineImageComponent.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './InlineImageNode.css';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import useModal from '../../hooks/useModal';
+import LinkPlugin from '../../plugins/LinkPlugin';
+import Button from '../../ui/Button';
+import ContentEditable from '../../ui/ContentEditable';
+import { DialogActions } from '../../ui/Dialog';
+import Select from '../../ui/Select';
+import TextInput from '../../ui/TextInput';
+const imageCache = new Set();
+function useSuspenseImage(src) {
+    if (!imageCache.has(src)) {
+        throw new Promise((resolve) => {
+            const img = new Image();
+            img.src = src;
+            img.onload = () => {
+                imageCache.add(src);
+                resolve(null);
+            };
+        });
+    }
+}
+function LazyImage({ altText, className, imageRef, src, width, height, position, }) {
+    useSuspenseImage(src);
+    return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, "data-position": position, style: {
+            display: 'block',
+            height,
+            width,
+        }, draggable: "false" }));
+}
+export function UpdateInlineImageDialog({ activeEditor, nodeKey, onClose, }) {
+    const editorState = activeEditor.getEditorState();
+    const node = editorState.read(() => $getNodeByKey(nodeKey));
+    const [altText, setAltText] = useState(node.getAltText());
+    const [showCaption, setShowCaption] = useState(node.getShowCaption());
+    const [position, setPosition] = useState(node.getPosition());
+    const handleShowCaptionChange = (e) => {
+        setShowCaption(e.target.checked);
+    };
+    const handlePositionChange = (e) => {
+        setPosition(e.target.value);
+    };
+    const handleOnConfirm = () => {
+        const payload = { altText, position, showCaption };
+        if (node) {
+            activeEditor.update(() => {
+                node.update(payload);
+            });
+        }
+        onClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginBottom: '1em' }, children: _jsx(TextInput, { label: "Alt Text", placeholder: "Descriptive alternative text", onChange: setAltText, value: altText, "data-test-id": "image-modal-alt-text-input" }) }), _jsxs(Select, { style: { marginBottom: '1em', width: '208px' }, value: position, label: "Position", name: "position", id: "position-select", onChange: handlePositionChange, children: [_jsx("option", { value: "left", children: "Left" }), _jsx("option", { value: "right", children: "Right" }), _jsx("option", { value: "full", children: "Full Width" })] }), _jsxs("div", { className: "Input__wrapper", children: [_jsx("input", { id: "caption", type: "checkbox", checked: showCaption, onChange: handleShowCaptionChange }), _jsx("label", { htmlFor: "caption", children: "Show Caption" })] }), _jsx(DialogActions, { children: _jsx(Button, { "data-test-id": "image-modal-file-upload-btn", onClick: () => handleOnConfirm(), children: "Confirm" }) })] }));
+}
+export default function InlineImageComponent({ src, altText, nodeKey, width, height, showCaption, caption, position, }) {
+    const [modal, showModal] = useModal();
+    const imageRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [editor] = useLexicalComposerContext();
+    const [selection, setSelection] = useState(null);
+    const activeEditorRef = useRef(null);
+    const isEditable = useLexicalEditable();
+    const $onEnter = useCallback((event) => {
+        const latestSelection = $getSelection();
+        const buttonElem = buttonRef.current;
+        if (isSelected &&
+            $isNodeSelection(latestSelection) &&
+            latestSelection.getNodes().length === 1) {
+            if (showCaption) {
+                // Move focus into nested editor
+                $setSelection(null);
+                event.preventDefault();
+                caption.focus();
+                return true;
+            }
+            else if (buttonElem !== null &&
+                buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [caption, isSelected, showCaption]);
+    const $onEscape = useCallback((event) => {
+        if (activeEditorRef.current === caption ||
+            buttonRef.current === event.target) {
+            $setSelection(null);
+            editor.update(() => {
+                setSelected(true);
+                const parentRootElement = editor.getRootElement();
+                if (parentRootElement !== null) {
+                    parentRootElement.focus();
+                }
+            });
+            return true;
+        }
+        return false;
+    }, [caption, editor, setSelected]);
+    useEffect(() => {
+        let isMounted = true;
+        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            if (isMounted) {
+                setSelection(editorState.read(() => $getSelection()));
+            }
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
+            const event = payload;
+            if (event.target === imageRef.current) {
+                if (event.shiftKey) {
+                    setSelected(!isSelected);
+                }
+                else {
+                    clearSelection();
+                    setSelected(true);
+                }
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+            if (event.target === imageRef.current) {
+                // TODO This is just a temporary workaround for FF to behave like other browsers.
+                // Ideally, this handles drag & drop too (and all browsers).
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, $onEscape, COMMAND_PRIORITY_LOW));
+        return () => {
+            isMounted = false;
+            unregister();
+        };
+    }, [
+        clearSelection,
+        editor,
+        isSelected,
+        nodeKey,
+        $onEnter,
+        $onEscape,
+        setSelected,
+    ]);
+    const draggable = isSelected && $isNodeSelection(selection);
+    const isFocused = isSelected && isEditable;
+    return (_jsxs(Suspense, { fallback: null, children: [_jsxs(_Fragment, { children: [_jsxs("span", { draggable: draggable, children: [isEditable && (_jsx("button", { className: "image-edit-button", ref: buttonRef, onClick: () => {
+                                    showModal('Update Inline Image', (onClose) => (_jsx(UpdateInlineImageDialog, { activeEditor: editor, nodeKey: nodeKey, onClose: onClose })));
+                                }, children: "Edit" })), _jsx(LazyImage, { className: isFocused
+                                    ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
+                                    : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, position: position })] }), showCaption && (_jsx("span", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(LinkPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: "Enter a caption...", placeholderClassName: "InlineImageNode__placeholder", className: "InlineImageNode__contentEditable" }), ErrorBoundary: LexicalErrorBoundary })] }) }))] }), modal] }));
+}

package/lib/nodes/InlineImageNode/InlineImageNode.d.ts

@@ -0,0 +1,59 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorNode } from 'lexical';
+export type Position = 'left' | 'right' | 'full' | undefined;
+export interface InlineImagePayload {
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    showCaption?: boolean;
+    src: string;
+    width?: number;
+    position?: Position;
+}
+export interface UpdateInlineImagePayload {
+    altText?: string;
+    showCaption?: boolean;
+    position?: Position;
+}
+export type SerializedInlineImageNode = Spread<{
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    showCaption: boolean;
+    src: string;
+    width?: number;
+    position?: Position;
+}, SerializedLexicalNode>;
+export declare class InlineImageNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __altText: string;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    __position: Position;
+    static getType(): string;
+    static clone(node: InlineImageNode): InlineImageNode;
+    static importJSON(serializedNode: SerializedInlineImageNode): InlineImageNode;
+    updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedInlineImageNode>): this;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, altText: string, position: Position, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedInlineImageNode;
+    getSrc(): string;
+    getAltText(): string;
+    setAltText(altText: string): void;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    getShowCaption(): boolean;
+    setShowCaption(showCaption: boolean): void;
+    getPosition(): Position;
+    setPosition(position: Position): void;
+    update(payload: UpdateInlineImagePayload): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): false;
+    decorate(): JSX.Element;
+}
+export declare function $createInlineImageNode({ altText, position, height, src, width, showCaption, caption, key, }: InlineImagePayload): InlineImageNode;
+export declare function $isInlineImageNode(node: LexicalNode | null | undefined): node is InlineImageNode;

package/lib/nodes/InlineImageNode/InlineImageNode.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addClassNamesToElement, removeClassNamesFromElement, } from '@lexical/utils';
+import { $applyNodeReplacement, createEditor, DecoratorNode, isHTMLElement, } from 'lexical';
+import * as React from 'react';
+const InlineImageComponent = React.lazy(() => import('./InlineImageComponent'));
+function $convertInlineImageElement(domNode) {
+    if (isHTMLElement(domNode) && domNode.nodeName === 'IMG') {
+        const { alt: altText, src, width, height } = domNode;
+        const node = $createInlineImageNode({ altText, height, src, width });
+        return { node };
+    }
+    return null;
+}
+function getPositionClass(position) {
+    return typeof position === 'string' ? `position-${position}` : undefined;
+}
+export class InlineImageNode extends DecoratorNode {
+    __src;
+    __altText;
+    __width;
+    __height;
+    __showCaption;
+    __caption;
+    __position;
+    static getType() {
+        return 'inline-image';
+    }
+    static clone(node) {
+        return new InlineImageNode(node.__src, node.__altText, node.__position, node.__width, node.__height, node.__showCaption, node.__caption, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { altText, height, width, src, showCaption, position } = serializedNode;
+        return $createInlineImageNode({
+            altText,
+            height,
+            position,
+            showCaption,
+            src,
+            width,
+        }).updateFromJSON(serializedNode);
+    }
+    updateFromJSON(serializedNode) {
+        const { caption } = serializedNode;
+        const node = super.updateFromJSON(serializedNode);
+        const nestedEditor = node.__caption;
+        const editorState = nestedEditor.parseEditorState(caption.editorState);
+        if (!editorState.isEmpty()) {
+            nestedEditor.setEditorState(editorState);
+        }
+        return node;
+    }
+    static importDOM() {
+        return {
+            img: (node) => ({
+                conversion: $convertInlineImageElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, altText, position, width, height, showCaption, caption, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__width = width || 'inherit';
+        this.__height = height || 'inherit';
+        this.__showCaption = showCaption || false;
+        this.__caption = caption || createEditor();
+        this.__position = position;
+    }
+    exportDOM() {
+        const element = document.createElement('img');
+        element.setAttribute('src', this.__src);
+        element.setAttribute('alt', this.__altText);
+        element.setAttribute('width', this.__width.toString());
+        element.setAttribute('height', this.__height.toString());
+        return { element };
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            altText: this.getAltText(),
+            caption: this.__caption.toJSON(),
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            position: this.__position,
+            showCaption: this.__showCaption,
+            src: this.getSrc(),
+            width: this.__width === 'inherit' ? 0 : this.__width,
+        };
+    }
+    getSrc() {
+        return this.__src;
+    }
+    getAltText() {
+        return this.__altText;
+    }
+    setAltText(altText) {
+        const writable = this.getWritable();
+        writable.__altText = altText;
+    }
+    setWidthAndHeight(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+    }
+    getShowCaption() {
+        return this.__showCaption;
+    }
+    setShowCaption(showCaption) {
+        const writable = this.getWritable();
+        writable.__showCaption = showCaption;
+    }
+    getPosition() {
+        return this.__position;
+    }
+    setPosition(position) {
+        const writable = this.getWritable();
+        writable.__position = position;
+    }
+    update(payload) {
+        const writable = this.getWritable();
+        const { altText, showCaption, position } = payload;
+        if (altText !== undefined) {
+            writable.__altText = altText;
+        }
+        if (showCaption !== undefined) {
+            writable.__showCaption = showCaption;
+        }
+        if (position !== undefined) {
+            writable.__position = position;
+        }
+    }
+    // View
+    createDOM(config) {
+        const span = document.createElement('span');
+        for (const cls of [
+            config.theme.inlineImage,
+            getPositionClass(this.__position),
+        ]) {
+            if (cls) {
+                addClassNamesToElement(span, cls);
+            }
+        }
+        return span;
+    }
+    updateDOM(prevNode, dom, config) {
+        const position = this.__position;
+        if (position !== prevNode.__position) {
+            removeClassNamesFromElement(dom, getPositionClass(prevNode.__position));
+            addClassNamesToElement(dom, getPositionClass(position));
+        }
+        return false;
+    }
+    decorate() {
+        return (_jsx(InlineImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey(), showCaption: this.__showCaption, caption: this.__caption, position: this.__position }));
+    }
+}
+export function $createInlineImageNode({ altText, position, height, src, width, showCaption, caption, key, }) {
+    return $applyNodeReplacement(new InlineImageNode(src, altText, position, width, height, showCaption, caption, key));
+}
+export function $isInlineImageNode(node) {
+    return node instanceof InlineImageNode;
+}

package/lib/nodes/KeywordNode.d.ts

@@ -0,0 +1,14 @@
+import type { EditorConfig, LexicalNode, SerializedTextNode } from 'lexical';
+import { TextNode } from 'lexical';
+export type SerializedKeywordNode = SerializedTextNode;
+export declare class KeywordNode extends TextNode {
+    static getType(): string;
+    static clone(node: KeywordNode): KeywordNode;
+    static importJSON(serializedNode: SerializedKeywordNode): KeywordNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+    isTextEntity(): true;
+}
+export declare function $createKeywordNode(keyword?: string): KeywordNode;
+export declare function $isKeywordNode(node: LexicalNode | null | undefined): boolean;

package/lib/nodes/KeywordNode.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { $applyNodeReplacement, TextNode } from 'lexical';
+export class KeywordNode extends TextNode {
+    static getType() {
+        return 'keyword';
+    }
+    static clone(node) {
+        return new KeywordNode(node.__text, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return $createKeywordNode().updateFromJSON(serializedNode);
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        dom.style.cursor = 'default';
+        dom.className = 'keyword';
+        return dom;
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    canInsertTextAfter() {
+        return false;
+    }
+    isTextEntity() {
+        return true;
+    }
+}
+export function $createKeywordNode(keyword = '') {
+    return $applyNodeReplacement(new KeywordNode(keyword));
+}
+export function $isKeywordNode(node) {
+    return node instanceof KeywordNode;
+}

package/lib/nodes/LayoutContainerNode.d.ts

@@ -0,0 +1,24 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedElementNode, Spread } from 'lexical';
+import { ElementNode } from 'lexical';
+export type SerializedLayoutContainerNode = Spread<{
+    templateColumns: string;
+}, SerializedElementNode>;
+export declare class LayoutContainerNode extends ElementNode {
+    __templateColumns: string;
+    constructor(templateColumns: string, key?: NodeKey);
+    static getType(): string;
+    static clone(node: LayoutContainerNode): LayoutContainerNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    updateDOM(prevNode: this, dom: HTMLElement): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode;
+    updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedLayoutContainerNode>): this;
+    isShadowRoot(): boolean;
+    canBeEmpty(): boolean;
+    exportJSON(): SerializedLayoutContainerNode;
+    getTemplateColumns(): string;
+    setTemplateColumns(templateColumns: string): this;
+}
+export declare function $createLayoutContainerNode(templateColumns?: string): LayoutContainerNode;
+export declare function $isLayoutContainerNode(node: LexicalNode | null | undefined): node is LayoutContainerNode;

package/lib/nodes/LayoutContainerNode.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { addClassNamesToElement } from '@lexical/utils';
+import { ElementNode } from 'lexical';
+function $convertLayoutContainerElement(domNode) {
+    const styleAttributes = window.getComputedStyle(domNode);
+    const templateColumns = styleAttributes.getPropertyValue('grid-template-columns');
+    if (templateColumns) {
+        const node = $createLayoutContainerNode(templateColumns);
+        return { node };
+    }
+    return null;
+}
+export class LayoutContainerNode extends ElementNode {
+    __templateColumns;
+    constructor(templateColumns, key) {
+        super(key);
+        this.__templateColumns = templateColumns;
+    }
+    static getType() {
+        return 'layout-container';
+    }
+    static clone(node) {
+        return new LayoutContainerNode(node.__templateColumns, node.__key);
+    }
+    createDOM(config) {
+        const dom = document.createElement('div');
+        dom.style.gridTemplateColumns = this.__templateColumns;
+        if (typeof config.theme.layoutContainer === 'string') {
+            addClassNamesToElement(dom, config.theme.layoutContainer);
+        }
+        return dom;
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        element.style.gridTemplateColumns = this.__templateColumns;
+        element.setAttribute('data-lexical-layout-container', 'true');
+        return { element };
+    }
+    updateDOM(prevNode, dom) {
+        if (prevNode.__templateColumns !== this.__templateColumns) {
+            dom.style.gridTemplateColumns = this.__templateColumns;
+        }
+        return false;
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-layout-container')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertLayoutContainerElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    static importJSON(json) {
+        return $createLayoutContainerNode().updateFromJSON(json);
+    }
+    updateFromJSON(serializedNode) {
+        return super
+            .updateFromJSON(serializedNode)
+            .setTemplateColumns(serializedNode.templateColumns);
+    }
+    isShadowRoot() {
+        return true;
+    }
+    canBeEmpty() {
+        return false;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            templateColumns: this.__templateColumns,
+        };
+    }
+    getTemplateColumns() {
+        return this.getLatest().__templateColumns;
+    }
+    setTemplateColumns(templateColumns) {
+        const self = this.getWritable();
+        self.__templateColumns = templateColumns;
+        return self;
+    }
+}
+export function $createLayoutContainerNode(templateColumns = '') {
+    return new LayoutContainerNode(templateColumns);
+}
+export function $isLayoutContainerNode(node) {
+    return node instanceof LayoutContainerNode;
+}

package/lib/nodes/LayoutItemNode.d.ts

@@ -0,0 +1,16 @@
+import type { DOMConversionMap, EditorConfig, LexicalNode, SerializedElementNode } from 'lexical';
+import { ElementNode } from 'lexical';
+export type SerializedLayoutItemNode = SerializedElementNode;
+export declare function $isEmptyLayoutItemNode(node: LexicalNode): boolean;
+export declare class LayoutItemNode extends ElementNode {
+    static getType(): string;
+    static clone(node: LayoutItemNode): LayoutItemNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    collapseAtStart(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedLayoutItemNode): LayoutItemNode;
+    isShadowRoot(): boolean;
+}
+export declare function $createLayoutItemNode(): LayoutItemNode;
+export declare function $isLayoutItemNode(node: LexicalNode | null | undefined): node is LayoutItemNode;

package/lib/nodes/LayoutItemNode.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { addClassNamesToElement } from '@lexical/utils';
+import { $isParagraphNode, ElementNode } from 'lexical';
+function $convertLayoutItemElement() {
+    return { node: $createLayoutItemNode() };
+}
+export function $isEmptyLayoutItemNode(node) {
+    if (!$isLayoutItemNode(node) || node.getChildrenSize() !== 1) {
+        return false;
+    }
+    const firstChild = node.getFirstChild();
+    return $isParagraphNode(firstChild) && firstChild.isEmpty();
+}
+export class LayoutItemNode extends ElementNode {
+    static getType() {
+        return 'layout-item';
+    }
+    static clone(node) {
+        return new LayoutItemNode(node.__key);
+    }
+    createDOM(config) {
+        const dom = document.createElement('div');
+        dom.setAttribute('data-lexical-layout-item', 'true');
+        if (typeof config.theme.layoutItem === 'string') {
+            addClassNamesToElement(dom, config.theme.layoutItem);
+        }
+        return dom;
+    }
+    updateDOM() {
+        return false;
+    }
+    collapseAtStart() {
+        const parent = this.getParentOrThrow();
+        if (this.is(parent.getFirstChild()) &&
+            parent.getChildren().every($isEmptyLayoutItemNode)) {
+            parent.remove();
+            return true;
+        }
+        return false;
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-layout-item')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertLayoutItemElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        return $createLayoutItemNode().updateFromJSON(serializedNode);
+    }
+    isShadowRoot() {
+        return true;
+    }
+}
+export function $createLayoutItemNode() {
+    return new LayoutItemNode();
+}
+export function $isLayoutItemNode(node) {
+    return node instanceof LayoutItemNode;
+}

package/lib/nodes/MentionNode.d.ts

@@ -0,0 +1,20 @@
+import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, type Spread, TextNode } from 'lexical';
+export type SerializedMentionNode = Spread<{
+    mentionName: string;
+}, SerializedTextNode>;
+export declare class MentionNode extends TextNode {
+    __mention: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+    constructor(mentionName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedMentionNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+export declare function $createMentionNode(mentionName: string, textContent?: string): MentionNode;
+export declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;