51 add shortcuts

src/Components/LatextInput/AddLaTexModal.tsx

@@ -26,20 +26,12 @@ const AddLaTexModal = ({
   const currentValue = getFieldProps(name).value;
   const handleOk = () => {
     const oldValue = currentValue ?? "";
-    const newLatex = convertMathMLToLaTeX(Latex);
-    console.log(oldValue);
-
-    if (newLatex) {
-      setFieldValue(name, oldValue + " $$ " + newLatex + " $$ ");
-      setCurrentValue(oldValue + " $$ " + newLatex + " $$ ");
+    const newLatex = convertMathMLToLaTeX(Latex)
+    const final =  oldValue + " $$ " + newLatex + " $$ "
+      setFieldValue(name, final);
+      setCurrentValue(final);
       setLatex("");
       setIsModalOpen(false);
-    } else {
-      setFieldValue(name, oldValue + " $$ " + Latex + " $$ ");
-      setCurrentValue(oldValue + " $$ " + Latex + " $$ ");
-      setLatex("");
-      setIsModalOpen(false);
-    }
   };
 
   const handleCancel = () => {

src/Components/LatextInput/LaTeXInputMemo.tsx

@@ -9,6 +9,8 @@ import { FaPlus } from "react-icons/fa";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 import SpinContainer from "../Layout/SpinContainer";
 import { areFieldPropsEqual } from "./areFieldPropsEqual";
+import { useHandlePasteKeyDown } from "../../Hooks/useHandlePasteKeyDown";
+import { getLatexOnCustomShortCut } from "../../utils/keyDownUtils";
 
 const AddLazyModal = React.lazy(() => import("./AddLaTexModal"));
 const EditLazyModal = React.lazy(() => import("./EditLaTexModal"));
@@ -70,7 +72,6 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
     const isError = !!touched?.[name] && !!errors?.[name];
     const errorMessage = isError ? ((errors?.[name] as string) ?? "") : "";
 
-    console.log(values);
 
     let metaName = name.substring(0, name.lastIndexOf("."));
     if (metaName.includes(".") || metaName.includes("[")) {
@@ -79,7 +80,6 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
       metaName += "meta";
     }
     const meta = getFieldProps(metaName).value;
-    console.log(metaName, meta);
     const direction = meta?.direction === "ltr" ? "ltr" : "rtl";
 
     const [Dir, setDir] = useState<"ltr" | "rtl">(direction);
@@ -93,7 +93,12 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
         setFieldValue(metaName, { ...(meta ?? {}), direction: "ltr" });
       }
     };
-
+      const handlePaste = useHandlePasteKeyDown();
+    const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>{
+      if(!ShowLatexOption) return ;
+        handlePaste(e,name)
+        getLatexOnCustomShortCut(e) && setFieldValue(name,getLatexOnCustomShortCut(e))
+    }
     return (
       <div className="LaTeXInput">
         <label htmlFor={name} className="text">
@@ -112,6 +117,7 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
             value={curCentValue}
             onBlur={onBlur}
             dir={Dir}
+            onKeyDown={handleOnKeyDown}
             {...props}
           />
           <div className="LaTeXInputOptions">
@@ -138,7 +144,6 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
             <div className="showPreviewInput">
               {Preview?.map((item: any, index: number) => {
                 if (item?.isLatex) {
-                  console.log(item?.text);
 
                   return (
                     <span

src/Hooks/useHandlePasteKeyDown.ts

@@ -0,0 +1,25 @@
+import { useFormikContext } from "formik";
+import { useCallback } from "react";
+import { getLatexOnCustomPased } from "../utils/keyDownUtils";
+
+export function useHandlePasteKeyDown() {
+  const formik = useFormikContext<any>();
+
+  const handleCustomPasteKeyDown = useCallback(
+    async (e: React.KeyboardEvent<HTMLInputElement>, fieldName: string) => {
+      const latex = await getLatexOnCustomPased(e);
+      if (!latex) return;
+
+      // set fieldValue 
+      const currentValue = (e.target as HTMLInputElement).value;
+      const final = currentValue 
+        ? `${currentValue} $$ ${latex} $$`
+        : `$$ ${latex} $$`;
+
+      formik.setFieldValue(fieldName, final);
+    },
+    [formik]
+  );
+
+  return handleCustomPasteKeyDown;
+}

src/utils/clipboardUtils.ts

@@ -0,0 +1,12 @@
+
+export function getTextFromClipboard(){
+    return navigator.clipboard.readText()
+  .then((text) => {
+    return text
+  })
+  .catch((err) => {
+    console.error("error", err);
+    return ""
+  });
+}
+

src/utils/convertMathMLToLaTeX.ts

@@ -1,8 +1,14 @@
 import { MathMLToLaTeX } from "mathml-to-latex";
 
+/**
+ * 
+ * @param mathml 
+ * @returns 
+ * @throws {Error} throw somehi
+ */
 export function convertMathMLToLaTeX(mathml: string): string {
-  console.log(MathMLToLaTeX.convert(mathml));
-  console.log(mathml);
+  const latex = MathMLToLaTeX.convert(mathml);
+
+  return latex || mathml;
 
-  return MathMLToLaTeX.convert(mathml);
 }

src/utils/keyDownUtils.ts

@@ -0,0 +1,56 @@
+import { getTextFromClipboard } from "./clipboardUtils";
+import { convertMathMLToLaTeX } from "./convertMathMLToLaTeX";
+
+export async function getLatexOnCustomPased(
+  e: React.KeyboardEvent<HTMLInputElement>
+): Promise<string | null> {
+  if (!e.ctrlKey || !e.shiftKey || e.code !== "KeyV" ) return null;
+    e.preventDefault();
+
+    const copyedValue = await getTextFromClipboard();
+    const latex = convertMathMLToLaTeX(copyedValue);
+    
+    return latex;
+}
+
+export function getLatexOnCustomShortCut(
+  e: React.KeyboardEvent<HTMLInputElement>
+): string | null {
+  if (!e.ctrlKey || !e.shiftKey || e.code !== "KeyQ") return null;
+
+  e.preventDefault(); 
+
+  const selectedText = getSelectedText(e)
+  if (!selectedText) return null;
+
+  const latex = convertMathMLToLaTeX(selectedText);
+  const result = replaceSelectedTo(e,latex);
+  
+  return result;
+}
+
+export function getSelectedText(e:React.KeyboardEvent<HTMLInputElement>){
+        const {start,end,input} = getIndexesOfSelectionValue(e)
+        const selectedText = input.value.substring(start, end);
+        
+        return selectedText
+}
+
+export function replaceSelectedTo(e: React.KeyboardEvent<HTMLInputElement>,newValue:string) {
+    const {start,end,input} = getIndexesOfSelectionValue(e)
+
+    const before = input.value.substring(0, start);
+    const after = input.value.substring(end);
+
+    const result = `${before}$$ ${newValue} $$${after}`;
+
+    return result;
+
+}
+
+export function getIndexesOfSelectionValue (e: React.KeyboardEvent<HTMLInputElement>):{start:number,end:number,input:HTMLInputElement} {
+      const input = e.target as HTMLInputElement;
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+    return {start,end,input}
+}