reviewhver 0.0.1

package/dist/components/Organisms/StudentEditor/components/MathModalSME.js

@@ -0,0 +1,762 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const MathKeyboardSME_1 = __importDefault(require("./MathKeyboardSME"));
+const CustomButton_1 = __importDefault(require("../../../Atoms/CustomButton/CustomButton"));
+const mathModalStyles_1 = require("./mathModalStyles");
+const ShortcutsSME_1 = __importDefault(require("./ShortcutsSME"));
+const keyboard_config_1 = require("../utils/keyboard-config");
+const MathModalSME = ({ isOpen, onClose, onSave, initialLatex = "", keyboardProfile, icons, isMobile, onMathKeyPress, onMathModalAction, onMathKeyboardInteraction, }) => {
+    const mathfieldRef = (0, react_1.useRef)(null);
+    const [latexValue, setLatexValue] = (0, react_1.useState)(initialLatex);
+    const [showMoreSymbols, setShowMoreSymbols] = (0, react_1.useState)(false);
+    const [isPanelOpen, setIsPanelOpen] = (0, react_1.useState)(false);
+    const mathliveRef = (0, react_1.useRef)(null);
+    // Add ref to capture first panel height
+    const firstPanelRef = (0, react_1.useRef)(null);
+    const [panelHeight, setPanelHeight] = (0, react_1.useState)(null);
+    // Autocomplete states
+    const [autocompleteValue, setAutocompleteValue] = (0, react_1.useState)("");
+    const [suggestions, setSuggestions] = (0, react_1.useState)([]);
+    const [showAutocomplete, setShowAutocomplete] = (0, react_1.useState)(false);
+    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, react_1.useState)(0);
+    // Memoize all shortcuts from keyboard configurations (computed once)
+    const allShortcuts = (0, react_1.useMemo)(() => {
+        const shortcuts = [];
+        const seen = new Set(); // Track seen shortcuts to avoid duplicates
+        const keyboards = [
+            keyboard_config_1.numericKeyboard,
+            keyboard_config_1.symbolsKeyboard,
+            keyboard_config_1.trigKeyboard,
+            keyboard_config_1.variablesKeyboard,
+            keyboard_config_1.chemBasicKeyboard,
+            keyboard_config_1.greekKeyboardLower,
+            keyboard_config_1.greekKeyboardUpper,
+        ];
+        keyboards.forEach((keyboard) => {
+            keyboard.flat().forEach((key) => {
+                if (key.isShortcut && key.description && key.value) {
+                    // Create a unique key based on value and description to avoid duplicates
+                    const uniqueKey = `${key.value}|${key.description}`;
+                    if (!seen.has(uniqueKey)) {
+                        seen.add(uniqueKey);
+                        shortcuts.push({
+                            shortcut: key.value,
+                            result: key.label,
+                            description: key.description,
+                        });
+                    }
+                }
+            });
+        });
+        // Sort: shortcuts starting with \ first, others last
+        return shortcuts.sort((a, b) => {
+            const aStartsWithBackslash = a.shortcut.startsWith("\\");
+            const bStartsWithBackslash = b.shortcut.startsWith("\\");
+            if (aStartsWithBackslash && !bStartsWithBackslash)
+                return -1;
+            if (!aStartsWithBackslash && bStartsWithBackslash)
+                return 1;
+            return 0;
+        });
+    }, []);
+    // Find matching shortcuts based on user input
+    const findMatchingShortcuts = (0, react_1.useCallback)((input) => {
+        if (!input || input.length === 0)
+            return [];
+        const inputLower = input.toLowerCase();
+        const matches = allShortcuts.filter((shortcut) => {
+            const shortcutLower = shortcut.shortcut.toLowerCase();
+            const descriptionLower = shortcut.description.toLowerCase();
+            return (shortcutLower.includes(inputLower) ||
+                descriptionLower.includes(inputLower));
+        });
+        // Sort by relevance: exact matches > prefix matches > other matches
+        return matches
+            .sort((a, b) => {
+            const aShortcut = a.shortcut.toLowerCase();
+            const bShortcut = b.shortcut.toLowerCase();
+            // Exact match
+            if (aShortcut === inputLower && bShortcut !== inputLower)
+                return -1;
+            if (bShortcut === inputLower && aShortcut !== inputLower)
+                return 1;
+            // Prefix match
+            if (aShortcut.startsWith(inputLower) &&
+                !bShortcut.startsWith(inputLower))
+                return -1;
+            if (bShortcut.startsWith(inputLower) &&
+                !aShortcut.startsWith(inputLower))
+                return 1;
+            return 0;
+        })
+            .slice(0, 3); // Return top 3 matches
+    }, [allShortcuts]);
+    // Toggle panel function with height capture
+    const togglePanel = (0, react_1.useCallback)(() => {
+        if (!isPanelOpen && firstPanelRef.current) {
+            const height = firstPanelRef.current.offsetHeight;
+            setPanelHeight(height);
+        }
+        const newState = !isPanelOpen;
+        setIsPanelOpen(newState);
+        // Track shortcuts toggle interaction
+        if (onMathKeyboardInteraction) {
+            onMathKeyboardInteraction("shortcuts_toggle", {
+                action: newState ? "open" : "close",
+            });
+        }
+    }, [isPanelOpen, onMathKeyboardInteraction]);
+    (0, react_1.useEffect)(() => {
+        if (firstPanelRef.current) {
+            const height = firstPanelRef.current.offsetHeight;
+            setPanelHeight(height);
+        }
+    }, [latexValue]);
+    // Dynamic import of mathlive
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== "undefined") {
+            Promise.resolve().then(() => __importStar(require("mathlive"))).then((mathliveModule) => {
+                mathliveRef.current = mathliveModule;
+            })
+                .catch((err) => {
+                console.error("Error importing mathlive:", err);
+            });
+        }
+    }, []);
+    // Remove MathLive keyboards
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || typeof window === "undefined")
+            return;
+        if (!mathliveRef.current)
+            return;
+        const removeKeyboards = () => {
+            const keyboards = document.querySelectorAll(".ML__keyboard, .MLK__keyboard");
+            keyboards.forEach((keyboard) => {
+                if (keyboard && keyboard.parentNode) {
+                    keyboard.parentNode.removeChild(keyboard);
+                }
+            });
+            const mathlive = mathliveRef.current;
+            if (mathlive.mathVirtualKeyboard) {
+                try {
+                    mathlive.mathVirtualKeyboard.hide();
+                    mathlive.mathVirtualKeyboard.visible = false;
+                    mathlive.mathVirtualKeyboard.disabled = true;
+                    const keyboardProto = Object.getPrototypeOf(mathlive.mathVirtualKeyboard);
+                    if (keyboardProto) {
+                        const noop = () => { };
+                        keyboardProto.show = noop;
+                        keyboardProto.hide = noop;
+                        keyboardProto.toggle = noop;
+                    }
+                }
+                catch (e) {
+                    // Error disabling global keyboard
+                }
+            }
+        };
+        removeKeyboards();
+        const intervalId = setInterval(removeKeyboards, 100);
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [isOpen, mathliveRef.current]);
+    const handleClose = (0, react_1.useCallback)((e) => {
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        if (mathfieldRef.current) {
+            mathfieldRef.current.blur();
+            if (document.activeElement) {
+                document.activeElement.blur();
+            }
+        }
+        // Track modal close action
+        if (onMathModalAction) {
+            onMathModalAction("close", latexValue);
+        }
+        setIsPanelOpen(false);
+        setTimeout(() => {
+            onClose();
+        }, 10);
+    }, [onClose, onMathModalAction, latexValue]);
+    // Setup MathLive field
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || typeof window === "undefined")
+            return;
+        if (!mathliveRef.current)
+            return;
+        setLatexValue(initialLatex);
+        const setupMathField = () => {
+            try {
+                const container = document.getElementById("mathfield-container-SME");
+                if (container) {
+                    container.innerHTML = "";
+                    const wrapperDiv = document.createElement("div");
+                    wrapperDiv.style.width = "100%";
+                    wrapperDiv.style.maxWidth = "100%";
+                    wrapperDiv.style.minHeight = "48px";
+                    wrapperDiv.style.overflowX = "auto";
+                    wrapperDiv.style.boxSizing = "border-box";
+                    wrapperDiv.onpaste = (e) => e.preventDefault();
+                    wrapperDiv.oncontextmenu = (e) => e.preventDefault();
+                    container.appendChild(wrapperDiv);
+                    const mathfield = document.createElement("math-field");
+                    mathfield.style.cssText = `
+            display: block !important;
+            width: 100% !important;
+            min-height: 48px !important;
+            padding: 8px !important;
+            font-size: 20px !important;
+            background: white !important;
+            border: none !important;
+            outline: none !important;
+            --background: white;
+            --text-color: #000000;
+            --selection-background-color: rgba(95, 77, 199, 0.3);
+            --selection-color: #000000;
+            --caret-color: #000000;
+            --primary: #000000;
+            --secondary: #000000;
+          `;
+                    mathfield.setAttribute("default-mode", "math");
+                    mathfield.setAttribute("smart-fence", "true");
+                    mathfield.setAttribute("smart-superscript", "true");
+                    mathfield.setAttribute("virtual-keyboard-mode", "off");
+                    mathfield.setAttribute("virtual-keyboard", "none");
+                    mathfield.setAttribute("virtual-keyboards", "off");
+                    mathfield.setAttribute("keypress-vibration", "off");
+                    mathfield.setAttribute("virtual-keyboard-theme", "none");
+                    mathfield.setAttribute("no-auto-complete", "true");
+                    mathfield.setAttribute("popover-policy", "off");
+                    mathfield.setAttribute("menu", "true");
+                    mathfield.onpaste = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return false;
+                    };
+                    mathfield.oncontextmenu = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return false;
+                    };
+                    if (mathfield.constructor && mathfield.constructor.prototype) {
+                        try {
+                            const proto = Object.getPrototypeOf(mathfield);
+                            if (proto) {
+                                const noop = () => { };
+                                mathfield.showVirtualKeyboard = noop;
+                                mathfield.hideVirtualKeyboard = noop;
+                                mathfield.toggleVirtualKeyboard = noop;
+                                if (proto.showVirtualKeyboard)
+                                    proto.showVirtualKeyboard = noop;
+                                if (proto.hideVirtualKeyboard)
+                                    proto.hideVirtualKeyboard = noop;
+                                if (proto.toggleVirtualKeyboard)
+                                    proto.toggleVirtualKeyboard = noop;
+                            }
+                        }
+                        catch (e) {
+                            // Could not override keyboard methods
+                        }
+                    }
+                    mathfield.addEventListener("input", () => {
+                        // Get the current value - simplified approach
+                        const mathfieldMode = mathfield.mode;
+                        const currentValue = mathfieldMode === "latex"
+                            ? mathfield.text || mathfield.latex || mathfield.value || ""
+                            : mathfield.value || "";
+                        setLatexValue(currentValue);
+                        processAutocomplete(currentValue, mathfieldMode, mathfield);
+                    });
+                    // Extract autocomplete processing to a separate function
+                    const processAutocomplete = (currentValue, mathfieldMode, mathfield) => {
+                        if (!currentValue) {
+                            setShowAutocomplete(false);
+                            setSuggestions([]);
+                            setSelectedSuggestionIndex(0);
+                            return;
+                        }
+                        // Get the cursor position and text before cursor
+                        const cursorPosition = mathfieldMode === "latex"
+                            ? currentValue.length
+                            : mathfield.selectionEnd || currentValue.length;
+                        const textBeforeCursor = currentValue.slice(0, cursorPosition);
+                        // Look for the last word/command being typed
+                        const lastCommandMatch = textBeforeCursor.match(/(?:^|[\s\+\-\=\(\)\[\]\{\}\,])([\\]\w*|[a-zA-Z]\w*)$/) || textBeforeCursor.match(/([\\]\w*|[a-zA-Z]\w*)$/);
+                        if (lastCommandMatch) {
+                            const inputText = lastCommandMatch[1];
+                            const matches = findMatchingShortcuts(inputText);
+                            if (matches.length > 0) {
+                                setSuggestions(matches);
+                                setAutocompleteValue(inputText);
+                                setShowAutocomplete(true);
+                                setSelectedSuggestionIndex(0);
+                                return;
+                            }
+                        }
+                        setShowAutocomplete(false);
+                    };
+                    // Also try beforeinput event to catch LaTeX typing
+                    mathfield.addEventListener("beforeinput", () => {
+                        // Event handler for beforeinput - can be used for debugging if needed
+                    });
+                    mathfield.addEventListener("paste", (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        e.stopImmediatePropagation();
+                    }, true);
+                    mathfield.addEventListener("contextmenu", (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        e.stopImmediatePropagation();
+                    }, true);
+                    mathfield.addEventListener("beforeinput", (e) => {
+                        if (e.inputType === "insertFromPaste") {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }, true);
+                    // Handle Enter key press to move cursor to next token
+                    mathfield.addEventListener("keydown", (e) => {
+                        // Note: Autocomplete navigation is now handled in the AutocompleteDropdown component
+                        if (e.key === "Enter") {
+                            // Only handle Enter for mathfield if autocomplete is not visible
+                            if (!showAutocomplete || suggestions.length === 0) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleEnter();
+                            }
+                        }
+                    });
+                    // Handle blur to close autocomplete (only when not navigating dropdown)
+                    mathfield.addEventListener("blur", () => {
+                        // Use timeout to allow clicks on suggestions to register first
+                        setTimeout(() => {
+                            // Only close if the new active element is not part of the dropdown
+                            const activeElement = document.activeElement;
+                            const dropdownElement = document.querySelector('[data-dropdown="autocomplete"]');
+                            if (!dropdownElement ||
+                                !dropdownElement.contains(activeElement)) {
+                                setShowAutocomplete(false);
+                                setSuggestions([]);
+                                setSelectedSuggestionIndex(0);
+                            }
+                        }, 150);
+                    });
+                    let valueToSet = initialLatex || "";
+                    wrapperDiv.appendChild(mathfield);
+                    if (mathliveRef.current && mathliveRef.current.makeSharedOptions) {
+                        try {
+                            const options = mathliveRef.current.makeSharedOptions({
+                                menuItems: [
+                                    "insert-matrix",
+                                    "separator",
+                                    "insert",
+                                    "separator",
+                                    "mode",
+                                    "separator",
+                                    "font-style",
+                                    "separator",
+                                    "color",
+                                    "separator",
+                                    "evaluate",
+                                    "simplify",
+                                    "separator",
+                                    "cut",
+                                    "copy",
+                                ],
+                            });
+                            if (mathfield.setOptions) {
+                                mathfield.setOptions({
+                                    ...options,
+                                    virtualKeyboardMode: "off",
+                                    popoverPolicy: "off",
+                                    enablePopover: false,
+                                    // Add color configuration
+                                    colorMap: (name) => {
+                                        // Prevent any black backgrounds
+                                        if (name === "background" || name === "background-color") {
+                                            return "transparent";
+                                        }
+                                        return undefined; // Use default for other colors
+                                    },
+                                });
+                            }
+                        }
+                        catch (e) {
+                            // Error setting menu options
+                        }
+                    }
+                    setTimeout(() => {
+                        try {
+                            mathfield.value = valueToSet;
+                            mathfieldRef.current = mathfield;
+                            mathfield.focus();
+                            if (valueToSet.length > 0) {
+                                try {
+                                    mathfield.executeCommand(["moveToMathFieldEnd"]);
+                                }
+                                catch (e) {
+                                    // Couldn't move cursor to end
+                                }
+                            }
+                        }
+                        catch (err) {
+                            console.error("Error setting mathfield value:", err);
+                        }
+                    }, 50);
+                }
+            }
+            catch (error) {
+                console.error("Error setting up MathLive:", error);
+            }
+        };
+        setTimeout(setupMathField, 200);
+        return () => {
+            mathfieldRef.current = null;
+        };
+    }, [isOpen, initialLatex, mathliveRef.current]);
+    const handleKeyPress = (0, react_1.useCallback)((value) => {
+        if (mathfieldRef.current) {
+            const mf = mathfieldRef.current;
+            if (mf.mode === "latex") {
+                // Stay in LaTeX mode, insert as LaTeX text
+                mf.insert(value, { format: "latex", selectionMode: "after" });
+            }
+            else {
+                // Normal math mode insertion
+                mf.insert(value);
+            }
+            mf.focus();
+        }
+    }, []);
+    const handleClear = (0, react_1.useCallback)(() => {
+        if (mathfieldRef.current) {
+            mathfieldRef.current.value = "";
+            mathfieldRef.current.focus();
+            setLatexValue("");
+        }
+    }, []);
+    const handleBackslash = (value) => {
+        const mf = mathfieldRef.current;
+        if (!mf) {
+            console.warn("MathField not available");
+            return;
+        }
+        try {
+            mf.mode = "latex";
+            mf.insert(value, { format: "latex", selectionMode: "after" });
+            mf.focus();
+        }
+        catch (error) {
+            console.error("Error in handleBackslash:", error);
+            // Fallback to regular insertion
+            try {
+                mf.insert(value);
+                mf.focus();
+            }
+            catch (fallbackError) {
+                console.error("Fallback insertion also failed:", fallbackError);
+            }
+        }
+    };
+    const handleEnter = () => {
+        const mf = mathfieldRef.current;
+        if (!mf)
+            return;
+        // Simulate right arrow key behavior to move cursor right (exits nested structures naturally)
+        try {
+            mf.executeCommand("moveToNextChar");
+        }
+        catch (e) {
+            // Fallback: try alternative right movement command
+            try {
+                mf.executeCommand("moveRight");
+            }
+            catch (e2) {
+                // Could not move cursor right
+            }
+        }
+        mf.focus();
+    };
+    const handleBackspace = (0, react_1.useCallback)(() => {
+        if (mathfieldRef.current) {
+            try {
+                mathfieldRef.current.executeCommand("deleteBackward");
+            }
+            catch (e) {
+                // Command method failed, try event dispatch
+                try {
+                    const event = new KeyboardEvent("keydown", {
+                        key: "Backspace",
+                        code: "Backspace",
+                        keyCode: 8,
+                        which: 8,
+                        bubbles: true,
+                    });
+                    mathfieldRef.current.dispatchEvent(event);
+                }
+                catch (e2) {
+                    // Event method failed
+                }
+            }
+            // Track backspace interaction
+            if (onMathKeyboardInteraction) {
+                onMathKeyboardInteraction("backspace", {
+                    action: "delete",
+                });
+            }
+            setTimeout(() => {
+                if (mathfieldRef.current) {
+                    setLatexValue(mathfieldRef.current.value);
+                    mathfieldRef.current.focus();
+                }
+            }, 10);
+        }
+    }, [onMathKeyboardInteraction]);
+    const handleSave = (0, react_1.useCallback)((e) => {
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        if (mathfieldRef.current) {
+            mathfieldRef.current.blur();
+        }
+        // Track modal insert action
+        if (onMathModalAction) {
+            onMathModalAction("insert", latexValue);
+        }
+        setTimeout(() => {
+            onSave(latexValue);
+        }, 10);
+    }, [latexValue, onSave, onMathModalAction]);
+    // Consolidated autocomplete suggestion selection logic
+    const selectSuggestion = (0, react_1.useCallback)((suggestion) => {
+        if (!mathfieldRef.current)
+            return;
+        const mf = mathfieldRef.current;
+        const currentValue = mf.mode === "latex" ? mf.latex || mf.value : mf.value;
+        const cursorPosition = mf.mode === "latex"
+            ? currentValue.length
+            : mf.selectionEnd || currentValue.length;
+        const textBeforeCursor = currentValue.slice(0, cursorPosition);
+        // Find the last word/command to replace
+        const lastCommandMatch = textBeforeCursor.match(/(?:^|[\s\+\-\=\(\)\[\]\{\}\,])([\\]\w*|[a-zA-Z]\w*)$/);
+        if (lastCommandMatch) {
+            const startPos = lastCommandMatch.index +
+                (lastCommandMatch[0].length - lastCommandMatch[1].length);
+            const endPos = cursorPosition;
+            const newValue = currentValue.slice(0, startPos) +
+                suggestion.shortcut +
+                currentValue.slice(endPos);
+            // Update mathfield value
+            if (mf.mode === "latex") {
+                mf.latex = newValue;
+            }
+            else {
+                mf.value = newValue;
+            }
+            // Position cursor after the inserted text
+            const newCursorPos = startPos + suggestion.shortcut.length;
+            setTimeout(() => {
+                try {
+                    mf.position = newCursorPos;
+                }
+                catch (e) {
+                    // Could not set cursor position
+                }
+                mf.focus();
+            }, 10);
+            setLatexValue(newValue);
+        }
+        // Track autocomplete selection
+        if (onMathKeyboardInteraction) {
+            onMathKeyboardInteraction("autocomplete_select", {
+                shortcut: suggestion.shortcut,
+                description: suggestion.description,
+                result: suggestion.result,
+            });
+        }
+        // Hide autocomplete and refocus
+        setShowAutocomplete(false);
+        mf.focus();
+    }, [onMathKeyboardInteraction]);
+    // Handle autocomplete suggestion selection (wrapper for click events)
+    const handleSuggestionSelect = (0, react_1.useCallback)((suggestion) => {
+        selectSuggestion(suggestion);
+    }, [selectSuggestion]);
+    // Autocomplete Dropdown Component
+    const AutocompleteDropdown = () => {
+        const dropdownRef = (0, react_1.useRef)(null);
+        // Handle keyboard navigation for the dropdown
+        (0, react_1.useEffect)(() => {
+            const handleKeyDown = (e) => {
+                if (!showAutocomplete || suggestions.length === 0)
+                    return;
+                switch (e.key) {
+                    case "ArrowDown":
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setSelectedSuggestionIndex((prev) => prev < suggestions.length - 1 ? prev + 1 : 0);
+                        break;
+                    case "ArrowUp":
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setSelectedSuggestionIndex((prev) => prev > 0 ? prev - 1 : suggestions.length - 1);
+                        break;
+                    case "Enter":
+                        if (selectedSuggestionIndex >= 0 &&
+                            suggestions[selectedSuggestionIndex]) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            selectSuggestion(suggestions[selectedSuggestionIndex]);
+                        }
+                        break;
+                    case "Escape":
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setShowAutocomplete(false);
+                        break;
+                }
+            };
+            // Add global keydown listener when dropdown is visible with capture true to intercept before mathfield
+            if (showAutocomplete && suggestions.length > 0) {
+                document.addEventListener("keydown", handleKeyDown, { capture: true });
+                return () => {
+                    document.removeEventListener("keydown", handleKeyDown, {
+                        capture: true,
+                    });
+                };
+            }
+        }, [
+            showAutocomplete,
+            suggestions,
+            selectedSuggestionIndex,
+            selectSuggestion,
+        ]);
+        if (!showAutocomplete || suggestions.length === 0)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, "data-dropdown": "autocomplete", "data-testid": "keyboard-autocomplete-dropdown", position: "absolute", top: "100%", left: "0", right: "0", bg: "white", boxShadow: "lg", borderRadius: "md", border: "1px solid #E2E8F0", zIndex: "1000", maxHeight: "200px", overflowY: "auto", onMouseDown: (e) => {
+                // Prevent blur when clicking on dropdown
+                e.preventDefault();
+            }, children: suggestions.map((suggestion, index) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": `keyboard-autocomplete-suggestion-${index}`, ref: selectedSuggestionIndex === index
+                    ? (el) => {
+                        // Scroll selected item into view
+                        if (el) {
+                            el.scrollIntoView({
+                                block: "nearest",
+                                behavior: "smooth",
+                            });
+                        }
+                    }
+                    : null, p: 2, cursor: "pointer", bg: selectedSuggestionIndex === index ? "#EDF2F7" : "transparent", _hover: {
+                    bg: selectedSuggestionIndex === index ? "#E2E8F0" : "#F7FAFC",
+                }, _active: { bg: "#E2E8F0" }, onClick: (e) => {
+                    e.preventDefault();
+                    handleSuggestionSelect(suggestion);
+                }, align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.600", fontFamily: "mono", bg: "gray.50", px: 2, py: 1, borderRadius: "sm", border: "1px solid #E2E8F0", minW: "fit-content", children: suggestion.shortcut }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.700", flex: "1", isTruncated: true, children: suggestion.description })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", fontWeight: "bold", color: "purple.600", minW: "40px", textAlign: "center", flexShrink: 0, dangerouslySetInnerHTML: {
+                            __html: (() => {
+                                try {
+                                    return suggestion.result.includes("\\")
+                                        ? require("katex").renderToString(suggestion.result, {
+                                            throwOnError: false,
+                                        })
+                                        : suggestion.result;
+                                }
+                                catch (e) {
+                                    return suggestion.result;
+                                }
+                            })(),
+                        } })] }, index))) }));
+    };
+    if (typeof window === "undefined") {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { "data-testid": "keyboard-math-modal", isOpen: isOpen, onClose: handleClose, isCentered: true, closeOnEsc: false, closeOnOverlayClick: false, returnFocusOnClose: false, blockScrollOnMount: false, allowPinchZoom: true, motionPreset: "none", sx: {
+            "& .chakra-modal__overlay": {
+                background: "transparent !important",
+                pointerEvents: "none !important",
+            },
+            "& .chakra-modal__content-container": {
+                pointerEvents: "none !important",
+            },
+            "& .chakra-modal__content": {
+                pointerEvents: "auto !important",
+            },
+        }, children: [(0, jsx_runtime_1.jsx)("style", { children: mathModalStyles_1.mathModalStyles }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "data-testid": "keyboard-modal-content", position: "fixed", boxShadow: "dark-lg", sx: (0, mathModalStyles_1.getModalContentStylesNew)(isMobile, isPanelOpen), maxHeight: "80vh", overflowY: "auto", overflowX: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { ...mathModalStyles_1.desktopLayoutStylesNew, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ...mathModalStyles_1.layer1StylesNew, flex: isPanelOpen && !isMobile ? "1" : "1 1 100%", children: (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateRows: "auto 1fr auto", gap: 0, ref: firstPanelRef, w: "100%", maxW: "100%", minHeight: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 2, width: "100%", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { "data-testid": "keyboard-header", sx: mathModalStyles_1.headerStylesNew, children: "Maths expression" }), (0, jsx_runtime_1.jsx)(react_2.Image, { "data-testid": "keyboard-close-button", src: icons?.closeButton, alt: "Close", flexShrink: 0 })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { sx: {
+                                                ...mathModalStyles_1.contentWrapperStylesNew,
+                                                overflowX: "auto",
+                                                flex: "1 1 auto",
+                                                minHeight: 0, // Allows flex item to shrink below content size
+                                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: "mathfield-container-SME", "data-testid": "keyboard-mathfield-container", sx: mathModalStyles_1.mathFieldContainerStyles }), (0, jsx_runtime_1.jsx)(AutocompleteDropdown, {})] }), !isMobile && ((0, jsx_runtime_1.jsx)(react_2.HStack, { w: "100%", justifyContent: "flex-end", mb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": "keyboard-shortcuts-toggle", ...mathModalStyles_1.shortcutSection, onClick: togglePanel, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", children: " Shortcuts" }), (0, jsx_runtime_1.jsx)(react_2.Image, { src: icons?.shortcutIcon, alt: "Shortcut Icon" })] }) })), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", overflowY: "auto", maxWidth: "100%", w: "100%", maxHeight: "300px", children: (0, jsx_runtime_1.jsx)(MathKeyboardSME_1.default, { onKeyPress: handleKeyPress, onClear: handleClear, onBackspace: handleBackspace, onBackslash: handleBackslash, keyboardProfile: keyboardProfile, showMoreSymbols: showMoreSymbols, isMobile: isMobile, onMathKeyPress: onMathKeyPress, onMathKeyboardInteraction: onMathKeyboardInteraction, icons: icons }) }), (0, jsx_runtime_1.jsx)(react_2.Flex, { w: "100%", justifyContent: "flex-end", mb: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "keyboard-backspace-button", h: "36px", w: "60px", display: "flex", justifyContent: "center", alignItems: "center", border: "1px solid", borderColor: "#1D287A29", borderRadius: "md", bg: "#F5F5F5", cursor: "pointer", onClick: handleBackspace, _hover: { bg: "gray.100", borderColor: "gray.300" }, _active: { bg: "gray.200", transform: "scale(0.98)" }, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: "#5F4DC7", fontWeight: "500", children: "\u232B" }) }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: mathModalStyles_1.footerStylesNew, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(CustomButton_1.default, { label: showMoreSymbols ? "Hide" : "More symbols", variant: "cancel", customStyles: {
+                                                            width: "86px",
+                                                            height: "32px",
+                                                            fontSize: "10px",
+                                                            fontWeight: "500",
+                                                            borderRadius: "8px",
+                                                            border: "1px solid #dfdafe",
+                                                            color: "#5f4dc7",
+                                                            bg: "white",
+                                                        }, handleClick: () => {
+                                                            setShowMoreSymbols(!showMoreSymbols);
+                                                        } }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: "6px", children: [(0, jsx_runtime_1.jsx)(CustomButton_1.default, { label: "Cancel", variant: "cancel", customStyles: {
+                                                                    width: "86px",
+                                                                    height: "32px",
+                                                                    fontSize: "10px",
+                                                                    fontWeight: "700",
+                                                                    borderRadius: "8px",
+                                                                    border: "1px solid #dfdafe",
+                                                                    color: "#5f4dc7",
+                                                                    bg: "white",
+                                                                }, handleClick: (e) => {
+                                                                    // Track cancel action before closing
+                                                                    if (onMathModalAction) {
+                                                                        onMathModalAction("cancel", latexValue);
+                                                                    }
+                                                                    handleClose(e);
+                                                                } }), (0, jsx_runtime_1.jsx)(CustomButton_1.default, { label: "Insert", customStyles: {
+                                                                    width: "86px",
+                                                                    height: "32px",
+                                                                    fontSize: "10px",
+                                                                    fontWeight: "600",
+                                                                    borderRadius: "8px",
+                                                                    border: "1px solid #f4f2ff",
+                                                                    color: "white",
+                                                                    bg: "#5f4dc7",
+                                                                }, handleClick: handleSave })] })] }) })] }) }), isPanelOpen && !isMobile && ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "keyboard-shortcuts-panel", ...mathModalStyles_1.layer2StylesNew, flex: "1", h: `${panelHeight}px`, overflowY: "auto", children: (0, jsx_runtime_1.jsx)(ShortcutsSME_1.default, { height: panelHeight, onClose: () => {
+                                        setIsPanelOpen(false);
+                                    } }) }))] }), isPanelOpen && isMobile && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "keyboard-mobile-backdrop", ...mathModalStyles_1.mobileBackdropStyles, onClick: () => setIsPanelOpen(false) }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "keyboard-mobile-shortcuts-panel", position: "absolute", top: "0", left: "0", right: "0", bottom: "0", zIndex: "1000", children: (0, jsx_runtime_1.jsx)(ShortcutsSME_1.default, { height: panelHeight, onClose: () => setIsPanelOpen(false) }) })] }))] })] }));
+};
+exports.default = MathModalSME;
+//# sourceMappingURL=MathModalSME.js.map