@pie-lib/math-input 0.1.0 → 0.1.1-next.0

package/src/mq/static.tsx

@@ -1,279 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/mq/static.jsx
- * @auto-generated
- */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import debug from 'debug';
-import MathQuill from '@pie-framework/mathquill';
-import { updateSpans } from '../updateSpans';
-
-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, '');
-}
-
-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: any = () => {
-    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: any = () => {
-    const input = this.inputRef.current;
-
-    if (input) {
-      input.addEventListener('keydown', this.handleKeyDown);
-      input.addEventListener('click', this.handleMathKeyboardClick);
-    }
-  };
-
-  removeEventListeners: any = () => {
-    const input = this.inputRef.current;
-
-    if (input) {
-      input.removeEventListener('keydown', this.handleKeyDown);
-      input.removeEventListener('click', this.handleMathKeyboardClick);
-    }
-  };
-
-  removeLiveRegion: any = () => {
-    if (this.liveRegion) {
-      document.body.removeChild(this.liveRegion);
-      this.liveRegion = null;
-    }
-  };
-
-  handleKeyDown: any = (event) => {
-    if (event?.key === 'Backspace' || event?.key === 'Delete') {
-      this.setState({ isDeleteKeyPressed: true });
-    }
-    this.setState({ inputSource: 'keyboard' });
-  };
-
-  handleMathKeyboardClick: any = () => {
-    this.setState({ inputSource: 'mathKeyboard' });
-  };
-
-  onInputEdit: any = (field) => {
-    if (!this.mathField) {
-      return;
-    }
-    const name = this.props.getFieldName(field, this.mathField.innerFields);
-
-    if (this.props.onSubFieldChange) {
-      this.props.onSubFieldChange(name, field.latex());
-    }
-
-    this.announceLatexConversion(field.latex());
-  };
-
-  announceLatexConversion: any = (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);
-        }
-      }
-    }
-
-    this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });
-  };
-
-  announceMessage: any = (message) => {
-    this.setState({ previousLatex: '' });
-
-    if (this.liveRegion) {
-      this.liveRegion.textContent = message;
-
-      setTimeout(() => {
-        this.liveRegion.textContent = '';
-      }, 500);
-    }
-  };
-
-  update: any = () => {
-    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.mathField.parseLatex(this.props.latex);
-      this.mathField.latex(this.props.latex);
-    } catch (e) {
-      this.mathField.latex('\\MathQuillMathField[r1]{}');
-    }
-  };
-
-  blur: any = () => {
-    log('blur mathfield');
-    this.mathField.blur();
-  };
-
-  focus: any = () => {
-    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: any = (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.ts

@@ -1,26 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/updateSpans.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-// increase the font of parallel notation
-const updateSpans = (root?: ParentNode) => {
-  const scope = root ?? document;
-  const spans = Array.from(scope.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 };