@pie-lib/math-rendering 3.2.1 → 3.3.0-beta.1

package/src/__tests__/normalization.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import debug from 'debug';
+import { Data } from 'slate';
+import { BracketTypes, wrapMath, unWrapMath } from '../normalization';
+
+const log = debug('@pie-lib:math-rendering:test:normalization');
+
+describe('normalization', () => {
+  describe('unWrapMath', () => {
+    const assertUnWrap = (html, expected, wrapType) => {
+      it(`innerHTML: ${html} is unWrapped to: ${expected} with wrapType: ${wrapType}`, () => {
+        const out = unWrapMath(html);
+
+        expect(out).toEqual({
+          unwrapped: expected,
+          wrapType: wrapType,
+        });
+      });
+    };
+
+    assertUnWrap('$$<$$', '<', BracketTypes.DOLLAR);
+    assertUnWrap('$<$', '<', BracketTypes.DOLLAR);
+    assertUnWrap('\\(<\\)', '<', BracketTypes.ROUND_BRACKETS);
+    assertUnWrap('\\[<\\]', '<', BracketTypes.ROUND_BRACKETS);
+    assertUnWrap('latex', 'latex', BracketTypes.ROUND_BRACKETS);
+    assertUnWrap('\\displaystyle foo', 'foo', BracketTypes.ROUND_BRACKETS);
+  });
+
+  describe('wrapMath', () => {
+    const assertWrap = (latex, expectedHtml, wrapper) => {
+      wrapper = wrapper || BracketTypes.ROUND_BRACKETS;
+      it(`${latex} is wrapped to: ${expectedHtml}`, () => {
+        const out = wrapMath(latex, wrapper);
+
+        log('out: ', out);
+
+        expect(out).toEqual(expectedHtml);
+      });
+    };
+
+    assertWrap('latex', '\\(latex\\)', BracketTypes.ROUND_BRACKETS);
+    assertWrap('latex', '\\(latex\\)', BracketTypes.SQUARE_BRACKETS);
+    assertWrap('latex', '$latex$', BracketTypes.DOLLAR);
+    assertWrap('latex', '$latex$', BracketTypes.DOUBLE_DOLLAR);
+
+    /**
+     * Note that when this is converted to html it get's escaped - but that's an issue with the slate html-serializer.
+     */
+    assertWrap('<', '\\(<\\)');
+  });
+});

package/src/__tests__/render-math.test.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import renderMath, { fixMathElement } from '../render-math';
+import _ from 'lodash';
+
+jest.mock(
+  'mathjax-full/js/mathjax',
+  () => ({
+    mathjax: {
+      document: jest.fn().mockReturnThis(),
+      findMath: jest.fn().mockReturnThis(),
+      compile: jest.fn().mockReturnThis(),
+      getMetrics: jest.fn().mockReturnThis(),
+      typeset: jest.fn().mockReturnThis(),
+      updateDocument: jest.fn().mockReturnThis(),
+      clear: jest.fn().mockReturnThis(),
+      handlers: {
+        handlesDocument: jest.fn().mockReturnThis(),
+      },
+      handleRetriesFor: jest.fn().mockImplementation((callback) => callback()),
+    },
+  }),
+  {
+    virtual: false,
+  },
+);
+
+jest.mock('mathjax-full/js/input/mathml', () => {
+  const mock = jest.fn().mockReturnThis();
+  mock.setMmlFactory = jest.fn();
+  return {
+    MathML: () => mock,
+  };
+});
+
+jest.mock('mathjax-full/js/input/tex', () => ({
+  TeX: jest.fn(),
+}));
+jest.mock('mathjax-full/js/core/MmlTree/MmlFactory', () => {
+  const instance = {
+    setMmlFactory: jest.fn(),
+    defaultNodes: {},
+  };
+  return {
+    MmlFactory: () => instance,
+  };
+});
+
+const mockMathInstance = {
+  document: jest.fn().mockReturnThis(),
+  findMath: jest.fn().mockReturnThis(),
+  compile: jest.fn().mockReturnThis(),
+  enrich: jest.fn().mockReturnThis(),
+  addMenu: jest.fn().mockReturnThis(),
+  attachSpeech: jest.fn().mockReturnThis(),
+  assistiveMml: jest.fn().mockReturnThis(),
+  getMetrics: jest.fn().mockReturnThis(),
+  typeset: jest.fn().mockReturnThis(),
+  updateDocument: jest.fn().mockReturnValue({
+    math: {
+      list: undefined,
+    },
+    clear: jest.fn().mockReturnThis(),
+  }),
+  clear: jest.fn().mockReturnThis(),
+  handlers: {
+    handlesDocument: jest.fn().mockReturnThis(),
+  },
+  handleRetriesFor: jest.fn().mockImplementation((callback) => callback()),
+};
+
+const mockHtml = {
+  findMath: jest.fn().mockReturnValue(mockMathInstance),
+};
+
+const mockEnrichHandlerInstance = {
+  create: jest.fn().mockImplementation(() => mockHtml),
+};
+
+jest.mock('mathjax-full/js/a11y/semantic-enrich', () => {
+  return {
+    EnrichHandler: () => mockEnrichHandlerInstance,
+  };
+});
+
+jest.mock('mathjax-full/js/a11y/assistive-mml', () => {
+  return {
+    AssistiveMmlHandler: () => {},
+  };
+});
+
+jest.mock('mathjax-full/js/ui/menu/MenuHandler', () => {
+  return {
+    MenuHandler: () => {},
+  };
+});
+
+jest.mock('mathjax-full/js/output/chtml', () => ({
+  CHTML: jest.fn(),
+}));
+
+jest.mock('mathjax-full/js/adaptors/browserAdaptor', () => ({
+  browserAdaptor: jest.fn(),
+}));
+
+jest.mock('mathjax-full/js/handlers/html', () => ({
+  RegisterHTMLHandler: jest.fn(),
+}));
+
+jest.mock('mathjax-full/js/core/MmlTree/SerializedMmlVisitor', () => ({
+  SerializedMmlVisitor: jest.fn(),
+}));
+
+describe('render-math', () => {
+  it('calls classFactory.create once', () => {
+    const div = document.createElement('div');
+
+    _.times(10).forEach((i) => renderMath(div));
+
+    expect(mockEnrichHandlerInstance.create).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls MathJax render', () => {
+    const div = document.createElement('div');
+
+    renderMath(div);
+    expect(mockEnrichHandlerInstance.create).toHaveBeenCalledTimes(1);
+    expect(mockHtml.findMath).toHaveBeenCalledWith({ elements: [div] });
+  });
+
+  it('call render math for an array of elements', () => {
+    const divOne = document.createElement('div');
+    const divTwo = document.createElement('div');
+
+    renderMath([divOne, divTwo]);
+
+    expect(mockEnrichHandlerInstance.create).toHaveBeenCalledTimes(1);
+    expect(mockHtml.findMath).toHaveBeenCalledWith({
+      elements: [divOne, divTwo],
+    });
+  });
+
+  it('wraps the math containing element the right way', () => {
+    const wrapper = mount(
+      <div>
+        <span data-latex="">{'420\\text{ cm}=4.2\\text{ meters}'}</span>
+      </div>,
+    );
+    const spanElem = wrapper.instance();
+
+    fixMathElement(spanElem);
+
+    expect(spanElem.textContent).toEqual('\\(420\\text{ cm}=4.2\\text{ meters}\\)');
+  });
+});

package/src/mml-to-latex.js

@@ -1,2 +1,2 @@
-import Mathml2latex from 'mathml-to-latex';
-export default (mathml) => Mathml2latex.convert(mathml);
+import { MathMLToLaTeX } from '@pie-framework/mathml-to-latex';
+export default (mathml) => MathMLToLaTeX.convert(mathml);

package/src/mstack/__tests__/__snapshots__/chtml.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`chtml implicit one row 1`] = `"<table><tr><td></td><td>1</td></tr></table>"`;
+
+exports[`chtml one row 1`] = `"<table><tr><td></td><td>1</td></tr></table>"`;
+
+exports[`chtml two rows 1`] = `"<table><tr><td></td><td>1</td></tr><tr><td></td><td>2</td></tr></table>"`;
+
+exports[`chtml two rows with operator 1`] = `"<table><tr><td></td><td>1</td></tr><tr><td class=\\"inner\\">mo:+</td><td>2</td></tr></table>"`;

package/src/mstack/__tests__/chtml.test.js

@@ -0,0 +1,104 @@
+import { getStackData, Line, Row, CHTMLmstack } from '../chtml';
+// import { CHTMLWrapper, instance } from 'mathjax-full/js/output/chtml/Wrapper';
+import { JSDOM } from 'jsdom';
+
+jest.mock('mathjax-full/js/output/chtml/Wrapper', () => {
+  const instance = {
+    adaptor: {
+      document: {
+        createElement: jest.fn(),
+      },
+    },
+    standardCHTMLnode: jest.fn(),
+  };
+
+  return {
+    instance,
+    CHTMLWrapper: class {
+      constructor() {
+        this.adaptor = { document: { createElement: jest.fn() } };
+        this.document = {};
+        // return instance;
+      }
+    },
+  };
+});
+
+const node = (kind, extras) => ({ kind, childNodes: [], ...extras });
+
+const textNode = (text) => node('text', { text, node: { kind: 'text', text } });
+const mn = (text) => node('mn', { childNodes: [textNode(text)] });
+const mo = (text) =>
+  node('mo', {
+    childNodes: [textNode(text)],
+  });
+
+const mco = (text) => ({
+  ...mo(text),
+
+  toCHTML: (n) => {
+    const t = `mo:${text}`;
+    n.textContent = t;
+  },
+});
+
+const msrow = (...childNodes) => node('msrow', { childNodes });
+const mstack = (...rows) => node('mstack', { childNodes: rows });
+const msline = () => node('msline');
+describe('getStackData', () => {
+  it.each`
+    input                                                 | expected
+    ${mstack(msrow(mo('+'), mn('111')))}                  | ${[new Row(['1', '1', '1'], mo('+'))]}
+    ${mstack(msrow(mn('111')))}                           | ${[new Row(['1', '1', '1'])]}
+    ${mstack(msrow(mn('1'), mn('1')))}                    | ${[new Row(['1', '1'])]}
+    ${mstack(msrow(mn('1')), mn('1'))}                    | ${[new Row(['1']), new Row(['1'])]}
+    ${mstack(msline())}                                   | ${[new Line()]}
+    ${mstack(mn('1'), msline(), msrow(mo('+'), mn('1')))} | ${[new Row(['1']), new Line(), new Row(['1'], mo('+'))]}
+    ${mstack(mn('1'), mn('1'))}                           | ${[new Row(['1']), new Row(['1'])]}
+  `('$input => $expected', ({ input, expected }) => {
+    const d = getStackData(input);
+    // console.log('d:', d);
+    // console.log('e:', expected);
+    expect({ ...d }).toEqual({ ...expected });
+  });
+});
+
+describe('Row', () => {
+  describe('pad', () => {
+    it.each`
+      cols   | count | expected
+      ${[]}  | ${0}  | ${[]}
+      ${[1]} | ${1}  | ${[1]}
+      ${[1]} | ${2}  | ${['__pad__', 1]}
+      ${[1]} | ${3}  | ${['__pad__', '__pad__', 1]}
+    `('pads to the right', ({ cols, count, expected }) => {
+      const r = new Row(cols);
+      const p = r.pad(count, 'right');
+      expect(p).toEqual(expected);
+    });
+  });
+});
+
+describe.each`
+  label                       | tree
+  ${'one row'}                | ${[msrow(mn('1'))]}
+  ${'implicit one row'}       | ${[mn('1')]}
+  ${'two rows'}               | ${[msrow(mn('1')), msrow(mn('2'))]}
+  ${'two rows with operator'} | ${[msrow(mn('1')), msrow(mco('+'), mn('2'))]}
+`('chtml', ({ label, tree }) => {
+  let html;
+
+  beforeEach(() => {
+    const chtml = new CHTMLmstack({}, {});
+    const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
+    chtml.standardCHTMLnode = (parent) => parent;
+    chtml.ce = dom.window.document.createElement.bind(dom.window.document);
+    chtml.childNodes = tree;
+    chtml.toCHTML(dom.window.document.body);
+    html = dom.window.document.body.innerHTML;
+  });
+
+  it(label, () => {
+    expect(html).toMatchSnapshot();
+  });
+});

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);
   }