student-review-screen 0.0.1

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

@@ -0,0 +1,700 @@
+"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 MathModalSME_1 = __importDefault(require("./MathModalSME"));
+const MathElement_1 = __importDefault(require("./MathElement"));
+const slate_plugins_1 = require("../utils/slate-plugins");
+const input_detection_1 = require("../utils/input-detection");
+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"));
+const fi_1 = require("react-icons/fi");
+// 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, isRevision = false, isDescAnsQues = false, handleClick: propHandleClick, showerrorpopup, placeholder, keyboardProfile, isStudent, onMathKeyPress, onMathModalAction, onMathKeyboardInteraction, practicebyquestion = false, isAssesment = false, onBlockedPaste, onInputEvent, } = props;
+    const isGuidedPractice = (taskType === LearningPathUtils_1.taskTypes.guidedPractice ||
+        taskType === LearningPathUtils_1.taskTypes.guidedPractise ||
+        taskType === LearningPathUtils_1.taskTypes.learnPrerequisite) &&
+        !practicebyquestion;
+    const isAssessment = props?.isAssesment;
+    // Keep the disablePaste flag readable from the (memoized) editor plugin and
+    // the beforeinput handler without having to recreate the editor when it changes.
+    const disablePasteRef = (0, react_1.useRef)(disablePaste);
+    (0, react_1.useEffect)(() => {
+        disablePasteRef.current = disablePaste;
+    }, [disablePaste]);
+    // Ref the latest input-event emitter so the (memoized) editor plugin always
+    // sees the current callback without recreating the editor. `lastInputTimeRef`
+    // tracks keystroke cadence for the bulk-insertion classifier.
+    const emitInputEventRef = (0, react_1.useRef)(null);
+    const lastInputTimeRef = (0, react_1.useRef)(performance.now());
+    // Throttles the blocked-input browser alert so a single paste spanning
+    // multiple guard layers fires one notice instead of a stack of dialogs.
+    const lastBlockedAlertRef = (0, react_1.useRef)(0);
+    // Tracks IME composition state across beforeinput/input events, since some
+    // browsers report `isComposing: false` on beforeinput even mid-composition.
+    // Used to avoid false positives on legitimate large IME insertions.
+    const compositionRef = (0, react_1.useRef)(false);
+    // When composition ends, the Android input manager may still flush the
+    // committed text as a multi-character `insertText` up to ~25ms later
+    // (slate's RESOLVE_DELAY). We keep a grace window so a legitimate IME
+    // commit is never misclassified as a bulk paste and blocked.
+    const compositionEndAtRef = (0, react_1.useRef)(null);
+    const COMPOSITION_GRACE_MS = 100;
+    // Initialize the Slate editor with our custom plugins
+    const editor = (0, react_1.useMemo)(() => (0, slate_plugins_1.withMath)((0, slate_plugins_1.withPasteGuard)((0, slate_history_1.withHistory)((0, slate_react_1.withReact)((0, slate_1.createEditor)())), {
+        disablePasteRef,
+        compositionRef,
+        compositionEndAtRef,
+        onEventRef: emitInputEventRef,
+    })), []);
+    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 [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)(() => {
+        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]);
+    (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.Text, { "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]);
+    const handlePaste = (0, react_1.useCallback)((event) => {
+        if (disablePaste) {
+            event.preventDefault();
+        }
+    }, [disablePaste]);
+    const reportBlockedPaste = (0, react_1.useCallback)((details) => {
+        const payload = { ...details, timestamp: Date.now() };
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("[PasteGuard] BLOCKED:", payload);
+        }
+        if (typeof onBlockedPaste === "function") {
+            onBlockedPaste(payload);
+        }
+    }, [onBlockedPaste]);
+    // Single evidence stream emitted at every layer (browser events + Slate
+    // plugin). Consumers pipe this to their backend/ui-events pipeline. Events
+    // are EVIDENCE (e.g. "suspicious_bulk_input"), never conclusions
+    // ("studentCheated") — the backend aggregates multiple signals.
+    //
+    // Every event carrying `blocked: true` (from beforeinput and all three
+    // model-layer paths) also surfaces a browser alert so the student knows their
+    // input didn't go through. Throttled so one multi-layer paste can't spam alerts.
+    const emitInputEvent = (0, react_1.useCallback)((event) => {
+        if (process.env.NODE_ENV !== "production") {
+            if (event.type === "editor_input" || event.type === "slate_insert_text") {
+                // Per-keystroke noise: compact trace at debug level.
+                console.debug("[EditorInput]", event.type, {
+                    inputType: event.inputType,
+                    textLength: event.textLength,
+                    isComposing: event.isComposing,
+                    timeSincePreviousInput: event.timeSincePreviousInput,
+                });
+            }
+            else {
+                console.info("[EditorInput]", event);
+            }
+        }
+        if (event.blocked === true) {
+            const now = Date.now();
+            if (now - lastBlockedAlertRef.current > 2500) {
+                lastBlockedAlertRef.current = now;
+                window.alert("Pasting is not allowed in this mode");
+            }
+        }
+        if (typeof onInputEvent === "function") {
+            onInputEvent(event);
+        }
+    }, [onInputEvent]);
+    (0, react_1.useEffect)(() => {
+        emitInputEventRef.current = emitInputEvent;
+    }, [emitInputEvent]);
+    // Observes browser-level `input` events on the contenteditable. Composition
+    // events are handled via React props on <Editable> (onCompositionStart/End),
+    // which slate-react wraps and forwards to us. `beforeinput` is handled
+    // separately via handleBeforeInput (it fires before the DOM is modified and
+    // is what slate-react checks for interception).
+    (0, react_1.useEffect)(() => {
+        const handleInput = (event) => {
+            const now = performance.now();
+            emitInputEventRef.current?.({
+                type: "editor_input",
+                inputType: event.inputType,
+                textLength: event.data?.length ?? 0,
+                isComposing: !!event.isComposing ||
+                    compositionRef.current ||
+                    withinCompositionGrace(),
+                timeSincePreviousInput: now - lastInputTimeRef.current,
+                timestamp: Date.now(),
+            });
+            lastInputTimeRef.current = now;
+        };
+        let domNode = null;
+        try {
+            domNode = slate_react_1.ReactEditor.toDOMNode(editor, editor);
+            domNode.addEventListener("input", handleInput, true);
+        }
+        catch (error) {
+            // Editor DOM not mounted yet (e.g. Slate not rendered for this mode).
+            return undefined;
+        }
+        return () => {
+            domNode.removeEventListener("input", handleInput, true);
+        };
+    }, [editor]);
+    // Composition state tracking. slate-react wraps these props via
+    // `isEventHandled`, so they MUST NOT return true / call preventDefault —
+    // doing so would break slate's own composition handling. Pure observability.
+    const handleCompositionStart = (0, react_1.useCallback)(() => {
+        compositionRef.current = true;
+        emitInputEventRef.current?.({
+            type: "composition_start",
+            timestamp: Date.now(),
+        });
+    }, []);
+    const handleCompositionEnd = (0, react_1.useCallback)(() => {
+        compositionRef.current = false;
+        compositionEndAtRef.current = Date.now();
+        emitInputEventRef.current?.({
+            type: "composition_end",
+            timestamp: Date.now(),
+        });
+    }, []);
+    const withinCompositionGrace = (0, react_1.useCallback)(() => Date.now() - (compositionEndAtRef.current ?? 0) < COMPOSITION_GRACE_MS, []);
+    // Catches the GBoard keyboard clipboard suggestion strip on Android. Tapping a
+    // clipboard suggestion does NOT fire a `paste` event; it dispatches a
+    // `beforeinput` with inputType "insertFromPaste" (same signal as Ctrl+V).
+    // slate-react 0.112's <Editable> exposes onDOMBeforeInput and checks it BEFORE
+    // its own handling; returning `true` tells slate to skip the insert entirely.
+    //
+    // Two duties:
+    //   - HARD BLOCK paste-family input when paste is disabled.
+    //   - OBSERVE everything else: bulk insertText that cannot be safely blocked
+    //     (voice typing, IME composition, accessibility) is classified and
+    //     logged as suspicious evidence instead of rejected.
+    const handleBeforeInput = (0, react_1.useCallback)((event) => {
+        const now = performance.now();
+        const timeSincePreviousInput = now - lastInputTimeRef.current;
+        lastInputTimeRef.current = now;
+        const type = event.inputType;
+        const data = typeof event.data === "string"
+            ? event.data
+            : event.dataTransfer?.getData?.("text/plain") ?? "";
+        const textLength = data.length;
+        const isComposing = !!event.isComposing || compositionRef.current || withinCompositionGrace();
+        const isBulk = (0, input_detection_1.isBulkInsertText)({ inputType: type, textLength, isComposing });
+        const shouldBlock = disablePasteRef.current && ((0, input_detection_1.isPasteInputType)(type) || isBulk);
+        const blockReason = isBulk ? "bulk_insert_text" : "paste_input_type";
+        if (shouldBlock) {
+            event.preventDefault();
+            reportBlockedPaste({ inputType: type, textLength, reason: blockReason });
+            emitInputEventRef.current?.({
+                type: "paste_attempt",
+                inputType: type,
+                textLength,
+                isComposing,
+                timeSincePreviousInput,
+                reason: blockReason,
+                blocked: true,
+                timestamp: Date.now(),
+            });
+            const selection = editor.selection;
+            if (selection) {
+                // On Android `beforeinput` is not always cancelable, so the DOM can
+                // still end up with the stray text. Nudging the selection forces the
+                // <Slate> provider to re-render the Editable from the (clean) model,
+                // discarding any DOM-only insertion.
+                requestAnimationFrame(() => {
+                    try {
+                        slate_1.Transforms.select(editor, selection);
+                        slate_react_1.ReactEditor.focus(editor);
+                    }
+                    catch (error) {
+                        console.error("Error restoring editor after blocked paste:", error);
+                    }
+                });
+            }
+            return true;
+        }
+        // Not blocked (or paste allowed in this mode) — flag, don't reject.
+        if (disablePasteRef.current) {
+            const { score, level, reasons } = (0, input_detection_1.classifyInput)({
+                inputType: type,
+                textLength,
+                isComposing,
+                timeSincePreviousInput,
+            });
+            if (level !== "normal") {
+                emitInputEventRef.current?.({
+                    type: "suspicious_bulk_input",
+                    inputType: type,
+                    textLength,
+                    isComposing,
+                    timeSincePreviousInput,
+                    score,
+                    level,
+                    reasons,
+                    timestamp: Date.now(),
+                });
+            }
+        }
+        return false;
+    }, [reportBlockedPaste, editor, withinCompositionGrace]);
+    const handleDragStart = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+    }, []);
+    const handleDragOver = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+    }, []);
+    const handleDragEnter = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+    }, []);
+    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 });
+        }
+        // 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
+        }
+        else {
+            // Go to next element
+            event.preventDefault();
+            nextIndex = currentIndex + 1;
+        }
+        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)((event) => {
+        if (isDisabled || !onSubmit)
+            return;
+        if (disablePaste &&
+            (event.ctrlKey || event.metaKey) &&
+            (event.key === "v" || event.key === "c" || event.key === "x")) {
+            event.preventDefault();
+        }
+        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 = slateToText(value);
+            // if (!isEmptyOrNull(currentText?.trim()) && showBottomBar == true) {
+            //   handleSubmit();
+            //   handleChange && handleChange("");
+            // }
+        }
+    }, [
+        value,
+        handleSubmit,
+        handleChange,
+        isDisabled,
+        handleTabNavigation,
+        isCurrentlyInAddImageRender,
+    ]);
+    const editorBoxProps = (0, react_1.useMemo)(() => ({
+        editorRef,
+        handleClick,
+        height,
+        handleKeyDown,
+        handlePaste,
+        handleBeforeInput,
+        handleCompositionStart,
+        handleCompositionEnd,
+        handleDrop,
+        handleDragOver,
+        handleDragEnter,
+        handleDragLeave,
+        handleDragStart,
+        isDisabled,
+        showBottomBar,
+        isRevision,
+        renderElement,
+        isMobile,
+        isDescAnsQues,
+        placeholder,
+    }), [
+        editorRef,
+        handleClick,
+        height,
+        handleKeyDown,
+        handlePaste,
+        handleBeforeInput,
+        handleCompositionStart,
+        handleCompositionEnd,
+        handleDrop,
+        handleDragOver,
+        handleDragEnter,
+        handleDragLeave,
+        handleDragStart,
+        isDisabled,
+        showBottomBar,
+        isRevision,
+        renderElement,
+        isMobile,
+        isDescAnsQues,
+        placeholder,
+        taskType,
+    ]);
+    const iconProps = {
+        tutorMode,
+        taskType,
+        icons,
+        isDisabled,
+        openMathEditor,
+        addImageRender,
+        data,
+        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, icons: icons })), (0, jsx_runtime_1.jsxs)(react_2.ChakraProvider, { theme: theme, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "studenteditor", w: "100%", borderRadius: isGuidedPractice ? "0px" : (isAssessment ? "12px" : "16px"), p: isGuidedPractice || isAssessment ? "0px" : (isMobile ? "8px" : "14px"), border: isGuidedPractice
+                            ? "none"
+                            : isAssessment
+                                ? "2px solid #dfdafe"
+                                : showBottomBar
+                                    ? "1px solid #BFBEDC"
+                                    : "none", overflow: isAssessment ? "hidden" : "visible", pointerEvents: isDisabled ? "none" : "auto", opacity: tutorMode === false ? 1 : isDisabled ? 0.5 : 1, bg: tutorMode || (!tutorMode && taskType === LearningPathUtils_1.taskTypes.assessment)
+                            ? "white"
+                            : "#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: isGuidedPractice ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", alignItems: "center", bg: "#faf9fe", border: "1px solid #cfcfcf", overflow: "hidden", p: "6px", borderRadius: "24px", boxShadow: "0px 0px 4px 0px rgba(0,0,0,0.2)", children: [icons?.formula && ((0, jsx_runtime_1.jsx)(react_2.Flex, { alignItems: "center", justifyContent: "center", p: "8px", flexShrink: 0, cursor: isDisabled ? "not-allowed" : "pointer", onClick: () => {
+                                                !isDisabled && openMathEditor();
+                                            }, children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: icons.formula, w: "32px", h: "32px" }) })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: "0", p: "8px", sx: { "[data-testid='input-editor']": { paddingBottom: "0px !important", marginTop: "0px !important" } }, children: (0, jsx_runtime_1.jsx)(EditorComponent_1.EditorBox, { ...editorBoxProps }) }), icons?.submit && ((0, jsx_runtime_1.jsx)(react_2.Flex, { alignItems: "center", justifyContent: "center", pl: "9px", pr: "7px", py: "8px", flexShrink: 0, cursor: (0, common_utils_1.isEmptyOrNull)(data) ? "not-allowed" : "pointer", opacity: (0, common_utils_1.isEmptyOrNull)(data) ? 0.6 : 1, onClick: () => {
+                                                if (!(0, common_utils_1.isEmptyOrNull)(data?.trim())) {
+                                                    handleSubmit();
+                                                    handleChange && handleChange("");
+                                                }
+                                            }, children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: icons.submit, w: "32px", h: "32px" }) }))] })) : isAssessment ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 0, alignItems: "stretch", width: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { bg: "#f4f2ff", px: "12px", py: "8px", gap: "16px", alignItems: "center", justifyContent: "space-between", children: (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 4, children: icons?.formula && ((0, jsx_runtime_1.jsx)(react_2.Flex, { alignItems: "center", justifyContent: "center", w: "36px", h: "36px", borderRadius: "6px", cursor: isDisabled ? "not-allowed" : "pointer", border: tabFocusedElement === "formula"
+                                                        ? "2px solid #5F4DC7"
+                                                        : "2px solid transparent", _hover: !isDisabled ? { bg: "#e8e5ff" } : {}, onClick: () => {
+                                                        !isDisabled && openMathEditor();
+                                                    }, tabIndex: isDisabled ? -1 : 0, ref: formulaIconRef, onFocus: () => setTabFocusedElement("formula"), onBlur: () => setTabFocusedElement(null), onKeyDown: (event) => {
+                                                        if (event.key === "Enter" || event.key === " ") {
+                                                            event.preventDefault();
+                                                            !isDisabled && openMathEditor();
+                                                        }
+                                                        else if (event.key === "Tab") {
+                                                            handleTabNavigation(event);
+                                                        }
+                                                    }, children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: icons.formula, w: "20px", h: "20px" }) })) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { p: "20px", minH: "160px", w: "100%", children: (0, jsx_runtime_1.jsx)(EditorComponent_1.EditorBox, { ...editorBoxProps }) })] })) : ((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%",
+                                                mt: 2,
+                                                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)(MathModalSME_1.default, { isOpen: isModalOpen, onClose: handleModalClose, onSave: handleSaveMath, initialLatex: currentLatex, keyboardProfile: keyboardProfile, isStudent: isStudent, icons: icons, isMobile: isMobile, onMathKeyPress: onMathKeyPress, onMathModalAction: onMathModalAction, onMathKeyboardInteraction: onMathKeyboardInteraction })] }), isAssessment && ((0, jsx_runtime_1.jsx)(react_2.HStack, { justify: isMobile ? "center" : "flex-end", w: "full", pt: "20px", children: (0, jsx_runtime_1.jsx)(react_2.Button, { w: "full", maxW: isMobile ? "100%" : "400px", borderColor: "purple.600", bg: "#7464CE", color: "white", border: "1px solid #D9D6ED", _hover: { bg: "#7464CE" }, fontFamily: "Poppins", fontWeight: "medium", fontSize: "md", rightIcon: (0, jsx_runtime_1.jsx)(fi_1.FiArrowRight, { size: 24 }), py: "12px", borderRadius: "8px", boxShadow: "1px 1px 4px 0px rgba(23,23,23,0.4)", isDisabled: isDisabled || (0, common_utils_1.isEmptyOrNull)(data?.trim()), onClick: () => {
+                                if (!(0, common_utils_1.isEmptyOrNull)(data?.trim())) {
+                                    handleSubmit();
+                                    handleChange && handleChange("");
+                                }
+                            }, children: "Submit" }) }))] })] }));
+};
+exports.default = TextEditor;
+//# sourceMappingURL=TextEditor.js.map