questionlayoutrefactoring 0.1.2 → 0.1.13

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

@@ -39,6 +39,7 @@ const slate_conversions_1 = require("../utils/slate-conversions");
 const common_utils_1 = require("../../../../utils/common-utils");
 const EditorStyles_1 = require("./EditorStyles");
 const LearningPathUtils_1 = require("../../../../utils/LearningPathUtils");
+const EditorComponent_1 = require("./EditorComponent");
 const InvalidSession_1 = __importDefault(require("../../../Molecules/InvalidSession/InvalidSession"));
 // Theme customization without placeholder styling
 const theme = (0, react_2.extendTheme)({
@@ -61,7 +62,7 @@ const theme = (0, react_2.extendTheme)({
     },
 });
 const TextEditor = (props) => {
-    const { data, handleChange, onSubmit, icons, isDisabled = false, disablePaste = false, addImageRender = undefined, height = undefined, handleOpenMath, handleCloseMath, showBottomBar = true, isMobile, tutorMode = true, taskType, handleClick: propHandleClick, isDescAnsQues = false, isRevision = false, } = props;
+    const { data, handleChange, onSubmit, icons, isDisabled = false, disablePaste = false, addImageRender = undefined, height = undefined, handleOpenMath, handleCloseMath, showBottomBar = true, isMobile, tutorMode = true, taskType, isRevision = false, isDescAnsQues = false, handleClick: propHandleClick, showerrorpopup, } = props;
     // Initialize the Slate editor with our custom plugins
     const editor = (0, react_1.useMemo)(() => (0, slate_plugins_1.withMath)((0, slate_history_1.withHistory)((0, slate_react_1.withReact)((0, slate_1.createEditor)()))), []);
     const [value, setValue] = (0, react_1.useState)((0, slate_conversions_1.textToSlate)(data));
@@ -69,11 +70,19 @@ const TextEditor = (props) => {
     const [currentLatex, setCurrentLatex] = (0, react_1.useState)("");
     const [editingPath, setEditingPath] = (0, react_1.useState)(null);
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [tabFocusedElement, setTabFocusedElement] = (0, react_1.useState)(null);
+    const formulaIconRef = (0, react_1.useRef)(null);
+    const submitButtonRef = (0, react_1.useRef)(null);
+    const addImageNavRef = (0, react_1.useRef)({ focusFirst: null });
     const editorRef = (0, react_1.useRef)(null);
+    const isDisabledRevision = isDisabled && isRevision;
+    const isInitialMount = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
-        setValue((0, slate_conversions_1.textToSlate)(data));
-        if ((0, common_utils_1.isEmptyOrNull)(data)) {
+        if (isInitialMount.current) {
+            setValue((0, slate_conversions_1.textToSlate)(data));
+            isInitialMount.current = false;
+        }
+        else if ((0, common_utils_1.isEmptyOrNull)(data) && !(0, common_utils_1.isEmptyOrNull)((0, slate_conversions_1.slateToText)(value))) {
             handleClear();
         }
     }, [data]);
@@ -81,17 +90,18 @@ const TextEditor = (props) => {
         handleOpenMath && openMathEditor();
     }, [handleOpenMath]);
     // Focus the editor when it first mounts
-    // useEffect(() => {
-    //   if (!isDisabled) {
-    //     setTimeout(() => {
-    //       try {
-    //         ReactEditor.focus(editor);
-    //       } catch (error) {
-    //         console.error("Error focusing editor on mount:", error);
-    //       }
-    //     }, 100);
-    //   }
-    // }, [editor, isDisabled]);
+    (0, react_1.useEffect)(() => {
+        if (!isDisabled) {
+            setTimeout(() => {
+                try {
+                    slate_react_1.ReactEditor.focus(editor);
+                }
+                catch (error) {
+                    console.error("Error focusing editor on mount:", error);
+                }
+            }, 100);
+        }
+    }, [editor, isDisabled]);
     // Function to open the math editor modal for new entries
     const openMathEditor = (0, react_1.useCallback)(() => {
         const { selection } = editor;
@@ -235,7 +245,7 @@ const TextEditor = (props) => {
             case "math":
                 return ((0, jsx_runtime_1.jsx)(MathElement_1.default, { "data-testid": "math-element", ...props, onEdit: () => editMath(element) }));
             default:
-                return ((0, jsx_runtime_1.jsx)(react_2.chakra.p, { "data-testid": "text-element", ...attributes, children: children }));
+                return ((0, jsx_runtime_1.jsx)(react_2.Text, { "data-testid": "text-element", ...attributes, children: children }));
         }
     }, [editMath]);
     // Handle click on editable area
@@ -249,368 +259,191 @@ const TextEditor = (props) => {
             }
         }
     }, [editor]);
-    // Enhanced clipboard handlers using Navigator Clipboard API
-    const handlePaste = async (event) => {
+    const handlePaste = (0, react_1.useCallback)((event) => {
         if (disablePaste) {
             event.preventDefault();
         }
-    };
-    const handleCopy = async (event) => {
-        event.preventDefault();
-        // Clear clipboard to prevent copying
-        try {
-            if (navigator.clipboard && navigator.clipboard.writeText) {
-                await navigator.clipboard.writeText("");
-            }
-        }
-        catch (error) {
-            console.error("Could not clear clipboard:", error);
-        }
-    };
-    const handleCut = async (event) => {
+    }, [disablePaste]);
+    const handleDragStart = (0, react_1.useCallback)((event) => {
         event.preventDefault();
-        // Clear clipboard to prevent cutting
-        try {
-            if (navigator.clipboard && navigator.clipboard.writeText) {
-                await navigator.clipboard.writeText("");
-            }
-        }
-        catch (error) {
-            console.error("Could not clear clipboard:", error);
-        }
-    };
-    // Enhanced drag and drop handlers
-    const handleDragStart = (event) => {
-        event.preventDefault();
-    };
-    const handleDrop = (event) => {
-        event.preventDefault();
-    };
-    const handleDragOver = (event) => {
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((event) => {
         event.preventDefault();
-    };
-    const handleDragEnter = (event) => {
+    }, []);
+    const handleDragOver = (0, react_1.useCallback)((event) => {
         event.preventDefault();
-    };
-    const handleDragLeave = (event) => {
+    }, []);
+    const handleDragEnter = (0, react_1.useCallback)((event) => {
         event.preventDefault();
-    };
-    const handleFocus = (0, react_1.useCallback)(() => {
-        setIsFocused(true);
     }, []);
-    const handleBlur = (0, react_1.useCallback)(() => {
-        setIsFocused(false);
+    const handleDragLeave = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
     }, []);
-    const isDisabledRevision = isDisabled && isRevision;
-    // Handle clicks outside to clear focus
-    const handleContainerBlur = (0, react_1.useCallback)((event) => {
-        // Check if the click is outside the editor container
-        if (editorRef.current && !editorRef.current.contains(event.relatedTarget)) {
-            setIsFocused(false);
+    const handleTabNavigation = (0, react_1.useCallback)((event) => {
+        if (event.key !== "Tab" || event.shiftKey)
+            return; // Only handle forward Tab
+        // Define tab order elements based on what's available
+        const tabElements = [];
+        if (icons?.formula && !isDisabled) {
+            tabElements.push({ name: "formula", ref: formulaIconRef });
         }
-    }, []);
-    // Handle hover events for the entire editor area (disabled on mobile)
-    const handleEditorMouseEnter = (0, react_1.useCallback)(() => {
-        if (!isMobile) {
-            setIsHovered(true);
+        // Add placeholder for addImageRender - it will handle its own internal navigation
+        // but we need to know it exists for proper tab order coordination
+        if (addImageRender && !isDisabled) {
+            tabElements.push({ name: "addImageRender", ref: null });
+        }
+        if (icons?.submit && !isDisabled && !(0, common_utils_1.isEmptyOrNull)(data?.trim())) {
+            tabElements.push({ name: "submit", ref: submitButtonRef });
+        }
+        if (tabElements.length === 0)
+            return; // No focusable elements, let browser handle
+        const currentIndex = tabElements.findIndex((el) => el.name === tabFocusedElement);
+        let nextIndex;
+        if (currentIndex === -1) {
+            // Not currently focused on any element, start from first
+            event.preventDefault();
+            nextIndex = 0;
+        }
+        else if (currentIndex === tabElements.length - 1) {
+            // At last element, tab out (clear focus and let browser handle)
+            setTabFocusedElement(null);
+            return; // Don't preventDefault, let browser handle tab out
         }
-    }, [isMobile]);
-    const handleEditorMouseLeave = (0, react_1.useCallback)(() => {
-        if (!isMobile) {
-            setIsHovered(false);
-            setIsFocused(false);
+        else {
+            // Go to next element
+            event.preventDefault();
+            nextIndex = currentIndex + 1;
         }
-    }, [isMobile]);
-    // Show TopSection when either focused or hovered (but NEVER on mobile)
-    const shouldShowTopSection = (0, react_1.useMemo)(() => !isMobile &&
-        tutorMode &&
-        (isFocused || isHovered) &&
-        !isRevision &&
-        showBottomBar, [isMobile, tutorMode, isFocused, isHovered, showBottomBar]);
-    const memoizedIcons = (0, react_1.useMemo)(() => icons, [icons?.formula, icons?.submit, icons?.shift, icons?.info]);
-    const shiftIconStyle = (0, react_1.useMemo)(() => ({
-        h: "16px",
-        w: "16px",
-        cursor: "not-allowed",
-    }), []);
-    const topSectionBgColor = (0, react_1.useMemo)(() => tutorMode || (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)
-        ? "white"
-        : "#F8F3D8", [tutorMode, taskType]);
-    // Use effect to handle clicks outside the editor
-    // useEffect(() => {
-    //     const handleClickOutside = (event) => {
-    //       if (editorRef.current && !editorRef.current.contains(event.target)) {
-    //            setIsFocused(false);
-    //         }
-    //     };
-    //     document.addEventListener('mousedown', handleClickOutside);
-    //     return () => {
-    //         document.removeEventListener('mousedown', handleClickOutside);
-    //     };
-    // }, []);
+        const nextElement = tabElements[nextIndex];
+        // Handle addImageRender specially - it manages its own internal focus
+        if (nextElement.name === "addImageRender") {
+            setTabFocusedElement("addImageRender");
+            // Coming from formula, focus first image element
+            if (addImageNavRef.current.focusFirst) {
+                addImageNavRef.current.focusFirst();
+            }
+            return;
+        }
+        // For formula and submit elements, use their refs
+        setTabFocusedElement(nextElement.name);
+        nextElement.ref.current?.focus();
+    }, [tabFocusedElement, icons, isDisabled, data, addImageRender]);
+    // Helper function to check if current focus is within addImageRender elements
+    const isCurrentlyInAddImageRender = (0, react_1.useCallback)(() => {
+        if (!addImageRender)
+            return false;
+        const focusedElement = document.activeElement;
+        if (!focusedElement || !editorRef.current)
+            return false;
+        // Check if focused element is within the editor but not formula or submit icons
+        const isInEditor = editorRef.current.contains(focusedElement);
+        const isFormulaIcon = focusedElement === formulaIconRef.current;
+        const isSubmitIcon = focusedElement === submitButtonRef.current;
+        const isEditorItself = focusedElement === editorRef.current;
+        return isInEditor && !isFormulaIcon && !isSubmitIcon && !isEditorItself;
+    }, [addImageRender]);
     // Alternative onKeyDown handler approach for the Editable component
-    const handleKeyDown = (0, react_1.useCallback)(async (event) => {
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
         if (isDisabled || !onSubmit)
             return;
-        // Block common clipboard keyboard shortcuts
         if (disablePaste &&
             (event.ctrlKey || event.metaKey) &&
             (event.key === "v" || event.key === "c" || event.key === "x")) {
             event.preventDefault();
-            // Clear clipboard when shortcuts are attempted
-            try {
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                    await navigator.clipboard.writeText("");
-                }
-            }
-            catch (error) {
-                console.log("Could not clear clipboard:", error);
-            }
-            console.log("Clipboard keyboard shortcut disabled");
+        }
+        if (event.key === "Tab" && !isCurrentlyInAddImageRender()) {
+            handleTabNavigation(event);
             return;
         }
         if (event.key === "Enter") {
-            if (isMobile) {
-                return; // Let the default behavior happen (new line)
-            }
-            if (event.shiftKey) {
-                return; // Let the default behavior happen (new line)
-            }
-            // Regular Enter should submit
-            event.preventDefault();
-            const currentText = (0, slate_conversions_1.slateToText)(value);
-            if (!(0, common_utils_1.isEmptyOrNull)(currentText?.trim()) && showBottomBar == true) {
-                handleSubmit();
-                handleChange && handleChange("");
-            }
+            // if (isMobile) {
+            return; // Let the default behavior happen (new line)
+            // }
+            // if (event.shiftKey) {
+            //   return; // Let the default behavior happen (new line)
+            // }
+            // // Regular Enter should submit
+            // event.preventDefault();
+            // const currentText = slateToText(value);
+            // if (!isEmptyOrNull(currentText?.trim()) && showBottomBar == true) {
+            //   handleSubmit();
+            //   handleChange && handleChange("");
+            // }
         }
-    }, [value, handleSubmit, handleChange, isDisabled]);
-    const isDataEmpty = (0, react_1.useMemo)(() => (0, common_utils_1.isEmptyOrNull)(data), [data]);
-    // Mobile bottom icons section
-    const MobileBottomIcons = (0, react_1.useMemo)(() => {
-        if (!isMobile || !tutorMode)
-            return null;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { sx: {
-                        height: "1px",
-                        backgroundColor: "#E0DBDB",
-                        width: "100%",
-                        mt: 3,
-                        mb: 3,
-                    } }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", alignItems: "center", width: "100%", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 3, children: (tutorMode ||
-                                (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedIcons?.formula && ((0, jsx_runtime_1.jsx)(react_2.Image, { sx: {
-                                            h: "28px",
-                                            w: "28px",
-                                            cursor: isDisabled ? "not-allowed" : "pointer",
-                                        }, src: memoizedIcons?.formula, alt: "Add formula", onClick: () => {
-                                            !isDisabled && openMathEditor();
-                                        } })), addImageRender && addImageRender()] })) }), memoizedIcons?.submit && ((0, jsx_runtime_1.jsx)(react_2.Image, { "data-testid": "submit-icon", sx: {
-                                h: "48px",
-                                w: "48px",
-                                cursor: isDataEmpty ? "not-allowed" : "pointer",
-                                opacity: isDataEmpty ? 0.6 : 1,
-                            }, src: memoizedIcons?.submit, alt: "submit", onClick: () => {
-                                if (!(0, common_utils_1.isEmptyOrNull)(data?.trim())) {
-                                    handleSubmit();
-                                    handleChange && handleChange("");
-                                }
-                            } }))] })] }));
     }, [
+        value,
+        handleSubmit,
+        handleChange,
+        isDisabled,
+        handleTabNavigation,
+        isCurrentlyInAddImageRender,
+    ]);
+    const editorBoxProps = (0, react_1.useMemo)(() => ({
+        editorRef,
+        handleClick,
+        height,
+        handleKeyDown,
+        handlePaste,
+        handleDrop,
+        handleDragOver,
+        handleDragEnter,
+        handleDragLeave,
+        handleDragStart,
+        isDisabled,
+        showBottomBar,
+        isRevision,
+        renderElement,
         isMobile,
+        isDescAnsQues,
+    }), [
+        editorRef,
+        handleClick,
+        height,
+        handleKeyDown,
+        handlePaste,
+        handleDrop,
+        handleDragOver,
+        handleDragEnter,
+        handleDragLeave,
+        handleDragStart,
+        isDisabled,
+        showBottomBar,
+        isRevision,
+        renderElement,
+        isMobile,
+        isDescAnsQues,
+    ]);
+    const iconProps = {
         tutorMode,
         taskType,
-        memoizedIcons,
+        icons,
         isDisabled,
-        isDataEmpty,
-        addImageRender,
         openMathEditor,
-        handleChange,
+        addImageRender,
         data,
-    ]);
-    const TopSection = (0, react_1.useMemo)(() => {
-        // Don't show top section on mobile at all
-        if (isMobile)
-            return null;
-        return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", left: "0", right: "0", zIndex: 10, overflow: "hidden", sx: {
-                height: shouldShowTopSection ? "auto" : "0px",
-                opacity: shouldShowTopSection ? 1 : 0,
-                // Add smooth transitions with delay
-                transition: shouldShowTopSection
-                    ? "opacity 0.2s ease-in-out 0.1s, height 0.3s ease-in-out"
-                    : "opacity 0.15s ease-in-out, height 0.25s ease-in-out 0.1s",
-            }, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { sx: {
-                    transform: shouldShowTopSection
-                        ? "translateY(0)"
-                        : "translateY(-100%)",
-                    // Smooth slide transition with delay
-                    transition: shouldShowTopSection
-                        ? "transform 0.3s ease-out 0.15s"
-                        : "transform 0.2s ease-in",
-                    backgroundColor: tutorMode || (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)
+        handleSubmit,
+        handleChange,
+        formulaIconRef,
+        submitButtonRef,
+        addImageNavRef,
+        tabFocusedElement,
+        setTabFocusedElement,
+        handleTabNavigation,
+    };
+    const StackWrapper = isMobile ? react_2.VStack : react_2.HStack;
+    const IconsComponent = EditorComponent_1.Icons;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showerrorpopup && (0, jsx_runtime_1.jsx)(InvalidSession_1.default, { handleClick: propHandleClick }), (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "studenteditor", w: "100%", borderRadius: "16px", p: isMobile ? "8px" : "16px", border: showBottomBar ? "1px solid #BFBEDC" : "none", pointerEvents: isDisabled ? "none" : "auto", opacity: tutorMode === false ? 1 : isDisabled ? 0.5 : 1, bg: tutorMode || (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)
                         ? "white"
-                        : "#F8F3D8",
-                    borderRadius: "12px 12px 0 0",
-                    px: 4,
-                    pt: 3,
-                }, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "space-between", position: "relative", userSelect: "none", pb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ml: 2, display: "flex", children: !isDisabled && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", sx: EditorStyles_1.styles.multiLineText, children: "Press Enter to send, Shift+Enter for new line" })) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: "0px", display: ["none", "flex"], mr: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", sx: EditorStyles_1.styles.multiLineBox, children: (0, jsx_runtime_1.jsx)(react_2.Image, { sx: {
-                                                h: "16px",
-                                                w: "16px",
-                                                cursor: "not-allowed",
-                                            }, src: icons?.shift, alt: "info" }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", ml: 2, mr: 2, children: "+" }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", sx: EditorStyles_1.styles.multiLineBox, children: "Enter" })] })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: {
-                            height: "1px",
-                            backgroundColor: "#E0DBDB",
-                            width: "100%",
-                            opacity: shouldShowTopSection ? 1 : 0,
-                            // Smooth line transition
-                            transition: "opacity 0.2s ease-in-out",
-                        } })] }) }));
-    }, [
-        isMobile,
-        shouldShowTopSection,
-        isDisabled,
-        icons?.shift,
-        EditorStyles_1.styles.multiLineText,
-        EditorStyles_1.styles.multiLineBox,
-    ]);
-    const LearningCreditsWarning = () => ((0, jsx_runtime_1.jsxs)(react_2.HStack, { sx: { opacity: "1", zIndex: 2, width: "100%" }, spacing: 3, justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, children: [icons?.info && ((0, jsx_runtime_1.jsx)(react_2.Image, { sx: {
-                            h: "28px",
-                            w: "28px",
-                            cursor: "not-allowed",
-                            color: "#D0392E",
-                            transform: "rotate(180deg)",
-                        }, src: icons?.info, alt: "info" })), (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "div", sx: {
-                            ...EditorStyles_1.styles.multiLineText,
-                            ...EditorStyles_1.styles.multiLineRed,
-                        }, children: ["Since you do not have enough", " ", (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", sx: { ...EditorStyles_1.styles.multiLineBold }, children: "Learning Credits Vin wont be able to help you." })] })] }), icons?.submit && ((0, jsx_runtime_1.jsx)(react_2.Image, { "data-testid": "submit-icon", sx: {
-                    h: "48px",
-                    w: "48px",
-                    zIndex: 2,
-                    cursor: (0, common_utils_1.isEmptyOrNull)(data) ? "not-allowed" : "pointer",
-                    opacity: (0, common_utils_1.isEmptyOrNull)(data) ? 0.6 : 1,
-                }, src: icons?.submit, alt: "submit", onClick: () => {
-                    if (!(0, common_utils_1.isEmptyOrNull)(data?.trim())) {
-                        handleSubmit();
-                        handleChange && handleChange("");
-                    }
-                } }))] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props?.showerrorpopup && ((0, jsx_runtime_1.jsx)(InvalidSession_1.default, { handleClick: propHandleClick })), (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "studenteditor", w: "100%", borderRadius: "8px", p: "24px", border: showBottomBar ? "1px solid var(--Text-100, #BFBEDC)" : "none", pointerEvents: isDisabled ? "none" : "auto", opacity: tutorMode === false ? 1 : isDisabled ? 0.5 : 1, bg: isDisabledRevision
-                        ? "transparent"
-                        : tutorMode || (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)
-                            ? "white"
-                            : "#F8F3D8", onMouseEnter: handleEditorMouseEnter, onMouseLeave: handleEditorMouseLeave, position: "relative", children: [TopSection, tutorMode && ((0, jsx_runtime_1.jsx)(slate_react_1.Slate, { editor: editor, initialValue: value, onChange: (newValue) => {
+                        : "#F8F3D8", children: [(tutorMode || (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)) && ((0, jsx_runtime_1.jsx)(slate_react_1.Slate, { editor: editor, initialValue: value, onChange: (newValue) => {
                                 setValue(newValue);
                                 handleChange && handleChange((0, slate_conversions_1.slateToText)(newValue));
-                            }, children: isMobile ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 0, alignItems: "stretch", width: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ref: editorRef, onClick: handleClick, sx: {
-                                            position: "relative",
-                                            minH: "0px",
-                                            maxH: height ?? "200px",
-                                            overflow: "auto",
-                                            cursor: "text",
+                            }, children: (0, jsx_runtime_1.jsxs)(StackWrapper, { spacing: 0, alignItems: isMobile ? "stretch" : "flex-end", width: "100%", children: [(0, jsx_runtime_1.jsx)(EditorComponent_1.EditorBox, { ...editorBoxProps }), isMobile && ((0, jsx_runtime_1.jsx)(react_2.Box, { sx: {
+                                            height: "1px",
+                                            backgroundColor: "#E0DBDB",
                                             width: "100%",
-                                        }, children: (0, jsx_runtime_1.jsx)(react_2.chakra.div, { sx: {
-                                                "[data-slate-placeholder]": {
-                                                    display: isDisabled || isFocused
-                                                        ? "none !important"
-                                                        : "inline-block !important",
-                                                    color: "black !important",
-                                                    pointerEvents: "none !important",
-                                                    fontWeight: "400 !important",
-                                                    fontSize: "16px !important",
-                                                    top: "0px !important",
-                                                    left: "4px !important",
-                                                    position: "absolute !important",
-                                                    // width: "calc(100% - 8px) !important",
-                                                    lineHeight: "1.5 !important",
-                                                    whiteSpace: "pre-wrap !important",
-                                                },
-                                            }, children: (0, jsx_runtime_1.jsx)(slate_react_1.Editable, { "data-testid": "input-editor", renderElement: renderElement, placeholder: showBottomBar
-                                                    ? isRevision
-                                                        ? "Write your answer first — that's where real learning happens."
-                                                        : "Ask Vin any question, use voice, or upload your work!"
-                                                    : "", readOnly: isDisabled, onKeyDown: handleKeyDown, onPaste: handlePaste, onCopy: handleCopy, onCut: handleCut, onFocus: handleFocus, onBlur: handleBlur, onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragStart: handleDragStart, draggable: false, style: {
-                                                    position: "relative",
-                                                    // outline: "none",
-                                                    minHeight: "50px",
-                                                    zIndex: 1,
-                                                    cursor: isDisabled ? "not-allowed" : "text",
-                                                    userSelect: isDisabled ? "none" : "auto",
-                                                    pointerEvents: isDisabled ? "none" : "auto",
-                                                    paddingLeft: "4px",
-                                                    overflow: "auto",
-                                                    "&::-webkit-scrollbar": {
-                                                        width: "0px",
-                                                        height: "0px",
-                                                    },
-                                                    scrollbarWidth: "none",
-                                                } }) }) }), isMobile && MobileBottomIcons] })) : (
-                            /* Desktop Layout (original) */
-                            (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 0, alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ref: editorRef, onClick: handleClick, flex: 1, sx: {
-                                            position: "relative",
-                                            minH: "0px",
-                                            maxH: height ?? "200px",
-                                            overflow: "auto",
-                                            cursor: "text",
                                             mt: 2,
-                                            pt: shouldShowTopSection ? "60px" : "0px",
-                                            // Add smooth padding transition
-                                            transition: "padding-top 0.3s ease-in-out",
-                                        }, children: (0, jsx_runtime_1.jsx)(react_2.chakra.div, { sx: {
-                                                "[data-slate-placeholder]": {
-                                                    display: isDisabled || isFocused
-                                                        ? "none !important"
-                                                        : "inline-block !important",
-                                                    color: "black !important",
-                                                    pointerEvents: "none !important",
-                                                    fontWeight: "400 !important",
-                                                    fontSize: "16px !important",
-                                                    position: "absolute !important",
-                                                    // Position at top of container
-                                                    top: "0px !important",
-                                                    left: "4px !important",
-                                                    // Add smooth placeholder transitions
-                                                    // transition: "all 0.2s ease-in-out !important",
-                                                },
-                                            }, children: (0, jsx_runtime_1.jsx)(slate_react_1.Editable, { "data-testid": "input-editor", renderElement: renderElement, placeholder: showBottomBar
-                                                    ? isRevision
-                                                        ? "Write your answer first — that's where real learning happens."
-                                                        : "Ask Vin any question, use voice, or upload your work!"
-                                                    : "", readOnly: isDisabled, onKeyDown: handleKeyDown, onPaste: handlePaste, onCopy: handleCopy, onCut: handleCut, onFocus: handleFocus, onBlur: handleBlur, onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragStart: handleDragStart, draggable: false, style: {
-                                                    position: "relative",
-                                                    outline: "none",
-                                                    minHeight: "50px",
-                                                    zIndex: 1,
-                                                    cursor: isDisabled ? "not-allowed" : "text",
-                                                    pointerEvents: isDisabled ? "none" : "auto",
-                                                    paddingLeft: "4px",
-                                                    width: "100%",
-                                                    display: "block",
-                                                    overflow: "auto",
-                                                    "&::-webkit-scrollbar": {
-                                                        width: "0px",
-                                                        height: "0px",
-                                                    },
-                                                    scrollbarWidth: "none",
-                                                } }) }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", position: "relative", ml: 2, userSelect: "none", spacing: 5, children: [(tutorMode ||
-                                                (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment) ||
-                                                isDisabledRevision) && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { sx: { opacity: "1", zIndex: 2 }, spacing: 5, children: [icons?.formula && ((0, jsx_runtime_1.jsx)(react_2.Image, { sx: {
-                                                            h: "28px",
-                                                            w: "28px",
-                                                            cursor: isDisabled ? "not-allowed" : "pointer",
-                                                        }, src: icons?.formula, alt: "Add formula", onClick: () => {
-                                                            !isDisabled && openMathEditor();
-                                                        } })), addImageRender && addImageRender()] })), icons?.submit && ((0, jsx_runtime_1.jsx)(react_2.Image, { "data-testid": "submit-icon", sx: {
-                                                    h: "48px",
-                                                    w: "48px",
-                                                    zIndex: 2,
-                                                    cursor: (0, common_utils_1.isEmptyOrNull)(data)
-                                                        ? "not-allowed"
-                                                        : "pointer",
-                                                    opacity: (0, common_utils_1.isEmptyOrNull)(data) ? 0.6 : 1,
-                                                }, src: icons?.submit, alt: "submit", onClick: () => {
-                                                    if (!(0, common_utils_1.isEmptyOrNull)(data?.trim())) {
-                                                        handleSubmit();
-                                                        handleChange && handleChange("");
-                                                    }
-                                                } }))] })] })) })), !tutorMode && taskType !== LearningPathUtils_1.taskTypes.assessment && !isRevision && ((0, jsx_runtime_1.jsx)(LearningCreditsWarning, {})), (0, jsx_runtime_1.jsx)(MathModal_1.default, { isOpen: isModalOpen, onClose: handleModalClose, onSave: handleSaveMath, initialLatex: currentLatex, subject: props.subject })] }) })] }));
+                                            mb: 2,
+                                        } })), (0, jsx_runtime_1.jsx)(IconsComponent, { ...iconProps, isDisabledRevision: !isMobile ? isDisabledRevision : "" })] }) })), !tutorMode && taskType !== LearningPathUtils_1.taskTypes.assessment && !isRevision && ((0, jsx_runtime_1.jsx)(EditorComponent_1.LearningCreditsWarning, { icons: icons, data: data, handleSubmit: handleSubmit, handleChange: handleChange })), (0, jsx_runtime_1.jsx)(MathModal_1.default, { isOpen: isModalOpen, onClose: handleModalClose, onSave: handleSaveMath, initialLatex: currentLatex, subject: props.subject })] }) })] }));
 };
 exports.default = TextEditor;
 //# sourceMappingURL=TextEditor.js.map