Fix some problems with MathItem.updateDocument() and MathItem.removeFromDocument(). Add MathItem.rerender(). Adjust labs to use updateDocument() rather than inserting the HTML directly. Update maction to use rerender(), and to move the event handlers out of the CHTMLmaction wrapper, so that the wrapper can be freed even though the math (wtih event handlers) is still in the page.

Author: dpvc

lib/Mml-lab.js

@@ -1,17 +1,14 @@
 import {MathML} from "mathjax3/input/mathml.js";
 import {CHTML} from "mathjax3/output/chtml.js";
-import {AbstractMathItem} from "mathjax3/core/MathItem.js";
-import {AbstractMathDocument} from "mathjax3/core/MathDocument.js";
+import {HTMLMathItem} from "mathjax3/handlers/html/HTMLMathItem.js";
+import {HTMLDocument} from "mathjax3/handlers/html/HTMLDocument.js";
 import {handleRetriesFor} from "mathjax3/util/Retries.js";
 import {browserAdaptor} from "mathjax3/adaptors/browserAdaptor.js";
 
-class LabMathItem extends AbstractMathItem {};
-class LabMathDocument extends AbstractMathDocument {};
-
-let mml = new MathML();
+let mml = new MathML({forceReparse: true});
 let chtml = new CHTML();
 
-let doc = new LabMathDocument(document, browserAdaptor(), {InputJax: mml, OutputJax: chtml});
+let doc = new HTMLDocument(document, browserAdaptor(), {InputJax: mml, OutputJax: chtml});
 document.head.appendChild(chtml.styleSheet(doc));
 
 const Lab = window.Lab = {
@@ -20,28 +17,28 @@ const Lab = window.Lab = {
   display: true,
 
   Typeset() {
+    this.output.innerHTML = '';
+    let text = this.output.appendChild(document.createTextNode(''));
+        
     let MML = this.mml.value;
-    let math = new LabMathItem(MML,mml);
+    let math = new HTMLMathItem(MML,mml);
     math.setMetrics(16,8,16*20,100000,1);
     math.display = this.display;
+    math.start = {node: text, n: 0, delim: ''};
+    math.end = {node: text, n: 0, delim: ''};
     this.jax = math;
 
     handleRetriesFor(function () {
       math.compile();
       math.typeset(doc);
-    }).then(() => Lab.Update(math.typesetRoot))
-      .catch(err => {console.log("Error: "+err.message); console.log(err.stack)});
+      math.updateDocument(doc);  
+    }).catch(err => {console.log("Error: "+err.message); console.log(err.stack)});
   },
 
   Keep() {
     window.location.search = "?" + encodeURIComponent(this.mml.value);
   },
 
-  Update(html) {
-    this.output.innerHTML = '';
-    this.output.appendChild(html);
-  },
-  
   checkKey: function (textarea, event) {
     if (!event) event = window.event;
     var code = event.which || event.keyCode;

lib/TeX-lab.js

@@ -1,17 +1,14 @@
 import {TeX} from "mathjax3/input/tex.js";
 import {CHTML} from "mathjax3/output/chtml.js";
-import {AbstractMathItem} from "mathjax3/core/MathItem.js";
-import {AbstractMathDocument} from "mathjax3/core/MathDocument.js";
+import {HTMLMathItem} from "mathjax3/handlers/html/HTMLMathItem.js";
+import {HTMLDocument} from "mathjax3/handlers/html/HTMLDocument.js";
 import {handleRetriesFor} from "mathjax3/util/Retries.js";
 import {browserAdaptor} from "mathjax3/adaptors/browserAdaptor.js";
 
-class LabMathItem extends AbstractMathItem {};
-class LabMathDocument extends AbstractMathDocument {};
-
 let tex = new TeX();
 let chtml = new CHTML();
 
-let doc = new LabMathDocument(document, browserAdaptor(), {InputJax: tex, OutputJax: chtml});
+let doc = new HTMLDocument(document, browserAdaptor(), {InputJax: tex, OutputJax: chtml});
 document.head.appendChild(chtml.styleSheet(doc));
 
 const Lab = window.Lab = {
@@ -20,28 +17,28 @@ const Lab = window.Lab = {
   display: true,
 
   Typeset() {
+    this.output.innerHTML = '';
+    let text = this.output.appendChild(document.createTextNode(''));
+
     let TeX = this.tex.value;
-    let math = new LabMathItem(TeX,tex);
+    let math = new HTMLMathItem(TeX,tex);
     math.setMetrics(16,8,16*20,100000,1);
     math.display = this.display;
+    math.start = {node: text, n: 0, delim: ''};
+    math.end = {node: text, n: 0, delim: ''};
     this.jax = math;
 
     handleRetriesFor(function () {
       math.compile();
       math.typeset(doc);
-    }).then(() => Lab.Update(math.typesetRoot))
-      .catch(err => {console.log("Error: "+err.message); console.log(err.stack)});
+      math.updateDocument(doc);  
+    }).catch(err => {console.log("Error: "+err.message); console.log(err.stack)});
   },
 
   Keep() {
     window.location.search = "?" + (this.display ? 1 : 0) + encodeURIComponent(this.tex.value);
   },
 
-  Update(html) {
-    this.output.innerHTML = '';
-    this.output.appendChild(html);
-  },
-  
   setDisplay(checked) {
     this.display = checked;
     this.Typeset();

mathjax3-ts/adaptors/HTMLAdaptor.ts

@@ -37,6 +37,7 @@ export interface MinDocument<N, T> {
     documentElement: N;
     head: N;
     body: N;
+    title: string;
     createElement(type: string): N;
     createTextNode(text: string): T;
     querySelectorAll(selector: string): N[];
@@ -227,6 +228,20 @@ extends AbstractDOMAdaptor<N, T, D> implements MinHTMLAdaptor<N, T, D> {
         return doc.documentElement;
     }
 
+    /*
+     * @override
+     */
+    public getStatus(doc: D) {
+        return doc.title;
+    }
+
+    /*
+     * @override
+     */
+    public setStatus(doc: D, status: string) {
+        doc.title = status;
+    }
+
     /*
      * @override
      */

mathjax3-ts/adaptors/liteAdaptor.ts

@@ -112,6 +112,20 @@ export class LiteAdaptor extends AbstractDOMAdaptor<LiteElement, LiteText, LiteD
         return doc.root;
     }
 
+    /*
+     * @override
+     */
+    public getStatus(doc: LiteDocument) {
+        return '';  // statusline is not maintained
+    }
+
+    /*
+     * @override
+     */
+    public setStatus(doc: LiteDocument, status: string) {
+        // statusline is not maintained
+    }
+
     /*
      * @override
      */

mathjax3-ts/core/DOMAdaptor.ts

@@ -87,6 +87,18 @@ export interface DOMAdaptor<N, T, D> {
      */
     root(doc: D): N;
 
+    /*
+     * @param{D} doc    The document whose statusline is to be obtained
+     * @return{string}  The document's status line (title)
+     */
+    getStatus(doc: D): string;
+
+    /*
+     * @param{D} doc           The document whose statusline is to be set
+     * @param{string} status   The document's new status line (title)
+     */
+    setStatus(doc: D, status: string): void;
+
     /*
      * @param{N} node        The node to search for tags
      * @param{string} name   The name of the tag to search for
@@ -385,6 +397,16 @@ export abstract class AbstractDOMAdaptor<N, T, D> implements DOMAdaptor<N, T, D>
      */
     public abstract root(doc: D): N;
 
+    /*
+     * @override
+     */
+    public abstract getStatus(doc: D): string;
+
+    /*
+     * @override
+     */
+    public abstract setStatus(doc: D, status: string): void;
+
     /*
      * @override
      */

mathjax3-ts/core/MathItem.ts

@@ -149,6 +149,13 @@ export interface MathItem<N, T, D> {
      */
     typeset(document: MathDocument<N, T, D>): void;
 
+    /*
+     * Rerenders an already rendered item and re-inserts it into the document
+     *
+     * @param{MathDocument} document  The MathDocument in which the math resides
+     */
+    rerender(document: MathDocument<N, T, D>): void;
+
     /*
      * Inserts the typeset version in place of the original form in the document
      *
@@ -303,6 +310,15 @@ export abstract class AbstractMathItem<N, T, D> implements MathItem<N, T, D> {
         }
     }
 
+    /*
+     * @override
+     */
+    public rerender(document: MathDocument<N, T, D>) {
+        this.state(AbstractMathItem.STATE.COMPILED);
+        this.typeset(document);
+        this.updateDocument(document);
+    }
+
     /*
      * @override
      */

mathjax3-ts/core/MmlTree/MmlNodes/maction.ts

@@ -114,4 +114,16 @@ export class MmlMaction extends AbstractMmlNode {
         this.updateTeXclass(selected);
         return prev;
     }
+
+    /*
+     * Select the next child for a toggle action
+     */
+    public nextToggleSelection() {
+        let selection = Math.max(1, (this.attributes.get('selection') as number) + 1);
+        if (selection > this.childNodes.length) {
+            selection = 1;
+        }
+        this.attributes.set('selection', selection);
+    }
+
 }

mathjax3-ts/handlers/html/HTMLMathItem.ts

@@ -115,18 +115,19 @@ export class HTMLMathItem<N, T, D> extends AbstractMathItem<N, T, D> {
     public removeFromDocument(restore: boolean = false) {
         if (this.state() >= STATE.TYPESET) {
             let node = this.start.node;
+            let math: N | T = this.adaptor.text('');
             if (restore) {
                 let text = this.start.delim + this.math + this.end.delim;
-                let math;
                 if (this.inputJax.processStrings) {
                     math = this.adaptor.text(text);
                 } else {
                     const doc = this.adaptor.parse(text, 'text/html');
                     math = this.adaptor.firstChild(this.adaptor.body(doc));
                 }
-                this.adaptor.insert(math, node);
             }
-            this.adaptor.remove(node);
+            this.adaptor.replace(math, node);
+            this.start.node = this.end.node = math;
+            this.start.n = this.end.n = 0;
         }
     }
 

mathjax3-ts/output/chtml.ts

@@ -24,7 +24,7 @@
 import {AbstractOutputJax} from '../core/OutputJax.js';
 import {OptionList, separateOptions} from '../util/Options.js';
 import {MathDocument} from '../core/MathDocument.js';
-import {MathItem} from '../core/MathItem.js';
+import {MathItem, AbstractMathItem} from '../core/MathItem.js';
 import {MmlNode} from '../core/MmlTree/MmlNode.js';
 import {CHTMLWrapper} from './chtml/Wrapper.js';
 import {CHTMLWrapperFactory} from './chtml/WrapperFactory.js';