@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/themes/PlaygroundEditorTheme.js

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

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

package/lib/themes/StickyEditorTheme.js

@@ -0,0 +1,7 @@
+import './StickyEditorTheme.css';
+import baseTheme from './PlaygroundEditorTheme';
+const theme = {
+    ...baseTheme,
+    paragraph: 'StickyEditorTheme__paragraph',
+};
+export default theme;

package/lib/tyes.dt.d.ts

@@ -0,0 +1,12 @@
+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/ui/Button.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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