@datalayer/lexical-loro 0.1.0 → 0.2.1

package/lib/nodes/MentionNode.js

@@ -1,81 +0,0 @@
-import { $applyNodeReplacement, TextNode, } from 'lexical';
-function $convertMentionElement(domNode) {
-    const textContent = domNode.textContent;
-    const mentionName = domNode.getAttribute('data-lexical-mention-name');
-    if (textContent !== null) {
-        const node = $createMentionNode(typeof mentionName === 'string' ? mentionName : textContent, textContent);
-        return {
-            node,
-        };
-    }
-    return null;
-}
-const mentionStyle = 'background-color: rgba(24, 119, 232, 0.2)';
-export class MentionNode extends TextNode {
-    __mention;
-    static getType() {
-        return 'mention';
-    }
-    static clone(node) {
-        return new MentionNode(node.__mention, node.__text, node.__key);
-    }
-    static importJSON(serializedNode) {
-        return $createMentionNode(serializedNode.mentionName).updateFromJSON(serializedNode);
-    }
-    constructor(mentionName, text, key) {
-        super(text ?? mentionName, key);
-        this.__mention = mentionName;
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            mentionName: this.__mention,
-        };
-    }
-    createDOM(config) {
-        const dom = super.createDOM(config);
-        dom.style.cssText = mentionStyle;
-        dom.className = 'mention';
-        dom.spellcheck = false;
-        return dom;
-    }
-    exportDOM() {
-        const element = document.createElement('span');
-        element.setAttribute('data-lexical-mention', 'true');
-        if (this.__text !== this.__mention) {
-            element.setAttribute('data-lexical-mention-name', this.__mention);
-        }
-        element.textContent = this.__text;
-        return { element };
-    }
-    static importDOM() {
-        return {
-            span: (domNode) => {
-                if (!domNode.hasAttribute('data-lexical-mention')) {
-                    return null;
-                }
-                return {
-                    conversion: $convertMentionElement,
-                    priority: 1,
-                };
-            },
-        };
-    }
-    isTextEntity() {
-        return true;
-    }
-    canInsertTextBefore() {
-        return false;
-    }
-    canInsertTextAfter() {
-        return false;
-    }
-}
-export function $createMentionNode(mentionName, textContent) {
-    const mentionNode = new MentionNode(mentionName, (textContent = mentionName));
-    mentionNode.setMode('segmented').toggleDirectionless();
-    return $applyNodeReplacement(mentionNode);
-}
-export function $isMentionNode(node) {
-    return node instanceof MentionNode;
-}

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

@@ -1,17 +0,0 @@
-import type { JSX } from 'react';
-import './index.css';
-import { DecoratorNode, DOMConversionMap, LexicalNode, SerializedLexicalNode } from 'lexical';
-export type SerializedPageBreakNode = SerializedLexicalNode;
-export declare class PageBreakNode extends DecoratorNode<JSX.Element> {
-    static getType(): string;
-    static clone(node: PageBreakNode): PageBreakNode;
-    static importJSON(serializedNode: SerializedPageBreakNode): PageBreakNode;
-    static importDOM(): DOMConversionMap | null;
-    createDOM(): HTMLElement;
-    getTextContent(): string;
-    isInline(): false;
-    updateDOM(): boolean;
-    decorate(): JSX.Element;
-}
-export declare function $createPageBreakNode(): PageBreakNode;
-export declare function $isPageBreakNode(node: LexicalNode | null | undefined): node is PageBreakNode;

package/lib/nodes/PageBreakNode/index.js

@@ -1,83 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './index.css';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { mergeRegister } from '@lexical/utils';
-import { CLICK_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DecoratorNode, } from 'lexical';
-import { useEffect } from 'react';
-function PageBreakComponent({ nodeKey }) {
-    const [editor] = useLexicalComposerContext();
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    useEffect(() => {
-        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
-            const pbElem = editor.getElementByKey(nodeKey);
-            if (event.target === pbElem) {
-                if (!event.shiftKey) {
-                    clearSelection();
-                }
-                setSelected(!isSelected);
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_LOW));
-    }, [clearSelection, editor, isSelected, nodeKey, setSelected]);
-    useEffect(() => {
-        const pbElem = editor.getElementByKey(nodeKey);
-        if (pbElem !== null) {
-            pbElem.className = isSelected ? 'selected' : '';
-        }
-    }, [editor, isSelected, nodeKey]);
-    return null;
-}
-export class PageBreakNode extends DecoratorNode {
-    static getType() {
-        return 'page-break';
-    }
-    static clone(node) {
-        return new PageBreakNode(node.__key);
-    }
-    static importJSON(serializedNode) {
-        return $createPageBreakNode().updateFromJSON(serializedNode);
-    }
-    static importDOM() {
-        return {
-            figure: (domNode) => {
-                const tp = domNode.getAttribute('type');
-                if (tp !== this.getType()) {
-                    return null;
-                }
-                return {
-                    conversion: $convertPageBreakElement,
-                    priority: COMMAND_PRIORITY_HIGH,
-                };
-            },
-        };
-    }
-    createDOM() {
-        const el = document.createElement('figure');
-        el.style.pageBreakAfter = 'always';
-        el.setAttribute('type', this.getType());
-        return el;
-    }
-    getTextContent() {
-        return '\n';
-    }
-    isInline() {
-        return false;
-    }
-    updateDOM() {
-        return false;
-    }
-    decorate() {
-        return _jsx(PageBreakComponent, { nodeKey: this.__key });
-    }
-}
-function $convertPageBreakElement() {
-    return { node: $createPageBreakNode() };
-}
-export function $createPageBreakNode() {
-    return new PageBreakNode();
-}
-export function $isPageBreakNode(node) {
-    return node instanceof PageBreakNode;
-}

package/lib/nodes/PlaygroundNodes.d.ts

@@ -1,3 +0,0 @@
-import type { Klass, LexicalNode } from 'lexical';
-declare const PlaygroundNodes: Array<Klass<LexicalNode>>;
-export default PlaygroundNodes;

package/lib/nodes/PlaygroundNodes.js

@@ -1,71 +0,0 @@
-import { CodeHighlightNode, CodeNode } from '@lexical/code';
-import { HashtagNode } from '@lexical/hashtag';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
-import { MarkNode } from '@lexical/mark';
-import { OverflowNode } from '@lexical/overflow';
-import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
-import { CollapsibleContainerNode } from '../plugins/CollapsiblePlugin/CollapsibleContainerNode';
-import { CollapsibleContentNode } from '../plugins/CollapsiblePlugin/CollapsibleContentNode';
-import { CollapsibleTitleNode } from '../plugins/CollapsiblePlugin/CollapsibleTitleNode';
-import { AutocompleteNode } from './AutocompleteNode';
-import { CounterNode } from './CounterNode';
-import { DateTimeNode } from './DateTimeNode/DateTimeNode';
-import { EmojiNode } from './EmojiNode';
-import { EquationNode } from './EquationNode';
-import { ExcalidrawNode } from './ExcalidrawNode';
-import { FigmaNode } from './FigmaNode';
-import { ImageNode } from './ImageNode';
-import { InlineImageNode } from './InlineImageNode/InlineImageNode';
-import { KeywordNode } from './KeywordNode';
-import { LayoutContainerNode } from './LayoutContainerNode';
-import { LayoutItemNode } from './LayoutItemNode';
-import { MentionNode } from './MentionNode';
-import { PageBreakNode } from './PageBreakNode';
-import { PollNode } from './PollNode';
-import { SpecialTextNode } from './SpecialTextNode';
-import { StickyNode } from './StickyNode';
-import { TweetNode } from './TweetNode';
-import { YouTubeNode } from './YouTubeNode';
-const PlaygroundNodes = [
-    HeadingNode,
-    ListNode,
-    ListItemNode,
-    QuoteNode,
-    CodeNode,
-    TableNode,
-    TableCellNode,
-    TableRowNode,
-    HashtagNode,
-    CodeHighlightNode,
-    AutoLinkNode,
-    LinkNode,
-    OverflowNode,
-    PollNode,
-    StickyNode,
-    ImageNode,
-    InlineImageNode,
-    MentionNode,
-    EmojiNode,
-    ExcalidrawNode,
-    EquationNode,
-    AutocompleteNode,
-    CounterNode,
-    KeywordNode,
-    HorizontalRuleNode,
-    TweetNode,
-    YouTubeNode,
-    FigmaNode,
-    MarkNode,
-    CollapsibleContainerNode,
-    CollapsibleContentNode,
-    CollapsibleTitleNode,
-    PageBreakNode,
-    LayoutContainerNode,
-    LayoutItemNode,
-    SpecialTextNode,
-    DateTimeNode,
-];
-export default PlaygroundNodes;

package/lib/nodes/PollComponent.d.ts

@@ -1,9 +0,0 @@
-import type { Options } from './PollNode';
-import type { JSX } from 'react';
-import './PollNode.css';
-import { NodeKey } from 'lexical';
-export default function PollComponent({ question, options, nodeKey, }: {
-    nodeKey: NodeKey;
-    options: Options;
-    question: string;
-}): JSX.Element;

package/lib/nodes/PollComponent.js

@@ -1,85 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './PollNode.css';
-import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { mergeRegister } from '@lexical/utils';
-import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, } from 'lexical';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import Button from '../ui/Button';
-import joinClasses from '../utils/joinClasses';
-import { $isPollNode, createPollOption } from './PollNode';
-function getTotalVotes(options) {
-    return options.reduce((totalVotes, next) => {
-        return totalVotes + next.votes.length;
-    }, 0);
-}
-function PollOptionComponent({ option, index, options, totalVotes, withPollNode, }) {
-    const { clientID } = useCollaborationContext();
-    const checkboxRef = useRef(null);
-    const votesArray = option.votes;
-    const checkedIndex = votesArray.indexOf(clientID);
-    const checked = checkedIndex !== -1;
-    const votes = votesArray.length;
-    const text = option.text;
-    return (_jsxs("div", { className: "PollNode__optionContainer", children: [_jsx("div", { className: joinClasses('PollNode__optionCheckboxWrapper', checked && 'PollNode__optionCheckboxChecked'), children: _jsx("input", { ref: checkboxRef, className: "PollNode__optionCheckbox", type: "checkbox", onChange: (e) => {
-                        withPollNode((node) => {
-                            node.toggleVote(option, clientID);
-                        });
-                    }, checked: checked }) }), _jsxs("div", { className: "PollNode__optionInputWrapper", children: [_jsx("div", { className: "PollNode__optionInputVotes", style: { width: `${votes === 0 ? 0 : (votes / totalVotes) * 100}%` } }), _jsx("span", { className: "PollNode__optionInputVotesCount", children: votes > 0 && (votes === 1 ? '1 vote' : `${votes} votes`) }), _jsx("input", { className: "PollNode__optionInput", type: "text", value: text, onChange: (e) => {
-                            const target = e.target;
-                            const value = target.value;
-                            const selectionStart = target.selectionStart;
-                            const selectionEnd = target.selectionEnd;
-                            withPollNode((node) => {
-                                node.setOptionText(option, value);
-                            }, () => {
-                                target.selectionStart = selectionStart;
-                                target.selectionEnd = selectionEnd;
-                            });
-                        }, placeholder: `Option ${index + 1}` })] }), _jsx("button", { disabled: options.length < 3, className: joinClasses('PollNode__optionDelete', options.length < 3 && 'PollNode__optionDeleteDisabled'), "aria-label": "Remove", onClick: () => {
-                    withPollNode((node) => {
-                        node.deleteOption(option);
-                    });
-                } })] }));
-}
-export default function PollComponent({ question, options, nodeKey, }) {
-    const [editor] = useLexicalComposerContext();
-    const totalVotes = useMemo(() => getTotalVotes(options), [options]);
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const [selection, setSelection] = useState(null);
-    const ref = useRef(null);
-    useEffect(() => {
-        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
-            setSelection(editorState.read(() => $getSelection()));
-        }), editor.registerCommand(CLICK_COMMAND, (payload) => {
-            const event = payload;
-            if (event.target === ref.current) {
-                if (!event.shiftKey) {
-                    clearSelection();
-                }
-                setSelected(!isSelected);
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_LOW));
-    }, [clearSelection, editor, isSelected, nodeKey, setSelected]);
-    const withPollNode = (cb, onUpdate) => {
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isPollNode(node)) {
-                cb(node);
-            }
-        }, { onUpdate });
-    };
-    const addOption = () => {
-        withPollNode((node) => {
-            node.addOption(createPollOption());
-        });
-    };
-    const isFocused = $isNodeSelection(selection) && isSelected;
-    return (_jsx("div", { className: `PollNode__container ${isFocused ? 'focused' : ''}`, ref: ref, children: _jsxs("div", { className: "PollNode__inner", children: [_jsx("h2", { className: "PollNode__heading", children: question }), options.map((option, index) => {
-                    const key = option.uid;
-                    return (_jsx(PollOptionComponent, { withPollNode: withPollNode, option: option, index: index, options: options, totalVotes: totalVotes }, key));
-                }), _jsx("div", { className: "PollNode__footer", children: _jsx(Button, { onClick: addOption, small: true, children: "Add Option" }) })] }) }));
-}

package/lib/nodes/PollNode.d.ts

@@ -1,43 +0,0 @@
-import type { JSX } from 'react';
-import { DecoratorNode, DOMExportOutput, LexicalNode, SerializedLexicalNode, Spread, StateConfigValue, type StateValueOrUpdater } from 'lexical';
-export type Options = ReadonlyArray<Option>;
-export type Option = Readonly<{
-    text: string;
-    uid: string;
-    votes: Array<number>;
-}>;
-export declare function createPollOption(text?: string): Option;
-export type SerializedPollNode = Spread<{
-    question: string;
-    options: Options;
-}, SerializedLexicalNode>;
-declare const questionState: import("lexical").StateConfig<"question", string>;
-declare const optionsState: import("lexical").StateConfig<"options", Options>;
-export declare class PollNode extends DecoratorNode<JSX.Element> {
-    $config(): import("lexical").StaticNodeConfigRecord<"poll", {
-        extends: typeof DecoratorNode;
-        importDOM: import("lexical").DOMConversionMap<HTMLElement>;
-        stateConfigs: ({
-            flat: true;
-            stateConfig: import("lexical").StateConfig<"question", string>;
-        } | {
-            flat: true;
-            stateConfig: import("lexical").StateConfig<"options", Options>;
-        })[];
-    }>;
-    getQuestion(): StateConfigValue<typeof questionState>;
-    setQuestion(valueOrUpdater: StateValueOrUpdater<typeof questionState>): this;
-    getOptions(): StateConfigValue<typeof optionsState>;
-    setOptions(valueOrUpdater: StateValueOrUpdater<typeof optionsState>): this;
-    addOption(option: Option): this;
-    deleteOption(option: Option): this;
-    setOptionText(option: Option, text: string): this;
-    toggleVote(option: Option, clientID: number): this;
-    exportDOM(): DOMExportOutput;
-    createDOM(): HTMLElement;
-    updateDOM(): false;
-    decorate(): JSX.Element;
-}
-export declare function $createPollNode(question: string, options: Options): PollNode;
-export declare function $isPollNode(node: LexicalNode | null | undefined): node is PollNode;
-export {};

package/lib/nodes/PollNode.js

@@ -1,153 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { $getState, $setState, buildImportMap, createState, DecoratorNode, } from 'lexical';
-import * as React from 'react';
-const PollComponent = React.lazy(() => import('./PollComponent'));
-function createUID() {
-    return Math.random()
-        .toString(36)
-        .replace(/[^a-z]+/g, '')
-        .substring(0, 5);
-}
-export function createPollOption(text = '') {
-    return {
-        text,
-        uid: createUID(),
-        votes: [],
-    };
-}
-function cloneOption(option, text, votes) {
-    return {
-        text,
-        uid: option.uid,
-        votes: votes || Array.from(option.votes),
-    };
-}
-function $convertPollElement(domNode) {
-    const question = domNode.getAttribute('data-lexical-poll-question');
-    const options = domNode.getAttribute('data-lexical-poll-options');
-    if (question !== null && options !== null) {
-        const node = $createPollNode(question, JSON.parse(options));
-        return { node };
-    }
-    return null;
-}
-function parseOptions(json) {
-    const options = [];
-    if (Array.isArray(json)) {
-        for (const row of json) {
-            if (row &&
-                typeof row.text === 'string' &&
-                typeof row.uid === 'string' &&
-                Array.isArray(row.votes) &&
-                row.votes.every((v) => typeof v === 'number')) {
-                options.push(row);
-            }
-        }
-    }
-    return options;
-}
-const questionState = createState('question', {
-    parse: (v) => (typeof v === 'string' ? v : ''),
-});
-const optionsState = createState('options', {
-    isEqual: (a, b) => a.length === b.length && JSON.stringify(a) === JSON.stringify(b),
-    parse: parseOptions,
-});
-export class PollNode extends DecoratorNode {
-    $config() {
-        return this.config('poll', {
-            extends: DecoratorNode,
-            importDOM: buildImportMap({
-                span: (domNode) => domNode.getAttribute('data-lexical-poll-question') !== null
-                    ? {
-                        conversion: $convertPollElement,
-                        priority: 2,
-                    }
-                    : null,
-            }),
-            stateConfigs: [
-                { flat: true, stateConfig: questionState },
-                { flat: true, stateConfig: optionsState },
-            ],
-        });
-    }
-    getQuestion() {
-        return $getState(this, questionState);
-    }
-    setQuestion(valueOrUpdater) {
-        return $setState(this, questionState, valueOrUpdater);
-    }
-    getOptions() {
-        return $getState(this, optionsState);
-    }
-    setOptions(valueOrUpdater) {
-        return $setState(this, optionsState, valueOrUpdater);
-    }
-    addOption(option) {
-        return this.setOptions((options) => [...options, option]);
-    }
-    deleteOption(option) {
-        return this.setOptions((prevOptions) => {
-            const index = prevOptions.indexOf(option);
-            if (index === -1) {
-                return prevOptions;
-            }
-            const options = Array.from(prevOptions);
-            options.splice(index, 1);
-            return options;
-        });
-    }
-    setOptionText(option, text) {
-        return this.setOptions((prevOptions) => {
-            const clonedOption = cloneOption(option, text);
-            const options = Array.from(prevOptions);
-            const index = options.indexOf(option);
-            options[index] = clonedOption;
-            return options;
-        });
-    }
-    toggleVote(option, clientID) {
-        return this.setOptions((prevOptions) => {
-            const index = prevOptions.indexOf(option);
-            if (index === -1) {
-                return prevOptions;
-            }
-            const votes = option.votes;
-            const votesClone = Array.from(votes);
-            const voteIndex = votes.indexOf(clientID);
-            if (voteIndex === -1) {
-                votesClone.push(clientID);
-            }
-            else {
-                votesClone.splice(voteIndex, 1);
-            }
-            const clonedOption = cloneOption(option, option.text, votesClone);
-            const options = Array.from(prevOptions);
-            options[index] = clonedOption;
-            return options;
-        });
-    }
-    exportDOM() {
-        const element = document.createElement('span');
-        element.setAttribute('data-lexical-poll-question', this.getQuestion());
-        element.setAttribute('data-lexical-poll-options', JSON.stringify(this.getOptions()));
-        return { element };
-    }
-    createDOM() {
-        const elem = document.createElement('span');
-        elem.style.display = 'inline-block';
-        return elem;
-    }
-    updateDOM() {
-        return false;
-    }
-    decorate() {
-        return (_jsx(PollComponent, { question: this.getQuestion(), options: this.getOptions(), nodeKey: this.__key }));
-    }
-}
-export function $createPollNode(question, options) {
-    return new PollNode().setQuestion(question).setOptions(options);
-}
-export function $isPollNode(node) {
-    return node instanceof PollNode;
-}

package/lib/nodes/SpecialTextNode.d.ts

@@ -1,24 +0,0 @@
-import type { EditorConfig, LexicalNode, SerializedTextNode } from 'lexical';
-import { TextNode } from 'lexical';
-/** @noInheritDoc */
-export declare class SpecialTextNode extends TextNode {
-    static getType(): string;
-    static clone(node: SpecialTextNode): SpecialTextNode;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
-    static importJSON(serializedNode: SerializedTextNode): SpecialTextNode;
-    isTextEntity(): true;
-    canInsertTextAfter(): boolean;
-}
-/**
- * Creates a SpecialTextNode with the given text.
- * @param text - Text content for the SpecialTextNode.
- * @returns A new SpecialTextNode instance.
- */
-export declare function $createSpecialTextNode(text?: string): SpecialTextNode;
-/**
- * Checks if a node is a SpecialTextNode.
- * @param node - Node to check.
- * @returns True if the node is a SpecialTextNode.
- */
-export declare function $isSpecialTextNode(node: LexicalNode | null | undefined): node is SpecialTextNode;

package/lib/nodes/SpecialTextNode.js

@@ -1,50 +0,0 @@
-import { addClassNamesToElement } from '@lexical/utils';
-import { $applyNodeReplacement, TextNode } from 'lexical';
-/** @noInheritDoc */
-export class SpecialTextNode extends TextNode {
-    static getType() {
-        return 'specialText';
-    }
-    static clone(node) {
-        return new SpecialTextNode(node.__text, node.__key);
-    }
-    createDOM(config) {
-        const dom = document.createElement('span');
-        addClassNamesToElement(dom, config.theme.specialText);
-        dom.textContent = this.getTextContent();
-        return dom;
-    }
-    updateDOM(prevNode, dom, config) {
-        if (prevNode.__text.startsWith('[') && prevNode.__text.endsWith(']')) {
-            const strippedText = this.__text.substring(1, this.__text.length - 1); // Strip brackets again
-            dom.textContent = strippedText; // Update the text content
-        }
-        addClassNamesToElement(dom, config.theme.specialText);
-        return false;
-    }
-    static importJSON(serializedNode) {
-        return $createSpecialTextNode().updateFromJSON(serializedNode);
-    }
-    isTextEntity() {
-        return true;
-    }
-    canInsertTextAfter() {
-        return false; // Prevents appending text to this node
-    }
-}
-/**
- * Creates a SpecialTextNode with the given text.
- * @param text - Text content for the SpecialTextNode.
- * @returns A new SpecialTextNode instance.
- */
-export function $createSpecialTextNode(text = '') {
-    return $applyNodeReplacement(new SpecialTextNode(text));
-}
-/**
- * Checks if a node is a SpecialTextNode.
- * @param node - Node to check.
- * @returns True if the node is a SpecialTextNode.
- */
-export function $isSpecialTextNode(node) {
-    return node instanceof SpecialTextNode;
-}

package/lib/nodes/StickyComponent.d.ts

@@ -1,10 +0,0 @@
-import type { LexicalEditor, NodeKey } from 'lexical';
-import type { JSX } from 'react';
-import './StickyNode.css';
-export default function StickyComponent({ x, y, nodeKey, color, caption, }: {
-    caption: LexicalEditor;
-    color: 'pink' | 'yellow';
-    nodeKey: NodeKey;
-    x: number;
-    y: number;
-}): JSX.Element;