diff --git a/.changeset/pink-pillows-end.md b/.changeset/pink-pillows-end.md new file mode 100644 index 0000000000..b5508134ae --- /dev/null +++ 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 index 26cdd96f31..eb74bbb670 100644 --- 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(); const inputRef = useRef(null); - const [initialExpression, setInitialExpression] = React.useState< - string | null - >(null); + const [expressionInput, setExpressionInput] = React.useState( + element.texExpression + ); + + const initialExpressionRef = useRef(element.texExpression); useEffect(() => { if (open) { @@ -35,7 +37,7 @@ export const useEquationInput = ({ inputRef.current.select(); if (isInline) { - setInitialExpression(element.texExpression); + initialExpressionRef.current = element.texExpression; } } }, 0); @@ -43,6 +45,13 @@ export const useEquationInput = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); + useEffect(() => { + setNode(editor, element, { + texExpression: expressionInput || '', + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [expressionInput]); + const onSubmit = () => { onClose?.(); }; @@ -50,7 +59,7 @@ export const useEquationInput = ({ 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) => { - setNode(editor, element, { - texExpression: e.target.value, - }); + setExpressionInput(e.target.value); }, onKeyDown: (e: React.KeyboardEvent) => { if (isHotkey('enter')(e)) {