@datalayer/jupyter-lexical 0.0.1

package/lib/ui/DropDown.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+/**
+ * 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 { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+const DropDownContext = React.createContext(null);
+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, 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 const DropDown = ({ 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 + 40}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 (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]);
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { "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)] }));
+};
+export default DropDown;
+//# sourceMappingURL=DropDown.js.map

package/lib/ui/DropDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../src/ui/DropDown.tsx"],"names":[],"mappings":"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"}

package/lib/ui/EquationEditor.css

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+/**
+ * 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.
+ */
+
+.EquationEditor_inlineEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+}
+
+.EquationEditor_blockEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+  width: '100%';
+}
+
+.EquationEditor_inputBackground {
+  background-color: #eee;
+}
+
+.EquationEditor_dollarSign {
+  text-align: left;
+  color: #b0b0b0;
+}

package/lib/ui/EquationEditor.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/**
+ * 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 './EquationEditor.css';
+type BaseEquationEditorProps = {
+    equation: string;
+    inline: boolean;
+    inputRef: {
+        current: null | HTMLInputElement | HTMLTextAreaElement;
+    };
+    setEquation: (equation: string) => void;
+};
+export default function EquationEditor({ equation, setEquation, inline, inputRef, }: BaseEquationEditorProps): JSX.Element;
+export {};

package/lib/ui/EquationEditor.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+/**
+ * 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 './EquationEditor.css';
+export default function EquationEditor({ equation, setEquation, inline, inputRef, }) {
+    const onChange = (event) => {
+        setEquation(event.target.value);
+    };
+    const props = {
+        equation,
+        inputRef,
+        onChange,
+    };
+    return inline ? (_jsx(InlineEquationEditor, { ...props, inputRef: inputRef })) : (_jsx(BlockEquationEditor, { ...props, inputRef: inputRef }));
+}
+function InlineEquationEditor({ equation, onChange, inputRef, }) {
+    return (_jsxs("span", { className: "EquationEditor_inputBackground", children: [_jsx("span", { className: "EquationEditor_dollarSign", children: "$" }), _jsx("input", { className: "EquationEditor_inlineEditor", value: equation, onChange: onChange, autoFocus: true, ref: inputRef }), _jsx("span", { className: "EquationEditor_dollarSign", children: "$" })] }));
+}
+function BlockEquationEditor({ equation, onChange, inputRef, }) {
+    return (_jsxs("div", { className: "EquationEditor_inputBackground", children: [_jsx("span", { className: "EquationEditor_dollarSign", children: '$$\n' }), _jsx("textarea", { className: "EquationEditor_blockEditor", value: equation, onChange: onChange, ref: inputRef }), _jsx("span", { className: "EquationEditor_dollarSign", children: '\n$$' })] }));
+}
+//# sourceMappingURL=EquationEditor.js.map

package/lib/ui/EquationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EquationEditor.js","sourceRoot":"","sources":["../../src/ui/EquationEditor.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,OAAO,sBAAsB,CAAC;AAW9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAQ,GACgB;IACxB,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE;QACtC,WAAW,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG;QACZ,QAAQ;QACR,QAAQ;QACR,QAAQ;KACT,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,oBAAoB,OACf,KAAK,EACT,QAAQ,EAAE,QAAuC,GACjD,CACH,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,OACd,KAAK,EACT,QAAQ,EAAE,QAA0C,GACpD,CACH,CAAC;AACJ,CAAC;AAQD,SAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,QAAQ,GACgB;IACxB,OAAO,CACL,gBAAM,SAAS,EAAC,gCAAgC,aAC9C,eAAM,SAAS,EAAC,2BAA2B,kBAAS,EACpD,gBACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,EACf,GAAG,EAAE,QAAQ,GACb,EACF,eAAM,SAAS,EAAC,2BAA2B,kBAAS,IAC/C,CACR,CAAC;AACJ,CAAC;AAQD,SAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,QAAQ,GACqB;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,gCAAgC,aAC7C,eAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,GAAQ,EAC3D,mBACE,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,QAAQ,GACb,EACF,eAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,GAAQ,IACvD,CACP,CAAC;AACJ,CAAC"}

package/lib/ui/FileInput.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 './Input.css';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    accept?: string;
+    label: string;
+    onChange: (files: FileList | null) => void;
+}>;
+export declare const FileInput: ({ accept, label, onChange, "data-test-id": dataTestId, }: Props) => JSX.Element;
+export default FileInput;

package/lib/ui/FileInput.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+/**
+ * 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 './Input.css';
+export const 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 })] }));
+};
+export default FileInput;
+//# sourceMappingURL=FileInput.js.map

package/lib/ui/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../src/ui/FileInput.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,OAAO,aAAa,CAAC;AASrB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,UAAU,GACpB,EAAe,EAAE;IACvB,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,gBAAO,SAAS,EAAC,cAAc,YAAE,KAAK,GAAS,EAC/C,gBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,cAAc,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,kBAC3B,UAAU,GACxB,IACE,CACP,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,SAAS,CAAC"}

package/lib/ui/ImageResizer.d.ts

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

package/lib/ui/ImageResizer.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 const ImageResizer = ({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, }) => {
+    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', 'default');
+        }
+        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) => {
+        const image = imageRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null) {
+            const { width, height } = image.getBoundingClientRect();
+            const positioning = positioningRef.current;
+            positioning.startWidth = width;
+            positioning.startHeight = height;
+            positioning.ratio = width / height;
+            positioning.currentWidth = width;
+            positioning.currentHeight = height;
+            positioning.startX = event.clientX;
+            positioning.startY = event.clientY;
+            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) {
+            // Corner cursor
+            if (isHorizontal && isVertical) {
+                let diff = Math.floor(positioning.startX - event.clientX);
+                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);
+                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);
+                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 && (_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);
+                } })] }));
+};
+export default ImageResizer;
+//# sourceMappingURL=ImageResizer.js.map

package/lib/ui/ImageResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageResizer.js","sourceRoot":"","sources":["../../src/ui/ImageResizer.tsx"],"names":[],"mappings":"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"}

package/lib/ui/Input.css

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+/**
+ * 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.
+ *
+ */
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}

package/lib/ui/KatexEquationAlterer.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+/**
+ * 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.
+ */
+
+.KatexEquationAlterer_defaultRow {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_dialogActions {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  margin-top: 20px;
+  margin-bottom: 0;
+  justify-content: right;
+}
+
+.KatexEquationAlterer_centerRow {
+  display: flex;
+  flex-direction: 'row';
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_textArea {
+  width: 100%;
+  resize: none;
+  padding: 7px;
+}

package/lib/ui/KatexEquationAlterer.d.ts

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

package/lib/ui/KatexEquationAlterer.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+/**
+ * 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 { useCallback, useState } from 'react';
+import Button from '../ui/Button';
+import KatexRenderer from './KatexRenderer';
+import './KatexEquationAlterer.css';
+export const KatexEquationAlterer = ({ onConfirm, initialEquation = '', }) => {
+    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(KatexRenderer, { equation: equation, inline: false, onClick: () => null }) }), _jsx("div", { className: "KatexEquationAlterer_dialogActions", children: _jsx(Button, { onClick: onClick, children: "Confirm" }) })] }));
+};
+export default KatexEquationAlterer;
+//# sourceMappingURL=KatexEquationAlterer.js.map

package/lib/ui/KatexEquationAlterer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KatexEquationAlterer.js","sourceRoot":"","sources":["../../src/ui/KatexEquationAlterer.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,OAAO,4BAA4B,CAAC;AAOpC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,SAAS,EACT,eAAe,GAAG,EAAE,GACd,EAAe,EAAE;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,eAAe,CAAC,CAAC;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAClC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACxB,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,iCAAiC,uBAE9C,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,GAAI,IAClE,EACN,cAAK,SAAS,EAAC,iCAAiC,0BAAgB,EAChE,cAAK,SAAS,EAAC,gCAAgC,YAC5C,MAAM,CAAC,CAAC,CAAC,CACR,gBACE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAClC,CAAC,EACD,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,+BAA+B,GACzC,CACH,CAAC,CAAC,CAAC,CACF,mBACE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAClC,CAAC,EACD,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,+BAA+B,GACzC,CACH,GACG,EACN,cAAK,SAAS,EAAC,iCAAiC,+BAAqB,EACrE,cAAK,SAAS,EAAC,gCAAgC,YAC7C,KAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,GACnB,GACE,EACN,cAAK,SAAS,EAAC,oCAAoC,YACjD,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,wBAAkB,GACtC,IACL,CACJ,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAC"}

package/lib/ui/KatexRenderer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function KatexRenderer({ equation, inline, onClick, }: Readonly<{
+    equation: string;
+    inline: boolean;
+    onClick: () => void;
+}>): JSX.Element;

package/lib/ui/KatexRenderer.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+/**
+ * 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 katex from 'katex';
+import { useEffect, useRef } from 'react';
+export default function KatexRenderer({ equation, inline, onClick, }) {
+    const katexElementRef = useRef(null);
+    useEffect(() => {
+        const katexElement = katexElementRef.current;
+        if (katexElement !== null) {
+            katex.render(equation, katexElement, {
+                displayMode: !inline,
+                errorColor: '#cc0000',
+                output: 'html',
+                strict: 'warn',
+                throwOnError: false,
+                trust: false,
+            });
+        }
+    }, [equation, inline]);
+    return (
+    // We use spacers 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("span", { className: "spacer", children: " " }), _jsx("span", { role: "button", tabIndex: -1, onClick: onClick, ref: katexElementRef }), _jsx("span", { className: "spacer", children: " " })] }));
+}
+//# sourceMappingURL=KatexRenderer.js.map

package/lib/ui/KatexRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KatexRenderer.js","sourceRoot":"","sources":["../../src/ui/KatexRenderer.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,OAAO,GAKP;IACA,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC;QAE7C,IAAI,YAAY,KAAK,IAAI,EAAE;YACzB,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,YAAY,EAAE;gBACnC,WAAW,EAAE,CAAC,MAAM;gBACpB,UAAU,EAAE,SAAS;gBACrB,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,YAAY,EAAE,KAAK;gBACnB,KAAK,EAAE,KAAK;aACb,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAEvB,OAAO;IACL,gFAAgF;IAChF,oFAAoF;IACpF,mCAAmC;IACnC,8BACE,eAAM,SAAS,EAAC,QAAQ,kBAAS,EACjC,eACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,eAAe,GACpB,EACF,eAAM,SAAS,EAAC,QAAQ,kBAAS,IAChC,CACJ,CAAC;AACJ,CAAC"}