catchup-library-web 1.11.2 → 1.11.4

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
+import { MathfieldElement } from 'mathlive';
 export { default as i18n } from 'i18next';
 
 interface IButtonProps {
@@ -242,6 +243,7 @@ interface IInputGroupProps {
     useMinHeight?: boolean;
     disabled?: boolean;
     limit?: number;
+    useMath?: boolean;
 }
 interface ILeftTextRightInputGroupProps {
     type: string;
@@ -253,7 +255,39 @@ interface ILeftTextRightInputGroupProps {
     errorText?: string;
 }
 
-declare const InputGroup: ({ type, title, defaultValue, placeholder, value, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, }: IInputGroupProps) => react_jsx_runtime.JSX.Element | undefined;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "math-field": React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement> & {
+                value?: string;
+                disabled?: boolean;
+                readonly?: boolean;
+                "virtual-keyboard-mode"?: "manual" | "onfocus" | "off";
+                "virtual-keyboard-theme"?: "material" | "apple";
+                "math-mode-space"?: string;
+                "letter-shape-style"?: "tex" | "french" | "iso" | "upright" | "auto";
+                "min-font-scale"?: number;
+                "max-font-scale"?: number;
+                "smart-fence"?: boolean;
+                "smart-mode"?: boolean;
+                "smart-superscript"?: boolean;
+                "inline-shortcut-timeout"?: number;
+                "keybinding-mode"?: "default" | "vim" | "emacs";
+                "speech-engine"?: "local" | "amazon" | "google";
+                "speech-engine-voice"?: string;
+                "speech-engine-rate"?: string;
+                "read-only"?: boolean;
+                "remove-extraneous-parentheses"?: boolean;
+                "script-depth"?: number;
+                placeholder?: string;
+                "default-mode"?: "math" | "text";
+                "fonts-directory"?: string;
+                "sounds-directory"?: string;
+            };
+        }
+    }
+}
+declare const InputGroup: ({ type, title, defaultValue, placeholder, value, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, }: IInputGroupProps) => react_jsx_runtime.JSX.Element | undefined;
 
 declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
+import { MathfieldElement } from 'mathlive';
 export { default as i18n } from 'i18next';
 
 interface IButtonProps {
@@ -242,6 +243,7 @@ interface IInputGroupProps {
     useMinHeight?: boolean;
     disabled?: boolean;
     limit?: number;
+    useMath?: boolean;
 }
 interface ILeftTextRightInputGroupProps {
     type: string;
@@ -253,7 +255,39 @@ interface ILeftTextRightInputGroupProps {
     errorText?: string;
 }
 
-declare const InputGroup: ({ type, title, defaultValue, placeholder, value, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, }: IInputGroupProps) => react_jsx_runtime.JSX.Element | undefined;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "math-field": React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement> & {
+                value?: string;
+                disabled?: boolean;
+                readonly?: boolean;
+                "virtual-keyboard-mode"?: "manual" | "onfocus" | "off";
+                "virtual-keyboard-theme"?: "material" | "apple";
+                "math-mode-space"?: string;
+                "letter-shape-style"?: "tex" | "french" | "iso" | "upright" | "auto";
+                "min-font-scale"?: number;
+                "max-font-scale"?: number;
+                "smart-fence"?: boolean;
+                "smart-mode"?: boolean;
+                "smart-superscript"?: boolean;
+                "inline-shortcut-timeout"?: number;
+                "keybinding-mode"?: "default" | "vim" | "emacs";
+                "speech-engine"?: "local" | "amazon" | "google";
+                "speech-engine-voice"?: string;
+                "speech-engine-rate"?: string;
+                "read-only"?: boolean;
+                "remove-extraneous-parentheses"?: boolean;
+                "script-depth"?: number;
+                placeholder?: string;
+                "default-mode"?: "math" | "text";
+                "fonts-directory"?: string;
+                "sounds-directory"?: string;
+            };
+        }
+    }
+}
+declare const InputGroup: ({ type, title, defaultValue, placeholder, value, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, }: IInputGroupProps) => react_jsx_runtime.JSX.Element | undefined;
 
 declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3618,9 +3618,12 @@ var InputGroup = ({
   theme,
   useMinHeight,
   disabled,
-  limit
+  limit,
+  useMath
 }) => {
   const textAreaRef = (0, import_react10.useRef)(null);
+  const mathFieldRef = (0, import_react10.useRef)(null);
+  const [isMathMode, setIsMathMode] = (0, import_react10.useState)(false);
   (0, import_react10.useEffect)(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3630,6 +3633,14 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
+  (0, import_react10.useEffect)(() => {
+    if (!useMath) return;
+    import("mathlive").then(({ MathfieldElement }) => {
+      if (!customElements.get("math-field")) {
+        customElements.define("math-field", MathfieldElement);
+      }
+    });
+  }, [useMath, type, placeholder, title]);
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -3657,6 +3668,22 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
+  const handleMathFieldChange = (event) => {
+    const mathField = event.currentTarget;
+    const syntheticEvent = {
+      target: {
+        value: mathField.value,
+        type: "text"
+      }
+    };
+    onChange && onChange(syntheticEvent);
+  };
+  const handleMathFieldFocus = (event) => {
+    const syntheticEvent = {
+      target: event.currentTarget
+    };
+    onFocus && onFocus(syntheticEvent);
+  };
   const CheckboxInputGroup = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
@@ -3812,19 +3839,61 @@ var InputGroup = ({
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "my-1 relative", children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "input",
+        "div",
         {
-          disabled,
-          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
-          type,
-          defaultValue,
-          placeholder: errorText ? errorText : placeholder,
-          value,
-          onChange,
-          onFocus,
-          onKeyDown
+          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+          children: useMath && isMathMode ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "math-field",
+            {
+              ref: mathFieldRef,
+              value: value || "",
+              onInput: handleMathFieldChange,
+              onFocus: handleMathFieldFocus,
+              placeholder: errorText ? errorText : placeholder,
+              disabled,
+              "virtual-keyboard-mode": "off",
+              "smart-fence": true,
+              "smart-mode": true,
+              "smart-superscript": true,
+              style: {
+                fontSize: "16px",
+                padding: "8px 16px",
+                border: "none",
+                outline: "none",
+                width: "100%",
+                minHeight: "44px",
+                backgroundColor: "transparent",
+                borderRadius: "16px",
+                fontFamily: "inherit",
+                color: disabled ? "#9ca3af" : "#000000"
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "input",
+            {
+              disabled,
+              className: `w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${disabled ? "bg-catchup-lighter-gray" : ""} ${errorText ? "placeholder:text-catchup-red placeholder:opacity-80" : ""}`,
+              type,
+              defaultValue,
+              placeholder: errorText ? errorText : placeholder,
+              value,
+              onChange,
+              onFocus,
+              onKeyDown
+            }
+          )
         }
-      )
+      ),
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute right-5 -top-2 z-10 bg-catchup-white border border-catchup-gray-100 rounded-md px-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "div",
+        {
+          className: "flex flex-row items-center gap-x-2 cursor-pointer text-md transition-all duration-300 text-catchup-gray-300",
+          onClick: () => {
+            setIsMathMode(!isMathMode);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-row items-center gap-x-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-bold", children: isMathMode ? i18n_default.t("text_mode") : i18n_default.t("math_mode") }) })
+        }
+      ) })
     ] });
   };
   const RenderMainContent = () => {

package/dist/index.mjs

@@ -3399,7 +3399,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect2, useRef, useState as useState10 } from "react";
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
@@ -3418,9 +3418,12 @@ var InputGroup = ({
   theme,
   useMinHeight,
   disabled,
-  limit
+  limit,
+  useMath
 }) => {
   const textAreaRef = useRef(null);
+  const mathFieldRef = useRef(null);
+  const [isMathMode, setIsMathMode] = useState10(false);
   useEffect2(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3430,6 +3433,14 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
+  useEffect2(() => {
+    if (!useMath) return;
+    import("mathlive").then(({ MathfieldElement }) => {
+      if (!customElements.get("math-field")) {
+        customElements.define("math-field", MathfieldElement);
+      }
+    });
+  }, [useMath, type, placeholder, title]);
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -3457,6 +3468,22 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
+  const handleMathFieldChange = (event) => {
+    const mathField = event.currentTarget;
+    const syntheticEvent = {
+      target: {
+        value: mathField.value,
+        type: "text"
+      }
+    };
+    onChange && onChange(syntheticEvent);
+  };
+  const handleMathFieldFocus = (event) => {
+    const syntheticEvent = {
+      target: event.currentTarget
+    };
+    onFocus && onFocus(syntheticEvent);
+  };
   const CheckboxInputGroup = () => {
     return /* @__PURE__ */ jsxs9(
       "div",
@@ -3612,19 +3639,61 @@ var InputGroup = ({
     return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
       title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx16(
-        "input",
+        "div",
         {
-          disabled,
-          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
-          type,
-          defaultValue,
-          placeholder: errorText ? errorText : placeholder,
-          value,
-          onChange,
-          onFocus,
-          onKeyDown
+          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+          children: useMath && isMathMode ? /* @__PURE__ */ jsx16(
+            "math-field",
+            {
+              ref: mathFieldRef,
+              value: value || "",
+              onInput: handleMathFieldChange,
+              onFocus: handleMathFieldFocus,
+              placeholder: errorText ? errorText : placeholder,
+              disabled,
+              "virtual-keyboard-mode": "off",
+              "smart-fence": true,
+              "smart-mode": true,
+              "smart-superscript": true,
+              style: {
+                fontSize: "16px",
+                padding: "8px 16px",
+                border: "none",
+                outline: "none",
+                width: "100%",
+                minHeight: "44px",
+                backgroundColor: "transparent",
+                borderRadius: "16px",
+                fontFamily: "inherit",
+                color: disabled ? "#9ca3af" : "#000000"
+              }
+            }
+          ) : /* @__PURE__ */ jsx16(
+            "input",
+            {
+              disabled,
+              className: `w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${disabled ? "bg-catchup-lighter-gray" : ""} ${errorText ? "placeholder:text-catchup-red placeholder:opacity-80" : ""}`,
+              type,
+              defaultValue,
+              placeholder: errorText ? errorText : placeholder,
+              value,
+              onChange,
+              onFocus,
+              onKeyDown
+            }
+          )
         }
-      )
+      ),
+      useMath && /* @__PURE__ */ jsx16("div", { className: "absolute right-5 -top-2 z-10 bg-catchup-white border border-catchup-gray-100 rounded-md px-2", children: /* @__PURE__ */ jsx16(
+        "div",
+        {
+          className: "flex flex-row items-center gap-x-2 cursor-pointer text-md transition-all duration-300 text-catchup-gray-300",
+          onClick: () => {
+            setIsMathMode(!isMathMode);
+          },
+          children: /* @__PURE__ */ jsx16("div", { className: "flex flex-row items-center gap-x-1", children: /* @__PURE__ */ jsx16("p", { className: "font-bold", children: isMathMode ? i18n_default.t("text_mode") : i18n_default.t("math_mode") }) })
+        }
+      ) })
     ] });
   };
   const RenderMainContent = () => {
@@ -3650,7 +3719,7 @@ var InputGroup_default = InputGroup;
 
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
 import { useEffect as useEffect4 } from "react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 
 // src/utilization/AppUtilization.ts
 var colors = [
@@ -3750,10 +3819,10 @@ var getColorByIndex = (index) => {
 };
 
 // src/components/dropdowns/MediaDropdown.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
-  const [showDropdown, setShowDropdown] = useState10(false);
+  const [showDropdown, setShowDropdown] = useState11(false);
   return /* @__PURE__ */ jsxs10(
     "div",
     {
@@ -3798,7 +3867,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 var MediaDropdown_default = MediaDropdown;
 
 // src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState11 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState12 } from "react";
 import Modal3 from "react-modal";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
@@ -3807,10 +3876,10 @@ var ShowMaterialMediaByContentType = ({
   src,
   canFullScreen
 }) => {
-  const [showFullScreen, setShowFullScreen] = useState11(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState11(null);
-  const [isLoaded, setIsLoaded] = useState11(false);
-  const [isFullHeight, setIsFullHeight] = useState11(false);
+  const [showFullScreen, setShowFullScreen] = useState12(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState12(null);
+  const [isLoaded, setIsLoaded] = useState12(false);
+  const [isFullHeight, setIsFullHeight] = useState12(false);
   const imageRef = useRef2(null);
   useEffect3(() => {
     setIsLoaded(false);
@@ -3965,7 +4034,7 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [updated, setUpdated] = useState12(false);
+  const [updated, setUpdated] = useState13(false);
   useEffect4(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
@@ -4109,7 +4178,7 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
-import { useState as useState13, useEffect as useEffect5 } from "react";
+import { useState as useState14, useEffect as useEffect5 } from "react";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answer,
@@ -4123,7 +4192,7 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const [currentAnswerMap, setCurrentAnswerMap] = useState13(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState14(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4183,7 +4252,7 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { useEffect as useEffect6 } from "react";
 import { useDrop as useDrop2 } from "react-dnd";
 
@@ -4270,9 +4339,9 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState14([]);
-  const [selectedOption, setSelectedOption] = useState14(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = useState14(null);
+  const [shuffleOptionList, setShuffleOptionList] = useState15([]);
+  const [selectedOption, setSelectedOption] = useState15(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = useState15(null);
   const [{ isOver, canDrop }, drop] = useDrop2({
     accept: "FILL_IN_THE_BLANKS",
     drop: () => {
@@ -4463,7 +4532,7 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-import { useState as useState15, useEffect as useEffect7 } from "react";
+import { useState as useState16, useEffect as useEffect7 } from "react";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
@@ -4484,7 +4553,7 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = useState15(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState16(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4562,18 +4631,18 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState17 } from "react";
+import { useEffect as useEffect9, useRef as useRef4, useState as useState18 } from "react";
 import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath4 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
-import { useState as useState16, useEffect as useEffect8 } from "react";
+import { useState as useState17, useEffect as useEffect8 } from "react";
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState16({
+  const [containerSize, setContainerSize] = useState17({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = useState16({
+  const [screenSize, setScreenSize] = useState17({
     width: window.innerWidth,
     height: window.innerHeight
   });
@@ -4613,10 +4682,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState17(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState17(null);
-  const [isShuffled, setIsShuffled] = useState17(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState17([]);
+  const [selectedValue, setSelectedValue] = useState18(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState18(null);
+  const [isShuffled, setIsShuffled] = useState18(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState18([]);
   const { screenSize, containerSize } = useScreenSize_default();
   const [{ isOver, canDrop }, drop] = useDrop3({
     accept: "GROUPING",
@@ -4629,7 +4698,7 @@ var GroupingActivityMaterialContent = ({
   });
   const ref = useRef4(null);
   const itemsRef = useRef4(null);
-  const [maxWidth, setMaxWidth] = useState17(0);
+  const [maxWidth, setMaxWidth] = useState18(0);
   useEffect9(() => {
     if (!ref) return;
     if (!ref.current) return;
@@ -4931,7 +5000,7 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef5, useState as useState18 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
 import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -4945,10 +5014,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState18(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState18(null);
-  const [isShuffled, setIsShuffled] = useState18(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState18([]);
+  const [selectedValue, setSelectedValue] = useState19(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
+  const [isShuffled, setIsShuffled] = useState19(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
   const [{ isOver, canDrop }, drop] = useDrop4({
     accept: "MATCHING",
     drop: () => {
@@ -5634,7 +5703,7 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useState as useState19 } from "react";
+import { useEffect as useEffect11, useState as useState20 } from "react";
 import { useDrop as useDrop6 } from "react-dnd";
 import { InlineMath as InlineMath8 } from "react-katex";
 
@@ -5703,10 +5772,10 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
-  const [selectedKey, setSelectedKey] = useState19(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
+  const [selectedKey, setSelectedKey] = useState20(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = useState19("PC");
+  const [view, setView] = useState20("PC");
   const [{ isOver, canDrop }, drop] = useDrop6({
     accept: "ORDERING",
     drop: () => {
@@ -5901,7 +5970,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect12, useState as useState20 } from "react";
+import { useEffect as useEffect12, useState as useState21 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
 import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
@@ -5915,7 +5984,7 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = useState20([]);
+  const [shuffleOptionList, setShuffleOptionList] = useState21([]);
   useEffect12(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
@@ -6234,7 +6303,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect13, useState as useState21 } from "react";
+import { useEffect as useEffect13, useState as useState22 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -6286,9 +6355,9 @@ var ActivityPreviewByData = ({
   showTaxonomy,
   isFullScreen
 }) => {
-  const [key, setKey] = useState21((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState21(null);
-  const [optionList, setOptionList] = useState21([]);
+  const [key, setKey] = useState22((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState22(null);
+  const [optionList, setOptionList] = useState22([]);
   useEffect13(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
@@ -6513,7 +6582,7 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-import { useEffect as useEffect14, useState as useState22 } from "react";
+import { useEffect as useEffect14, useState as useState23 } from "react";
 import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ActivityPreviewByAnswerData = ({
   data,
@@ -6528,10 +6597,10 @@ var ActivityPreviewByAnswerData = ({
   showCorrectAnswer = false
 }) => {
   var _a;
-  const [key, setKey] = useState22((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState22(null);
-  const [optionList, setOptionList] = useState22([]);
-  const [answer, setAnswer] = useState22({ data: [] });
+  const [key, setKey] = useState23((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState23(null);
+  const [optionList, setOptionList] = useState23([]);
+  const [answer, setAnswer] = useState23({ data: [] });
   useEffect14(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "i18next": "^24.2.2",
+    "mathlive": "^0.105.3",
     "react": "^18.3.0",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.3.0",

package/src/components/groups/InputGroup.tsx

@@ -1,9 +1,46 @@
 import Select from "react-select";
 import i18n from "../../language/i18n";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { IInputGroupProps } from "../../properties/GroupProperties";
 import BaseImage from "../images/BaseImage";
 import { IOptionProps } from "../../properties/CommonProperties";
+import { MathfieldElement } from "mathlive";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "math-field": React.DetailedHTMLProps<
+        React.HTMLAttributes<MathfieldElement>,
+        MathfieldElement
+      > & {
+        value?: string;
+        disabled?: boolean;
+        readonly?: boolean;
+        "virtual-keyboard-mode"?: "manual" | "onfocus" | "off";
+        "virtual-keyboard-theme"?: "material" | "apple";
+        "math-mode-space"?: string;
+        "letter-shape-style"?: "tex" | "french" | "iso" | "upright" | "auto";
+        "min-font-scale"?: number;
+        "max-font-scale"?: number;
+        "smart-fence"?: boolean;
+        "smart-mode"?: boolean;
+        "smart-superscript"?: boolean;
+        "inline-shortcut-timeout"?: number;
+        "keybinding-mode"?: "default" | "vim" | "emacs";
+        "speech-engine"?: "local" | "amazon" | "google";
+        "speech-engine-voice"?: string;
+        "speech-engine-rate"?: string;
+        "read-only"?: boolean;
+        "remove-extraneous-parentheses"?: boolean;
+        "script-depth"?: number;
+        placeholder?: string;
+        "default-mode"?: "math" | "text";
+        "fonts-directory"?: string;
+        "sounds-directory"?: string;
+      };
+    }
+  }
+}
 
 const InputGroup = ({
   type,
@@ -23,8 +60,11 @@ const InputGroup = ({
   useMinHeight,
   disabled,
   limit,
+  useMath,
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const mathFieldRef = useRef<MathfieldElement>(null);
+  const [isMathMode, setIsMathMode] = useState<boolean>(false);
 
   useEffect(() => {
     if (!textAreaRef) return;
@@ -36,6 +76,15 @@ const InputGroup = ({
     }
   }, [textAreaRef, value]);
 
+  useEffect(() => {
+    if (!useMath) return;
+    import("mathlive").then(({ MathfieldElement }) => {
+      if (!customElements.get("math-field")) {
+        customElements.define("math-field", MathfieldElement);
+      }
+    });
+  }, [useMath, type, placeholder, title]);
+
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -66,6 +115,24 @@ const InputGroup = ({
     }
   };
 
+  const handleMathFieldChange = (event: React.FormEvent<MathfieldElement>) => {
+    const mathField = event.currentTarget;
+    const syntheticEvent = {
+      target: {
+        value: mathField.value,
+        type: "text",
+      },
+    };
+    onChange && onChange(syntheticEvent);
+  };
+
+  const handleMathFieldFocus = (event: React.FocusEvent<MathfieldElement>) => {
+    const syntheticEvent = {
+      target: event.currentTarget,
+    };
+    onFocus && onFocus(syntheticEvent);
+  };
+
   const CheckboxInputGroup = () => {
     return (
       <div
@@ -277,31 +344,78 @@ const InputGroup = ({
             {title}
           </p>
         ) : null}
-        <input
-          disabled={disabled}
-          className={`w-full py-2 px-4 border ${
+
+        <div
+          className={`w-full border ${
             errorText
-              ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
+              ? "border-catchup-red shadow-error"
               : "border-catchup-gray-100"
-          } rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${
-            disabled ? "bg-catchup-lighter-gray" : ""
-          } focus:shadow-input`}
-          type={type}
-          defaultValue={defaultValue}
-          placeholder={errorText ? errorText : placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onKeyDown={onKeyDown}
-        />
-
-        {/* <div
-          className={`${
-            title ? "absolute top-0 right-0" : "absolute top-3 left-5"
+          } rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${
+            disabled ? "bg-catchup-lighter-gray" : "bg-white"
           }`}
         >
-          <p className="italic text-catchup-red opacity-70">{errorText}</p>
-        </div> */}
+          {useMath && isMathMode ? (
+            <math-field
+              ref={mathFieldRef}
+              value={value || ""}
+              onInput={handleMathFieldChange}
+              onFocus={handleMathFieldFocus}
+              placeholder={errorText ? errorText : placeholder}
+              disabled={disabled}
+              virtual-keyboard-mode="off"
+              smart-fence={true}
+              smart-mode={true}
+              smart-superscript={true}
+              style={{
+                fontSize: "16px",
+                padding: "8px 16px",
+                border: "none",
+                outline: "none",
+                width: "100%",
+                minHeight: "44px",
+                backgroundColor: "transparent",
+                borderRadius: "16px",
+                fontFamily: "inherit",
+                color: disabled ? "#9ca3af" : "#000000",
+              }}
+            />
+          ) : (
+            <input
+              disabled={disabled}
+              className={`w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${
+                disabled ? "bg-catchup-lighter-gray" : ""
+              } ${
+                errorText
+                  ? "placeholder:text-catchup-red placeholder:opacity-80"
+                  : ""
+              }`}
+              type={type}
+              defaultValue={defaultValue}
+              placeholder={errorText ? errorText : placeholder}
+              value={value}
+              onChange={onChange}
+              onFocus={onFocus}
+              onKeyDown={onKeyDown}
+            />
+          )}
+        </div>
+
+        {useMath && (
+          <div className="absolute right-5 -top-2 z-10 bg-catchup-white border border-catchup-gray-100 rounded-md px-2">
+            <div
+              className="flex flex-row items-center gap-x-2 cursor-pointer text-md transition-all duration-300 text-catchup-gray-300"
+              onClick={() => {
+                setIsMathMode(!isMathMode);
+              }}
+            >
+              <div className="flex flex-row items-center gap-x-1">
+                <p className="font-bold">
+                  {isMathMode ? i18n.t("text_mode") : i18n.t("math_mode")}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     );
   };

package/src/properties/GroupProperties.ts

@@ -16,6 +16,7 @@ export interface IInputGroupProps {
   useMinHeight?: boolean;
   disabled?: boolean;
   limit?: number;
+  useMath?: boolean;
 }
 
 export interface ILeftTextRightInputGroupProps {