Is there a way to track which part of the input text maps to the output elements/svg?

[FAbad]

Hi!

I'm just curious if MathJax has an intermal mapping of the tex that generated a specific dom node, or if there's a way to hook to MathJax/parse the output to get the corresponding input tex for a given output, short of tagging the input tex with something like \cssId? The use case I'm thinking of is to have something like: when editing tex with a live preview, hovering/clicking on a specific mathjax dom output would place the cursor on the line of tex that generated that clicked output.

Thank you!

[Murray]

Hello FABad

Davide will no doubt have a more sophisticated way of going about this, but the following demo is a rough start for what you're trying to do.

It's a proof of concept, and works for things like numbers and variables (a...z), and some symbols like square root and integral, but not for Greek letters or no doubt many other math entities.

It works by identifying the content of the clicked math item, then finding what's the index of that item (it could be say, the third 'x" in the expression), then goes looking for the 3rd "x" in the text box, and puts the cursor there.

It falls over for things like "sin" since if you click on the "i" it will find the first "i" in the text box, not the first "\sin".

But if you really need something that moves the cursor to the appropriate part of the input expression, it could be a starting point for you.

Here's the demo:

https://bourne2learn.com/math/mathjax/mathjax-set-cursor-input.php

Hope it helps

Regards

Murray

[Davide Cervone]

FABad:

Murray's solution is very interesting, and may be what you are looking for.  I read your request slightly differently, which was that you wanted to click on a typeset expression and get back the original TeX code for that expression, not the individual TeX command that produced the character you clicked on, which is what Murray's code tries to do.

If that is what you want, then you can use the configuration

MathJax = {

  options: {

    renderActions: {

      clickTex: [175,

        (doc) => {for (const math of doc.math) MathJax.config.clickTex(math)},

        (math, doc) => MathJax.config.clickTex(math)

      ]

    }

  },

  clickTex(item) {

    item.typesetRoot.addEventListener('click', (event) => alert(item.math));

  }

}

to provide for that.  This adds an action to MathJax's list of render actions that comes after the typesetting has been performed (the 175 places it after typesetting at 150), and adds a click event handler to the typeset output.  The event handler simply puts up an alert with the original TeX code, but you can replace that alert with whatever action you need to take.  It is not clear to me how you want to map this back to your original document without some kind of identification for the individual equation, since there could be two copies of the identical equation, so this doesn't tell you which one it is.  Your editor could wrap the equation in a tag with an identifying ID that you can match to the equations in the original source, but in that case, you would not need the actual TeX, but just the id from the parent element of the clicked one.  But that[s a problem of you to deal with, I guess.

As an aside, in v4 (now out in beta release), the nodes in the output from MathJax has data-latex attributes that indicate the individual piece of the original TeX that produced that node (though it is not perfect, and there are a number of issues that need to be kept in mind).  That might be helpful if Murray's approach is the one you were really looking for.

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/b7cc92c5-1f19-489a-b364-f8bc6e3b67b3n%40googlegroups.com.

[FAbad]

Thank you Murray and Davide for your responses! These approaches are very useful, and will look at them closer!

Thank you again for your time!

[Murray]

I finally got a chance to update my example to MathJax version 4, where it was much easier to implement.

https://bourne2learn.com/math/mathjax/mathjax-set-cursor-input.php

I make use of the class "mjx-selected" (which MathJax adds to an expression on click) to determine where in the Latex the relevant expression comes from. 

My demo works OK, but the "mjx-selected" class is removed from the typeset math expression, thus losing MathJax's "info" facility. It stays visible sometimes, but only rarely. It seems I'm interfering with MathJax's onClick event, or something.

Not an earth-shattering issue, but maybe there's a simple workaround?

Regards

Murray

[Davide Cervone]

I make use of the class "mjx-selected" (which MathJax adds to an expression on click) to determine where in the Latex the relevant expression comes from. 

My demo works OK, but the "mjx-selected" class is removed from the typeset math expression, thus losing MathJax's "info" facility. It stays visible sometimes, but only rarely. It seems I'm interfering with MathJax's onClick event, or something.

Not an earth-shattering issue, but maybe there's a simple workaround?

The mix-selected class is part of MathJax's expression explorer, which is in effect when the math expression is focused.  When the focus moves to another element, the explorer stops and the mjx-selected class is removed.

I suppose you could note the item that was selected, and then after your LaTeX text area becomes focused, add the mix-selected class again, but you would then be responsible for removing that class if the user tabs to or clicks on the math and starts the expression explorer again.  You might need to add more event handlers for such things.  Might be a bit delicate to cover all the bases.

Davide

[Murray]

Thanks, Davide

Your proposed solution worked just fine (as far as I can tell) and didn't require any other event handlers.

https://bourne2learn.com/math/mathjax/mathjax-set-cursor-input.php

I wanted to keep the highlight so the user could understand why (e.g.) when they clicked on the first square root sign, the cursor would get placed at the end of the whole square root expression, rather than on \sqrt itself.

Thanks again,

Murray

[Davide Cervone]

Overall, this looks good.

One of the situations I was worried about was tabbing to the math (and thereby starting the explorer).  If you click on some term and then click in the paragraph above the math and tab twice (once to the textarea and once to the math) you get this:

where the selection that you have marked remains marked.  That is confusing.

I would recommend that you remove your mjx-selected class when the textarea loses focus (on a focusout event).  That should avoid this.

I also think you should remove the highlighting if the cursor position moves within the text area, as then you are no longer at the highlighted position.  (It might be interesting to try to map the new cursor position to the output, but that is another story).  Removing the highlighting on nay keypress event would at least not show the wrong highlighting when you move.

Those are the kinds of issues I was referring to when I mentioned other event handlers.

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/d329f896-ea6e-4e71-9560-853343735575n%40googlegroups.com.

[Murray]

The latest version (it may need a page refresh) addresses your various concerns regarding tabbing and clicking outside.

https://bourne2learn.com/math/mathjax/mathjax-set-cursor-input.php

I also addressed your challenge, and now it works both ways:

1. Click in (or edit) the textarea and the appropriate math is highlighted
2. Click on the math output and the cursor in the textarea is placed on the appropriate element in the Latex

It has a few glitches, but it mostly works.

Regards

Murray