javascriptjquerydommathquill

Writing in TextField, the previous first node not removed from DOM


I'm trying to overwrite 'abc' into MathQuill's TextField with initial text 'xyz'

var MQ = MathQuill.getInterface(2);
var mySpan = document.getElementById('A');
var textField = MQ.TextField(mySpan);
textField.latex('abc');
<link href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1-a/mathquill.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1-a/mathquill.min.js"></script>
<span id="A">xyz</span>

I was expecting 'abc' in the text field.

When I load the page, however, I get 'xabc'.

Then I put the cursor at the right of 'x' then stroke backspace, but can't delete the first node 'x'.

Then I click on 'x' and get the following error:

Uncaught Error: prayer failed: nodeId is the id of some Node that exists
    at s (mathquill.min.js:10:419)
    at t.seek (mathquill.min.js:10:27378)
    at HTMLSpanElement.<anonymous> (mathquill.min.js:10:27058)
    at HTMLSpanElement.dispatch (jquery.min.js:2:40035)
    at v.handle (jquery.min.js:2:38006)

I think this means that 'x' was removed from internal node map, but wasn't removed from DOM.

The above example uses MathQuill v0.10.1-a, I have tried some older versions and I still see this error.


If we call .latex() two times on an empty initial <span>, and click on 'x', I still see this error.

var MQ = MathQuill.getInterface(2);
var mySpan = document.getElementById('A');
var textField = MQ.TextField(mySpan);
textField.latex('xyz');
textField.latex('abc');
<link href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1-a/mathquill.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1-a/mathquill.min.js"></script>
<span id="A"></span>


Solution

  • In https://github.com/mathquill/mathquill/blob/a38bfa0b264bed88870dec3dd2d0cdf8a0f3a2d9/src/services/latex.ts#L340

        root.jQ.children().slice(1).remove();
    

    I don't know why .slice(1) is there.

    If .slice(1) is removed I get the expected behavior.