@pie-lib/math-rendering-accessible 3.3.0-beta.1

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import renderMath, { fixMathElement } from '../render-math';
+// import * as MathJaxModule from '../mathjax-script';
+import _ from 'lodash';
+
+jest.mock('../mathjax-script', () => ({
+  initializeMathJax: jest.fn(),
+}));
+
+describe('render-math', () => {
+  beforeEach(() => {
+    // Reset the mocks before each test
+    jest.resetAllMocks();
+    // Mock window.MathJax and window.mathjaxLoadedP
+    global.window.MathJax = {
+      typeset: jest.fn(),
+      texReset: jest.fn(),
+      typesetClear: jest.fn(),
+      typeset: jest.fn(),
+      typesetPromise: jest.fn(() => Promise.resolve()),
+    };
+    global.window.mathjaxLoadedP = Promise.resolve();
+  });
+
+  it('calls initializeMathJax once without @pie-lib/math-rendering@2', () => {
+    jest.useFakeTimers();
+    const div = document.createElement('div');
+
+    delete window['@pie-lib/math-rendering@2'];
+
+    // Initialize as undefined for the first call
+    global.window.MathJax = undefined;
+    global.window.mathjaxLoadedP = undefined;
+
+    // Call renderMath once to initialize MathJax
+    renderMath(div);
+
+    // Subsequent calls should not re-initialize MathJax
+    global.window.MathJax = {
+      typeset: jest.fn(),
+      texReset: jest.fn(),
+      typesetClear: jest.fn(),
+      typeset: jest.fn(),
+      typesetPromise: jest.fn(() => Promise.resolve()),
+    };
+    global.window.mathjaxLoadedP = Promise.resolve();
+
+    // Call renderMath 9 more times
+    _.times(9).forEach((i) => renderMath(div));
+
+    // setTimeout(() => {
+    //   expect(MathJaxModule.initializeMathJax).toHaveBeenCalledTimes(1);
+    // }, 500);
+  });
+
+  it('does not call initializeMathJax when @pie-lib/math-rendering@2 is present', () => {
+    const div = document.createElement('div');
+
+    renderMath(div);
+    // expect(MathJaxModule.initializeMathJax).not.toHaveBeenCalled();
+  });
+
+  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/index.js

@@ -0,0 +1,5 @@
+import renderMath from './render-math';
+import mmlToLatex from './mml-to-latex';
+import { wrapMath, unWrapMath } from './normalization';
+
+export { renderMath, wrapMath, unWrapMath, mmlToLatex };

package/src/mml-to-latex.js

@@ -0,0 +1,2 @@
+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/mstack/chtml.js

@@ -0,0 +1,220 @@
+import { CHTMLWrapper } from 'mathjax-full/js/output/chtml/Wrapper';
+import _ from 'lodash';
+
+const reduceText = (acc, n) => {
+  if (n.node && n.node.kind === 'text') {
+    acc += n.node.text;
+  }
+  return acc;
+};
+
+export class Line {
+  constructor() {
+    this.kind = 'line';
+  }
+
+  get columns() {
+    return [];
+  }
+}
+
+export class Row {
+  constructor(columns, operator) {
+    this.kind = 'row';
+    this.operator = operator;
+    this.columns = columns;
+  }
+
+  pad(count, direction = 'right') {
+    if (count < this.columns.length) {
+      throw new Error('no');
+    }
+
+    const diff = count - this.columns.length;
+
+    const padding = _.times(diff).map(() => '__pad__');
+    return direction === 'right' ? [...padding, ...this.columns] : [...this.columns, ...padding];
+  }
+}
+
+const mathNodeToCharArray = (mn) => {
+  const text = mn.childNodes.reduce(reduceText, '');
+  return text.split('');
+};
+
+/**
+ * Convert child a column entry
+ * @param {*} child
+ * @return an array of column content
+ */
+const 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
+ */
+const rowStack = (child) => {
+  if (!child || !child.kind) {
+    return;
+  }
+
+  if (child.kind === 'msrow') {
+    if (!child.childNodes || child.childNodes.length === 0) {
+      return new Row([]);
+    }
+    const f = _.first(child.childNodes);
+    const nodes = f && f.kind === 'mo' ? _.tail(child.childNodes) : child.childNodes;
+
+    const columns = _.flatten(nodes.map(toColumnArray));
+
+    return new Row(columns, f.kind === 'mo' ? f : undefined);
+  }
+
+  if (child.kind === 'mn') {
+    const 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[]
+ */
+
+export const getStackData = (mstack) => {
+  if (!mstack || !mstack.childNodes) {
+    return [];
+  }
+  return _.compact(mstack.childNodes.map(rowStack));
+};
+
+export class CHTMLmstack extends CHTMLWrapper {
+  constructor(factory, node, parent = null) {
+    super(factory, node, parent);
+
+    this.ce = this.adaptor.document.createElement.bind(this.adaptor.document);
+  }
+
+  toCHTML(parent) {
+    const chtml = this.standardCHTMLnode(parent);
+
+    const stackData = getStackData(this);
+
+    // console.log('stackData', stackData);
+    const maxCols = stackData.reduce((acc, r) => {
+      if (r && r.columns.length > acc) {
+        acc = r.columns.length;
+      }
+      return acc;
+    }, 0);
+
+    const table = this.ce('table');
+    chtml.appendChild(table);
+
+    stackData.forEach((row) => {
+      const tr = this.ce('tr');
+      table.appendChild(tr);
+
+      if (row.kind === 'row') {
+        const td = this.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:
+        const cols = row.pad(maxCols, 'right');
+        cols.forEach((c) => {
+          const t = this.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') {
+        const td = this.ce('td');
+        tr.appendChild(td);
+        td.setAttribute('colspan', maxCols + 1);
+        td.setAttribute('class', 'mjx-line');
+        td.textContent = '';
+      }
+    });
+  }
+}
+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',
+  },
+};

package/src/mstack/index.js

@@ -0,0 +1,13 @@
+import { CHTMLmstack } from './chtml';
+import { MmlNone, MmlMsline, MmlMstack, MmlMsrow } from './mml';
+
+export const chtmlNodes = {
+  mstack: CHTMLmstack,
+};
+
+export const mmlNodes = {
+  mstack: MmlMstack,
+  msline: MmlMsline,
+  msrow: MmlMsrow,
+  none: MmlNone,
+};

package/src/mstack/mml.js

@@ -0,0 +1,24 @@
+import { AbstractMmlNode } from 'mathjax-full/js/core/MmlTree/MmlNode';
+
+export class MmlNone extends AbstractMmlNode {
+  get kind() {
+    return 'none';
+  }
+}
+
+export class MmlMstack extends AbstractMmlNode {
+  get kind() {
+    return 'mstack';
+  }
+}
+
+export class MmlMsrow extends AbstractMmlNode {
+  get kind() {
+    return 'msrow';
+  }
+}
+export class MmlMsline extends AbstractMmlNode {
+  get kind() {
+    return 'msline';
+  }
+}

package/src/normalization.js

@@ -0,0 +1,69 @@
+export const BracketTypes = {};
+
+BracketTypes.ROUND_BRACKETS = 'round_brackets';
+BracketTypes.SQUARE_BRACKETS = 'square_brackets';
+BracketTypes.DOLLAR = 'dollar';
+BracketTypes.DOUBLE_DOLLAR = 'double_dollar';
+
+const PAIRS = {
+  [BracketTypes.ROUND_BRACKETS]: ['\\(', '\\)'],
+  [BracketTypes.SQUARE_BRACKETS]: ['\\[', '\\]'],
+  [BracketTypes.DOLLAR]: ['$', '$'],
+  [BracketTypes.DOUBLE_DOLLAR]: ['$$', '$$'],
+};
+
+export const wrapMath = (content, wrapType) => {
+  if (wrapType === BracketTypes.SQUARE_BRACKETS) {
+    console.warn('\\[...\\] is not supported yet'); // eslint-disable-line
+    wrapType = BracketTypes.ROUND_BRACKETS;
+  }
+  if (wrapType === BracketTypes.DOUBLE_DOLLAR) {
+    console.warn('$$...$$ is not supported yet'); // eslint-disable-line
+    wrapType = BracketTypes.DOLLAR;
+  }
+
+  const [start, end] = PAIRS[wrapType] || PAIRS[BracketTypes.ROUND_BRACKETS];
+  return `${start}${content}${end}`;
+};
+
+export const unWrapMath = (content) => {
+  const displayStyleIndex = content.indexOf('\\displaystyle');
+  if (displayStyleIndex !== -1) {
+    console.warn('\\displaystyle is not supported - removing'); // eslint-disable-line
+    content = content.replace('\\displaystyle', '').trim();
+  }
+
+  if (content.startsWith('$$') && content.endsWith('$$')) {
+    console.warn('$$ syntax is not yet supported'); // eslint-disable-line
+    return {
+      unwrapped: content.substring(2, content.length - 2),
+      wrapType: BracketTypes.DOLLAR,
+    };
+  }
+  if (content.startsWith('$') && content.endsWith('$')) {
+    return {
+      unwrapped: content.substring(1, content.length - 1),
+      wrapType: BracketTypes.DOLLAR,
+    };
+  }
+
+  if (content.startsWith('\\[') && content.endsWith('\\]')) {
+    console.warn('\\[..\\] syntax is not yet supported'); // eslint-disable-line
+    return {
+      unwrapped: content.substring(2, content.length - 2),
+      wrapType: BracketTypes.ROUND_BRACKETS,
+    };
+  }
+
+  if (content.startsWith('\\(') && content.endsWith('\\)')) {
+    return {
+      unwrapped: content.substring(2, content.length - 2),
+      wrapType: BracketTypes.ROUND_BRACKETS,
+    };
+  }
+
+  return {
+    unwrapped: content,
+    wrapType: BracketTypes.ROUND_BRACKETS,
+  };
+};