catchup-library-web 1.11.2 → 1.11.3

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,11 @@ var InputGroup = ({
   theme,
   useMinHeight,
   disabled,
-  limit
+  limit,
+  useMath
 }) => {
   const textAreaRef = (0, import_react10.useRef)(null);
+  const mathFieldRef = (0, import_react10.useRef)(null);
   (0, import_react10.useEffect)(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3630,6 +3632,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 +3667,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",
@@ -3809,6 +3835,44 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
+    if (useMath) {
+      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)(
+          "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"}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "math-field",
+              {
+                ref: mathFieldRef,
+                value: value || "",
+                onInput: handleMathFieldChange,
+                onFocus: handleMathFieldFocus,
+                placeholder: errorText ? errorText : placeholder,
+                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"
+                }
+              }
+            )
+          }
+        )
+      ] });
+    }
     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)(

package/dist/index.mjs

@@ -3418,9 +3418,11 @@ var InputGroup = ({
   theme,
   useMinHeight,
   disabled,
-  limit
+  limit,
+  useMath
 }) => {
   const textAreaRef = useRef(null);
+  const mathFieldRef = useRef(null);
   useEffect2(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3430,6 +3432,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 +3467,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",
@@ -3609,6 +3635,44 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
+    if (useMath) {
+      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(
+          "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"}`,
+            children: /* @__PURE__ */ jsx16(
+              "math-field",
+              {
+                ref: mathFieldRef,
+                value: value || "",
+                onInput: handleMathFieldChange,
+                onFocus: handleMathFieldFocus,
+                placeholder: errorText ? errorText : placeholder,
+                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"
+                }
+              }
+            )
+          }
+        )
+      ] });
+    }
     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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "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

@@ -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/properties/GroupProperties.ts

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