@datalayer/lexical-loro 0.2.5 → 1.0.1

package/lib/themes/PlaygroundEditorTheme.js

@@ -1,124 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import './PlaygroundEditorTheme.css';
-const theme = {
-    autocomplete: 'PlaygroundEditorTheme__autocomplete',
-    blockCursor: 'PlaygroundEditorTheme__blockCursor',
-    characterLimit: 'PlaygroundEditorTheme__characterLimit',
-    code: 'PlaygroundEditorTheme__code',
-    codeHighlight: {
-        atrule: 'PlaygroundEditorTheme__tokenAttr',
-        attr: 'PlaygroundEditorTheme__tokenAttr',
-        boolean: 'PlaygroundEditorTheme__tokenProperty',
-        builtin: 'PlaygroundEditorTheme__tokenSelector',
-        cdata: 'PlaygroundEditorTheme__tokenComment',
-        char: 'PlaygroundEditorTheme__tokenSelector',
-        class: 'PlaygroundEditorTheme__tokenFunction',
-        'class-name': 'PlaygroundEditorTheme__tokenFunction',
-        comment: 'PlaygroundEditorTheme__tokenComment',
-        constant: 'PlaygroundEditorTheme__tokenProperty',
-        deleted: 'PlaygroundEditorTheme__tokenDeleted',
-        doctype: 'PlaygroundEditorTheme__tokenComment',
-        entity: 'PlaygroundEditorTheme__tokenOperator',
-        function: 'PlaygroundEditorTheme__tokenFunction',
-        important: 'PlaygroundEditorTheme__tokenVariable',
-        inserted: 'PlaygroundEditorTheme__tokenInserted',
-        keyword: 'PlaygroundEditorTheme__tokenAttr',
-        namespace: 'PlaygroundEditorTheme__tokenVariable',
-        number: 'PlaygroundEditorTheme__tokenProperty',
-        operator: 'PlaygroundEditorTheme__tokenOperator',
-        prolog: 'PlaygroundEditorTheme__tokenComment',
-        property: 'PlaygroundEditorTheme__tokenProperty',
-        punctuation: 'PlaygroundEditorTheme__tokenPunctuation',
-        regex: 'PlaygroundEditorTheme__tokenVariable',
-        selector: 'PlaygroundEditorTheme__tokenSelector',
-        string: 'PlaygroundEditorTheme__tokenSelector',
-        symbol: 'PlaygroundEditorTheme__tokenProperty',
-        tag: 'PlaygroundEditorTheme__tokenProperty',
-        unchanged: 'PlaygroundEditorTheme__tokenUnchanged',
-        url: 'PlaygroundEditorTheme__tokenOperator',
-        variable: 'PlaygroundEditorTheme__tokenVariable',
-    },
-    embedBlock: {
-        base: 'PlaygroundEditorTheme__embedBlock',
-        focus: 'PlaygroundEditorTheme__embedBlockFocus',
-    },
-    hashtag: 'PlaygroundEditorTheme__hashtag',
-    heading: {
-        h1: 'PlaygroundEditorTheme__h1',
-        h2: 'PlaygroundEditorTheme__h2',
-        h3: 'PlaygroundEditorTheme__h3',
-        h4: 'PlaygroundEditorTheme__h4',
-        h5: 'PlaygroundEditorTheme__h5',
-        h6: 'PlaygroundEditorTheme__h6',
-    },
-    hr: 'PlaygroundEditorTheme__hr',
-    hrSelected: 'PlaygroundEditorTheme__hrSelected',
-    image: 'editor-image',
-    indent: 'PlaygroundEditorTheme__indent',
-    inlineImage: 'inline-editor-image',
-    layoutContainer: 'PlaygroundEditorTheme__layoutContainer',
-    layoutItem: 'PlaygroundEditorTheme__layoutItem',
-    link: 'PlaygroundEditorTheme__link',
-    list: {
-        checklist: 'PlaygroundEditorTheme__checklist',
-        listitem: 'PlaygroundEditorTheme__listItem',
-        listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
-        listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
-        nested: {
-            listitem: 'PlaygroundEditorTheme__nestedListItem',
-        },
-        olDepth: [
-            'PlaygroundEditorTheme__ol1',
-            'PlaygroundEditorTheme__ol2',
-            'PlaygroundEditorTheme__ol3',
-            'PlaygroundEditorTheme__ol4',
-            'PlaygroundEditorTheme__ol5',
-        ],
-        ul: 'PlaygroundEditorTheme__ul',
-    },
-    ltr: 'PlaygroundEditorTheme__ltr',
-    mark: 'PlaygroundEditorTheme__mark',
-    markOverlap: 'PlaygroundEditorTheme__markOverlap',
-    paragraph: 'PlaygroundEditorTheme__paragraph',
-    quote: 'PlaygroundEditorTheme__quote',
-    rtl: 'PlaygroundEditorTheme__rtl',
-    specialText: 'PlaygroundEditorTheme__specialText',
-    tab: 'PlaygroundEditorTheme__tabNode',
-    table: 'PlaygroundEditorTheme__table',
-    tableAddColumns: 'PlaygroundEditorTheme__tableAddColumns',
-    tableAddRows: 'PlaygroundEditorTheme__tableAddRows',
-    tableAlignment: {
-        center: 'PlaygroundEditorTheme__tableAlignmentCenter',
-        right: 'PlaygroundEditorTheme__tableAlignmentRight',
-    },
-    tableCell: 'PlaygroundEditorTheme__tableCell',
-    tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
-    tableCellActionButtonContainer: 'PlaygroundEditorTheme__tableCellActionButtonContainer',
-    tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
-    tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
-    tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
-    tableFrozenColumn: 'PlaygroundEditorTheme__tableFrozenColumn',
-    tableFrozenRow: 'PlaygroundEditorTheme__tableFrozenRow',
-    tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
-    tableScrollableWrapper: 'PlaygroundEditorTheme__tableScrollableWrapper',
-    tableSelected: 'PlaygroundEditorTheme__tableSelected',
-    tableSelection: 'PlaygroundEditorTheme__tableSelection',
-    text: {
-        bold: 'PlaygroundEditorTheme__textBold',
-        capitalize: 'PlaygroundEditorTheme__textCapitalize',
-        code: 'PlaygroundEditorTheme__textCode',
-        highlight: 'PlaygroundEditorTheme__textHighlight',
-        italic: 'PlaygroundEditorTheme__textItalic',
-        lowercase: 'PlaygroundEditorTheme__textLowercase',
-        strikethrough: 'PlaygroundEditorTheme__textStrikethrough',
-        subscript: 'PlaygroundEditorTheme__textSubscript',
-        superscript: 'PlaygroundEditorTheme__textSuperscript',
-        underline: 'PlaygroundEditorTheme__textUnderline',
-        underlineStrikethrough: 'PlaygroundEditorTheme__textUnderlineStrikethrough',
-        uppercase: 'PlaygroundEditorTheme__textUppercase',
-    },
-};
-export default theme;

package/lib/themes/StickyEditorTheme.d.ts

@@ -1,4 +0,0 @@
-import type { EditorThemeClasses } from 'lexical';
-import './StickyEditorTheme.css';
-declare const theme: EditorThemeClasses;
-export default theme;

package/lib/themes/StickyEditorTheme.js

@@ -1,11 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import './StickyEditorTheme.css';
-import baseTheme from './PlaygroundEditorTheme';
-const theme = {
-    ...baseTheme,
-    paragraph: 'StickyEditorTheme__paragraph',
-};
-export default theme;

package/lib/tyes.dt.d.ts

@@ -1,12 +0,0 @@
-declare module '*.svg' {
-    const content: string;
-    export default content;
-}
-declare module '*.gif' {
-    const content: string;
-    export default content;
-}
-declare module '*.jpg' {
-    const content: string;
-    export default content;
-}

package/lib/tyes.dt.js

@@ -1,4 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */

package/lib/ui/Button.d.ts

@@ -1,12 +0,0 @@
-import type { JSX } from 'react';
-import './Button.css';
-import { ReactNode } from 'react';
-export default function Button({ 'data-test-id': dataTestId, children, className, onClick, disabled, small, title, }: {
-    'data-test-id'?: string;
-    children: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    onClick: () => void;
-    small?: boolean;
-    title?: string;
-}): JSX.Element;

package/lib/ui/Button.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './Button.css';
-import joinClasses from '../utils/joinClasses';
-export default function Button({ 'data-test-id': dataTestId, children, className, onClick, disabled, small, title, }) {
-    return (_jsx("button", { disabled: disabled, className: joinClasses('Button__root', disabled && 'Button__disabled', small && 'Button__small', className), onClick: onClick, title: title, "aria-label": title, ...(dataTestId && { 'data-test-id': dataTestId }), children: children }));
-}

package/lib/ui/ColorPicker.d.ts

@@ -1,14 +0,0 @@
-import type { JSX } from 'react';
-import './ColorPicker.css';
-interface ColorPickerProps {
-    color: string;
-    onChange?: (value: string, skipHistoryStack: boolean) => void;
-}
-export declare function parseAllowedColor(input: string): string;
-export default function ColorPicker({ color, onChange, }: Readonly<ColorPickerProps>): JSX.Element;
-export interface Position {
-    x: number;
-    y: number;
-}
-export declare function toHex(value: string): string;
-export {};

package/lib/ui/ColorPicker.js

@@ -1,219 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './ColorPicker.css';
-import { calculateZoomLevel } from '@lexical/utils';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import TextInput from './TextInput';
-let skipAddingToHistoryStack = false;
-export function parseAllowedColor(input) {
-    return /^rgb\(\d+, \d+, \d+\)$/.test(input) ? input : '';
-}
-const basicColors = [
-    '#d0021b',
-    '#f5a623',
-    '#f8e71c',
-    '#8b572a',
-    '#7ed321',
-    '#417505',
-    '#bd10e0',
-    '#9013fe',
-    '#4a90e2',
-    '#50e3c2',
-    '#b8e986',
-    '#000000',
-    '#4a4a4a',
-    '#9b9b9b',
-    '#ffffff',
-];
-const WIDTH = 214;
-const HEIGHT = 150;
-export default function ColorPicker({ color, onChange, }) {
-    const [selfColor, setSelfColor] = useState(transformColor('hex', color));
-    const [inputColor, setInputColor] = useState(color);
-    const innerDivRef = useRef(null);
-    const saturationPosition = useMemo(() => ({
-        x: (selfColor.hsv.s / 100) * WIDTH,
-        y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
-    }), [selfColor.hsv.s, selfColor.hsv.v]);
-    const huePosition = useMemo(() => ({
-        x: (selfColor.hsv.h / 360) * WIDTH,
-    }), [selfColor.hsv]);
-    const onSetHex = (hex) => {
-        setInputColor(hex);
-        if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
-            const newColor = transformColor('hex', hex);
-            setSelfColor(newColor);
-        }
-    };
-    const onMoveSaturation = ({ x, y }) => {
-        const newHsv = {
-            ...selfColor.hsv,
-            s: (x / WIDTH) * 100,
-            v: 100 - (y / HEIGHT) * 100,
-        };
-        const newColor = transformColor('hsv', newHsv);
-        setSelfColor(newColor);
-        setInputColor(newColor.hex);
-    };
-    const onMoveHue = ({ x }) => {
-        const newHsv = { ...selfColor.hsv, h: (x / WIDTH) * 360 };
-        const newColor = transformColor('hsv', newHsv);
-        setSelfColor(newColor);
-        setInputColor(newColor.hex);
-    };
-    useEffect(() => {
-        // Check if the dropdown is actually active
-        if (innerDivRef.current !== null && onChange) {
-            onChange(selfColor.hex, skipAddingToHistoryStack);
-            setInputColor(selfColor.hex);
-        }
-    }, [selfColor, onChange]);
-    useEffect(() => {
-        if (color === undefined) {
-            return;
-        }
-        const newColor = transformColor('hex', color);
-        setSelfColor(newColor);
-        setInputColor(newColor.hex);
-    }, [color]);
-    return (_jsxs("div", { className: "color-picker-wrapper", style: { width: WIDTH }, ref: innerDivRef, children: [_jsx(TextInput, { label: "Hex", onChange: onSetHex, value: inputColor }), _jsx("div", { className: "color-picker-basic-color", children: basicColors.map((basicColor) => (_jsx("button", { className: basicColor === selfColor.hex ? ' active' : '', style: { backgroundColor: basicColor }, onClick: () => {
-                        setInputColor(basicColor);
-                        setSelfColor(transformColor('hex', basicColor));
-                    } }, basicColor))) }), _jsx(MoveWrapper, { className: "color-picker-saturation", style: { backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }, onChange: onMoveSaturation, children: _jsx("div", { className: "color-picker-saturation_cursor", style: {
-                        backgroundColor: selfColor.hex,
-                        left: saturationPosition.x,
-                        top: saturationPosition.y,
-                    } }) }), _jsx(MoveWrapper, { className: "color-picker-hue", onChange: onMoveHue, children: _jsx("div", { className: "color-picker-hue_cursor", style: {
-                        backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
-                        left: huePosition.x,
-                    } }) }), _jsx("div", { className: "color-picker-color", style: { backgroundColor: selfColor.hex } })] }));
-}
-function MoveWrapper({ className, style, onChange, children }) {
-    const divRef = useRef(null);
-    const draggedRef = useRef(false);
-    const move = (e) => {
-        if (divRef.current) {
-            const { current: div } = divRef;
-            const { width, height, left, top } = div.getBoundingClientRect();
-            const zoom = calculateZoomLevel(div);
-            const x = clamp(e.clientX / zoom - left, width, 0);
-            const y = clamp(e.clientY / zoom - top, height, 0);
-            onChange({ x, y });
-        }
-    };
-    const onMouseDown = (e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        move(e);
-        const onMouseMove = (_e) => {
-            draggedRef.current = true;
-            skipAddingToHistoryStack = true;
-            move(_e);
-        };
-        const onMouseUp = (_e) => {
-            if (draggedRef.current) {
-                skipAddingToHistoryStack = false;
-            }
-            document.removeEventListener('mousemove', onMouseMove, false);
-            document.removeEventListener('mouseup', onMouseUp, false);
-            move(_e);
-            draggedRef.current = false;
-        };
-        document.addEventListener('mousemove', onMouseMove, false);
-        document.addEventListener('mouseup', onMouseUp, false);
-    };
-    return (_jsx("div", { ref: divRef, className: className, style: style, onMouseDown: onMouseDown, children: children }));
-}
-function clamp(value, max, min) {
-    return value > max ? max : value < min ? min : value;
-}
-export function toHex(value) {
-    if (!value.startsWith('#')) {
-        const ctx = document.createElement('canvas').getContext('2d');
-        if (!ctx) {
-            throw new Error('2d context not supported or canvas already initialized');
-        }
-        ctx.fillStyle = value;
-        return ctx.fillStyle;
-    }
-    else if (value.length === 4 || value.length === 5) {
-        value = value
-            .split('')
-            .map((v, i) => (i ? v + v : '#'))
-            .join('');
-        return value;
-    }
-    else if (value.length === 7 || value.length === 9) {
-        return value;
-    }
-    return '#000000';
-}
-function hex2rgb(hex) {
-    const rbgArr = (hex
-        .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
-        .substring(1)
-        .match(/.{2}/g) || []).map((x) => parseInt(x, 16));
-    return {
-        b: rbgArr[2],
-        g: rbgArr[1],
-        r: rbgArr[0],
-    };
-}
-function rgb2hsv({ r, g, b }) {
-    r /= 255;
-    g /= 255;
-    b /= 255;
-    const max = Math.max(r, g, b);
-    const d = max - Math.min(r, g, b);
-    const h = d
-        ? (max === r
-            ? (g - b) / d + (g < b ? 6 : 0)
-            : max === g
-                ? 2 + (b - r) / d
-                : 4 + (r - g) / d) * 60
-        : 0;
-    const s = max ? (d / max) * 100 : 0;
-    const v = max * 100;
-    return { h, s, v };
-}
-function hsv2rgb({ h, s, v }) {
-    s /= 100;
-    v /= 100;
-    const i = ~~(h / 60);
-    const f = h / 60 - i;
-    const p = v * (1 - s);
-    const q = v * (1 - s * f);
-    const t = v * (1 - s * (1 - f));
-    const index = i % 6;
-    const r = Math.round([v, q, p, p, t, v][index] * 255);
-    const g = Math.round([t, v, v, q, p, p][index] * 255);
-    const b = Math.round([p, p, t, v, v, q][index] * 255);
-    return { b, g, r };
-}
-function rgb2hex({ b, g, r }) {
-    return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
-}
-function transformColor(format, color) {
-    let hex = toHex('#121212');
-    let rgb = hex2rgb(hex);
-    let hsv = rgb2hsv(rgb);
-    if (format === 'hex') {
-        const value = color;
-        hex = toHex(value);
-        rgb = hex2rgb(hex);
-        hsv = rgb2hsv(rgb);
-    }
-    else if (format === 'rgb') {
-        const value = color;
-        rgb = value;
-        hex = rgb2hex(rgb);
-        hsv = rgb2hsv(rgb);
-    }
-    else if (format === 'hsv') {
-        const value = color;
-        hsv = value;
-        rgb = hsv2rgb(hsv);
-        hex = rgb2hex(rgb);
-    }
-    return { hex, hsv, rgb };
-}

package/lib/ui/ContentEditable.d.ts

@@ -1,9 +0,0 @@
-import type { JSX } from 'react';
-import './ContentEditable.css';
-type Props = {
-    className?: string;
-    placeholderClassName?: string;
-    placeholder: string;
-};
-export default function LexicalContentEditable({ className, placeholder, placeholderClassName, }: Props): JSX.Element;
-export {};

package/lib/ui/ContentEditable.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './ContentEditable.css';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-export default function LexicalContentEditable({ className, placeholder, placeholderClassName, }) {
-    return (_jsx(ContentEditable, { className: className ?? 'ContentEditable__root', "aria-placeholder": placeholder, placeholder: _jsx("div", { className: placeholderClassName ?? 'ContentEditable__placeholder', children: placeholder }) }));
-}

package/lib/ui/Dialog.d.ts

@@ -1,10 +0,0 @@
-import type { JSX } from 'react';
-import './Dialog.css';
-import { ReactNode } from 'react';
-type Props = Readonly<{
-    'data-test-id'?: string;
-    children: ReactNode;
-}>;
-export declare function DialogButtonsList({ children }: Props): JSX.Element;
-export declare function DialogActions({ 'data-test-id': dataTestId, children, }: Props): JSX.Element;
-export {};

package/lib/ui/Dialog.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './Dialog.css';
-export function DialogButtonsList({ children }) {
-    return _jsx("div", { className: "DialogButtonsList", children: children });
-}
-export function DialogActions({ 'data-test-id': dataTestId, children, }) {
-    return (_jsx("div", { className: "DialogActions", "data-test-id": dataTestId, children: children }));
-}

package/lib/ui/DropDown.d.ts

@@ -1,18 +0,0 @@
-import type { JSX } from 'react';
-import * as React from 'react';
-import { ReactNode } from 'react';
-export declare function DropDownItem({ children, className, onClick, title, }: {
-    children: React.ReactNode;
-    className: string;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    title?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export default function DropDown({ disabled, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, stopCloseOnClickSelf, }: {
-    disabled?: boolean;
-    buttonAriaLabel?: string;
-    buttonClassName: string;
-    buttonIconClassName?: string;
-    buttonLabel?: string;
-    children: ReactNode;
-    stopCloseOnClickSelf?: boolean;
-}): JSX.Element;

package/lib/ui/DropDown.js

@@ -1,133 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { isDOMNode } from 'lexical';
-import * as React from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-const DropDownContext = React.createContext(null);
-const dropDownPadding = 4;
-export function DropDownItem({ children, className, onClick, title, }) {
-    const ref = useRef(null);
-    const dropDownContext = React.useContext(DropDownContext);
-    if (dropDownContext === null) {
-        throw new Error('DropDownItem must be used within a DropDown');
-    }
-    const { registerItem } = dropDownContext;
-    useEffect(() => {
-        if (ref && ref.current) {
-            registerItem(ref);
-        }
-    }, [ref, registerItem]);
-    return (_jsx("button", { className: className, onClick: onClick, ref: ref, title: title, type: "button", children: children }));
-}
-function DropDownItems({ children, dropDownRef, onClose, }) {
-    const [items, setItems] = useState();
-    const [highlightedItem, setHighlightedItem] = useState();
-    const registerItem = useCallback((itemRef) => {
-        setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
-    }, [setItems]);
-    const handleKeyDown = (event) => {
-        if (!items) {
-            return;
-        }
-        const key = event.key;
-        if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
-            event.preventDefault();
-        }
-        if (key === 'Escape' || key === 'Tab') {
-            onClose();
-        }
-        else if (key === 'ArrowUp') {
-            setHighlightedItem((prev) => {
-                if (!prev) {
-                    return items[0];
-                }
-                const index = items.indexOf(prev) - 1;
-                return items[index === -1 ? items.length - 1 : index];
-            });
-        }
-        else if (key === 'ArrowDown') {
-            setHighlightedItem((prev) => {
-                if (!prev) {
-                    return items[0];
-                }
-                return items[items.indexOf(prev) + 1];
-            });
-        }
-    };
-    const contextValue = useMemo(() => ({
-        registerItem,
-    }), [registerItem]);
-    useEffect(() => {
-        if (items && !highlightedItem) {
-            setHighlightedItem(items[0]);
-        }
-        if (highlightedItem && highlightedItem.current) {
-            highlightedItem.current.focus();
-        }
-    }, [items, highlightedItem]);
-    return (_jsx(DropDownContext.Provider, { value: contextValue, children: _jsx("div", { className: "dropdown", ref: dropDownRef, onKeyDown: handleKeyDown, children: children }) }));
-}
-export default function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, stopCloseOnClickSelf, }) {
-    const dropDownRef = useRef(null);
-    const buttonRef = useRef(null);
-    const [showDropDown, setShowDropDown] = useState(false);
-    const handleClose = () => {
-        setShowDropDown(false);
-        if (buttonRef && buttonRef.current) {
-            buttonRef.current.focus();
-        }
-    };
-    useEffect(() => {
-        const button = buttonRef.current;
-        const dropDown = dropDownRef.current;
-        if (showDropDown && button !== null && dropDown !== null) {
-            const { top, left } = button.getBoundingClientRect();
-            dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
-            dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`;
-        }
-    }, [dropDownRef, buttonRef, showDropDown]);
-    useEffect(() => {
-        const button = buttonRef.current;
-        if (button !== null && showDropDown) {
-            const handle = (event) => {
-                const target = event.target;
-                if (!isDOMNode(target)) {
-                    return;
-                }
-                if (stopCloseOnClickSelf) {
-                    if (dropDownRef.current && dropDownRef.current.contains(target)) {
-                        return;
-                    }
-                }
-                if (!button.contains(target)) {
-                    setShowDropDown(false);
-                }
-            };
-            document.addEventListener('click', handle);
-            return () => {
-                document.removeEventListener('click', handle);
-            };
-        }
-    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
-    useEffect(() => {
-        const handleButtonPositionUpdate = () => {
-            if (showDropDown) {
-                const button = buttonRef.current;
-                const dropDown = dropDownRef.current;
-                if (button !== null && dropDown !== null) {
-                    const { top } = button.getBoundingClientRect();
-                    const newPosition = top + button.offsetHeight + dropDownPadding;
-                    if (newPosition !== dropDown.getBoundingClientRect().top) {
-                        dropDown.style.top = `${newPosition}px`;
-                    }
-                }
-            }
-        };
-        document.addEventListener('scroll', handleButtonPositionUpdate);
-        return () => {
-            document.removeEventListener('scroll', handleButtonPositionUpdate);
-        };
-    }, [buttonRef, dropDownRef, showDropDown]);
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", disabled: disabled, "aria-label": buttonAriaLabel || buttonLabel, className: buttonClassName, onClick: () => setShowDropDown(!showDropDown), ref: buttonRef, children: [buttonIconClassName && _jsx("span", { className: buttonIconClassName }), buttonLabel && (_jsx("span", { className: "text dropdown-button-text", children: buttonLabel })), _jsx("i", { className: "chevron-down" })] }), showDropDown &&
-                createPortal(_jsx(DropDownItems, { dropDownRef: dropDownRef, onClose: handleClose, children: children }), document.body)] }));
-}

package/lib/ui/DropdownColorPicker.d.ts

@@ -1,13 +0,0 @@
-type Props = {
-    disabled?: boolean;
-    buttonAriaLabel?: string;
-    buttonClassName: string;
-    buttonIconClassName?: string;
-    buttonLabel?: string;
-    title?: string;
-    stopCloseOnClickSelf?: boolean;
-    color: string;
-    onChange?: (color: string, skipHistoryStack: boolean) => void;
-};
-export default function DropdownColorPicker({ disabled, stopCloseOnClickSelf, color, onChange, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/ui/DropdownColorPicker.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ColorPicker from './ColorPicker';
-import DropDown from './DropDown';
-export default function DropdownColorPicker({ disabled = false, stopCloseOnClickSelf = true, color, onChange, ...rest }) {
-    return (_jsx(DropDown, { ...rest, disabled: disabled, stopCloseOnClickSelf: stopCloseOnClickSelf, children: _jsx(ColorPicker, { color: color, onChange: onChange }) }));
-}

package/lib/ui/EquationEditor.d.ts

@@ -1,8 +0,0 @@
-import './EquationEditor.css';
-type BaseEquationEditorProps = {
-    equation: string;
-    inline: boolean;
-    setEquation: (equation: string) => void;
-};
-declare const _default: import("react").ForwardRefExoticComponent<BaseEquationEditorProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-export default _default;

package/lib/ui/EquationEditor.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './EquationEditor.css';
-import { isHTMLElement } from 'lexical';
-import { forwardRef } from 'react';
-function EquationEditor({ equation, setEquation, inline }, forwardedRef) {
-    const onChange = (event) => {
-        setEquation(event.target.value);
-    };
-    return inline && isHTMLElement(forwardedRef) ? (_jsxs("span", { className: "EquationEditor_inputBackground", children: [_jsx("span", { className: "EquationEditor_dollarSign", children: "$" }), _jsx("input", { className: "EquationEditor_inlineEditor", value: equation, onChange: onChange, autoFocus: true, ref: forwardedRef }), _jsx("span", { className: "EquationEditor_dollarSign", children: "$" })] })) : (_jsxs("div", { className: "EquationEditor_inputBackground", children: [_jsx("span", { className: "EquationEditor_dollarSign", children: '$$\n' }), _jsx("textarea", { className: "EquationEditor_blockEditor", value: equation, onChange: onChange, ref: forwardedRef }), _jsx("span", { className: "EquationEditor_dollarSign", children: '\n$$' })] }));
-}
-export default forwardRef(EquationEditor);