Editting the equations

[frankvp11]

I must start off by saying that this project is of great help to me.
With that being said, let's get into the problem that I have been having. Essentially, this package works great when I have an API or predetermined equation being put into the formatter. However, I would like to extend this so that users can type in the equation and it automatically formats. I have tried to use a contentEditable span, however this does not preserve the formatting when they erase everything. I have also tried to use on{event in {change, input}} with a function to update the text however that didn't seem to work. Is there any way that the users can write the equations and your package auto formats it? I'm guessing this is a react/web dev concept that I have yet to learn, but hopefully it will be an easy implementation.
Thanks in advance,
Frank

[kgram]

I actually started this project because I wanted to make a math WYSIWYG editor, but discovered that the only available math rendering was based on TeX, which is not great in my opinion. I just never really got to that part, since the parsing, evaluating and rendering turned out to be quite a mouthful in itself.

So there is no rich-text editor integration as of now, and I recently had a child, making it unlikely that I will have time to work on it in any kind of near future.

I don't know how complex a solution you're after, so let's take them in increasing complexity. If you just want a single equation determined by the user, you can just let the user enter the equation as plain text in a text input and then render it. Example.

Slightly more complex, you can let a number of equations interact with each other, like in this example. Each line in the textarea is plugged into EquationContext, meaning you can define variables and functions, like this:

x=4
f(x)=x^2
5x+f(3)=

and have them rendered as expected. This solution has quite a lot of functionality, but it still requires writing and editing equations in plaintext.

Next level would probably be integration into something like slate. Editing directly with contenteditable can't really work, since there's too many rules the browsers are unaware of. Most of these libraries that work on rich-text will have some concept of a block of "uneditable" content (example from slate). You can kinda do this yourself by setting contenteditable="false" on an element inside something with contenteditable="true", but there's lots of ways it just doesn't work great. You could have a block like this with the rendered equation inside, and then on double-click open a dialog to edit the plain-text equation. This is nearing WYSIWYG, but is still not ideal.

The last level would, of course, be full integration into a rich-text editor, with selectable placeholders, buttons for inserting fractions, powers etc., the whole shebang. This would of course be nice, but I would expect it to be quite a large task.

Sorry I can't be of more help for the moment, but do let me know what you figure out.