catchup-library-web 1.12.2 → 1.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.12.2",
+  "version": "1.12.5",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -11,7 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/lodash": "^4.17.20",
     "i18next": "^24.2.2",
+    "lodash": "^4.17.21",
     "mathlive": "^0.105.3",
     "react": "^18.3.0",
     "react-dnd": "^16.0.1",

package/src/components/cards/FullCard.tsx

@@ -0,0 +1,34 @@
+import { IFullCardProps } from "../../properties/CardProperties";
+
+const FullCard = ({
+  bgColor,
+  opacity,
+  isShadowed,
+  usePadding,
+  children,
+}: IFullCardProps) => {
+  return (
+    <div className="flex flex-col justify-center items-center h-full">
+      <div
+        className={`flex-1 ${bgColor ? bgColor : ""} ${
+          opacity ? opacity : "opacity-100"
+        } rounded-catchup-xlarge w-full border border-catchup-gray-50 bg-catchup-white`}
+        // style={{
+        //   boxShadow: isShadowed
+        //     ? "rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px"
+        //     : "none",
+        // }}
+      >
+        <div
+          className={`flex flex-col mx-auto ${
+            usePadding === false ? "p-0" : "p-6"
+          } h-full`}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FullCard;

package/src/components/groups/InputGroup.tsx

@@ -1,10 +1,14 @@
 import Select from "react-select";
 import i18n from "../../language/i18n";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { IInputGroupProps } from "../../properties/GroupProperties";
 import BaseImage from "../images/BaseImage";
 import { IOptionProps } from "../../properties/CommonProperties";
 import { MathfieldElement } from "mathlive";
+import BaseModal from "../modals/BaseModal";
+import FullCard from "../cards/FullCard";
+import SecondaryButton from "../buttons/SecondaryButton";
+import PrimaryButton from "../buttons/PrimaryButton";
 
 declare global {
   namespace JSX {
@@ -63,9 +67,10 @@ const InputGroup = ({
   useMath,
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [showMathConstructor, setShowMathConstructor] =
+    useState<boolean>(false);
+  const [mathValue, setMathValue] = useState<string>("");
   const mathFieldRef = useRef<MathfieldElement>(null);
-  const [isMathMode, setIsMathMode] = useState<boolean>(false);
-  const [showMathOverlay, setShowMathOverlay] = useState<boolean>(false);
 
   useEffect(() => {
     if (!textAreaRef) return;
@@ -84,25 +89,7 @@ const InputGroup = ({
         customElements.define("math-field", MathfieldElement);
       }
     });
-  }, [useMath, type, placeholder, title]);
-
-  // Close overlay when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        showMathOverlay &&
-        event.target instanceof Element &&
-        !event.target.closest(".math-overlay")
-      ) {
-        setShowMathOverlay(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showMathOverlay]);
+  }, [useMath]);
 
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
@@ -134,110 +121,119 @@ const InputGroup = ({
     }
   };
 
-  const handleMathFieldChange = (event: React.FormEvent<MathfieldElement>) => {
-    const mathField = event.currentTarget;
-    const syntheticEvent = {
-      target: {
-        value: mathField.value,
-        type: "text",
-      },
-    };
-    onChange && onChange(syntheticEvent);
-  };
+  const handleMathFieldChange = useCallback(() => {
+    if (!mathFieldRef.current) return;
+    const latexValue = mathFieldRef.current.value;
+    const wasFocused = mathFieldRef.current === document.activeElement;
+    const cursorPosition = mathFieldRef.current.position;
 
-  const handleMathFieldFocus = (event: React.FocusEvent<MathfieldElement>) => {
-    const syntheticEvent = {
-      target: event.currentTarget,
-    };
-    onFocus && onFocus(syntheticEvent);
-  };
+    setMathValue(latexValue);
 
-  const handleMathModeToggle = (mode: boolean) => {
-    setIsMathMode(mode);
-    setShowMathOverlay(false);
+    // Restore focus and cursor position after state update
+    if (wasFocused) {
+      setTimeout(() => {
+        if (mathFieldRef.current) {
+          mathFieldRef.current.focus();
+          mathFieldRef.current.position = cursorPosition;
+        }
+      }, 0);
+    }
+  }, []);
+
+  const handleCopyLatex = () => {
+    navigator.clipboard.writeText(`$$${mathValue}$$`);
   };
 
-  const MathModeOverlay = () => {
-    if (!showMathOverlay) return null;
+  const handleOpenMathConstructor = () => {
+    setMathValue("");
+    setShowMathConstructor(true);
+  };
 
+  const MathConstructorModal = () => {
     return (
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div className="math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4">
-          <div className="flex justify-between items-center mb-4">
-            <h3 className="text-lg font-semibold text-catchup-gray-400">
-              {i18n.t("select_input_mode")}
-            </h3>
-            <button
-              className="text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors"
-              onClick={() => setShowMathOverlay(false)}
-            >
-              <svg
-                className="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-          <div className="space-y-3">
-            <button
-              className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
-                !isMathMode
-                  ? "border-catchup-blue-400 bg-catchup-blue-50"
-                  : "border-catchup-gray-100 hover:border-catchup-gray-200"
-              }`}
-              onClick={() => handleMathModeToggle(false)}
-            >
-              <div className="flex items-center space-x-3">
-                <div className="w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center">
-                  {!isMathMode && (
-                    <div className="w-2 h-2 rounded-full bg-catchup-blue-400"></div>
-                  )}
-                </div>
-                <div className="text-left">
-                  <p className="font-medium text-catchup-gray-400">
-                    {i18n.t("text_mode")}
-                  </p>
-                  <p className="text-sm text-catchup-gray-300">
-                    Regular text input
-                  </p>
+      <BaseModal
+        isOpen={showMathConstructor}
+        onAfterOpen={() => {}}
+        onRequestClose={() => {
+          setShowMathConstructor(false);
+        }}
+        size="large"
+      >
+        <FullCard>
+          <div className="bg-white rounded-lg overflow-hidden">
+            <div className="p-6 space-y-6">
+              <div>
+                <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+                  {i18n.t("math_editor")}
+                </p>
+                <div className="border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input">
+                  <math-field
+                    ref={mathFieldRef}
+                    value={mathValue}
+                    onInput={handleMathFieldChange}
+                    placeholder={i18n.t("expression")}
+                    virtual-keyboard-mode="off"
+                    smart-fence={true}
+                    smart-mode={true}
+                    smart-superscript={true}
+                    style={{
+                      fontSize: "18px",
+                      paddingRight: "16px",
+                      paddingLeft: "16px",
+                      paddingTop: "8px",
+                      paddingBottom: "8px",
+                      border: "none",
+                      outline: "none",
+                      width: "100%",
+                      backgroundColor: "transparent",
+                      borderRadius: "16px",
+                      fontFamily: "inherit",
+                    }}
+                  />
                 </div>
               </div>
-            </button>
-            <button
-              className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
-                isMathMode
-                  ? "border-catchup-blue-400 bg-catchup-blue-50"
-                  : "border-catchup-gray-100 hover:border-catchup-gray-200"
-              }`}
-              onClick={() => handleMathModeToggle(true)}
-            >
-              <div className="flex items-center space-x-3">
-                <div className="w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center">
-                  {isMathMode && (
-                    <div className="w-2 h-2 rounded-full bg-catchup-blue-400"></div>
-                  )}
-                </div>
-                <div className="text-left">
-                  <p className="font-medium text-catchup-gray-400">
-                    {i18n.t("math_mode")}
-                  </p>
-                  <p className="text-sm text-catchup-gray-300">
-                    Mathematical expressions
-                  </p>
+
+              {/* LaTeX Output */}
+              <div>
+                <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+                  {i18n.t("latex_output")}
+                </p>
+                <div className="relative">
+                  <textarea
+                    readOnly
+                    value={mathValue}
+                    className="w-full py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large font-mono text-sm resize-none focus:outline-none"
+                    placeholder={i18n.t("latex_will_appear_here")}
+                  />
+                  <button
+                    onClick={handleCopyLatex}
+                    className="absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-sm hover:bg-catchup-blue-500 transition-colors"
+                    disabled={!mathValue}
+                  >
+                    {i18n.t("copy")}
+                  </button>
                 </div>
               </div>
-            </button>
+            </div>
+
+            {/* Footer */}
+            {/* <div className="flex justify-end gap-3 p-6 border-t border-catchup-gray-100">
+              <SecondaryButton
+                title={i18n.t("cancel")}
+                size="large"
+                onClick={() => {
+                  setShowMathConstructor(false);
+                }}
+              />
+              <PrimaryButton
+                title={i18n.t("insert_latex")}
+                size="large"
+                onClick={handleInsertLatex}
+              />
+            </div> */}
           </div>
-        </div>
-      </div>
+        </FullCard>
+      </BaseModal>
     );
   };
 
@@ -413,7 +409,6 @@ const InputGroup = ({
           </div>
         </div>
 
-        {/* Always show textarea - math mode overlay appears on top */}
         <textarea
           ref={textAreaRef}
           disabled={disabled}
@@ -425,60 +420,25 @@ const InputGroup = ({
               : "border-catchup-gray-100"
           } placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${
             disabled ? "bg-catchup-lighter-gray" : ""
-          } focus:shadow-input`}
+          } focus:shadow-input ${useMath ? "pr-20" : ""}`}
           placeholder={errorText ? errorText : placeholder}
           value={value}
-          onLoad={(e) => {
-            console.log(e);
-          }}
           onChange={handleTextAreaOnChange}
           onFocus={onFocus}
           onKeyDown={onKeyDown}
         />
 
-        {/* Math mode overlay appears on top of textarea when enabled */}
-        {useMath && isMathMode && (
-          <div className="absolute inset-0 bg-white border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input">
-            <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%",
-                height: "100%",
-                backgroundColor: "transparent",
-                borderRadius: "16px",
-                fontFamily: "inherit",
-                color: disabled ? "#9ca3af" : "#000000",
-              }}
-            />
-          </div>
-        )}
-
-        {/* Math mode toggle button */}
+        {/* Math constructor button */}
         {useMath && (
           <button
-            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200 z-10"
-            onClick={() => setShowMathOverlay(true)}
+            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10"
+            onClick={handleOpenMathConstructor}
             type="button"
           >
             <div className="flex items-center gap-x-1">
-              <span className="text-sm font-medium text-catchup-gray-400">
-                {isMathMode ? "𝑓(x)" : "Aa"}
-              </span>
+              <span className="text-sm font-medium">𝑓(x)</span>
               <svg
-                className="w-3 h-3 text-catchup-gray-300"
+                className="w-3 h-3"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -487,7 +447,7 @@ const InputGroup = ({
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
+                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                 />
               </svg>
             </div>
@@ -515,64 +475,36 @@ const InputGroup = ({
             disabled ? "bg-catchup-lighter-gray" : "bg-white"
           }`}
         >
-          {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}
-            />
-          )}
+          <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"
+                : ""
+            } ${useMath ? "pr-20" : ""}`}
+            type={type}
+            defaultValue={defaultValue}
+            placeholder={errorText ? errorText : placeholder}
+            value={value}
+            onChange={onChange}
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+          />
         </div>
 
+        {/* Math constructor button */}
         {useMath && (
           <button
-            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200"
-            onClick={() => setShowMathOverlay(true)}
+            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200"
+            onClick={handleOpenMathConstructor}
             type="button"
           >
             <div className="flex items-center gap-x-1">
-              <span className="text-sm font-medium text-catchup-gray-400">
-                {isMathMode ? "𝑓(x)" : "Aa"}
-              </span>
+              <span className="text-sm font-medium">𝑓(x)</span>
               <svg
-                className="w-3 h-3 text-catchup-gray-300"
+                className="w-3 h-3"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -581,7 +513,7 @@ const InputGroup = ({
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
+                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                 />
               </svg>
             </div>
@@ -612,7 +544,7 @@ const InputGroup = ({
   return (
     <>
       {RenderMainContent()}
-      <MathModeOverlay />
+      <MathConstructorModal />
     </>
   );
 };

package/src/index.ts

@@ -5,6 +5,8 @@ export { default as DeleteButton } from "./components/buttons/DeleteButton";
 export { default as CancelButton } from "./components/buttons/CancelButton";
 export { default as ApproveButton } from "./components/buttons/ApproveButton";
 
+export { default as FullCard } from "./components/cards/FullCard";
+
 export { default as BaseImage } from "./components/images/BaseImage";
 
 export { default as BaseLoading } from "./components/loading/BaseLoading";

package/src/properties/ButtonProperties.ts

@@ -2,8 +2,8 @@ export interface IButtonProps {
   title: string;
   size: string;
   onClick: () => void;
-  disabled: boolean;
-  iconPosition: string;
-  textOnly: boolean;
-  iconOnly: boolean;
+  disabled?: boolean;
+  iconPosition?: string;
+  textOnly?: boolean;
+  iconOnly?: boolean;
 }

package/src/properties/CardProperties.ts

@@ -0,0 +1,7 @@
+export interface IFullCardProps {
+  bgColor?: string;
+  opacity?: string;
+  isShadowed?: boolean;
+  usePadding?: boolean;
+  children?: React.ReactNode;
+}

package/src/properties/ModalProperties.ts

@@ -1,8 +1,8 @@
 export interface IModalProps {
   isOpen: boolean;
   size: string;
-  onAfterOpen: () => {};
-  onRequestClose: () => {};
-  customSize: string;
+  onAfterOpen: () => void;
+  onRequestClose: () => void;
+  customSize?: string;
   children: any;
 }