Repository: arnog/mathlive

Issue #1118: Replacing a subset of a mathfield with a pattern that contains the target leads to an infinite loop
Created: 2021-08-10T08:23:51Z
Description
If you have a math field with only one character, and you call MathfieldElement.replace() to replace that character with a superscript, infinite recursion causes an error. This also happens if you have multiple characters and try to replace first character.
Steps to Reproduce

Open the demo at https://codesandbox.io/s/wizardly-hellman-h31r7?file=/index.html
Open your devtools' console
Click on the button
Observe the following error in your console:
VM416 mathlive.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)
    at Lt.get computedStyle [as computedStyle] (VM416 mathlive.min.js:2)


Notice that any further interactions with the math field cause the same error in the console

Alternatively

Create a math field in HTML: <math-field id="mf">5</math-field>
Replace its value: document.getElementById('mf').replace('5', '^5')
Observe error in console

Additionally, trying to .getValue('latex') after the .replace() causes the same error. However, .getValue('ascii-math') produces the following:
> document.getElementById('mf').getValue('ascii-math')
"^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^(^5)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))"

Actual Behavior
Infinite recursion breaks the field.
Expected Behavior
No infinite recursion that breaks the field.
Environment
MathLive version
0.69.5
Operating System
Windows 10 Pro N 20H2 build 19042.1110
Browser
Chrome 92.0.4515.131 (Official Build) (64-bit)

Duplicate issue #1117: Regex replace replaces entire field value instead of matched value
Created: 2021-08-10T08:04:56Z
Description
When using MathfieldElement.replace() with a regex as the matcher, the entire mathfield value gets replaced. For example, mf.replace("⁵", "^5") does replace the unicode superscript 5 with ^5, but mf.replace(/⁵/, "^5") replaces the entire field value with ^5.
Steps to Reproduce

Open the demo at https://codesandbox.io/s/musing-feistel-0rk4n?file=/src/index.js
Click on "replace with text" to execute mf.replace('⁵', '^5)
Click inside the math field, observe that the unicode ⁵ has been replaced with ^5.
Click on "reset".
Click on "replace with regex" to execute mf.replace(/⁵/, '^5')
Click inside the math field, observe that the entire field value has been replaced with ^5.

Actual Behavior
The entire math field value gets replaced when replacing with a regex.
Expected Behavior
I expected that only the part matched by the regex would be replaced with the regex.
Additionally, replace doesn't seem to update the visual field value until the element is focused. I'm not sure if this is intended or not.
Motivation
I'm trying to replace unicode superscripts and subscripts on input as some Linux distros seem to produce unicode superscripts when typing ^5 (although typing ^^5 does emit ^, then 5, as expected). It would be handy for me to able do a .replace() with /[\u00B2-\u00B3\u00B9\u2070-\u2071\u2074-\u208E\u2090-\u209C]/ to handle these characters with a replacer function.
Environment
MathLive version
0.69.5
Operating System
Windows 10 Pro N 20H2 build 19042.1110
Browser

Chrome 92.0.4515.131 (Official Build) (64-bit)
Firefox 90.0.2 (64-bit)
Edge 92.0.902.67 (Official build) (64-bit)

Closing comment (2021-08-13T15:25:23Z): I think this is actually a duplicate of #1118 (or at least, same underlying cause). After fixing #1118 I can't reproduce this. I couldn't reproduce the issue with the field not updating after replace either. Let me know if you still see a problem.