@scottjgilbert/lexical-blog-editor 0.1.4 → 1.0.0-beta.2

package/build/nodes/PollComponent.d.ts

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import 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;
-//# sourceMappingURL=PollComponent.d.ts.map

package/build/nodes/PollComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PollComponent.d.ts","sourceRoot":"","sources":["../../src/nodes/PollComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAS,OAAO,EAAW,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAMxB,OAAO,EAOL,OAAO,EACR,MAAM,SAAS,CAAC;AAuGjB,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,GAAG,CAAC,OAAO,CAmFd"}

package/build/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 { name: username } = useCollaborationContext();
-    const checkboxRef = useRef(null);
-    const votesArray = option.votes;
-    const checkedIndex = votesArray.indexOf(username);
-    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, username);
-                        });
-                    }, 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/build/nodes/PollNode.css

@@ -1,165 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.PollNode__container {
-  border: 1px solid #eee;
-  background-color: #fcfcfc;
-  border-radius: 10px;
-  max-width: 600px;
-  min-width: 400px;
-  cursor: pointer;
-  user-select: none;
-}
-.PollNode__container.focused {
-  outline: 2px solid rgb(60, 132, 244);
-}
-.PollNode__inner {
-  margin: 15px;
-  cursor: default;
-}
-.PollNode__heading {
-  margin-left: 0px;
-  margin-top: 0px;
-  margin-right: 0px;
-  margin-bottom: 15px;
-  color: #444;
-  text-align: center;
-  font-size: 18px;
-}
-.PollNode__optionContainer {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 10px;
-  align-items: center;
-}
-.PollNode__optionInputWrapper {
-  display: flex;
-  flex: 10px;
-  border: 1px solid rgb(61, 135, 245);
-  border-radius: 5px;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-}
-.PollNode__optionInput {
-  display: flex;
-  flex: 1px;
-  border: 0px;
-  padding: 7px;
-  color: rgb(61, 135, 245);
-  background-color: transparent;
-  font-weight: bold;
-  outline: 0px;
-  z-index: 0;
-}
-.PollNode__optionInput::placeholder {
-  font-weight: normal;
-  color: #999;
-}
-.PollNode__optionInputVotes {
-  background-color: rgb(236, 243, 254);
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  transition: width 1s ease;
-  z-index: 0;
-}
-.PollNode__optionInputVotesCount {
-  color: rgb(61, 135, 245);
-  position: absolute;
-  right: 15px;
-  font-size: 12px;
-  top: 5px;
-}
-.PollNode__optionCheckboxWrapper {
-  position: relative;
-  display: flex;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #999;
-  margin-right: 10px;
-  border-radius: 5px;
-}
-.PollNode__optionCheckboxChecked {
-  border: 1px solid rgb(61, 135, 245);
-  background-color: rgb(61, 135, 245);
-}
-.PollNode__optionCheckboxChecked:after {
-  content: '';
-  cursor: pointer;
-  border-color: #fff;
-  border-style: solid;
-  position: absolute;
-  display: block;
-  top: 4px;
-  width: 5px;
-  left: 8px;
-  height: 9px;
-  margin: 0;
-  transform: rotate(45deg);
-  border-width: 0 2px 2px 0;
-  pointer-events: none;
-}
-.PollNode__optionCheckbox {
-  border: 0px;
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-.PollNode__optionDelete {
-  position: relative;
-  display: flex;
-  width: 28px;
-  height: 28px;
-  margin-left: 6px;
-  border: 0px;
-  background-color: transparent;
-  background-position: 6px 6px;
-  background-repeat: no-repeat;
-  z-index: 0;
-  cursor: pointer;
-  border-radius: 5px;
-  opacity: 0.3;
-}
-.PollNode__optionDelete:before,
-.PollNode__optionDelete:after {
-  position: absolute;
-  display: block;
-  content: '';
-  background-color: #999;
-  width: 2px;
-  height: 15px;
-  top: 6px;
-  left: 13px;
-}
-.PollNode__optionDelete:before {
-  transform: rotate(-45deg);
-}
-.PollNode__optionDelete:after {
-  transform: rotate(45deg);
-}
-.PollNode__optionDelete:hover {
-  opacity: 1;
-  background-color: #eee;
-}
-.PollNode__optionDeleteDisabled {
-  cursor: not-allowed;
-}
-.PollNode__optionDeleteDisabled:hover {
-  opacity: 0.3;
-  background-color: transparent;
-}
-.PollNode__footer {
-  display: flex;
-  justify-content: center;
-}

package/build/nodes/PollNode.d.ts

@@ -1,51 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import 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<string>;
-}>;
-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, username: string): 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 {};
-//# sourceMappingURL=PollNode.d.ts.map

package/build/nodes/PollNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PollNode.d.ts","sourceRoot":"","sources":["../../src/nodes/PollNode.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,aAAa,EAEb,eAAe,EACf,WAAW,EACX,qBAAqB,EACrB,MAAM,EACN,gBAAgB,EAChB,KAAK,mBAAmB,EACzB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAE5C,MAAM,MAAM,MAAM,GAAG,QAAQ,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACtB,CAAC,CAAC;AAWH,wBAAgB,gBAAgB,CAAC,IAAI,SAAK,GAAG,MAAM,CAMlD;AAcD,MAAM,MAAM,kBAAkB,GAAG,MAAM,CACrC;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB,EACD,qBAAqB,CACtB,CAAC;AAgCF,QAAA,MAAM,aAAa,mDAEjB,CAAC;AACH,QAAA,MAAM,YAAY,mDAIhB,CAAC;AAEH,qBAAa,QAAS,SAAQ,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;IACtD,OAAO;;;;;;;;;;;IAmBP,WAAW,IAAI,gBAAgB,CAAC,OAAO,aAAa,CAAC;IAGrD,WAAW,CAAC,cAAc,EAAE,mBAAmB,CAAC,OAAO,aAAa,CAAC,GAAG,IAAI;IAG5E,UAAU,IAAI,gBAAgB,CAAC,OAAO,YAAY,CAAC;IAGnD,UAAU,CAAC,cAAc,EAAE,mBAAmB,CAAC,OAAO,YAAY,CAAC,GAAG,IAAI;IAI1E,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAYlC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAUjD,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAqBlD,SAAS,IAAI,eAAe;IAU5B,SAAS,IAAI,WAAW;IAMxB,SAAS,IAAI,KAAK;IAIlB,QAAQ,IAAI,GAAG,CAAC,OAAO;CASxB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,QAAQ,CAE5E;AAED,wBAAgB,WAAW,CACzB,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,QAAQ,CAElB"}

package/build/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 === 'string')) {
-                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, username) {
-        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(username);
-            if (voteIndex === -1) {
-                votesClone.push(username);
-            }
-            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/build/nodes/StickyComponent.d.ts

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import 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;
-//# sourceMappingURL=StickyComponent.d.ts.map

package/build/nodes/StickyComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StickyComponent.d.ts","sourceRoot":"","sources":["../../src/nodes/StickyComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,kBAAkB,CAAC;AAmC1B,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,CAAC,EACD,CAAC,EACD,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,GAAG,GAAG,CAAC,OAAO,CAmMd"}

package/build/nodes/StickyComponent.js

@@ -1,155 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./StickyNode.css";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-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 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,
-    });
-    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();
-            }
-        });
-    };
-    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" }) }), _jsx(LexicalNestedComposer, { initialEditor: caption, initialTheme: StickyEditorTheme, children: _jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: "What's up?", placeholderClassName: "StickyNode__placeholder", className: "StickyNode__contentEditable" }), ErrorBoundary: LexicalErrorBoundary }) })] }) }));
-}