@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/ui/ExcalidrawModal.d.ts

@@ -0,0 +1,42 @@
+import type { AppState, BinaryFiles, ExcalidrawInitialDataState } from '@excalidraw/excalidraw/types';
+import './ExcalidrawModal.css';
+import { ReactPortal } from 'react';
+export type ExcalidrawInitialElements = ExcalidrawInitialDataState['elements'];
+type Props = {
+    closeOnClickOutside?: boolean;
+    /**
+     * The initial set of elements to draw into the scene
+     */
+    initialElements: ExcalidrawInitialElements;
+    /**
+     * The initial set of elements to draw into the scene
+     */
+    initialAppState: AppState;
+    /**
+     * The initial set of elements to draw into the scene
+     */
+    initialFiles: BinaryFiles;
+    /**
+     * Controls the visibility of the modal
+     */
+    isShown?: boolean;
+    /**
+     * Callback when closing and discarding the new changes
+     */
+    onClose: () => void;
+    /**
+     * Completely remove Excalidraw component
+     */
+    onDelete: () => void;
+    /**
+     * Callback when the save button is clicked
+     */
+    onSave: (elements: ExcalidrawInitialElements, appState: Partial<AppState>, files: BinaryFiles) => void;
+};
+/**
+ * @explorer-desc
+ * A component which renders a modal with Excalidraw (a painting app)
+ * which can be used to export an editable image
+ */
+export default function ExcalidrawModal({ closeOnClickOutside, onSave, initialElements, initialAppState, initialFiles, isShown, onDelete, onClose, }: Props): ReactPortal | null;
+export {};

package/lib/ui/ExcalidrawModal.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ExcalidrawModal.css';
+import { Excalidraw } from '@excalidraw/excalidraw';
+import { isDOMNode } from 'lexical';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Button from './Button';
+import Modal from './Modal';
+/**
+ * @explorer-desc
+ * A component which renders a modal with Excalidraw (a painting app)
+ * which can be used to export an editable image
+ */
+export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, initialElements, initialAppState, initialFiles, isShown = false, onDelete, onClose, }) {
+    const excaliDrawModelRef = useRef(null);
+    const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+    const [discardModalOpen, setDiscardModalOpen] = useState(false);
+    const [elements, setElements] = useState(initialElements);
+    const [files, setFiles] = useState(initialFiles);
+    useEffect(() => {
+        excaliDrawModelRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        let modalOverlayElement = null;
+        const clickOutsideHandler = (event) => {
+            const target = event.target;
+            if (excaliDrawModelRef.current !== null &&
+                isDOMNode(target) &&
+                !excaliDrawModelRef.current.contains(target) &&
+                closeOnClickOutside) {
+                onDelete();
+            }
+        };
+        if (excaliDrawModelRef.current !== null) {
+            modalOverlayElement = excaliDrawModelRef.current?.parentElement;
+            modalOverlayElement?.addEventListener('click', clickOutsideHandler);
+        }
+        return () => {
+            modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+        };
+    }, [closeOnClickOutside, onDelete]);
+    useLayoutEffect(() => {
+        const currentModalRef = excaliDrawModelRef.current;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onDelete();
+            }
+        };
+        currentModalRef?.addEventListener('keydown', onKeyDown);
+        return () => {
+            currentModalRef?.removeEventListener('keydown', onKeyDown);
+        };
+    }, [elements, files, onDelete]);
+    const save = () => {
+        if (elements?.some((el) => !el.isDeleted)) {
+            const appState = excalidrawAPI?.getAppState();
+            // We only need a subset of the state
+            const partialState = {
+                exportBackground: appState?.exportBackground,
+                exportScale: appState?.exportScale,
+                exportWithDarkMode: appState?.theme === 'dark',
+                isBindingEnabled: appState?.isBindingEnabled,
+                isLoading: appState?.isLoading,
+                name: appState?.name,
+                theme: appState?.theme,
+                viewBackgroundColor: appState?.viewBackgroundColor,
+                viewModeEnabled: appState?.viewModeEnabled,
+                zenModeEnabled: appState?.zenModeEnabled,
+                zoom: appState?.zoom,
+            };
+            onSave(elements, partialState, files);
+        }
+        else {
+            // delete node if the scene is clear
+            onDelete();
+        }
+    };
+    const discard = () => {
+        setDiscardModalOpen(true);
+    };
+    function ShowDiscardDialog() {
+        return (_jsxs(Modal, { title: "Discard", onClose: () => {
+                setDiscardModalOpen(false);
+            }, closeOnClickOutside: false, children: ["Are you sure you want to discard the changes?", _jsxs("div", { className: "ExcalidrawModal__discardModal", children: [_jsx(Button, { onClick: () => {
+                                setDiscardModalOpen(false);
+                                onClose();
+                            }, children: "Discard" }), ' ', _jsx(Button, { onClick: () => {
+                                setDiscardModalOpen(false);
+                            }, children: "Cancel" })] })] }));
+    }
+    if (isShown === false) {
+        return null;
+    }
+    const onChange = (els, _, fls) => {
+        setElements(els);
+        setFiles(fls);
+    };
+    return createPortal(_jsx("div", { className: "ExcalidrawModal__overlay", role: "dialog", children: _jsx("div", { className: "ExcalidrawModal__modal", ref: excaliDrawModelRef, tabIndex: -1, children: _jsxs("div", { className: "ExcalidrawModal__row", children: [discardModalOpen && _jsx(ShowDiscardDialog, {}), _jsx(Excalidraw, { onChange: onChange, excalidrawAPI: setExcalidrawAPI, initialData: {
+                            appState: initialAppState || { isLoading: false },
+                            elements: initialElements,
+                            files: initialFiles,
+                        } }), _jsxs("div", { className: "ExcalidrawModal__actions", children: [_jsx("button", { className: "action-button", onClick: discard, children: "Discard" }), _jsx("button", { className: "action-button", onClick: save, children: "Save" })] })] }) }) }), document.body);
+}

package/lib/ui/FileInput.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import './Input.css';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    accept?: string;
+    label: string;
+    onChange: (files: FileList | null) => void;
+}>;
+export default function FileInput({ accept, label, onChange, 'data-test-id': dataTestId, }: Props): JSX.Element;
+export {};

package/lib/ui/FileInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Input.css';
+export default function FileInput({ accept, label, onChange, 'data-test-id': dataTestId, }) {
+    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", children: label }), _jsx("input", { type: "file", accept: accept, className: "Input__input", onChange: (e) => onChange(e.target.files), "data-test-id": dataTestId })] }));
+}

package/lib/ui/FlashMessage.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import './FlashMessage.css';
+import { ReactNode } from 'react';
+export interface FlashMessageProps {
+    children: ReactNode;
+}
+export default function FlashMessage({ children, }: FlashMessageProps): JSX.Element;

package/lib/ui/FlashMessage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './FlashMessage.css';
+import { createPortal } from 'react-dom';
+export default function FlashMessage({ children, }) {
+    return createPortal(_jsx("div", { className: "FlashMessage__overlay", role: "dialog", children: _jsx("p", { className: "FlashMessage__alert", role: "alert", children: children }) }), document.body);
+}

package/lib/ui/ImageResizer.d.ts

@@ -0,0 +1,17 @@
+import type { LexicalEditor } from 'lexical';
+import type { JSX } from 'react';
+export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled, }: {
+    editor: LexicalEditor;
+    buttonRef: {
+        current: null | HTMLButtonElement;
+    };
+    imageRef: {
+        current: null | HTMLElement;
+    };
+    maxWidth?: number;
+    onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
+    onResizeStart: () => void;
+    setShowCaption: (show: boolean) => void;
+    showCaption: boolean;
+    captionsEnabled: boolean;
+}): JSX.Element;

package/lib/ui/ImageResizer.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateZoomLevel } from '@lexical/utils';
+import { useRef } from 'react';
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+    east: 1 << 0,
+    north: 1 << 3,
+    south: 1 << 1,
+    west: 1 << 2,
+};
+export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled, }) {
+    const controlWrapperRef = useRef(null);
+    const userSelect = useRef({
+        priority: '',
+        value: 'default',
+    });
+    const positioningRef = useRef({
+        currentHeight: 0,
+        currentWidth: 0,
+        direction: 0,
+        isResizing: false,
+        ratio: 0,
+        startHeight: 0,
+        startWidth: 0,
+        startX: 0,
+        startY: 0,
+    });
+    const editorRootElement = editor.getRootElement();
+    // Find max width, accounting for editor padding.
+    const maxWidthContainer = maxWidth
+        ? maxWidth
+        : editorRootElement !== null
+            ? editorRootElement.getBoundingClientRect().width - 20
+            : 100;
+    const maxHeightContainer = editorRootElement !== null
+        ? editorRootElement.getBoundingClientRect().height - 20
+        : 100;
+    const minWidth = 100;
+    const minHeight = 100;
+    const setStartCursor = (direction) => {
+        const ew = direction === Direction.east || direction === Direction.west;
+        const ns = direction === Direction.north || direction === Direction.south;
+        const nwse = (direction & Direction.north && direction & Direction.west) ||
+            (direction & Direction.south && direction & Direction.east);
+        const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
+            userSelect.current.value = document.body.style.getPropertyValue('-webkit-user-select');
+            userSelect.current.priority = document.body.style.getPropertyPriority('-webkit-user-select');
+            document.body.style.setProperty('-webkit-user-select', `none`, 'important');
+        }
+    };
+    const setEndCursor = () => {
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty('cursor', 'text');
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty('cursor', 'default');
+            document.body.style.setProperty('-webkit-user-select', userSelect.current.value, userSelect.current.priority);
+        }
+    };
+    const handlePointerDown = (event, direction) => {
+        if (!editor.isEditable()) {
+            return;
+        }
+        const image = imageRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null) {
+            event.preventDefault();
+            const { width, height } = image.getBoundingClientRect();
+            const zoom = calculateZoomLevel(image);
+            const positioning = positioningRef.current;
+            positioning.startWidth = width;
+            positioning.startHeight = height;
+            positioning.ratio = width / height;
+            positioning.currentWidth = width;
+            positioning.currentHeight = height;
+            positioning.startX = event.clientX / zoom;
+            positioning.startY = event.clientY / zoom;
+            positioning.isResizing = true;
+            positioning.direction = direction;
+            setStartCursor(direction);
+            onResizeStart();
+            controlWrapper.classList.add('image-control-wrapper--resizing');
+            image.style.height = `${height}px`;
+            image.style.width = `${width}px`;
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+        }
+    };
+    const handlePointerMove = (event) => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+        const isVertical = positioning.direction & (Direction.south | Direction.north);
+        if (image !== null && positioning.isResizing) {
+            const zoom = calculateZoomLevel(image);
+            // Corner cursor
+            if (isHorizontal && isVertical) {
+                let diff = Math.floor(positioning.startX - event.clientX / zoom);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                const height = width / positioning.ratio;
+                image.style.width = `${width}px`;
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+                positioning.currentWidth = width;
+            }
+            else if (isVertical) {
+                let diff = Math.floor(positioning.startY - event.clientY / zoom);
+                diff = positioning.direction & Direction.south ? -diff : diff;
+                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+            }
+            else {
+                let diff = Math.floor(positioning.startX - event.clientX / zoom);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                image.style.width = `${width}px`;
+                positioning.currentWidth = width;
+            }
+        }
+    };
+    const handlePointerUp = () => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null && positioning.isResizing) {
+            const width = positioning.currentWidth;
+            const height = positioning.currentHeight;
+            positioning.startWidth = 0;
+            positioning.startHeight = 0;
+            positioning.ratio = 0;
+            positioning.startX = 0;
+            positioning.startY = 0;
+            positioning.currentWidth = 0;
+            positioning.currentHeight = 0;
+            positioning.isResizing = false;
+            controlWrapper.classList.remove('image-control-wrapper--resizing');
+            setEndCursor();
+            onResizeEnd(width, height);
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+        }
+    };
+    return (_jsxs("div", { ref: controlWrapperRef, children: [!showCaption && captionsEnabled && (_jsx("button", { className: "image-caption-button", ref: buttonRef, onClick: () => {
+                    setShowCaption(!showCaption);
+                }, children: "Add Caption" })), _jsx("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north);
+                } }), _jsx("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-s", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south);
+                } }), _jsx("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.west);
+                } }), _jsx("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.west);
+                } }), _jsx("div", { className: "image-resizer image-resizer-nw", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.west);
+                } })] }));
+}

package/lib/ui/KatexEquationAlterer.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import './KatexEquationAlterer.css';
+type Props = {
+    initialEquation?: string;
+    onConfirm: (equation: string, inline: boolean) => void;
+};
+export default function KatexEquationAlterer({ onConfirm, initialEquation, }: Props): JSX.Element;
+export {};

package/lib/ui/KatexEquationAlterer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './KatexEquationAlterer.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import Button from '../ui/Button';
+import KatexRenderer from './KatexRenderer';
+export default function KatexEquationAlterer({ onConfirm, initialEquation = '', }) {
+    const [editor] = useLexicalComposerContext();
+    const [equation, setEquation] = useState(initialEquation);
+    const [inline, setInline] = useState(true);
+    const onClick = useCallback(() => {
+        onConfirm(equation, inline);
+    }, [onConfirm, equation, inline]);
+    const onCheckboxChange = useCallback(() => {
+        setInline(!inline);
+    }, [setInline, inline]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "KatexEquationAlterer_defaultRow", children: ["Inline", _jsx("input", { type: "checkbox", checked: inline, onChange: onCheckboxChange })] }), _jsx("div", { className: "KatexEquationAlterer_defaultRow", children: "Equation " }), _jsx("div", { className: "KatexEquationAlterer_centerRow", children: inline ? (_jsx("input", { onChange: (event) => {
+                        setEquation(event.target.value);
+                    }, value: equation, className: "KatexEquationAlterer_textArea" })) : (_jsx("textarea", { onChange: (event) => {
+                        setEquation(event.target.value);
+                    }, value: equation, className: "KatexEquationAlterer_textArea" })) }), _jsx("div", { className: "KatexEquationAlterer_defaultRow", children: "Visualization " }), _jsx("div", { className: "KatexEquationAlterer_centerRow", children: _jsx(ErrorBoundary, { onError: (e) => editor._onError(e), fallback: null, children: _jsx(KatexRenderer, { equation: equation, inline: false, onDoubleClick: () => null }) }) }), _jsx("div", { className: "KatexEquationAlterer_dialogActions", children: _jsx(Button, { onClick: onClick, children: "Confirm" }) })] }));
+}

package/lib/ui/KatexRenderer.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+export default function KatexRenderer({ equation, inline, onDoubleClick, }: Readonly<{
+    equation: string;
+    inline: boolean;
+    onDoubleClick: () => void;
+}>): JSX.Element;

package/lib/ui/KatexRenderer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import katex from 'katex';
+import { useEffect, useRef } from 'react';
+export default function KatexRenderer({ equation, inline, onDoubleClick, }) {
+    const katexElementRef = useRef(null);
+    useEffect(() => {
+        const katexElement = katexElementRef.current;
+        if (katexElement !== null) {
+            katex.render(equation, katexElement, {
+                displayMode: !inline, // true === block display //
+                errorColor: '#cc0000',
+                output: 'html',
+                strict: 'warn',
+                throwOnError: false,
+                trust: false,
+            });
+        }
+    }, [equation, inline]);
+    return (
+    // We use an empty image tag either side to ensure Android doesn't try and compose from the
+    // inner text from Katex. There didn't seem to be any other way of making this work,
+    // without having a physical space.
+    _jsxs(_Fragment, { children: [_jsx("img", { src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", width: "0", height: "0", alt: "" }), _jsx("span", { role: "button", tabIndex: -1, onDoubleClick: onDoubleClick, ref: katexElementRef }), _jsx("img", { src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", width: "0", height: "0", alt: "" })] }));
+}

package/lib/ui/Modal.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import './Modal.css';
+import { ReactNode } from 'react';
+export default function Modal({ onClose, children, title, closeOnClickOutside, }: {
+    children: ReactNode;
+    closeOnClickOutside?: boolean;
+    onClose: () => void;
+    title: string;
+}): JSX.Element;

package/lib/ui/Modal.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Modal.css';
+import { isDOMNode } from 'lexical';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+function PortalImpl({ onClose, children, title, closeOnClickOutside, }) {
+    const modalRef = useRef(null);
+    useEffect(() => {
+        if (modalRef.current !== null) {
+            modalRef.current.focus();
+        }
+    }, []);
+    useEffect(() => {
+        let modalOverlayElement = null;
+        const handler = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        const clickOutsideHandler = (event) => {
+            const target = event.target;
+            if (modalRef.current !== null &&
+                isDOMNode(target) &&
+                !modalRef.current.contains(target) &&
+                closeOnClickOutside) {
+                onClose();
+            }
+        };
+        const modelElement = modalRef.current;
+        if (modelElement !== null) {
+            modalOverlayElement = modelElement.parentElement;
+            if (modalOverlayElement !== null) {
+                modalOverlayElement.addEventListener('click', clickOutsideHandler);
+            }
+        }
+        window.addEventListener('keydown', handler);
+        return () => {
+            window.removeEventListener('keydown', handler);
+            if (modalOverlayElement !== null) {
+                modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+            }
+        };
+    }, [closeOnClickOutside, onClose]);
+    return (_jsx("div", { className: "Modal__overlay", role: "dialog", children: _jsxs("div", { className: "Modal__modal", tabIndex: -1, ref: modalRef, children: [_jsx("h2", { className: "Modal__title", children: title }), _jsx("button", { className: "Modal__closeButton", "aria-label": "Close modal", type: "button", onClick: onClose, children: "X" }), _jsx("div", { className: "Modal__content", children: children })] }) }));
+}
+export default function Modal({ onClose, children, title, closeOnClickOutside = false, }) {
+    return createPortal(_jsx(PortalImpl, { onClose: onClose, title: title, closeOnClickOutside: closeOnClickOutside, children: children }), document.body);
+}

package/lib/ui/Select.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import './Select.css';
+type SelectIntrinsicProps = JSX.IntrinsicElements['select'];
+interface SelectProps extends SelectIntrinsicProps {
+    label: string;
+}
+export default function Select({ children, label, className, ...other }: SelectProps): JSX.Element;
+export {};

package/lib/ui/Select.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Select.css';
+export default function Select({ children, label, className, ...other }) {
+    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { style: { marginTop: '-1em' }, className: "Input__label", children: label }), _jsx("select", { ...other, className: className || 'select', children: children })] }));
+}

package/lib/ui/Switch.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import * as React from 'react';
+export default function Switch({ checked, onClick, text, id, }: Readonly<{
+    checked: boolean;
+    id?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    text: string;
+}>): JSX.Element;

package/lib/ui/Switch.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+export default function Switch({ checked, onClick, text, id, }) {
+    const buttonId = useMemo(() => 'id_' + Math.floor(Math.random() * 10000), []);
+    return (_jsxs("div", { className: "switch", id: id, children: [_jsx("label", { htmlFor: buttonId, children: text }), _jsx("button", { role: "switch", "aria-checked": checked, id: buttonId, onClick: onClick, children: _jsx("span", {}) })] }));
+}

package/lib/ui/TextInput.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+import './Input.css';
+import { HTMLInputTypeAttribute } from 'react';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    label: string;
+    onChange: (val: string) => void;
+    placeholder?: string;
+    value: string;
+    type?: HTMLInputTypeAttribute;
+}>;
+export default function TextInput({ label, value, onChange, placeholder, 'data-test-id': dataTestId, type, }: Props): JSX.Element;
+export {};

package/lib/ui/TextInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Input.css';
+export default function TextInput({ label, value, onChange, placeholder = '', 'data-test-id': dataTestId, type = 'text', }) {
+    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", children: label }), _jsx("input", { type: type, className: "Input__input", placeholder: placeholder, value: value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, "data-test-id": dataTestId })] }));
+}

package/lib/utils/docSerialization.d.ts

@@ -0,0 +1,3 @@
+import { SerializedDocument } from '@lexical/file';
+export declare function docToHash(doc: SerializedDocument): Promise<string>;
+export declare function docFromHash(hash: string): Promise<SerializedDocument | null>;

package/lib/utils/docSerialization.js

@@ -0,0 +1,56 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function* generateReader(reader) {
+    let done = false;
+    while (!done) {
+        const res = await reader.read();
+        const { value } = res;
+        if (value !== undefined) {
+            yield value;
+        }
+        done = res.done;
+    }
+}
+async function readBytestoString(reader) {
+    const output = [];
+    const chunkSize = 0x8000;
+    for await (const value of generateReader(reader)) {
+        for (let i = 0; i < value.length; i += chunkSize) {
+            output.push(String.fromCharCode(...value.subarray(i, i + chunkSize)));
+        }
+    }
+    return output.join('');
+}
+export async function docToHash(doc) {
+    const cs = new CompressionStream('gzip');
+    const writer = cs.writable.getWriter();
+    const [, output] = await Promise.all([
+        writer
+            .write(new TextEncoder().encode(JSON.stringify(doc)))
+            .then(() => writer.close()),
+        readBytestoString(cs.readable.getReader()),
+    ]);
+    return `#doc=${btoa(output)
+        .replace(/\//g, '_')
+        .replace(/\+/g, '-')
+        .replace(/=+$/, '')}`;
+}
+export async function docFromHash(hash) {
+    const m = /^#doc=(.*)$/.exec(hash);
+    if (!m) {
+        return null;
+    }
+    const ds = new DecompressionStream('gzip');
+    const writer = ds.writable.getWriter();
+    const b64 = atob(m[1].replace(/_/g, '/').replace(/-/g, '+'));
+    const array = new Uint8Array(b64.length);
+    for (let i = 0; i < b64.length; i++) {
+        array[i] = b64.charCodeAt(i);
+    }
+    const closed = writer.write(array).then(() => writer.close());
+    const output = [];
+    for await (const chunk of generateReader(ds.readable.pipeThrough(new TextDecoderStream()).getReader())) {
+        output.push(chunk);
+    }
+    await closed;
+    return JSON.parse(output.join(''));
+}

package/lib/utils/emoji-list.d.ts

@@ -0,0 +1,20 @@
+declare const _default: ({
+    description: string;
+    emoji: string;
+    category: string;
+    aliases: string[];
+    tags: string[];
+    unicode_version: string;
+    ios_version: string;
+    skin_tones?: undefined;
+} | {
+    emoji: string;
+    description: string;
+    category: string;
+    aliases: string[];
+    tags: string[];
+    unicode_version: string;
+    ios_version: string;
+    skin_tones: boolean;
+})[];
+export default _default;