@datalayer/lexical-loro 0.2.4 → 0.2.5

package/lib/nodes/EmojiNode.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { $applyNodeReplacement, TextNode } from 'lexical';
+export class EmojiNode extends TextNode {
+    __className;
+    static getType() {
+        return 'emoji';
+    }
+    static clone(node) {
+        return new EmojiNode(node.__className, node.__text, node.__key);
+    }
+    constructor(className, text, key) {
+        super(text, key);
+        this.__className = className;
+    }
+    createDOM(config) {
+        const dom = document.createElement('span');
+        const inner = super.createDOM(config);
+        dom.className = this.__className;
+        inner.className = 'emoji-inner';
+        dom.appendChild(inner);
+        return dom;
+    }
+    updateDOM(prevNode, dom, config) {
+        const inner = dom.firstChild;
+        if (inner === null) {
+            return true;
+        }
+        super.updateDOM(prevNode, inner, config);
+        return false;
+    }
+    static importJSON(serializedNode) {
+        return $createEmojiNode(serializedNode.className, serializedNode.text).updateFromJSON(serializedNode);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            className: this.getClassName(),
+        };
+    }
+    getClassName() {
+        const self = this.getLatest();
+        return self.__className;
+    }
+}
+export function $isEmojiNode(node) {
+    return node instanceof EmojiNode;
+}
+export function $createEmojiNode(className, emojiText) {
+    const node = new EmojiNode(className, emojiText).setMode('token');
+    return $applyNodeReplacement(node);
+}

package/lib/nodes/EquationComponent.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import { NodeKey } from 'lexical';
+type EquationComponentProps = {
+    equation: string;
+    inline: boolean;
+    nodeKey: NodeKey;
+};
+export default function EquationComponent({ equation, inline, nodeKey, }: EquationComponentProps): JSX.Element;
+export {};

package/lib/nodes/EquationComponent.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import EquationEditor from '../ui/EquationEditor';
+import KatexRenderer from '../ui/KatexRenderer';
+import { $isEquationNode } from './EquationNode';
+export default function EquationComponent({ equation, inline, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    const [equationValue, setEquationValue] = useState(equation);
+    const [showEquationEditor, setShowEquationEditor] = useState(false);
+    const inputRef = useRef(null);
+    const onHide = useCallback((restoreSelection) => {
+        setShowEquationEditor(false);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isEquationNode(node)) {
+                node.setEquation(equationValue);
+                if (restoreSelection) {
+                    node.selectNext(0, 0);
+                }
+            }
+        });
+    }, [editor, equationValue, nodeKey]);
+    useEffect(() => {
+        if (!showEquationEditor && equationValue !== equation) {
+            setEquationValue(equation);
+        }
+    }, [showEquationEditor, equation, equationValue]);
+    useEffect(() => {
+        if (!isEditable) {
+            return;
+        }
+        if (showEquationEditor) {
+            return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload) => {
+                const activeElement = document.activeElement;
+                const inputElem = inputRef.current;
+                if (inputElem !== activeElement) {
+                    onHide();
+                }
+                return false;
+            }, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ESCAPE_COMMAND, (payload) => {
+                const activeElement = document.activeElement;
+                const inputElem = inputRef.current;
+                if (inputElem === activeElement) {
+                    onHide(true);
+                    return true;
+                }
+                return false;
+            }, COMMAND_PRIORITY_HIGH));
+        }
+        else {
+            return editor.registerUpdateListener(({ editorState }) => {
+                const isSelected = editorState.read(() => {
+                    const selection = $getSelection();
+                    return ($isNodeSelection(selection) &&
+                        selection.has(nodeKey) &&
+                        selection.getNodes().length === 1);
+                });
+                if (isSelected) {
+                    setShowEquationEditor(true);
+                }
+            });
+        }
+    }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);
+    return (_jsx(_Fragment, { children: showEquationEditor && isEditable ? (_jsx(EquationEditor, { equation: equationValue, setEquation: setEquationValue, inline: inline, ref: inputRef })) : (_jsx(ErrorBoundary, { onError: (e) => editor._onError(e), fallback: null, children: _jsx(KatexRenderer, { equation: equationValue, inline: inline, onDoubleClick: () => {
+                    if (isEditable) {
+                        setShowEquationEditor(true);
+                    }
+                } }) })) }));
+}

package/lib/nodes/EquationNode.d.ts

@@ -0,0 +1,26 @@
+import type { DOMConversionMap, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorNode, DOMExportOutput } from 'lexical';
+export type SerializedEquationNode = Spread<{
+    equation: string;
+    inline: boolean;
+}, SerializedLexicalNode>;
+export declare class EquationNode extends DecoratorNode<JSX.Element> {
+    __equation: string;
+    __inline: boolean;
+    static getType(): string;
+    static clone(node: EquationNode): EquationNode;
+    constructor(equation: string, inline?: boolean, key?: NodeKey);
+    static importJSON(serializedNode: SerializedEquationNode): EquationNode;
+    exportJSON(): SerializedEquationNode;
+    createDOM(_config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(prevNode: this): boolean;
+    getTextContent(): string;
+    getEquation(): string;
+    setEquation(equation: string): void;
+    decorate(): JSX.Element;
+}
+export declare function $createEquationNode(equation?: string, inline?: boolean): EquationNode;
+export declare function $isEquationNode(node: LexicalNode | null | undefined): node is EquationNode;

package/lib/nodes/EquationNode.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import katex from 'katex';
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+import * as React from 'react';
+const EquationComponent = React.lazy(() => import('./EquationComponent'));
+function $convertEquationElement(domNode) {
+    let equation = domNode.getAttribute('data-lexical-equation');
+    const inline = domNode.getAttribute('data-lexical-inline') === 'true';
+    // Decode the equation from base64
+    equation = atob(equation || '');
+    if (equation) {
+        const node = $createEquationNode(equation, inline);
+        return { node };
+    }
+    return null;
+}
+export class EquationNode extends DecoratorNode {
+    __equation;
+    __inline;
+    static getType() {
+        return 'equation';
+    }
+    static clone(node) {
+        return new EquationNode(node.__equation, node.__inline, node.__key);
+    }
+    constructor(equation, inline, key) {
+        super(key);
+        this.__equation = equation;
+        this.__inline = inline ?? false;
+    }
+    static importJSON(serializedNode) {
+        return $createEquationNode(serializedNode.equation, serializedNode.inline).updateFromJSON(serializedNode);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            equation: this.getEquation(),
+            inline: this.__inline,
+        };
+    }
+    createDOM(_config) {
+        const element = document.createElement(this.__inline ? 'span' : 'div');
+        // EquationNodes should implement `user-action:none` in their CSS to avoid issues with deletion on Android.
+        element.className = 'editor-equation';
+        return element;
+    }
+    exportDOM() {
+        const element = document.createElement(this.__inline ? 'span' : 'div');
+        // Encode the equation as base64 to avoid issues with special characters
+        const equation = btoa(this.__equation);
+        element.setAttribute('data-lexical-equation', equation);
+        element.setAttribute('data-lexical-inline', `${this.__inline}`);
+        katex.render(this.__equation, element, {
+            displayMode: !this.__inline, // true === block display //
+            errorColor: '#cc0000',
+            output: 'html',
+            strict: 'warn',
+            throwOnError: false,
+            trust: false,
+        });
+        return { element };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-equation')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertEquationElement,
+                    priority: 2,
+                };
+            },
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-equation')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertEquationElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    updateDOM(prevNode) {
+        // If the inline property changes, replace the element
+        return this.__inline !== prevNode.__inline;
+    }
+    getTextContent() {
+        return this.__equation;
+    }
+    getEquation() {
+        return this.__equation;
+    }
+    setEquation(equation) {
+        const writable = this.getWritable();
+        writable.__equation = equation;
+    }
+    decorate() {
+        return (_jsx(EquationComponent, { equation: this.__equation, inline: this.__inline, nodeKey: this.__key }));
+    }
+}
+export function $createEquationNode(equation = '', inline = false) {
+    const equationNode = new EquationNode(equation, inline);
+    return $applyNodeReplacement(equationNode);
+}
+export function $isEquationNode(node) {
+    return node instanceof EquationNode;
+}

package/lib/nodes/ExcalidrawNode/ExcalidrawComponent.d.ts

@@ -0,0 +1,8 @@
+import type { NodeKey } from 'lexical';
+import type { JSX } from 'react';
+export default function ExcalidrawComponent({ nodeKey, data, width, height, }: {
+    data: string;
+    nodeKey: NodeKey;
+    width: 'inherit' | number;
+    height: 'inherit' | number;
+}): JSX.Element;

package/lib/nodes/ExcalidrawNode/ExcalidrawComponent.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, CLICK_COMMAND, COMMAND_PRIORITY_LOW, isDOMNode, } from 'lexical';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ExcalidrawModal from '../../ui/ExcalidrawModal';
+import ImageResizer from '../../ui/ImageResizer';
+import { $isExcalidrawNode } from '.';
+import ExcalidrawImage from './ExcalidrawImage';
+export default function ExcalidrawComponent({ nodeKey, data, width, height, }) {
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    const [isModalOpen, setModalOpen] = useState(data === '[]' && editor.isEditable());
+    const imageContainerRef = useRef(null);
+    const buttonRef = useRef(null);
+    const captionButtonRef = useRef(null);
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [isResizing, setIsResizing] = useState(false);
+    useEffect(() => {
+        if (!isEditable) {
+            if (isSelected) {
+                clearSelection();
+            }
+            return;
+        }
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
+            const buttonElem = buttonRef.current;
+            const eventTarget = event.target;
+            if (isResizing) {
+                return true;
+            }
+            if (buttonElem !== null &&
+                isDOMNode(eventTarget) &&
+                buttonElem.contains(eventTarget)) {
+                if (!event.shiftKey) {
+                    clearSelection();
+                }
+                setSelected(!isSelected);
+                if (event.detail > 1) {
+                    setModalOpen(true);
+                }
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [clearSelection, editor, isSelected, isResizing, setSelected, isEditable]);
+    const deleteNode = useCallback(() => {
+        setModalOpen(false);
+        return editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (node) {
+                node.remove();
+            }
+        });
+    }, [editor, nodeKey]);
+    const setData = (els, aps, fls) => {
+        return editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isExcalidrawNode(node)) {
+                if ((els && els.length > 0) || Object.keys(fls).length > 0) {
+                    node.setData(JSON.stringify({
+                        appState: aps,
+                        elements: els,
+                        files: fls,
+                    }));
+                }
+                else {
+                    node.remove();
+                }
+            }
+        });
+    };
+    const onResizeStart = () => {
+        setIsResizing(true);
+    };
+    const onResizeEnd = (nextWidth, nextHeight) => {
+        // Delay hiding the resize bars for click case
+        setTimeout(() => {
+            setIsResizing(false);
+        }, 200);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isExcalidrawNode(node)) {
+                node.setWidth(nextWidth);
+                node.setHeight(nextHeight);
+            }
+        });
+    };
+    const openModal = useCallback(() => {
+        setModalOpen(true);
+    }, []);
+    const { elements = [], files = {}, appState = {}, } = useMemo(() => JSON.parse(data), [data]);
+    const closeModal = useCallback(() => {
+        setModalOpen(false);
+        if (elements.length === 0) {
+            editor.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                if (node) {
+                    node.remove();
+                }
+            });
+        }
+    }, [editor, nodeKey, elements.length]);
+    return (_jsxs(_Fragment, { children: [isEditable && isModalOpen && (_jsx(ExcalidrawModal, { initialElements: elements, initialFiles: files, initialAppState: appState, isShown: isModalOpen, onDelete: deleteNode, onClose: closeModal, onSave: (els, aps, fls) => {
+                    setData(els, aps, fls);
+                    setModalOpen(false);
+                }, closeOnClickOutside: false })), elements.length > 0 && (_jsxs("button", { ref: buttonRef, className: `excalidraw-button ${isSelected ? 'selected' : ''}`, children: [_jsx(ExcalidrawImage, { imageContainerRef: imageContainerRef, className: "image", elements: elements, files: files, appState: appState, width: width, height: height }), isSelected && isEditable && (_jsx("div", { className: "image-edit-button", role: "button", tabIndex: 0, onMouseDown: (event) => event.preventDefault(), onClick: openModal })), (isSelected || isResizing) && isEditable && (_jsx(ImageResizer, { buttonRef: captionButtonRef, showCaption: true, setShowCaption: () => null, imageRef: imageContainerRef, editor: editor, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: true }))] }))] }));
+}

package/lib/nodes/ExcalidrawNode/ExcalidrawImage.d.ts

@@ -0,0 +1,50 @@
+import type { ExcalidrawElement, NonDeleted } from '@excalidraw/excalidraw/element/types';
+import type { AppState, BinaryFiles } from '@excalidraw/excalidraw/types';
+import type { JSX } from 'react';
+import * as React from 'react';
+type ImageType = 'svg' | 'canvas';
+type Dimension = 'inherit' | number;
+type Props = {
+    /**
+     * Configures the export setting for SVG/Canvas
+     */
+    appState: AppState;
+    /**
+     * The css class applied to image to be rendered
+     */
+    className?: string;
+    /**
+     * The Excalidraw elements to be rendered as an image
+     */
+    elements: NonDeleted<ExcalidrawElement>[];
+    /**
+     * The Excalidraw files associated with the elements
+     */
+    files: BinaryFiles;
+    /**
+     * The height of the image to be rendered
+     */
+    height?: Dimension;
+    /**
+     * The ref object to be used to render the image
+     */
+    imageContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * The type of image to be rendered
+     */
+    imageType?: ImageType;
+    /**
+     * The css class applied to the root element of this component
+     */
+    rootClassName?: string | null;
+    /**
+     * The width of the image to be rendered
+     */
+    width?: Dimension;
+};
+/**
+ * @explorer-desc
+ * A component for rendering Excalidraw elements as a static image
+ */
+export default function ExcalidrawImage({ elements, files, imageContainerRef, appState, rootClassName, width, height, }: Props): JSX.Element;
+export {};

package/lib/nodes/ExcalidrawNode/ExcalidrawImage.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { exportToSvg } from '@excalidraw/excalidraw';
+import { useEffect, useState } from 'react';
+// exportToSvg has fonts from excalidraw.com
+// We don't want them to be used in open source
+const removeStyleFromSvg_HACK = (svg) => {
+    const styleTag = svg?.firstElementChild?.firstElementChild;
+    // Generated SVG is getting double-sized by height and width attributes
+    // We want to match the real size of the SVG element
+    const viewBox = svg.getAttribute('viewBox');
+    if (viewBox != null) {
+        const viewBoxDimensions = viewBox.split(' ');
+        svg.setAttribute('width', viewBoxDimensions[2]);
+        svg.setAttribute('height', viewBoxDimensions[3]);
+    }
+    if (styleTag && styleTag.tagName === 'style') {
+        styleTag.remove();
+    }
+};
+/**
+ * @explorer-desc
+ * A component for rendering Excalidraw elements as a static image
+ */
+export default function ExcalidrawImage({ elements, files, imageContainerRef, appState, rootClassName = null, width = 'inherit', height = 'inherit', }) {
+    const [Svg, setSvg] = useState(null);
+    useEffect(() => {
+        const setContent = async () => {
+            const svg = await exportToSvg({
+                appState,
+                elements,
+                files,
+            });
+            removeStyleFromSvg_HACK(svg);
+            svg.setAttribute('width', '100%');
+            svg.setAttribute('height', '100%');
+            svg.setAttribute('display', 'block');
+            setSvg(svg);
+        };
+        setContent();
+    }, [elements, files, appState]);
+    const containerStyle = {};
+    if (width !== 'inherit') {
+        containerStyle.width = `${width}px`;
+    }
+    if (height !== 'inherit') {
+        containerStyle.height = `${height}px`;
+    }
+    return (_jsx("div", { ref: (node) => {
+            if (node) {
+                if (imageContainerRef) {
+                    imageContainerRef.current = node;
+                }
+            }
+        }, className: rootClassName ?? '', style: containerStyle, dangerouslySetInnerHTML: { __html: Svg?.outerHTML ?? '' } }));
+}

package/lib/nodes/ExcalidrawNode/index.d.ts

@@ -0,0 +1,32 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorNode } from 'lexical';
+type Dimension = number | 'inherit';
+export type SerializedExcalidrawNode = Spread<{
+    data: string;
+    width?: Dimension;
+    height?: Dimension;
+}, SerializedLexicalNode>;
+export declare class ExcalidrawNode extends DecoratorNode<JSX.Element> {
+    __data: string;
+    __width: Dimension;
+    __height: Dimension;
+    static getType(): string;
+    static clone(node: ExcalidrawNode): ExcalidrawNode;
+    static importJSON(serializedNode: SerializedExcalidrawNode): ExcalidrawNode;
+    exportJSON(): SerializedExcalidrawNode;
+    constructor(data?: string, width?: Dimension, height?: Dimension, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    static importDOM(): DOMConversionMap<HTMLSpanElement> | null;
+    exportDOM(editor: LexicalEditor): DOMExportOutput;
+    setData(data: string): void;
+    getWidth(): Dimension;
+    setWidth(width: Dimension): void;
+    getHeight(): Dimension;
+    setHeight(height: Dimension): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+}
+export declare function $createExcalidrawNode(data?: string, width?: Dimension, height?: Dimension): ExcalidrawNode;
+export declare function $isExcalidrawNode(node: LexicalNode | null | undefined): node is ExcalidrawNode;
+export {};

package/lib/nodes/ExcalidrawNode/index.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorNode } from 'lexical';
+import * as React from 'react';
+const ExcalidrawComponent = React.lazy(() => import('./ExcalidrawComponent'));
+function $convertExcalidrawElement(domNode) {
+    const excalidrawData = domNode.getAttribute('data-lexical-excalidraw-json');
+    const styleAttributes = window.getComputedStyle(domNode);
+    const heightStr = styleAttributes.getPropertyValue('height');
+    const widthStr = styleAttributes.getPropertyValue('width');
+    const height = !heightStr || heightStr === 'inherit' ? 'inherit' : parseInt(heightStr, 10);
+    const width = !widthStr || widthStr === 'inherit' ? 'inherit' : parseInt(widthStr, 10);
+    if (excalidrawData) {
+        const node = $createExcalidrawNode(excalidrawData, width, height);
+        return {
+            node,
+        };
+    }
+    return null;
+}
+export class ExcalidrawNode extends DecoratorNode {
+    __data;
+    __width;
+    __height;
+    static getType() {
+        return 'excalidraw';
+    }
+    static clone(node) {
+        return new ExcalidrawNode(node.__data, node.__width, node.__height, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return new ExcalidrawNode(serializedNode.data, serializedNode.width ?? 'inherit', serializedNode.height ?? 'inherit').updateFromJSON(serializedNode);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            data: this.__data,
+            height: this.__height === 'inherit' ? undefined : this.__height,
+            width: this.__width === 'inherit' ? undefined : this.__width,
+        };
+    }
+    constructor(data = '[]', width = 'inherit', height = 'inherit', key) {
+        super(key);
+        this.__data = data;
+        this.__width = width;
+        this.__height = height;
+    }
+    // View
+    createDOM(config) {
+        const span = document.createElement('span');
+        const theme = config.theme;
+        const className = theme.image;
+        if (className !== undefined) {
+            span.className = className;
+        }
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-excalidraw-json')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertExcalidrawElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    exportDOM(editor) {
+        const element = document.createElement('span');
+        element.style.display = 'inline-block';
+        const content = editor.getElementByKey(this.getKey());
+        if (content !== null) {
+            const svg = content.querySelector('svg');
+            if (svg !== null) {
+                element.innerHTML = svg.outerHTML;
+            }
+        }
+        element.style.width =
+            this.__width === 'inherit' ? 'inherit' : `${this.__width}px`;
+        element.style.height =
+            this.__height === 'inherit' ? 'inherit' : `${this.__height}px`;
+        element.setAttribute('data-lexical-excalidraw-json', this.__data);
+        return { element };
+    }
+    setData(data) {
+        const self = this.getWritable();
+        self.__data = data;
+    }
+    getWidth() {
+        return this.getLatest().__width;
+    }
+    setWidth(width) {
+        const self = this.getWritable();
+        self.__width = width;
+    }
+    getHeight() {
+        return this.getLatest().__height;
+    }
+    setHeight(height) {
+        const self = this.getWritable();
+        self.__height = height;
+    }
+    decorate(editor, config) {
+        return (_jsx(ExcalidrawComponent, { nodeKey: this.getKey(), data: this.__data, width: this.__width, height: this.__height }));
+    }
+}
+export function $createExcalidrawNode(data = '[]', width = 'inherit', height = 'inherit') {
+    return new ExcalidrawNode(data, width, height);
+}
+export function $isExcalidrawNode(node) {
+    return node instanceof ExcalidrawNode;
+}

package/lib/nodes/FigmaNode.d.ts

@@ -0,0 +1,20 @@
+import type { EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+export type SerializedFigmaNode = Spread<{
+    documentID: string;
+}, SerializedDecoratorBlockNode>;
+export declare class FigmaNode extends DecoratorBlockNode {
+    __id: string;
+    static getType(): string;
+    static clone(node: FigmaNode): FigmaNode;
+    static importJSON(serializedNode: SerializedFigmaNode): FigmaNode;
+    exportJSON(): SerializedFigmaNode;
+    constructor(id: string, format?: ElementFormatType, key?: NodeKey);
+    updateDOM(): false;
+    getId(): string;
+    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
+    decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element;
+}
+export declare function $createFigmaNode(documentID: string): FigmaNode;
+export declare function $isFigmaNode(node: FigmaNode | LexicalNode | null | undefined): node is FigmaNode;