How do I create a live preview of a text input with MathJax?

Need help
1

I created a multi-line text input that with “enable binding to parent’s thing” checked.

Then I selected Text as field to modify.

I then have a custom element with the MathJax inclusion code, placed on the same page.

I load dynamic content after the MathJax inclusion code. The content source is the same page’s Text.

However, it doesn’t update at all as you type text into the input.

Is this possible? No big deal if not, I can just have the user press a button.

But I like how MSE (math.stackexchange.com) has a live preview, and I think users would expect it.

2

In your javascript, try adding to the input a handler for an event like key up, and either send a change event or updating the preview.

3

How would you update the bubble-based preview from JS?

4

The change event would bring the value through the input element, or you can use Toolbox Javascript To Bubble.

What do you mean by a custom element? HTML element?

5

Mishav, here is what I did, but it doesn’t render with mathjax. How do I re-render using javascript?

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/javascript" async
 src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<script type="text/javascript" async>
document.onkeydown = updatePreview;

function updatePreview(e) {
   document.onchange();
}
</script>
6

Here is an alternative solution (without live preview).

The user just clicks on a button to preview, and a popup shows with the multi-line edit’s text dynamically loaded.

MathLing

There’s a problem with it though: It only works once! Successive shows don’t refresh the popup content.

7

Got it to work. For some reason, the simplest way to get this to work in bubble seems to work now.

In other words do:

And make sure you check iframe, and it updates with new data from a multiline edit, for instance.

1 Like
8

This topic was automatically closed after 70 days. New replies are no longer allowed.