@pie-lib/math-rendering 3.2.2-next.4 → 3.3.1-beta.0

package/src/render-math.js

@@ -1,4 +1,9 @@
 import { mathjax } from 'mathjax-full/js/mathjax';
+import { MathJax as globalMathjax } from 'mathjax-full/js/components/global';
+import { AssistiveMmlHandler } from 'mathjax-full/js/a11y/assistive-mml';
+import { EnrichHandler } from 'mathjax-full/js/a11y/semantic-enrich';
+import { MenuHandler } from 'mathjax-full/js/ui/menu/MenuHandler';
+import { FindMathML } from 'mathjax-full/js/input/mathml/FindMathML';
 import { MathML } from 'mathjax-full/js/input/mathml';
 import { TeX } from 'mathjax-full/js/input/tex';
 
@@ -6,12 +11,19 @@ import { CHTML } from 'mathjax-full/js/output/chtml';
 import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html';
 import { browserAdaptor } from 'mathjax-full/js/adaptors/browserAdaptor';
 import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages';
+import { engineReady } from 'speech-rule-engine/js/common/system';
 
 if (typeof window !== 'undefined') {
   RegisterHTMLHandler(browserAdaptor());
 }
 
-import pkg from '../package.json';
+let sreReady = false;
+
+engineReady().then(() => {
+  sreReady = true;
+});
+
+// import pkg from '../../package.json';
 import { mmlNodes, chtmlNodes } from './mstack';
 import debug from 'debug';
 import { wrapMath, unWrapMath } from './normalization';
@@ -19,6 +31,7 @@ import { MmlFactory } from 'mathjax-full/js/core/MmlTree/MmlFactory';
 import { SerializedMmlVisitor } from 'mathjax-full/js/core/MmlTree/SerializedMmlVisitor';
 import { CHTMLWrapperFactory } from 'mathjax-full/js/output/chtml/WrapperFactory';
 import { CHTMLmspace } from 'mathjax-full/js/output/chtml/Wrappers/mspace';
+import { HTMLDomStrings } from 'mathjax-full/js/handlers/html/HTMLDomStrings';
 
 const visitor = new SerializedMmlVisitor();
 const toMMl = (node) => visitor.visitTree(node);
@@ -29,7 +42,15 @@ const NEWLINE_BLOCK_REGEX = /\\embed\{newLine\}\[\]/g;
 const NEWLINE_LATEX = '\\newline ';
 
 const getGlobal = () => {
-  const key = `${pkg.name}@${pkg.version.split('.')[0]}`;
+  // TODO does it make sense to use version?
+  // const key = `${pkg.name}@${pkg.version.split('.')[0]}`;
+  // It looks like Ed made this change when he switched from mathjax3 to mathjax-full
+  // I think it was supposed to make sure version 1 (using mathjax3) is not used
+  // in combination with version 2 (using mathjax-full)
+
+  // TODO higher level wrappers use this instance of math-rendering, and if 2 different instances are used, math rendering is not working
+  //  so I will hardcode this for now until a better solution is found
+  const key = '@pie-lib/math-rendering@2';
 
   if (typeof window !== 'undefined') {
     if (!window[key]) {
@@ -81,6 +102,18 @@ const adjustMathMLStyle = (el = document) => {
   nodes.forEach((node) => node.setAttribute('displaystyle', 'true'));
 };
 
+class myFindMathML extends FindMathML {
+  processMath(set) {
+    const adaptor = this.adaptor;
+    for (const mml of Array.from(set)) {
+      if (adaptor.kind(adaptor.parent(mml)) === 'mjx-assistive-mml') {
+        set.delete(mml);
+      }
+    }
+    return super.processMath(set);
+  }
+}
+
 const createMathMLInstance = (opts, docProvided = document) => {
   opts = opts || defaultOpts();
 
@@ -111,56 +144,33 @@ const createMathMLInstance = (opts, docProvided = document) => {
           ['\\(', '\\)'],
         ],
         processEscapes: true,
-        options: {
-          enableExplorer: true,
-          enableAssistiveMml: true,
-          a11y: {
-            speech: true,
-            braille: true,
-            subtitles: true,
-          },
-          sre: {
-            domain: 'default',
-            style: 'default',
-            locale: 'en',
-          },
-        },
       }
     : {
         packages,
         macros,
-        options: {
-          enableExplorer: true,
-          enableAssistiveMml: true,
-          a11y: {
-            speech: true,
-            braille: true,
-            subtitles: true,
-          },
-          sre: {
-            domain: 'default',
-            style: 'default',
-            locale: 'en',
-          },
-        },
       };
 
   const mmlConfig = {
-    options: {
-      a11y: {
-        speech: true,
-        braille: true,
-        subtitles: true,
-      },
-    },
     parseError: function(node) {
       // function to process parsing errors
       // eslint-disable-next-line no-console
       console.log('error:', node);
       this.error(this.adaptor.textContent(node).replace(/\n.*/g, ''));
     },
+    FindMathML: new myFindMathML(),
   };
 
+  let cachedMathjax;
+
+  if (globalMathjax && globalMathjax.version !== mathjax.version) {
+    // handling other MathJax version on the page
+    // replacing it temporarily with the version we have
+    window.MathJax._ = window.MathJax._ || {};
+    window.MathJax.config = window.MathJax.config || {};
+    cachedMathjax = window.MathJax;
+    Object.assign(globalMathjax, mathjax);
+  }
+
   const fontURL = `https://unpkg.com/mathjax-full@${mathjax.version}/ts/output/chtml/fonts/tex-woff-v2`;
   const htmlConfig = {
     fontURL,
@@ -169,12 +179,6 @@ const createMathMLInstance = (opts, docProvided = document) => {
       ...CHTMLWrapperFactory.defaultNodes,
       ...chtmlNodes,
     }),
-
-    options: {
-      renderActions: {
-        assistiveMml: [['AssistiveMmlHandler']],
-      },
-    },
   };
 
   const mml = new MathML(mmlConfig);
@@ -183,8 +187,12 @@ const createMathMLInstance = (opts, docProvided = document) => {
     ...MmlFactory.defaultNodes,
     ...mmlNodes,
   });
+  const classFactory = EnrichHandler(
+    MenuHandler(AssistiveMmlHandler(mathjax.handlers.handlesDocument(docProvided))),
+    mml,
+  );
 
-  const html = mathjax.document(docProvided, {
+  const html = classFactory.create(docProvided, {
     compileError: (mj, math, err) => {
       // eslint-disable-next-line no-console
       console.log('bad math?:', math);
@@ -199,27 +207,42 @@ const createMathMLInstance = (opts, docProvided = document) => {
       doc.typesetError(math, err);
     },
 
-    options: {
-      enableAssistiveMml: true,
-      menuOptions: {
-        settings: {
-          assistiveMml: true,
-          collapsible: true,
-          explorer: true,
-        },
-      },
+    sre: {
+      speech: 'deep',
     },
+    enrichSpeech: 'deep',
 
     InputJax: [new TeX(texConfig), mml],
     OutputJax: new CHTML(htmlConfig),
+    DomStrings: new HTMLDomStrings({
+      skipHtmlTags: [
+        'script',
+        'noscript',
+        'style',
+        'textarea',
+        'pre',
+        'code',
+        'annotation',
+        'annotation-xml',
+        'mjx-assistive-mml',
+        'mjx-container',
+      ],
+    }),
   });
 
   // Note: we must set this *after* mathjax.document (no idea why)
   mml.setMmlFactory(customMmlFactory);
 
+  if (cachedMathjax) {
+    // if we have a cached version, we replace it here
+    window.MathJax = cachedMathjax;
+  }
+
   return html;
 };
 
+let enrichSpeechInitialized = false;
+
 const bootstrap = (opts) => {
   if (typeof window === 'undefined') {
     return { Typeset: () => ({}) };
@@ -231,33 +254,66 @@ const bootstrap = (opts) => {
     version: mathjax.version,
     html: html,
     Typeset: function(...elements) {
-      const updatedDocument = this.html
-        .findMath(elements.length ? { elements } : {})
-        .compile()
-        .getMetrics()
-        .typeset()
-        .updateDocument();
+      const attemptRender = (temporary = false) => {
+        let updatedDocument = this.html.findMath(elements.length ? { elements } : {}).compile();
 
-      try {
-        const list = updatedDocument.math.list;
+        if (!temporary && sreReady) {
+          updatedDocument = updatedDocument.enrich();
+        }
+
+        updatedDocument = updatedDocument
+          .getMetrics()
+          .typeset()
+          .assistiveMml()
+          .attachSpeech()
+          .addMenu()
+          .updateDocument();
 
-        for (let item = list.next; typeof item.data !== 'symbol'; item = item.next) {
-          const mathMl = toMMl(item.data.root);
-          const parsedMathMl = mathMl.replaceAll('\n', '');
+        if (!enrichSpeechInitialized && typeof updatedDocument.math.list?.next?.data === 'object') {
+          enrichSpeechInitialized = true;
+        }
 
-          item.data.typesetRoot.setAttribute('data-mathml', parsedMathMl);
+        try {
+          const list = updatedDocument.math.list;
+
+          if (list) {
+            for (let item = list.next; typeof item.data !== 'symbol'; item = item.next) {
+              const mathMl = toMMl(item.data.root);
+              const parsedMathMl = mathMl.replaceAll('\n', '');
+
+              item.data.typesetRoot.setAttribute('data-mathml', parsedMathMl);
+              item.data.typesetRoot.setAttribute('tabindex', '-1');
+            }
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e.toString());
         }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e.toString());
+
+        updatedDocument.clear();
+      };
+
+      if (!enrichSpeechInitialized) {
+        attemptRender(true);
       }
 
-      updatedDocument.clear();
+      mathjax.handleRetriesFor(() => {
+        attemptRender();
+      });
     },
   };
 };
 
 const renderMath = (el, renderOpts) => {
+  if (
+    window &&
+    window.MathJax &&
+    window.MathJax.customKey &&
+    window.MathJax.customKey == '@pie-lib/math-rendering-accessible@1'
+  ) {
+    return;
+  }
+
   const isString = typeof el === 'string';
   let executeOn = document.body;
 
@@ -303,9 +359,9 @@ const renderMath = (el, renderOpts) => {
     return;
   }
 
-  if (el instanceof Element) {
+  if (el instanceof Element && getGlobal().instance?.Typeset) {
     getGlobal().instance.Typeset(el);
-  } else if (el.length) {
+  } else if (el.length && getGlobal().instance?.Typeset) {
     const arr = Array.from(el);
     getGlobal().instance.Typeset(...arr);
   }

package/lib/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "mmlToLatex", {
-  enumerable: true,
-  get: function get() {
-    return _mmlToLatex["default"];
-  }
-});
-Object.defineProperty(exports, "renderMath", {
-  enumerable: true,
-  get: function get() {
-    return _renderMath["default"];
-  }
-});
-Object.defineProperty(exports, "unWrapMath", {
-  enumerable: true,
-  get: function get() {
-    return _normalization.unWrapMath;
-  }
-});
-Object.defineProperty(exports, "wrapMath", {
-  enumerable: true,
-  get: function get() {
-    return _normalization.wrapMath;
-  }
-});
-
-var _renderMath = _interopRequireDefault(require("./render-math"));
-
-var _mmlToLatex = _interopRequireDefault(require("./mml-to-latex"));
-
-var _normalization = require("./normalization");
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["import renderMath from './render-math';\nimport mmlToLatex from './mml-to-latex';\nimport { wrapMath, unWrapMath } from './normalization';\n\nexport { renderMath, wrapMath, unWrapMath, mmlToLatex };\n"],"file":"index.js"}

package/lib/mml-to-latex.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _mathmlToLatex = _interopRequireDefault(require("mathml-to-latex"));
-
-var _default = function _default(mathml) {
-  return _mathmlToLatex["default"].convert(mathml);
-};
-
-exports["default"] = _default;
-//# sourceMappingURL=mml-to-latex.js.map

package/lib/mml-to-latex.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/mml-to-latex.js"],"names":["mathml","Mathml2latex","convert"],"mappings":";;;;;;;;;AAAA;;eACe,kBAACA,MAAD;AAAA,SAAYC,0BAAaC,OAAb,CAAqBF,MAArB,CAAZ;AAAA,C","sourcesContent":["import Mathml2latex from 'mathml-to-latex';\nexport default (mathml) => Mathml2latex.convert(mathml);\n"],"file":"mml-to-latex.js"}

package/lib/mstack/chtml.js

@@ -1,296 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getStackData = exports.Row = exports.Line = exports.CHTMLmstack = void 0;
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _Wrapper = require("mathjax-full/js/output/chtml/Wrapper");
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var reduceText = function reduceText(acc, n) {
-  if (n.node && n.node.kind === 'text') {
-    acc += n.node.text;
-  }
-
-  return acc;
-};
-
-var Line = /*#__PURE__*/function () {
-  function Line() {
-    (0, _classCallCheck2["default"])(this, Line);
-    this.kind = 'line';
-  }
-
-  (0, _createClass2["default"])(Line, [{
-    key: "columns",
-    get: function get() {
-      return [];
-    }
-  }]);
-  return Line;
-}();
-
-exports.Line = Line;
-
-var Row = /*#__PURE__*/function () {
-  function Row(columns, operator) {
-    (0, _classCallCheck2["default"])(this, Row);
-    this.kind = 'row';
-    this.operator = operator;
-    this.columns = columns;
-  }
-
-  (0, _createClass2["default"])(Row, [{
-    key: "pad",
-    value: function pad(count) {
-      var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'right';
-
-      if (count < this.columns.length) {
-        throw new Error('no');
-      }
-
-      var diff = count - this.columns.length;
-
-      var padding = _lodash["default"].times(diff).map(function () {
-        return '__pad__';
-      });
-
-      return direction === 'right' ? [].concat((0, _toConsumableArray2["default"])(padding), (0, _toConsumableArray2["default"])(this.columns)) : [].concat((0, _toConsumableArray2["default"])(this.columns), (0, _toConsumableArray2["default"])(padding));
-    }
-  }]);
-  return Row;
-}();
-
-exports.Row = Row;
-
-var mathNodeToCharArray = function mathNodeToCharArray(mn) {
-  var text = mn.childNodes.reduce(reduceText, '');
-  return text.split('');
-};
-/**
- * Convert child a column entry
- * @param {*} child
- * @return an array of column content
- */
-
-
-var toColumnArray = function toColumnArray(child) {
-  if (!child || !child.kind) {
-    return [];
-  }
-
-  if (child.kind === 'msrow') {
-    throw new Error('msrow in msrow?');
-  }
-
-  if (child.kind === 'mo') {
-    // We are going to treat this operator as a text array.
-    // It's probably going to be a decimal point
-    // eslint-disable-next-line no-console
-    console.warn('mo that is not 1st node in msrow?');
-    return mathNodeToCharArray(child); // throw new Error('mo must be first child of msrow');
-  }
-
-  if (child.kind === 'mn') {
-    return mathNodeToCharArray(child);
-  }
-
-  if (child.toCHTML) {
-    return child;
-  }
-};
-/**
- *  convert mstack chtml childNodes into a Row
- *  @param child chtml child node of mstack
- *  @return Row | Line
- */
-
-
-var rowStack = function rowStack(child) {
-  if (!child || !child.kind) {
-    return;
-  }
-
-  if (child.kind === 'msrow') {
-    if (!child.childNodes || child.childNodes.length === 0) {
-      return new Row([]);
-    }
-
-    var f = _lodash["default"].first(child.childNodes);
-
-    var nodes = f && f.kind === 'mo' ? _lodash["default"].tail(child.childNodes) : child.childNodes;
-
-    var columns = _lodash["default"].flatten(nodes.map(toColumnArray));
-
-    return new Row(columns, f.kind === 'mo' ? f : undefined);
-  }
-
-  if (child.kind === 'mn') {
-    var _columns = mathNodeToCharArray(child);
-
-    return new Row(_columns, undefined);
-  }
-
-  if (child.kind === 'mo') {
-    // eslint-disable-next-line no-console
-    console.warn('mo on its own row?');
-    return new Row([], child);
-  }
-
-  if (child.kind === 'msline') {
-    return new Line();
-  }
-
-  if (child.toCHTML) {
-    return new Row([child]);
-  }
-};
-/** convert MathJax chtml tree to Row[]
- * @param mstack the root of the mathjax chtml tree
- * @return Row[]
- */
-
-
-var getStackData = function getStackData(mstack) {
-  if (!mstack || !mstack.childNodes) {
-    return [];
-  }
-
-  return _lodash["default"].compact(mstack.childNodes.map(rowStack));
-};
-
-exports.getStackData = getStackData;
-
-var CHTMLmstack = /*#__PURE__*/function (_CHTMLWrapper) {
-  (0, _inherits2["default"])(CHTMLmstack, _CHTMLWrapper);
-
-  var _super = _createSuper(CHTMLmstack);
-
-  function CHTMLmstack(factory, node) {
-    var _this;
-
-    var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    (0, _classCallCheck2["default"])(this, CHTMLmstack);
-    _this = _super.call(this, factory, node, parent);
-    _this.ce = _this.adaptor.document.createElement.bind(_this.adaptor.document);
-    return _this;
-  }
-
-  (0, _createClass2["default"])(CHTMLmstack, [{
-    key: "toCHTML",
-    value: function toCHTML(parent) {
-      var _this2 = this;
-
-      var chtml = this.standardCHTMLnode(parent);
-      var stackData = getStackData(this); // console.log('stackData', stackData);
-
-      var maxCols = stackData.reduce(function (acc, r) {
-        if (r && r.columns.length > acc) {
-          acc = r.columns.length;
-        }
-
-        return acc;
-      }, 0);
-      var table = this.ce('table');
-      chtml.appendChild(table);
-      stackData.forEach(function (row) {
-        var tr = _this2.ce('tr');
-
-        table.appendChild(tr);
-
-        if (row.kind === 'row') {
-          var td = _this2.ce('td');
-
-          tr.appendChild(td);
-
-          if (row.operator && row.operator.toCHTML) {
-            td.setAttribute('class', 'inner');
-            row.operator.toCHTML(td);
-          } else {
-            td.textContent = '';
-          } // align right for now:
-
-
-          var cols = row.pad(maxCols, 'right');
-          cols.forEach(function (c) {
-            var t = _this2.ce('td');
-
-            tr.appendChild(t);
-
-            if (c === '__pad__') {
-              t.textContent = '';
-            } else if (typeof c === 'string') {
-              t.textContent = c;
-            } else if (c.kind === 'none') {
-              t.textContent = '';
-            } else if (c.toCHTML) {
-              t.setAttribute('class', 'inner');
-              c.toCHTML(t);
-            }
-          });
-        } else if (row.kind === 'line') {
-          var _td = _this2.ce('td');
-
-          tr.appendChild(_td);
-
-          _td.setAttribute('colspan', maxCols + 1);
-
-          _td.setAttribute('class', 'mjx-line');
-
-          _td.textContent = '';
-        }
-      });
-    }
-  }]);
-  return CHTMLmstack;
-}(_Wrapper.CHTMLWrapper);
-
-exports.CHTMLmstack = CHTMLmstack;
-CHTMLmstack.styles = {
-  'mjx-mstack > table': {
-    'line-height': 'initial',
-    border: 'solid 0px red',
-    'border-spacing': '0em',
-    'border-collapse': 'separate'
-  },
-  'mjx-mstack > table > tr': {
-    'line-height': 'initial'
-  },
-  'mjx-mstack > table > tr > td': {
-    // padding: '1.2rem',
-    border: 'solid 0px blue',
-    'font-family': 'sans-serif',
-    'line-height': 'initial'
-  },
-  'mjx-mstack > table > tr > td.inner': {
-    'font-family': 'inherit'
-  },
-  'mjx-mstack > table > tr > .mjx-line': {
-    padding: 0,
-    'border-top': 'solid 1px black'
-  },
-  '.TEX-A': {
-    'font-family': 'MJXZERO, MJXTEX !important'
-  }
-};
-//# sourceMappingURL=chtml.js.map