How to edit output field and update the equation field on real time?

[farhancdr]

Hi! First I'd like to thank you for this awesome package!

I want to build an interface where user can edit both EquationEditor input and output code. Here you can see, I've added a input field as a code output. But when I put something on the input field, the equation editor field doesn't update ! Is there any way to do it?

here is my code>>

import EquationEditor from 'equation-editor-react'
import { useState } from 'react'
import { Input } from '@chakra-ui/react'

const MathEditor = () => {
  const [equation, setEquation] = useState('\\frac{a}{b}')

  return (
    <>
      <EquationEditor
        value={equation}
        onChange={setEquation}
        autoCommands="omega"
        autoOperatorNames="sin cos tan"
        onEnter={() => window.alert('You pressed enter!')}
      />
        <Input
          variant={'outline'}
          borderRadius={'0px'}
          textAlign={'center'}
          value={equation}
          onChange={(e) => setEquation(e.target.value)}
        />
    </>
  )
}

export default MathEditor

[V0XNIHILI]

Hey! Thanks for the nice words! I am aware of this issue, if I have time I'll check one of these days what's going on. My guess is (top of my head) that it stems from the React-JQuery interaction (since that is what MathQuill uses under the hood). Feel free to make a PR if you find out how to fix it!

[greenlihui]

hi, any updates on this problem ?

[krivilyov]

Hi, @V0XNIHILI. This library is important for people who work with equations. Unfortunately I have problem with update editor field after update prop "equation". Do you plan fix this problem and problem compatibility withReact 18?

[V0XNIHILI]

Hi @krivilyov. I just created a new branch + PR (#69) as a base to for React 18. As I haven't worked with React for over a year, I am not sure how to work with some of the new ref APIs. If you have time, it would be great if you could contribute to solving a few of these issues so that the package works fully with React 18. Let me know!