Overview

Hi guys,

I'm trying to create a WYSIWYG LaTeX editor using Electron with React, but I've come across a problem while attempting to replace math expressions between dollar signs by KaTeX components.

The Problem

My wish is to get something like Overleaf's rich text editor, which displays what's between $...$ as MathJax. In order to accomplish a simillar result, I've come up with the idea of using React states and Regex for, everytime the user inputs anything new, checking if there are any of those math expressions wrapped between the aforesaid signs. However, I couldn't create anything that can work around the fact that what is between expressions between dollar signs is also between them.

Part of My Code

export default function WYSIWYGEditor(){
  const [text, setText] = useState<string>('')
  const [latexInText, setLatexInText] = useState<String[]>([])
  const editorElement = document.getElementById('t')
  useEffect(()=>{
    setLatexInText((text.match(/(\${1,2})((?:\\.|[\s\S])*)\1/g)))
    console.log(latexInText ? String(latexInText[0]).split('$') : '0')
  }, [text])
  return (
    <div>
        <div contentEditable={true} id='t' onInput={()=>setText(document.getElementById('t').innerHTML)} style={{display: 'inline', maxWidth: '40%'}}>
            Math here
        </div>
    </div>
   )}

Don't know if this is any useful, but there the code goes. So far, I'm only trying to console log the math expressions, but I also want to replace them by divs where I can render a component from KaTeX library. Pretty much like what happens on Overleaf.

Sorry if I'm being too vague, this is my first question here and I'm kinda new to StackOverflow, stil learning. Please, let me know if I should specify anything.