@pie-element/ebsr 9.12.1 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/mathjax-script.js

@@ -0,0 +1,91 @@
+import { getGlobal } from './render-math';
+
+export const initializeMathJax = (renderOpts) => {
+  if (renderOpts?.useSingleDollar) {
+    // eslint-disable-next-line
+    console.warn('[math-rendering] using $ is not advisable, please use $$..$$ or \\(...\\)');
+  }
+
+  const texConfig = renderOpts?.useSingleDollar
+    ? {
+        macros: {
+          parallelogram: '\\lower.2em{\\Huge\\unicode{x25B1}}',
+          overarc: '\\overparen',
+          napprox: '\\not\\approx',
+          longdiv: '\\enclose{longdiv}',
+        },
+        inlineMath: [
+          ['$', '$'],
+          ['\\(', '\\)'],
+        ],
+        processEscapes: true,
+        displayMath: [
+          ['$$', '$$'],
+          ['\\[', '\\]'],
+        ],
+      }
+    : {
+        macros: {
+          parallelogram: '\\lower.2em{\\Huge\\unicode{x25B1}}',
+          overarc: '\\overparen',
+          napprox: '\\not\\approx',
+          longdiv: '\\enclose{longdiv}',
+        },
+        displayMath: [
+          ['$$', '$$'],
+          ['\\[', '\\]'],
+        ],
+      };
+
+  // Create a new promise that resolves when MathJax is ready
+  window.mathjaxLoadedP = new Promise((resolve) => {
+    // Set up the MathJax configuration
+    window.MathJax = {
+      startup: {
+        typeset: false,
+        ready: () => {
+          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;
+          resolve();
+        },
+      },
+      loader: {
+        load: ['input/mml'],
+      },
+      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@3.2.2/es5/tex-chtml-full.js';
+    script.async = true;
+    document.body.appendChild(script);
+  });
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/mml-to-latex.js

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

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering-accessible/render-math.js

@@ -0,0 +1,271 @@
+import { initializeMathJax } from './mathjax-script';
+import { wrapMath, unWrapMath } from './normalization';
+import * as mr from '../math-rendering';
+
+import { SerializedMmlVisitor } from 'mathjax-full/js/core/MmlTree/SerializedMmlVisitor';
+
+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 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 {};
+  }
+};
+
+/** Add temporary support for a global singleDollar override
+ *  <code>
+ *   // This will enable single dollar rendering
+ *   window.pie = window.pie || {};
+ *   window.pie.mathRendering =  {useSingleDollar: true };
+ *  </code>
+ */
+const defaultOpts = () => getGlobal().opts || {};
+
+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 getMathJaxCustomKey = () => window?.MathJax?.customKey || window?.MathJax?.config?.customKey;
+
+const renderMath = (el, renderOpts) => {
+  const isString = typeof el === 'string';
+  let executeOn = document.body;
+
+  if (isString) {
+    const div = document.createElement('div');
+
+    div.innerHTML = el;
+    executeOn = div;
+  }
+
+  const { skipWaitForMathRenderingLib } = renderOpts || {};
+
+  // this is the actual math-rendering-accessible renderMath function, which initialises MathJax
+  const renderMathAccessible = () => {
+    fixMathElements(executeOn);
+    adjustMathMLStyle(executeOn);
+
+    const mathJaxCustomKey = getMathJaxCustomKey();
+
+    if (
+      (!window.MathJax && !window.mathjaxLoadedP) ||
+      (mathJaxCustomKey && mathJaxCustomKey !== mathRenderingAccessibleKEY)
+    ) {
+      renderOpts = renderOpts || defaultOpts();
+
+      initializeMathJax(renderOpts);
+    }
+
+    if (isString && window.MathJax && window.mathjaxLoadedP) {
+      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);
+      }
+    }
+
+    if (window.mathjaxLoadedP) {
+      window.mathjaxLoadedP
+        .then(() => {
+          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 {
+                  removeExcessMjxContainers(executeOn);
+                  removePlaceholdersAndRestoreDisplay();
+
+                  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);
+                  }
+
+                  // 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);
+              });
+          }
+        })
+        .catch((error) => {
+          console.error('Error in initializing MathJax:', error);
+        });
+    }
+  };
+
+  // skipWaitForMathRenderingLib is used currently in editable-html, when mmlOutput is enabled
+  if (skipWaitForMathRenderingLib) {
+    // is this case, we don't need to wait for anything, because a math-instance is most probably already loaded
+    return renderMathAccessible();
+  } else {
+    // Check immediately if the math-rendering package is available, and if it is, use it
+    if (window.hasOwnProperty(mathRenderingKEY) && window[mathRenderingKEY].instance) {
+      removePlaceholdersAndRestoreDisplay();
+      return mr.renderMath();
+    }
+
+    // Check immediately if the math-rendering-accessible package is available, and if it is, use it
+    if (window.hasOwnProperty(mathRenderingAccessibleKEY) && window[mathRenderingAccessibleKEY].instance) {
+      return renderMathAccessible();
+    }
+
+    const waitForMathRenderingLib = (renderMathAccessibleCallback) => {
+      // Create placeholders for the items while math is loading
+      const mathElements = executeOn.querySelectorAll('[data-latex]');
+      mathElements.forEach(createPlaceholder);
+
+      let checkIntervalId;
+      const maxWaitTime = 500;
+      const startTime = Date.now();
+
+      const checkForLib = () => {
+        // Check if library has loaded or if the maximum wait time has been exceeded
+        const mathRenderingHasLoaded = window.hasOwnProperty(mathRenderingKEY) && window[mathRenderingKEY].instance;
+        const hasExceededMaxWait = Date.now() - startTime > maxWaitTime;
+
+        if (mathRenderingHasLoaded || hasExceededMaxWait) {
+          clearInterval(checkIntervalId);
+
+          // Check if the math-rendering package is available, and if it is, use it
+          if (mathRenderingHasLoaded) {
+            removePlaceholdersAndRestoreDisplay();
+            return mr.renderMath();
+          }
+
+          renderMathAccessibleCallback();
+        }
+      };
+
+      // Start periodically checking for math-rendering
+      checkIntervalId = setInterval(checkForLib, 100);
+    };
+
+    // otherwise, we need for it to load
+    waitForMathRenderingLib(renderMathAccessible);
+  }
+};
+
+export default renderMath;