@pie-lib/math-rendering-accessible 3.3.1-beta.0

package/CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 3.3.1-beta.0 (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/math-rendering-accessible
+
+
+
+
+
+# 3.3.0-beta.0 (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/math-rendering-accessible
+
+
+
+
+
+# 3.4.0-beta.0 (2025-07-15)
+
+**Note:** Version bump only for package @pie-lib/math-rendering-accessible
+
+# 3.3.0-beta.0 (2025-07-15)
+
+**Note:** Version bump only for package @pie-lib/math-rendering-accessible

package/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright 2019 CoreSpring Inc
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@pie-lib/math-rendering-accessible",
+  "version": "3.3.1-beta.0",
+  "description": "math rendering utilities",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "author": "pie-framework developers",
+  "license": "ISC",
+  "dependencies": {
+    "@pie-framework/mathml-to-latex": "1.4.4",
+    "@pie-lib/math-rendering": "beta",
+    "debug": "^4.1.1",
+    "lodash": "^4.17.11",
+    "mathjax-full": "3.2.2",
+    "mathml-to-latex": "1.2.0",
+    "react": "^16.8.1",
+    "slate": "^0.36.2"
+  },
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453",
+  "scripts": {}
+}

package/src/__tests__/mml-to-latex.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import mmlToLatex from '../mml-to-latex';
+describe('mmlToLatex', () => {
+  it('should work', () => {
+    const mml =
+      '<math xmlns="http://www.w3.org/1998/Math/MathML">  <mn>2</mn>  <mi>x</mi>  <mtext>&#xA0;</mtext>  <mo>&#x2264;</mo>  <mn>4</mn>  <mi>y</mi>  <mtext>&#xA0;</mtext>  <mo>+</mo>  <mtext>&#xA0;</mtext>  <mn>8</mn> <msqrt>    <mi>h</mi>  </msqrt></math>';
+    // todo revisit this
+    // const latex = '2x\\text{ }\\leq4y\\text{ }+\\text{ }8\\sqrt{h}';
+    const latex = '2 x \\textrm{ } \\leq 4 y \\textrm{ } + \\textrm{ } 8 \\sqrt{h}';
+
+    expect(mmlToLatex(mml)).toEqual(latex);
+  });
+});

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,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,
+  };
+};

package/src/render-math.js

@@ -0,0 +1,450 @@
+import { wrapMath, unWrapMath } from './normalization';
+import { SerializedMmlVisitor } from 'mathjax-full/js/core/MmlTree/SerializedMmlVisitor';
+import TexError from 'mathjax-full/js/input/tex/TexError';
+
+const visitor = new SerializedMmlVisitor();
+const toMMl = (node) => visitor.visitTree(node);
+
+const NEWLINE_BLOCK_REGEX = /\\embed\{newLine\}\[\]/g;
+const NEWLINE_LATEX = '\\newline ';
+
+const mathRenderingKEY = '@pie-lib/math-rendering@2';
+const mathRenderingAccessibleKEY = '@pie-lib/math-rendering-accessible@1';
+
+export const MathJaxVersion = '3.2.2';
+
+export const getGlobal = () => {
+  // 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
+  if (typeof window !== 'undefined') {
+    if (!window[mathRenderingAccessibleKEY]) {
+      window[mathRenderingAccessibleKEY] = {};
+    }
+    return window[mathRenderingAccessibleKEY];
+  } else {
+    return {};
+  }
+};
+
+export const fixMathElement = (element) => {
+  if (element.dataset.mathHandled) {
+    return;
+  }
+
+  let property = 'innerText';
+
+  if (element.textContent) {
+    property = 'textContent';
+  }
+
+  if (element[property]) {
+    element[property] = wrapMath(unWrapMath(element[property]).unwrapped);
+    // because mathquill doesn't understand line breaks, sometimes we end up with custom elements on prompts/rationale/etc.
+    // we need to replace the custom embedded elements with valid latex that Mathjax can understand
+    element[property] = element[property].replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX);
+    element.dataset.mathHandled = true;
+  }
+};
+
+export const fixMathElements = (el = document) => {
+  const mathElements = el.querySelectorAll('[data-latex]');
+
+  mathElements.forEach((item) => fixMathElement(item));
+};
+
+const adjustMathMLStyle = (el = document) => {
+  const nodes = el.querySelectorAll('math');
+  nodes.forEach((node) => node.setAttribute('displaystyle', 'true'));
+};
+
+const createPlaceholder = (element) => {
+  if (!element.previousSibling || !element.previousSibling.classList?.contains('math-placeholder')) {
+    // Store the original display style before setting it to 'none'
+    element.dataset.originalDisplay = element.style.display || '';
+    element.style.display = 'none';
+
+    const placeholder = document.createElement('span');
+    placeholder.style.cssText =
+      'height: 10px; width: 50px; display: inline-block; vertical-align: middle; justify-content: center; background: #fafafa; border-radius: 4px;';
+    placeholder.classList.add('math-placeholder');
+    element.parentNode?.insertBefore(placeholder, element);
+  }
+};
+
+const removePlaceholdersAndRestoreDisplay = () => {
+  document.querySelectorAll('.math-placeholder').forEach((placeholder) => {
+    const targetElement = placeholder.nextElementSibling;
+
+    if (targetElement && targetElement.dataset?.originalDisplay !== undefined) {
+      targetElement.style.display = targetElement.dataset.originalDisplay;
+      delete targetElement.dataset.originalDisplay;
+    }
+
+    placeholder.remove();
+  });
+};
+const removeExcessMjxContainers = (content) => {
+  const elements = content.querySelectorAll('[data-latex][data-math-handled="true"]');
+
+  elements.forEach((element) => {
+    const mjxContainers = element.querySelectorAll('mjx-container');
+
+    // Check if there are more than one mjx-container children.
+    if (mjxContainers.length > 1) {
+      for (let i = 1; i < mjxContainers.length; i++) {
+        mjxContainers[i].parentNode.removeChild(mjxContainers[i]);
+      }
+    }
+  });
+};
+
+const renderContentsWithMathJax = (el) => {
+  // el sometimes is an array
+  // renderMath is used like that in pie-print-support and pie-element-extensions
+  // there seems to be no reason for that, however, it's better to handle the case here
+  if (el instanceof Array) {
+    el.forEach((elNode) => renderContentWithMathJax(elNode));
+  } else {
+    renderContentWithMathJax(el);
+  }
+};
+
+const renderContentWithMathJax = (executeOn) => {
+  executeOn = executeOn || document.body;
+
+  // this happens for charting - mark-label; we receive a ref which is not yet ready ( el = { current: null })
+  //  we have to fix this in charting
+  if (!(executeOn instanceof HTMLElement)) return;
+
+  fixMathElements(executeOn);
+  adjustMathMLStyle(executeOn);
+
+  const mathJaxInstance = getGlobal().instance;
+
+  if (mathJaxInstance) {
+    // Reset and clear typesetting before processing the new content
+    // Reset the tex labels (and automatic equation number).
+
+    mathJaxInstance.texReset();
+
+    //  Reset the typesetting system (font caches, etc.)
+    mathJaxInstance.typesetClear();
+
+    // Use typesetPromise for asynchronous typesetting
+    // Using MathJax.typesetPromise() for asynchronous typesetting to handle situations where additional code needs to be loaded (e.g., for certain TeX commands or characters).
+    // This ensures typesetting waits for any needed resources to load and complete processing, unlike the synchronous MathJax.typeset() which can't handle such dynamic loading.
+    mathJaxInstance
+      .typesetPromise([executeOn])
+      .then(() => {
+        try {
+          removePlaceholdersAndRestoreDisplay();
+          removeExcessMjxContainers(executeOn);
+
+          const updatedDocument = mathJaxInstance.startup.document;
+          const list = updatedDocument.math.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');
+          }
+
+          // If the original input was a string, return the parsed MathML
+        } catch (e) {
+          console.error('Error post-processing MathJax typesetting:', e.toString());
+        }
+
+        // Clearing the document if needed
+        mathJaxInstance.startup.document.clear();
+      })
+      .catch((error) => {
+        //  If there was an internal error, put the message into the output instead
+
+        console.error('Error in typesetting with MathJax:', error);
+      });
+  }
+};
+
+const convertMathJax2ToMathJax3 = () => {
+  // Make MathJax v2 compatible with v3
+  //  https://docs.mathjax.org/en/v3.2-latest/upgrading/v2.html#version-2-compatibility-example
+  //  Replace the require command map with a new one that checks for
+  //    renamed extensions and converts them to the new names.
+  const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
+  const requireMap = MathJax.config.startup.requireMap;
+  const RequireLoad = MathJax._.input.tex.require.RequireConfiguration.RequireLoad;
+  const RequireMethods = {
+    Require: function(parser, name) {
+      let required = parser.GetArgument(name);
+      if (required.match(/[^_a-zA-Z0-9]/) || required === '') {
+        throw new TexError('BadPackageName', 'Argument for %1 is not a valid package name', name);
+      }
+      if (requireMap.hasOwnProperty(required)) {
+        required = requireMap[required];
+      }
+      RequireLoad(parser, required);
+    },
+  };
+
+  new CommandMap('require', { require: 'Require' }, RequireMethods);
+
+  //
+  // Add a replacement for MathJax.Callback command
+  //
+  MathJax.Callback = function(args) {
+    if (Array.isArray(args)) {
+      if (args.length === 1 && typeof args[0] === 'function') {
+        return args[0];
+      } else if (typeof args[0] === 'string' && args[1] instanceof Object && typeof args[1][args[0]] === 'function') {
+        return Function.bind.apply(args[1][args[0]], args.slice(1));
+      } else if (typeof args[0] === 'function') {
+        return Function.bind.apply(args[0], [window].concat(args.slice(1)));
+      } else if (typeof args[1] === 'function') {
+        return Function.bind.apply(args[1], [args[0]].concat(args.slice(2)));
+      }
+    } else if (typeof args === 'function') {
+      return args;
+    }
+    throw Error("Can't make callback from given data");
+  };
+
+  //
+  // Add a replacement for MathJax.Hub commands
+  //
+  MathJax.Hub = {
+    Queue: function() {
+      for (let i = 0, m = arguments.length; i < m; i++) {
+        const fn = MathJax.Callback(arguments[i]);
+        MathJax.startup.promise = MathJax.startup.promise.then(fn);
+      }
+      return MathJax.startup.promise;
+    },
+    Typeset: function(elements, callback) {
+      let promise = MathJax.typesetPromise(elements);
+
+      if (callback) {
+        promise = promise.then(callback);
+      }
+      return promise;
+    },
+    Register: {
+      MessageHook: function() {
+        console.log('MessageHooks are not supported in version 3');
+      },
+      StartupHook: function() {
+        console.log('StartupHooks are not supported in version 3');
+      },
+      LoadHook: function() {
+        console.log('LoadHooks are not supported in version 3');
+      },
+    },
+    Config: function() {
+      console.log('MathJax configurations should be converted for version 3');
+    },
+  };
+};
+export const initializeMathJax = (callback) => {
+  if (window.mathjaxLoadedP) {
+    return;
+  }
+
+  const PreviousMathJaxIsUsed =
+    window.MathJax &&
+    window.MathJax.version &&
+    window.MathJax.version !== MathJaxVersion &&
+    window.MathJax.version[0] === '2';
+
+  const texConfig = {
+    macros: {
+      parallelogram: '\\lower.2em{\\Huge\\unicode{x25B1}}',
+      overarc: '\\overparen',
+      napprox: '\\not\\approx',
+      longdiv: '\\enclose{longdiv}',
+    },
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]'],
+    ],
+  };
+
+  if (PreviousMathJaxIsUsed) {
+    texConfig.autoload = {
+      color: [], // don't autoload the color extension
+      colorv2: ['color'], // do autoload the colorv2 extension
+    };
+  }
+
+  // Create a new promise that resolves when MathJax is ready
+  window.mathjaxLoadedP = new Promise((resolve) => {
+    // Set up the MathJax configuration
+    window.MathJax = {
+      startup: {
+        //
+        //  Mapping of old extension names to new ones
+        //
+        requireMap: PreviousMathJaxIsUsed
+          ? {
+              AMSmath: 'ams',
+              AMSsymbols: 'ams',
+              AMScd: 'amscd',
+              HTML: 'html',
+              noErrors: 'noerrors',
+              noUndefined: 'noundefined',
+            }
+          : {},
+        typeset: false,
+        ready: () => {
+          if (PreviousMathJaxIsUsed) {
+            convertMathJax2ToMathJax3();
+          }
+
+          const { mathjax } = MathJax._.mathjax;
+          const { STATE } = MathJax._.core.MathItem;
+          const { Menu } = MathJax._.ui.menu.Menu;
+          const rerender = Menu.prototype.rerender;
+          Menu.prototype.rerender = function(start = STATE.TYPESET) {
+            mathjax.handleRetriesFor(() => rerender.call(this, start));
+          };
+          MathJax.startup.defaultReady();
+          // Set the MathJax instance in the global object
+
+          const globalObj = getGlobal();
+          globalObj.instance = MathJax;
+
+          window.mathjaxLoadedComplete = true;
+          console.log('MathJax has initialised!', new Date().toString());
+
+          // in this file, initializeMathJax is called with a callback that has to be executed when MathJax was loaded
+          if (callback) {
+            callback();
+          }
+
+          // but previous versions of math-rendering-accessible they're expecting window.mathjaxLoadedP to be a Promise, so we also keep the
+          //  resolve here;
+          resolve();
+        },
+      },
+      loader: {
+        load: ['input/mml'],
+        // I just added preLoad: () => {} to prevent the console error: "MathJax.loader.preLoad is not a function",
+        //  which is being called because in math-rendering-accessible/render-math we're having this line:
+        //  import * as mr from '@pie-lib/math-rendering';
+        //  which takes us to: import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages';
+        //  which tries to call MathJax.loader.preLoad.
+        // Understand that AllPackages is NOT needed in math-rendering-accessible, so it is not a problem if we hardcode this function.
+        // The better solution would be for math-rendering-accessible to import math-rendering only IF needed,
+        //  but that's actually complicated and could cause other issues.
+        preLoad: () => {},
+        // function to call if a component fails to load
+        // eslint-disable-next-line no-console
+        failed: (error) => console.log(`MathJax(${error.package || '?'}): ${error.message}`),
+      },
+      tex: texConfig,
+      chtml: {
+        fontURL: 'https://unpkg.com/mathjax-full@3.2.2/ts/output/chtml/fonts/tex-woff-v2',
+        displayAlign: 'center',
+      },
+      customKey: '@pie-lib/math-rendering-accessible@1',
+      options: {
+        enableEnrichment: true,
+        sre: {
+          speech: 'deep',
+        },
+        menuOptions: {
+          settings: {
+            assistiveMml: true,
+            collapsible: false,
+            explorer: false,
+          },
+        },
+      },
+    };
+    // Load the MathJax script
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = `https://cdn.jsdelivr.net/npm/mathjax@${MathJaxVersion}/es5/tex-chtml-full.js`;
+    script.async = true;
+    document.head.appendChild(script);
+
+    // at this time of the execution, there's no document.body; setTimeout does the trick
+    setTimeout(() => {
+      if (!window.mathjaxLoadedComplete) {
+        const mathElements = document?.body?.querySelectorAll('[data-latex]');
+        (mathElements || []).forEach(createPlaceholder);
+      }
+    });
+  });
+};
+
+const renderMath = (el, renderOpts) => {
+  const usedForMmlOutput = typeof el === 'string';
+  let executeOn = document.body;
+
+  if (!usedForMmlOutput) {
+    // If math-rendering was not available, then:
+    //  If window.mathjaxLoadedComplete, it means that we initialised MathJax using the function from this file,
+    //  and it means MathJax is successfully completed, so we can already use it
+    if (window.mathjaxLoadedComplete) {
+      renderContentsWithMathJax(el);
+    } else if (window.mathjaxLoadedP) {
+      //  However, because there is a small chance that MathJax was initialised by a previous version of math-rendering-accessible,
+      //    we need to keep the old handling method, which means adding the .then.catch on window.mathjaxLoadedP Promise.
+      // We still want to set window.mathjaxLoadedComplete, to prevent adding .then.catch after the first initialization
+      //  (again, in case MathJax was initialised by a previous math-rendering-accessible version)
+      window.mathjaxLoadedP
+        .then(() => {
+          window.mathjaxLoadedComplete = true;
+          renderContentsWithMathJax(el);
+        })
+        .catch((error) => console.error('Error in initializing MathJax:', error));
+    }
+  } else {
+    // Here we're handling the case when renderMath is being called for mmlOutput
+    if (window.MathJax && window.mathjaxLoadedP) {
+      const div = document.createElement('div');
+
+      div.innerHTML = el;
+      executeOn = div;
+
+      try {
+        MathJax.texReset();
+        MathJax.typesetClear();
+        window.MathJax.typeset([executeOn]);
+        const updatedDocument = window.MathJax.startup.document;
+        const list = updatedDocument.math.list;
+        const item = list.next;
+        const mathMl = toMMl(item.data.root);
+
+        const parsedMathMl = mathMl.replaceAll('\n', '');
+
+        return parsedMathMl;
+      } catch (error) {
+        console.error('Error rendering math:', error.message);
+      }
+
+      return el;
+    }
+
+    return el;
+  }
+};
+
+// this function calls itself
+(function() {
+  initializeMathJax(renderContentWithMathJax);
+
+  window[mathRenderingKEY] = {
+    instance: {
+      Typeset: renderMath,
+    },
+  };
+})();
+
+export default renderMath;