Merge pull request #3852 from wststone/fix/equation-input-caret

fix: correct setvalue in equation input behavior
udecode · Dec 12, 2024 · f3bdf7b · f3bdf7b
2 parents b48eb17 + df35d66
commit f3bdf7b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/.changeset/pink-pillows-end.md b/.changeset/pink-pillows-end.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-math": patch
+---
+
+Fixes #3851
diff --git a/packages/math/src/react/hooks/useEquationInput.ts b/packages/math/src/react/hooks/useEquationInput.ts
@@ -23,9 +23,11 @@ export const useEquationInput = ({
   const element = useElement<TEquationElement>();
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  const [initialExpression, setInitialExpression] = React.useState<
-    string | null
-  >(null);
+  const [expressionInput, setExpressionInput] = React.useState<string>(
+    element.texExpression
+  );
+
+  const initialExpressionRef = useRef<string>(element.texExpression);
 
   useEffect(() => {
     if (open) {
@@ -35,22 +37,29 @@ export const useEquationInput = ({
           inputRef.current.select();
 
           if (isInline) {
-            setInitialExpression(element.texExpression);
+            initialExpressionRef.current = element.texExpression;
           }
         }
       }, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  useEffect(() => {
+    setNode<TEquationElement>(editor, element, {
+      texExpression: expressionInput || '',
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expressionInput]);
+
   const onSubmit = () => {
     onClose?.();
   };
 
   const onDismiss = () => {
     if (isInline) {
       setNode(editor, element, {
-        texExpression: initialExpression ?? '',
+        texExpression: initialExpressionRef.current,
       });
     }
 
@@ -59,11 +68,9 @@ export const useEquationInput = ({
 
   return {
     props: {
-      value: element.texExpression,
+      value: expressionInput,
       onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setNode<TEquationElement>(editor, element, {
-          texExpression: e.target.value,
-        });
+        setExpressionInput(e.target.value);
       },
       onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
         if (isHotkey('enter')(e)) {