Textbox for user input

[Andrew Murdza]

Is there a way to make it so users can type into a textbox like on websites like

https://www.desmos.com/calculator and https://www.symbolab.com/

I or someone I can hire can write the javascript that updates the content of the textbox when the user's cursor is inside of the textbox and they type keys but I want to make sure there is a way for Mathjax to render the Mathjax again in that textbox every time the user types a key while their cursor is inside of the textbox. I think it is possible with Mathjax promises my only certain is that it wouldn't be fast enough to keep up with the user typing.

[David W. Farmer]

Whether MathJax can keep up depends on how much the user has typed.

Will the textbox only contain one math expression, or will it be
sentences interspersed with math?

How will you handle partial user input which is invalid, like

e^{x^2 +

> --
> You received this message because you are subscribed to the Google Groups "MathJax Users" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/mathjax-users/0f756971-9bf8-45c1-bbfc-f25ccdbcdf5dn%40googlegroups.com.
>
>

[Andrew Murdza]

The textbox will be a single expression. Although there will be a lot of text boxes, the user will only edit one at a time.

The user will not actually input the LaTeX code they will enter keys. For example, they would enter $e^$ and then their cursor would move to the exponent of the e with the expression being e^{} (this means that I would have to keep track of cursor position as well as the input. Then they would type and x^2 while within the exponent to get e^{x}, then e^{x^{}}, then e^{x^2}. They would keep typing in the exponent to get something like $e^{x^2+}$ and $e^{x^2+1}.

Basically, it would behave very similarly to a Mathquill textbox but uses Mathjax which is much more powerful than Mathquil.

[Ron George Pile]

From what you've said, it seems you'd want an auto-update feature with MathJax. I've seen a similar implementation called react-mathjax-hook on GitHub.(link here). You can check the example they use to confirm if this is what you want. A React.js developer could easily do this for you if you aren't conversant with React. 

Oh and quick question, @Andrew Murdza, why do you think Mathjax is much more powerful than MathJax? I'm stuck on deciding whether to learn Mathquill or MathJax as I've seen companies like Desmos use Mathquill instead of Mathjax. Thanks!!

[Andrew Murdza]

Some things that Mathjax can do that I believe Mathquil cannot (likely some are possible in Mathquill)

1. Macros

2. Tooltips

3. Macro Map

4. Strikethrough for canceling equations

5. Automatic line breaks

6. Aligned, flalign, gathered environments and \\[# pt] for custom space between lines

7. Colored bounding box and colorbox for part of an equation

8. Give part of an equation a CSS class

9. \displaystyle for in line equations

10. \hspace, rule

11. Equation numbering

12. Coloring only part of an equation text

13. The Mathjax Google Groups where I can ask complicated questions and get answers for them

14. Limit with arrow underneath in text in front of it.

15. Genfrac (custom fraction bar width and space before and after fraction bar)

16. Underbrace and Overbrace

17. Begin cases (piecewise function)

18. Inline equations being bottom aligned with text instead of top-aligned

I'm interested to see which of these are possible in Mathquill let me know.

The Mathjax react.js examples require the user to type in the latex, unlike Mathquill where the user types within the rendered math itself.

I wonder if it would be easier to add the missing features to Mathquill or add the Mathquill textbox behavior to Mathjax. I'd like to hear some opinions on this (I will attempt to hire someone to add the missing features either way).

[Ron George Pile]

I've done a lot of research but all the projects I've seen where someone types in the rendered math itself also uses Mathquill. Look at this example. Maybe it's high time that a similar MathJax project should be created, or maybe, you should hire someone you think would be capable of implementing this.

Oh, and I'm really not sure how Mathquill outweighs MathJax because I've just learned of the two recently. It doesn't even support accessibility in the least for screen readers, to add to the list you got there. Maybe Mathjax should work on that auto-convert feature like Mathquill. It would really work like a gem. 

All in all, I think working in Mathjax will prove more worthy than Mathquill!!

[Davide Cervone]

> Maybe it's high time that a similar MathJax project should be created,

While an equation editor based on MathJax is certainly possible, it is outside the scope of the MathJax project itself, at least at this time, as we do not have the resources to develop and maintain such an editor. That means it would need to be a third-party project. Such an editor is non-trivial (I worked on an editor using jsMath, the predecessor of MathJax, and there are many subtle issues to be considered).

Davide P. Cervone
MathJax lead developer

[Andrew Murdza]

I hired some web developers to develop an equation editor that has the interactivity of math quill with certain Mathjax features. They haven’t yet decided whether to build on Mathjax, build on Math quil, combine the two somehow, or do it from scratch. Regardless of what path they decide to take, I plan on making it open source. The web developers should be starting early next week once they’ve finished something else they’ve been working on for me.

Dear Davide, it would be great if you could talk about what issues you faced and how you approached them when working on jsMath. It might help the development of the editor.

If they end up choosing to build on Mathjax, let me know whether they could communicate with you either directly or indirectly through me. Let me know if that would work because that might influence how they will implement the equation editor.

[Jeff Witt]

Hi Andrew, 

Did you end up developing an open source math editor? I have been looking around to find one and have found only the one that is included with Canvas: https://github.com/instructure/canvas-lms/tree/master/packages/canvas-rce/src/rce/plugins/instructure_equation.  And this one for a Finnish math exam: https://github.com/digabi/rich-text-editor 

Some other possible leads that look less promising: https://github.com/topics/equation-editor 

Best,

Jeff Witt

Accessibility Specialist for edX.org platform

[hashir shabbir]

You definitely can create a textbox where users type math equations like on those websites!  It's common for websites to use JavaScript to listen for key presses in the textbox. Every time a key is pressed, the JavaScript can update the content of the box and then use MathJax to re-render the equation with the new characters.  This might not be super speedy, but it should be fast enough for most typing. So yes, your idea with JavaScript and MathJax promises is on the right track!

[DKM Machinery]

Yes, you're absolutely right! Using JavaScript to listen for key presses in a textbox is a great approach. As each key is pressed, JavaScript can dynamically update the content, and MathJax can be used to render the equation in real-time. This ensures that users can see the equation displayed correctly as they type, which is a very smooth experience.

[DKM Machinery]

While it may not be instantaneous, it should perform well enough for most use cases. To enhance performance, you could implement optimizations like throttling or debouncing the update events to avoid unnecessary re-rendering while the user is typing quickly. Overall, combining JavaScript for interactivity and MathJax for rendering equations is a solid solution!

[Nadla links]

Sure! You can do this by capturing input events in the textbox and using MathJax.typeset() or MathJax.typesetPromise() to re-render the math. Just debounce the events a bit to keep it smooth and avoid lag while typing.

[Nadla links]

is the issue solved now? or still need to more solution? Below is the more concise version .. 

To dynamically render math as users type, capture input events from the textbox using an event listener. Update the content inside a div and call MathJax.typeset() or MathJax.typesetPromise() to re-render the math. For smooth performance, implement a debounce mechanism to delay the rendering function, avoiding lag from frequent updates.

Example:

html

CopyEdit

<textarea id="mathInput" placeholder="Type your math here..."></textarea> <div id="output"></div> <script> let debounceTimer; document.getElementById('mathInput').addEventListener('input', function() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => updateMath(this.value), 300); }); function updateMath(mathText) { document.getElementById('output').innerHTML = mathText; MathJax.typesetPromise().catch((err) => console.error('Math typeset failed:', err)); } </script>

This captures input, updates the output, and re-renders math efficiently.

[Davide Cervone]

There are a couple of issues with this implementation.  The most important one is that when you typeset a page, MathJax keeps track of the math that it has handled, so that if you change the renderer, for example, or start the assistive tools, the rendered math can be updated.  If you dynamically change the page by removing math that was already typeset, as you are doing here, you need to let MathJax know that ts typeset math is going away by calling MathJax.startup.document.clearMathItemsWithin(). This was added in this PR:

https://github.com/mathjax/MathJax-src/pull/502

but apparently never made it into the documentation, so it is not a surprise that you don't know about it.

The second issue is that you aren't taking the promise returned by typesetPromise() into account, and so it is possible that you will start a second typesetting action while the first is still in process.  That can happen if an expression that is being typeset requires an extension to be loaded (for example).  I give an example below of how this can be better handled.

Finally, the "debounce" delay that you are using make a noticeable delay in updating the output a you type.  you can do better by keeping track of whether MathJax is running and wait for it to stop before doing additional updates, and keeping track of whether an update is pending while MathJax is running.

The example below takes care of all of these issues:

<textarea id="mathInput" placeholder="Type your math here..." rows="10" cols="60"></textarea>

<br><br>

<div id="mathOutput"></div>

<script>

(function () {

  const input = document.getElementById('mathInput');

  const output = document.getElementById('mathOutput');

  let mjRunning = false;

  let updatePending = false;

  

  document.getElementById('mathInput').addEventListener('input', function() {

    if (mjRunning) {

      updatePending = true;

    } else {

      updateMath();

    }

  });

  function updateMath() {

    mjRunning = true;

    updatePending = false;

    MathJax.startup.document.clearMathItemsWithin([output]);

    output.innerHTML = input.value;

    MathJax.typesetPromise()

      .then(() => {

        mjRunning = false;

        if (updatePending) updateMath;

      })

      .catch((err) => console.error('Math typeset failed:', err));

  }

})();

</script>

It also isolates the variables in functions in a closure so as not to pollute the global namespace.  I think you will find that this gives a more natural feel to the editing.

Davide

-- 
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/4a4dfc8e-85cf-4667-900a-9e7d491e6288n%40googlegroups.com.