hardwater-ui-planner 0.0.1

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

@@ -0,0 +1,621 @@
+"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 slate_react_1 = require("slate-react");
+const slate_1 = require("slate");
+const slate_history_1 = require("slate-history");
+const react_2 = require("@chakra-ui/react");
+const MathModal_1 = __importDefault(require("./MathModal"));
+const MathElement_1 = __importDefault(require("./MathElement"));
+const slate_plugins_1 = require("../utils/slate-plugins");
+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 InvalidSession_1 = __importDefault(require("../../../Molecules/InvalidSession/InvalidSession"));
+// Theme customization without placeholder styling
+const theme = (0, react_2.extendTheme)({
+    colors: {
+        brand: {
+            500: "#4CAF50",
+        },
+    },
+    styles: {
+        global: {
+            "[data-slate-editor]:focus": {
+                outline: "none !important",
+                boxShadow: "none !important",
+                borderColor: "gray.200 !important",
+            },
+            "[data-slate-editor]": {
+                outline: "none !important",
+            },
+        },
+    },
+});
+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;
+    // 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));
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    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 editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setValue((0, slate_conversions_1.textToSlate)(data));
+        if ((0, common_utils_1.isEmptyOrNull)(data)) {
+            handleClear();
+        }
+    }, [data]);
+    (0, react_1.useEffect)(() => {
+        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]);
+    // Function to open the math editor modal for new entries
+    const openMathEditor = (0, react_1.useCallback)(() => {
+        const { selection } = editor;
+        if (!selection || !slate_1.Range.isCollapsed(selection)) {
+            const point = slate_1.Editor.end(editor, []);
+            slate_1.Transforms.select(editor, point);
+        }
+        setCurrentLatex("");
+        setEditingPath(null);
+        setIsModalOpen(true);
+    }, [editor]);
+    // Function to open the math editor modal for editing
+    const editMath = (0, react_1.useCallback)((element) => {
+        try {
+            try {
+                slate_react_1.ReactEditor.focus(editor);
+            }
+            catch (focusError) {
+                console.log("Focus warning:", focusError);
+            }
+            setTimeout(() => {
+                try {
+                    setCurrentLatex(element.latex || "");
+                    const path = slate_react_1.ReactEditor.findPath(editor, element);
+                    setEditingPath(path);
+                    setIsModalOpen(true);
+                }
+                catch (pathError) {
+                    console.error("Error finding path:", pathError);
+                    setCurrentLatex(element.latex || "");
+                    setEditingPath(null);
+                    setIsModalOpen(true);
+                }
+            }, 10);
+        }
+        catch (error) {
+            console.error("Error when trying to edit math:", error);
+            setCurrentLatex(element.latex || "");
+            setEditingPath(null);
+            setIsModalOpen(true);
+        }
+    }, [editor]);
+    // Function to handle saved math content
+    const handleSaveMath = (0, react_1.useCallback)((latex) => {
+        const shouldFocusEditor = !!latex.trim();
+        if (!latex.trim()) {
+            setIsModalOpen(false);
+            handleCloseMath && handleCloseMath();
+            return;
+        }
+        try {
+            if (editingPath) {
+                slate_1.Transforms.setNodes(editor, { latex }, { at: editingPath });
+            }
+            else {
+                const mathNode = {
+                    type: "math",
+                    latex,
+                    children: [{ text: "" }],
+                };
+                slate_1.Transforms.insertNodes(editor, mathNode);
+                slate_1.Transforms.move(editor);
+            }
+        }
+        catch (error) {
+            console.error("Error when saving math:", error);
+        }
+        setIsModalOpen(false);
+        handleCloseMath && handleCloseMath();
+        if (shouldFocusEditor) {
+            setTimeout(() => {
+                try {
+                    slate_react_1.ReactEditor.focus(editor);
+                }
+                catch (error) {
+                    console.error("Error focusing editor:", error);
+                }
+            }, 100);
+        }
+    }, [editor, editingPath]);
+    // Handle modal close without focusing editor
+    const handleModalClose = (0, react_1.useCallback)(() => {
+        setIsModalOpen(false);
+        handleCloseMath && handleCloseMath();
+    }, []);
+    const handleClear = () => {
+        // Clear the editor after submission
+        const emptyNode = [{ type: "paragraph", children: [{ text: "" }] }];
+        setValue(emptyNode);
+        // Clear the history stack safely
+        try {
+            // Select all content and delete it
+            slate_1.Transforms.select(editor, {
+                anchor: slate_1.Editor.start(editor, []),
+                focus: slate_1.Editor.end(editor, []),
+            });
+            slate_1.Transforms.delete(editor);
+            // Insert empty paragraph if editor is completely empty
+            if (editor.children.length === 0) {
+                slate_1.Transforms.insertNodes(editor, {
+                    type: "paragraph",
+                    children: [{ text: "" }],
+                });
+            }
+        }
+        catch (error) {
+            console.error("Error clearing editor:", error);
+            // Fallback: directly set editor children
+            try {
+                editor.children = emptyNode;
+                editor.onChange();
+            }
+            catch (fallbackError) {
+                console.error("Fallback clear failed:", fallbackError);
+            }
+        }
+    };
+    // Updated handleSubmit function that also clears history
+    const handleSubmit = (0, react_1.useCallback)(() => {
+        if (onSubmit) {
+            // Call onSubmit with the current text
+            onSubmit((0, slate_conversions_1.slateToText)(value));
+            handleClear();
+            // Focus the editor again after clearing (only if not disabled)
+            if (!isDisabled) {
+                setTimeout(() => {
+                    try {
+                        slate_react_1.ReactEditor.focus(editor);
+                    }
+                    catch (error) {
+                        console.error("Error focusing editor after submit:", error);
+                    }
+                }, 100);
+            }
+        }
+    }, [onSubmit, value, editor, isDisabled]);
+    // Custom element renderer
+    const renderElement = (0, react_1.useCallback)((props) => {
+        const { attributes, children, element } = props;
+        switch (element.type) {
+            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 }));
+        }
+    }, [editMath]);
+    // Handle click on editable area
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (editorRef.current) {
+            try {
+                slate_react_1.ReactEditor.focus(editor);
+            }
+            catch (error) {
+                console.error("Error focusing editor on click:", error);
+            }
+        }
+    }, [editor]);
+    // Enhanced clipboard handlers using Navigator Clipboard API
+    const handlePaste = async (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) => {
+        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) => {
+        event.preventDefault();
+    };
+    const handleDragEnter = (event) => {
+        event.preventDefault();
+    };
+    const handleDragLeave = (event) => {
+        event.preventDefault();
+    };
+    const handleFocus = (0, react_1.useCallback)(() => {
+        setIsFocused(true);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setIsFocused(false);
+    }, []);
+    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);
+        }
+    }, []);
+    // Handle hover events for the entire editor area (disabled on mobile)
+    const handleEditorMouseEnter = (0, react_1.useCallback)(() => {
+        if (!isMobile) {
+            setIsHovered(true);
+        }
+    }, [isMobile]);
+    const handleEditorMouseLeave = (0, react_1.useCallback)(() => {
+        if (!isMobile) {
+            setIsHovered(false);
+            setIsFocused(false);
+        }
+    }, [isMobile]);
+    const shouldShowTopSection = false;
+    // Show TopSection when either focused or hovered (but NEVER on mobile)
+    // const shouldShowTopSection = 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);
+    //     };
+    // }, []);
+    // Alternative onKeyDown handler approach for the Editable component
+    const handleKeyDown = (0, react_1.useCallback)(async (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");
+            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 = 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("");
+                                }
+                            } }))] })] }));
+    }, [
+        isMobile,
+        tutorMode,
+        taskType,
+        memoizedIcons,
+        isDisabled,
+        isDataEmpty,
+        addImageRender,
+        openMathEditor,
+        handleChange,
+        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)
+                        ? "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: [tutorMode && ((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",
+                                            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 })] }) })] }));
+};
+exports.default = TextEditor;
+//# sourceMappingURL=TextEditor.js.map