@pie-element/complex-rubric 2.1.2-next.57 → 2.1.2-next.69

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/math-input/mq/static.jsx

@@ -0,0 +1,156 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import debug from 'debug';
+import MathQuill from '@pie-framework/mathquill';
+import { updateSpans } from '../index';
+
+let MQ;
+if (typeof window !== 'undefined') {
+  MQ = MathQuill.getInterface(2);
+}
+
+const log = debug('pie-lib:math-input:mq:static');
+const REGEX = /\\MathQuillMathField\[r\d*\]\{(.*?)\}/g;
+const WHITESPACE_REGEX = / /g;
+
+function stripSpaces(string = '') {
+  return string.replace(WHITESPACE_REGEX, '');
+}
+
+/**
+ * Wrapper for MathQuill MQ.MathField.
+ */
+export default class Static extends React.Component {
+  static propTypes = {
+    latex: PropTypes.string.isRequired,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    className: PropTypes.string,
+    getFieldName: PropTypes.func,
+    onSubFieldChange: PropTypes.func,
+    onSubFieldFocus: PropTypes.func,
+    setInput: PropTypes.func,
+  };
+
+  static defaultProps = {
+    getFieldName: () => {},
+  };
+
+  componentDidMount() {
+    this.update();
+    updateSpans();
+  }
+
+  componentDidUpdate() {
+    this.update();
+    updateSpans();
+  }
+
+  onInputEdit(field) {
+    if (!this.mathField) {
+      return;
+    }
+    const name = this.props.getFieldName(field, this.mathField.innerFields);
+
+    if (this.props.onSubFieldChange) {
+      // eslint-disable-next-line no-useless-escape
+      const regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
+
+      if (this.input && regexMatch && regexMatch?.length) {
+        try {
+          field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
+          field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e.toString());
+        }
+      } else {
+        this.props.onSubFieldChange(name, field.latex());
+      }
+    }
+  }
+
+  update() {
+    if (!MQ) {
+      throw new Error('MQ is not defined - but component has mounted?');
+    }
+    // this.input.innerHTML = this.props.latex;
+    if (!this.mathField) {
+      this.mathField = MQ.StaticMath(this.input, {
+        handlers: {
+          edit: this.onInputEdit.bind(this),
+        },
+      });
+    }
+
+    try {
+      this.mathField.parseLatex(this.props.latex);
+      this.mathField.latex(this.props.latex);
+    } catch (e) {
+      // default latex if received has errors
+      this.mathField.latex('\\MathQuillMathField[r1]{}');
+    }
+  }
+
+  blur() {
+    log('blur mathfield');
+    this.mathField.blur();
+  }
+
+  focus() {
+    log('focus mathfield...');
+    this.mathField.focus();
+  }
+
+  shouldComponentUpdate(nextProps) {
+    try {
+      const parsedLatex = this.mathField.parseLatex(nextProps.latex);
+      const stripped = stripSpaces(parsedLatex);
+      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;
+
+      const out =
+        stripped !== stripSpaces(this.mathField.latex().trim()) ||
+        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;
+
+      log('[shouldComponentUpdate] ', out);
+      return out;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Error parsing latex:', e.message, 'skip update');
+      // eslint-disable-next-line no-console
+      console.warn(e);
+      return false;
+    }
+  }
+
+  onFocus = (e) => {
+    try {
+      let rootBlock = e.target.parentElement.nextSibling;
+      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+
+      if (!id) {
+        rootBlock = rootBlock.parentElement;
+        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+      }
+
+      const innerField = this.mathField.innerFields.find((f) => f.id === id);
+
+      if (innerField) {
+        const name = this.props.getFieldName(innerField, this.mathField.innerFields);
+        if (this.props.setInput) {
+          this.props.setInput(innerField);
+        }
+        this.props.onSubFieldFocus(name, innerField);
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('error finding root block', err.message);
+    }
+  };
+
+  render() {
+    const { onBlur, className } = this.props;
+
+    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={(r) => (this.input = r)} />;
+  }
+}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering/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/configure/node_modules/@pie-lib/pie-toolbox/src/code/math-rendering/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-lib/pie-toolbox/src/code/math-rendering/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-lib/pie-toolbox/src/code/math-rendering/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-lib/pie-toolbox/src/code/math-rendering/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-lib/pie-toolbox/src/code/math-rendering/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,
+  };
+};