cursor movement in a paragraph with MathJax expressions

[Diego R]

Hello, I am making a calculator for a project that I have been sent in my master's degree. I was having problems to represent mathematical expressions like fractions, logarithms, etc but I discovered MathJax which is just what I needed. Everything seemed to be going well but now I have another problem which is the one I want to publish. The problem is that I have made the calculator screen with a <p> and in which I can move the cursor with the keys or with the typical arrow buttons that has a CASIO calculator, everything works perfectly if what I enter are only numbers, but when I draw for example a fraction with MathJax dynamically modifying the contents of a <p> from JavaScript is painted well in the <p> but then I can not move the cursor well. I don't know what I can do.

As you can see in the image, the cursor stays in the numerator and I cannot move it to the right, which I can do if there is only a 4.

The code I have is as follows:

if (button.id === "fraction") {

  const fractionText = "\\(\\frac{4}{5} \\)";

  newValue.splice(cursorPos, 0, fractionText);

  inputText.textContent = newValue.join("");

  dir = 1;

}

MathJax.typeset();

moveCursor(dir);

function moveCursor(direction) {

    // Actualiza la posicion del cursor

    cursorPos += direction;

    let inputTextLength = inputText.textContent.trim().split("").length;

    if (inputTextLength === 0) {

        return;

    }

    // Si el cursor se sale de la pantalla por la izquierda

    if (cursorPos < 0) {

        // Lo colocamos al final

        cursorPos = inputTextLength;

    }

    // Si el cursor se sale de la pantalla por la derecha

    else if (cursorPos > inputTextLength) {

        // Lo colocamos al principio

        cursorPos = 0;

    }

    // Colocar el cursor en el nuevo lugar

    // Limpia la selección previa

    const selection = window.getSelection();

    selection.removeAllRanges();

    const rango = document.createRange();

    rango.setStart(inputText.firstChild, cursorPos);

    rango.collapse(true);

    selection.addRange(rango);

}

[Davide Cervone]

If you are trying allow the cursor to move through the typeset mathematics, I don't think you are going to be able to do it the way you seem to be trying to do it.  You seem to be treating the mathematics as though it were text, but the typeset mathematics is a complex structure of DOM nodes. You don't say what version of MathJax you are using, and the screen shot of the 4/5 don't seem to match any of the fonts that MathJax uses (it is possible that this is the mathjax-fira font in v4, but the 5 doesn't seem to match that).  In v3, there are no text nodes (the characters are all in CSS content elements in ::before selectors), so inputText.textContent will be empty, and your moveCursor will return immediately.  Even if you were to get farther into your moveCursor() function, inputText.firstChild will not be the proper element to select, and because the MathJax fonts have unusual metrics, and MathJa's layout uses line-height: 0, I suspect that the selection bar will not show up as you expect even if you do select the proper locations.

I don't think you are going to be successful trying to manage this using the approach you are taking.  Mathematical expression layout is more 2-dimensional than linear, and so I think you will struggle to get a reasonable navigation approach that only works with forward and backward.  A mathematical WYSIWYG editor is a non-trivial project.

Davide

On Nov 6, 2024, at 6:34 PM, Diego R <drolsa...@gmail.com> wrote:

Hello, I am making a calculator for a project that I have been sent in my master's degree. I was having problems to represent mathematical expressions like fractions, logarithms, etc but I discovered MathJax which is just what I needed. Everything seemed to be going well but now I have another problem which is the one I want to publish. The problem is that I have made the calculator screen with a <p> and in which I can move the cursor with the keys or with the typical arrow buttons that has a CASIO calculator, everything works perfectly if what I enter are only numbers, but when I draw for example a fraction with MathJax dynamically modifying the contents of a <p> from JavaScript is painted well in the <p> but then I can not move the cursor well. I don't know what I can do.

As you can see in the image, the cursor stays in the numerator and I cannot move it to the right, which I can do if there is only a 4.

<Screenshot_1.png>

--
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/b1ce43f0-ea0c-42cf-8e74-d8939c8077c7n%40googlegroups.com.
<Screenshot_1.png>

[Diego R]

Is there nothing I can do?

[Diego R]

Im using version 3

[Davide Cervone]

Is there nothing I can do?

I don't know your programming experience or what you are willing to put into it.  There certainly are on-line math editors out there, so it can be done, and you might even be able to leverage one of those.

You have not really said what you want to be able to do.  I suspect you are wanting to be able to not just move a cursor around, but also want to be able to edit the expression at the cursor location, including inserting new numbers or operations, as well as deleting existing ones.  I don't think your simplistic approach of moving around in the output is going to work for that, as you are going to need to map the user interaction back to the underlying mathematics, and that is not easy to do from the typeset math.

The usual approach is to keep an internal representation of the mathematics as an abstract syntax tree of some sort from which you can generate the LaTeX expression that correspond to it, passing that to MathJax.  Then think about having the user walk that tree and edit it instead of walking the output directly.  When an edit is made, you generate the new LaTeX and have MathJax render that.  You "cursor" could be implemented within the expression via a macro that displays a suitable character.  For example, you could define \| to be use something like \rlap{\!\smash{\mathord{|}}} and then use

\|\frac{4}{5}

\frac{\|4}{5}

\frac{4\|}{5}

\frac{4}{\|5}

\frac{4}{5\|}

\frac{4}{5}\|

as the user moves the cursor through the expression.  You would need to keep track internally of where you are in the syntax tree, and inserting the \| at the correct place. When the user enters new content, you would adjust the tree to accommodate the change, and then replace the current TeX expression with the new one generated from the modified tree.

There are some difficulties with this approach, however, as it is not easy to tell the difference between \sqrt{x+1\|} and \sqrt{x+1}\| for example, so you might need to do more to help disambiguate situations like this.  As I said, this is a non-trivial undertaking, and I suspect you will find other situations that are complicated as well.

Davide

To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/65d487c6-a981-47fb-ba7a-a197ced54745n%40googlegroups.com.

[William F Hammond]

Why not, instead of the proposed \|, use a command with an argument where the argument is the object upon which the cursor is placed, as below?

\newcommand{\mc}[1]{\left|#1\right.}

          -- Bill

William F Hammond
Email: gel...@gmail.com
https://www.facebook.com/william.f.hammond
http://www.albany.edu/~hammond/

𝑻𝒉𝒆 𝒕𝒊𝒎𝒆 𝒕𝒐 𝒔𝒂𝒗𝒆 𝒂 𝒅𝒆𝒎𝒐𝒄𝒓𝒂𝒄𝒚 𝒊𝒔 𝒃𝒆𝒇𝒐𝒓𝒆 𝒊𝒕 𝒊𝒔 𝒍𝒐𝒔𝒕.   -- 𝐊𝐞𝐧 𝐁𝐮𝐫𝐧𝐬

To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/CA3ABB46-E58D-4714-9F2A-FD212C61F9C3%40gmail.com.

[Davide Cervone]

I had thought about something like that, but this will mess up the spacing in more ways than the other one will.  Also, the thing where it is placed, may sometimes be before that cursor.

Davide

To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/CAH_0fy5YLk%2Bripmir6Ms1osQrqrKVF1GNW%2BxE%2B7ogchaObkd9w%40mail.gmail.com.