@pie-lib/math-input 8.1.1-next.1 → 8.1.1-next.3

package/src/mq/static.jsx

@@ -1,290 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import debug from 'debug';
-import { updateSpans } from '../updateSpans';
-import { MQ } from './mathquill-instance';
-
-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, '');
-}
-
-function countBraces(latex) {
-  let count = 0;
-
-  for (let i = 0; i < (latex || '').length; i++) {
-    if (latex[i] === '{') {
-      count++;
-    }
-  }
-
-  return count;
-}
-
-/**
- * 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: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      announcement: '',
-      previousLatex: '',
-      inputSource: null,
-      isDeleteKeyPressed: false,
-    };
-
-    this.inputRef = React.createRef();
-  }
-
-  componentDidMount() {
-    this.update();
-    updateSpans();
-
-    this.createLiveRegion();
-    this.addEventListeners();
-  }
-
-  componentDidUpdate() {
-    this.update();
-    updateSpans();
-  }
-
-  componentWillUnmount() {
-    this.removeLiveRegion();
-    this.removeEventListeners();
-  }
-
-  createLiveRegion = () => {
-    this.liveRegion = document.createElement('div');
-    this.liveRegion.style.position = 'absolute';
-    this.liveRegion.style.width = '1px';
-    this.liveRegion.style.height = '1px';
-    this.liveRegion.style.marginTop = '-1px';
-    this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
-    this.liveRegion.style.overflow = 'hidden';
-    this.liveRegion.setAttribute('aria-live', 'polite');
-    this.liveRegion.setAttribute('aria-atomic', 'true');
-
-    document.body.appendChild(this.liveRegion);
-  };
-
-  addEventListeners = () => {
-    const input = this.inputRef.current;
-
-    if (input) {
-      input.addEventListener('keydown', this.handleKeyDown);
-      input.addEventListener('click', this.handleMathKeyboardClick);
-    }
-  };
-
-  removeEventListeners = () => {
-    const input = this.inputRef.current;
-
-    if (input) {
-      input.removeEventListener('keydown', this.handleKeyDown);
-      input.removeEventListener('click', this.handleMathKeyboardClick);
-    }
-  };
-
-  removeLiveRegion = () => {
-    if (this.liveRegion) {
-      document.body.removeChild(this.liveRegion);
-      this.liveRegion = null;
-    }
-  };
-
-  handleKeyDown = (event) => {
-    if (event?.key === 'Backspace' || event?.key === 'Delete') {
-      this.setState({ isDeleteKeyPressed: true });
-    }
-    this.setState({ inputSource: 'keyboard' });
-  };
-
-  handleMathKeyboardClick = () => {
-    this.setState({ inputSource: 'mathKeyboard' });
-  };
-
-  onInputEdit = (field) => {
-    if (!this.mathField || this._isProgrammaticUpdate) {
-      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.inputRef?.current && 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());
-      }
-    }
-
-    this.announceLatexConversion(field.latex());
-  };
-
-  announceLatexConversion = (newLatex) => {
-    if (!this.state) {
-      // eslint-disable-next-line no-console
-      console.error('State is not initialized');
-      return;
-    }
-
-    const { previousLatex, inputSource, isDeleteKeyPressed } = this.state;
-    const announcement = 'Converted to math symbol';
-
-    if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
-      const newBraces = countBraces(newLatex);
-      const oldBraces = countBraces(previousLatex);
-
-      if (newBraces > oldBraces) {
-        this.announceMessage(announcement);
-      } else {
-        try {
-          this.mathField.parseLatex(previousLatex);
-          this.mathField.parseLatex(newLatex);
-
-          if (newLatex == previousLatex) {
-            this.announceMessage(announcement);
-          }
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn('Error parsing latex:', e.message);
-          // eslint-disable-next-line no-console
-          console.warn(e);
-        }
-      }
-    }
-
-    // Only setState when values change to avoid "Maximum update depth exceeded"
-    if (this.state.previousLatex !== newLatex || this.state.isDeleteKeyPressed) {
-      this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });
-    }
-  };
-
-  announceMessage = (message) => {
-    this.setState({ previousLatex: '' });
-
-    if (this.liveRegion) {
-      this.liveRegion.textContent = message;
-
-      // Clear the message after it is announced
-      setTimeout(() => {
-        this.liveRegion.textContent = '';
-      }, 500);
-    }
-  };
-
-  update = () => {
-    if (!MQ) {
-      throw new Error('MQ is not defined - but component has mounted?');
-    }
-    if (!this.mathField) {
-      this.mathField = MQ.StaticMath(this.inputRef?.current, {
-        handlers: {
-          edit: this.onInputEdit.bind(this),
-        },
-      });
-    }
-
-    try {
-      this._isProgrammaticUpdate = true;
-      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]{}');
-    } finally {
-      this._isProgrammaticUpdate = false;
-    }
-  };
-
-
-  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={this.inputRef} />;
-  }
-}

package/src/updateSpans.js

@@ -1,15 +0,0 @@
-// increase the font of parallel notation
-const updateSpans = () => {
-  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));
-  (spans || []).forEach((span) => {
-    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {
-      span.style.fontSize = '32px';
-    }
-
-    if ((span.innerText === '′' || span.innerText === '′′') && !span.hasAttribute('data-prime')) {
-      span.setAttribute('data-prime', 'true');
-    }
-  });
-};
-
-export { updateSpans };