catchup-library-web 1.12.7 → 1.12.9

package/dist/index.js

@@ -3648,6 +3648,7 @@ var InputGroup = ({
   useMath
 }) => {
   const textAreaRef = (0, import_react10.useRef)(null);
+  const latexTextAreaRef = (0, import_react10.useRef)(null);
   const [showMathConstructor, setShowMathConstructor] = (0, import_react10.useState)(false);
   const [mathValue, setMathValue] = (0, import_react10.useState)("");
   const mathFieldRef = (0, import_react10.useRef)(null);
@@ -3660,6 +3661,15 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
+  (0, import_react10.useEffect)(() => {
+    if (!latexTextAreaRef) return;
+    if (!latexTextAreaRef.current) return;
+    if (value) {
+      latexTextAreaRef.current.style.height = `${latexTextAreaRef.current.scrollHeight}px`;
+    } else {
+      latexTextAreaRef.current.style.height = `44px`;
+    }
+  }, [latexTextAreaRef, value]);
   (0, import_react10.useEffect)(() => {
     if (!useMath) return;
     import("mathlive").then(({ MathfieldElement }) => {
@@ -3764,9 +3774,10 @@ var InputGroup = ({
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "textarea",
                 {
+                  ref: latexTextAreaRef,
                   readOnly: true,
                   value: mathValue,
-                  className: "w-full py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large font-mono text-md resize-none focus:outline-none",
+                  className: "w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none",
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
@@ -3774,7 +3785,7 @@ var InputGroup = ({
                 "button",
                 {
                   onClick: handleCopyLatex,
-                  className: "absolute top-3 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors",
+                  className: "absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors",
                   disabled: !mathValue,
                   children: i18n_default.t("copy")
                 }

package/dist/index.mjs

@@ -3447,6 +3447,7 @@ var InputGroup = ({
   useMath
 }) => {
   const textAreaRef = useRef(null);
+  const latexTextAreaRef = useRef(null);
   const [showMathConstructor, setShowMathConstructor] = useState10(false);
   const [mathValue, setMathValue] = useState10("");
   const mathFieldRef = useRef(null);
@@ -3459,6 +3460,15 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
+  useEffect2(() => {
+    if (!latexTextAreaRef) return;
+    if (!latexTextAreaRef.current) return;
+    if (value) {
+      latexTextAreaRef.current.style.height = `${latexTextAreaRef.current.scrollHeight}px`;
+    } else {
+      latexTextAreaRef.current.style.height = `44px`;
+    }
+  }, [latexTextAreaRef, value]);
   useEffect2(() => {
     if (!useMath) return;
     import("mathlive").then(({ MathfieldElement }) => {
@@ -3563,9 +3573,10 @@ var InputGroup = ({
               /* @__PURE__ */ jsx17(
                 "textarea",
                 {
+                  ref: latexTextAreaRef,
                   readOnly: true,
                   value: mathValue,
-                  className: "w-full py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large font-mono text-md resize-none focus:outline-none",
+                  className: "w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none",
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
@@ -3573,7 +3584,7 @@ var InputGroup = ({
                 "button",
                 {
                   onClick: handleCopyLatex,
-                  className: "absolute top-3 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors",
+                  className: "absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors",
                   disabled: !mathValue,
                   children: i18n_default.t("copy")
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.12.7",
+  "version": "1.12.9",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/groups/InputGroup.tsx

@@ -67,6 +67,7 @@ const InputGroup = ({
   useMath,
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const latexTextAreaRef = useRef<HTMLTextAreaElement>(null);
   const [showMathConstructor, setShowMathConstructor] =
     useState<boolean>(false);
   const [mathValue, setMathValue] = useState<string>("");
@@ -82,6 +83,16 @@ const InputGroup = ({
     }
   }, [textAreaRef, value]);
 
+  useEffect(() => {
+    if (!latexTextAreaRef) return;
+    if (!latexTextAreaRef.current) return;
+    if (value) {
+      latexTextAreaRef.current.style.height = `${latexTextAreaRef.current.scrollHeight}px`;
+    } else {
+      latexTextAreaRef.current.style.height = `44px`;
+    }
+  }, [latexTextAreaRef, value]);
+
   useEffect(() => {
     if (!useMath) return;
     import("mathlive").then(({ MathfieldElement }) => {
@@ -193,21 +204,21 @@ const InputGroup = ({
                 </div>
               </div>
 
-              {/* 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
+                    ref={latexTextAreaRef}
                     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-md resize-none focus:outline-none"
+                    className="w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none"
                     placeholder={i18n.t("latex_will_appear_here")}
                   />
                   <button
                     onClick={handleCopyLatex}
-                    className="absolute top-3 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors"
+                    className="absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors"
                     disabled={!mathValue}
                   >
                     {i18n.t("copy")}
@@ -215,22 +226,6 @@ const InputGroup = ({
                 </div>
               </div>
             </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>
         </FullCard>
       </BaseModal>