@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/nodes/PlaygroundNodes.js

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,10 @@
+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;

package/lib/nodes/StickyComponent.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './StickyNode.css';
+import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { calculateZoomLevel } from '@lexical/utils';
+import { $getNodeByKey } from 'lexical';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { createWebsocketProvider } from '../collab/yjs/wsProvider';
+import { useSharedHistoryContext } from '../context/SharedHistoryContext';
+import StickyEditorTheme from '../themes/StickyEditorTheme';
+import ContentEditable from '../ui/ContentEditable';
+import { $isStickyNode } from './StickyNode';
+function positionSticky(stickyElem, positioning) {
+    const style = stickyElem.style;
+    const rootElementRect = positioning.rootElementRect;
+    const rectLeft = rootElementRect !== null ? rootElementRect.left : 0;
+    const rectTop = rootElementRect !== null ? rootElementRect.top : 0;
+    style.top = rectTop + positioning.y + 'px';
+    style.left = rectLeft + positioning.x + 'px';
+}
+export default function StickyComponent({ x, y, nodeKey, color, caption, }) {
+    const [editor] = useLexicalComposerContext();
+    const stickyContainerRef = useRef(null);
+    const positioningRef = useRef({
+        isDragging: false,
+        offsetX: 0,
+        offsetY: 0,
+        rootElementRect: null,
+        x: 0,
+        y: 0,
+    });
+    const { isCollabActive } = useCollaborationContext();
+    useEffect(() => {
+        const position = positioningRef.current;
+        position.x = x;
+        position.y = y;
+        const stickyContainer = stickyContainerRef.current;
+        if (stickyContainer !== null) {
+            positionSticky(stickyContainer, position);
+        }
+    }, [x, y]);
+    useLayoutEffect(() => {
+        const position = positioningRef.current;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (let i = 0; i < entries.length; i++) {
+                const entry = entries[i];
+                const { target } = entry;
+                position.rootElementRect = target.getBoundingClientRect();
+                const stickyContainer = stickyContainerRef.current;
+                if (stickyContainer !== null) {
+                    positionSticky(stickyContainer, position);
+                }
+            }
+        });
+        const removeRootListener = editor.registerRootListener((nextRootElem, prevRootElem) => {
+            if (prevRootElem !== null) {
+                resizeObserver.unobserve(prevRootElem);
+            }
+            if (nextRootElem !== null) {
+                resizeObserver.observe(nextRootElem);
+            }
+        });
+        const handleWindowResize = () => {
+            const rootElement = editor.getRootElement();
+            const stickyContainer = stickyContainerRef.current;
+            if (rootElement !== null && stickyContainer !== null) {
+                position.rootElementRect = rootElement.getBoundingClientRect();
+                positionSticky(stickyContainer, position);
+            }
+        };
+        window.addEventListener('resize', handleWindowResize);
+        return () => {
+            window.removeEventListener('resize', handleWindowResize);
+            removeRootListener();
+        };
+    }, [editor]);
+    useEffect(() => {
+        const stickyContainer = stickyContainerRef.current;
+        if (stickyContainer !== null) {
+            // Delay adding transition so we don't trigger the
+            // transition on load of the sticky.
+            setTimeout(() => {
+                stickyContainer.style.setProperty('transition', 'top 0.3s ease 0s, left 0.3s ease 0s');
+            }, 500);
+        }
+    }, []);
+    const handlePointerMove = (event) => {
+        const stickyContainer = stickyContainerRef.current;
+        const positioning = positioningRef.current;
+        const rootElementRect = positioning.rootElementRect;
+        const zoom = calculateZoomLevel(stickyContainer);
+        if (stickyContainer !== null &&
+            positioning.isDragging &&
+            rootElementRect !== null) {
+            positioning.x =
+                event.pageX / zoom - positioning.offsetX - rootElementRect.left;
+            positioning.y =
+                event.pageY / zoom - positioning.offsetY - rootElementRect.top;
+            positionSticky(stickyContainer, positioning);
+        }
+    };
+    const handlePointerUp = (event) => {
+        const stickyContainer = stickyContainerRef.current;
+        const positioning = positioningRef.current;
+        if (stickyContainer !== null) {
+            positioning.isDragging = false;
+            stickyContainer.classList.remove('dragging');
+            editor.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                if ($isStickyNode(node)) {
+                    node.setPosition(positioning.x, positioning.y);
+                }
+            });
+        }
+        document.removeEventListener('pointermove', handlePointerMove);
+        document.removeEventListener('pointerup', handlePointerUp);
+    };
+    const handleDelete = () => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isStickyNode(node)) {
+                node.remove();
+            }
+        });
+    };
+    const handleColorChange = () => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isStickyNode(node)) {
+                node.toggleColor();
+            }
+        });
+    };
+    const { historyState } = useSharedHistoryContext();
+    return (_jsx("div", { ref: stickyContainerRef, className: "sticky-note-container", children: _jsxs("div", { className: `sticky-note ${color}`, onPointerDown: (event) => {
+                const stickyContainer = stickyContainerRef.current;
+                if (stickyContainer == null ||
+                    event.button === 2 ||
+                    event.target !== stickyContainer.firstChild) {
+                    // Right click or click on editor should not work
+                    return;
+                }
+                const stickContainer = stickyContainer;
+                const positioning = positioningRef.current;
+                if (stickContainer !== null) {
+                    const { top, left } = stickContainer.getBoundingClientRect();
+                    const zoom = calculateZoomLevel(stickContainer);
+                    positioning.offsetX = event.clientX / zoom - left;
+                    positioning.offsetY = event.clientY / zoom - top;
+                    positioning.isDragging = true;
+                    stickContainer.classList.add('dragging');
+                    document.addEventListener('pointermove', handlePointerMove);
+                    document.addEventListener('pointerup', handlePointerUp);
+                    event.preventDefault();
+                }
+            }, children: [_jsx("button", { onClick: handleDelete, className: "delete", "aria-label": "Delete sticky note", title: "Delete", children: "X" }), _jsx("button", { onClick: handleColorChange, className: "color", "aria-label": "Change sticky note color", title: "Color", children: _jsx("i", { className: "bucket" }) }), _jsxs(LexicalNestedComposer, { initialEditor: caption, initialTheme: StickyEditorTheme, children: [isCollabActive ? (_jsx(CollaborationPlugin, { id: caption.getKey(), providerFactory: createWebsocketProvider, shouldBootstrap: true })) : (_jsx(HistoryPlugin, { externalHistoryState: historyState })), _jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: "What's up?", placeholderClassName: "StickyNode__placeholder", className: "StickyNode__contentEditable" }), ErrorBoundary: LexicalErrorBoundary })] })] }) }));
+}

package/lib/nodes/StickyNode.d.ts

@@ -0,0 +1,31 @@
+import type { EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorNode } from 'lexical';
+type StickyNoteColor = 'pink' | 'yellow';
+export type SerializedStickyNode = Spread<{
+    xOffset: number;
+    yOffset: number;
+    color: StickyNoteColor;
+    caption: SerializedEditor;
+}, SerializedLexicalNode>;
+export declare class StickyNode extends DecoratorNode<JSX.Element> {
+    __x: number;
+    __y: number;
+    __color: StickyNoteColor;
+    __caption: LexicalEditor;
+    static getType(): string;
+    static clone(node: StickyNode): StickyNode;
+    static importJSON(serializedNode: SerializedStickyNode): StickyNode;
+    updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedStickyNode>): this;
+    constructor(x: number, y: number, color: 'pink' | 'yellow', caption?: LexicalEditor, key?: NodeKey);
+    exportJSON(): SerializedStickyNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    setPosition(x: number, y: number): void;
+    toggleColor(): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isIsolated(): true;
+}
+export declare function $isStickyNode(node: LexicalNode | null | undefined): node is StickyNode;
+export declare function $createStickyNode(xOffset: number, yOffset: number): StickyNode;
+export {};