catchup-library-web 1.11.1 → 1.11.3

package/src/components/groups/InputGroup.tsx

@@ -4,6 +4,43 @@ import { useEffect, useRef } 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,10 @@ const InputGroup = ({
   useMinHeight,
   disabled,
   limit,
+  useMath,
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const mathFieldRef = useRef<MathfieldElement>(null);
 
   useEffect(() => {
     if (!textAreaRef) return;
@@ -36,6 +75,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 +114,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
@@ -270,6 +336,52 @@ const InputGroup = ({
   };
 
   const TextInputGroup = () => {
+    if (useMath) {
+      return (
+        <div className="my-1 relative">
+          {title ? (
+            <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+              {title}
+            </p>
+          ) : null}
+          <div
+            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"
+            }`}
+          >
+            <math-field
+              ref={mathFieldRef}
+              value={value || ""}
+              onInput={handleMathFieldChange}
+              onFocus={handleMathFieldFocus}
+              placeholder={errorText ? errorText : placeholder}
+              disabled={disabled}
+              virtual-keyboard-mode="onfocus"
+              smart-fence={true}
+              smart-mode={true}
+              smart-superscript={true}
+              style={{
+                fontSize: "16px",
+                padding: "8px 16px",
+                border: "none",
+                outline: "none",
+                width: "100%",
+                minHeight: "44px",
+                backgroundColor: disabled ? "#f5f5f5" : "transparent",
+                borderRadius: "16px",
+                fontFamily: "inherit",
+                color: disabled ? "#9ca3af" : "#000000",
+              }}
+            />
+          </div>
+        </div>
+      );
+    }
+
     return (
       <div className="my-1 relative">
         {title ? (

package/src/index.ts

@@ -26,6 +26,7 @@ export { default as TrueFalseActivityContent } from "./components/activities/Tru
 export { default as ActivitySolutionContent } from "./components/activities/solution-content/ActivitySolutionContent";
 export { default as ActivityEvaluationRubricContent } from "./components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent";
 export { default as ActivityPreviewByData } from "./components/activities/ActivityPreviewByData";
+export { default as ActivityPreviewByAnswerData } from "./components/activities/ActivityPreviewByAnswerData";
 
 export { default as BlueVerticalDividerLine } from "./components/dividers/BlueVerticalDividerLine";
 export { default as DividerLine } from "./components/dividers/DividerLine";

package/src/properties/GroupProperties.ts

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