Visión general

Hola chicos,

Estoy tratando de crear un editor WYSIWYG LaTeX usando Electron con React, pero encontré un problema al intentar reemplazar expresiones matemáticas entre signos de dólar por componentes KaTeX.

El problema

Mi deseo es obtener algo como el editor de texto enriquecido de Overleaf, que muestra lo que hay entre $...$ como MathJax. Para lograr un resultado similar, se me ocurrió la idea de usar los estados React y Regex para, cada vez que el usuario ingresa algo nuevo, verificar si hay alguna de esas expresiones matemáticas envueltas entre los signos antes mencionados. Sin embargo, no pude crear nada que pueda evitar el hecho de que lo que está entre expresiones entre signos de dólar también está entre ellos.

Parte de mi código

 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> )}

No sé si esto es útil, pero ahí va el código. Hasta ahora, solo estoy tratando de consolar el registro de las expresiones matemáticas, pero también quiero reemplazarlas por divs donde pueda representar un componente de la biblioteca KaTeX. Más o menos como lo que sucede en Overleaf.

Lo siento si estoy siendo demasiado vago, esta es mi primera pregunta aquí y soy un poco nuevo en StackOverflow, todavía estoy aprendiendo. Por favor, avíseme si debo especificar algo.