@pie-lib/math-input 6.11.4 → 6.12.0-beta.1

package/lib/mq/common-mq-styles.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supsubStyles = exports.longdivStyles = exports["default"] = exports.commonMqKeyboardStyles = exports.commonMqFontStyles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var commonMqFontStyles = {
+  fontFamily: 'MJXZERO, MJXTEX !important',
+  '-webkit-font-smoothing': 'antialiased !important',
+  '& .mq-math-mode > span > var': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important'
+  },
+  '& .mq-math-mode span var': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important'
+  },
+  '& .mq-math-mode .mq-nonSymbola': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important'
+  },
+  '& .mq-math-mode > span > var.mq-operator-name': {
+    fontFamily: 'MJXZERO, MJXTEX !important'
+  }
+};
+exports.commonMqFontStyles = commonMqFontStyles;
+var longdivStyles = {
+  '& .mq-longdiv-inner': {
+    marginTop: '-1px',
+    marginLeft: '5px !important;',
+    '& > .mq-empty': {
+      padding: '0 !important',
+      marginLeft: '0px !important',
+      marginTop: '2px'
+    }
+  },
+  '& .mq-math-mode .mq-longdiv': {
+    display: 'inline-flex !important'
+  }
+};
+exports.longdivStyles = longdivStyles;
+var supsubStyles = {
+  '& .mq-math-mode sup.mq-nthroot': {
+    fontSize: '70% !important',
+    verticalAlign: '0.5em !important',
+    paddingRight: '0.15em'
+  },
+  '& .mq-math-mode .mq-supsub': {
+    fontSize: '70.7% !important'
+  },
+  '& .mq-supsub ': {
+    fontSize: '70.7%'
+  },
+  '& .mq-math-mode .mq-supsub.mq-sup-only': {
+    verticalAlign: '-0.1em !important',
+    '& .mq-sup': {
+      marginBottom: '0px !important'
+    }
+  },
+
+  /* But when the base is a fraction, move it higher */
+  '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+    verticalAlign: '0.4em !important'
+  },
+  '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+    verticalAlign: '0.4em !important'
+  }
+};
+exports.supsubStyles = supsubStyles;
+var commonMqKeyboardStyles = {
+  '& *': _objectSpread(_objectSpread(_objectSpread({}, commonMqFontStyles), longdivStyles), {}, {
+    '& .mq-math-mode .mq-sqrt-prefix': {
+      top: '0 !important'
+    },
+    '& .mq-math-mode .mq-empty': {
+      padding: '9px 1px !important'
+    },
+    '& .mq-math-mode .mq-supsub': {
+      fontSize: '70.7% !important'
+    },
+    '& .mq-math-mode .mq-sqrt-stem': {
+      marginTop: '-5px',
+      paddingTop: '4px'
+    },
+    '& .mq-math-mode .mq-paren': {
+      verticalAlign: 'middle !important'
+    },
+    '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
+      padding: '0 !important'
+    },
+    '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
+      padding: '0 !important'
+    }
+  })
+};
+exports.commonMqKeyboardStyles = commonMqKeyboardStyles;
+var _default = {
+  commonMqFontStyles: commonMqFontStyles,
+  longdivStyles: longdivStyles,
+  supsubStyles: supsubStyles,
+  commonMqKeyboardStyles: commonMqKeyboardStyles
+};
+exports["default"] = _default;
+//# sourceMappingURL=common-mq-styles.js.map

package/lib/mq/common-mq-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mq/common-mq-styles.js"],"names":["commonMqFontStyles","fontFamily","longdivStyles","marginTop","marginLeft","padding","display","supsubStyles","fontSize","verticalAlign","paddingRight","marginBottom","commonMqKeyboardStyles","top","paddingTop"],"mappings":";;;;;;;;;;;;;;;AAAO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,UAAU,EAAE,4BADoB;AAEhC,4BAA0B,wBAFM;AAIhC,kCAAgC;AAC9BA,IAAAA,UAAU,EAAE;AADkB,GAJA;AAOhC,8BAA4B;AAC1BA,IAAAA,UAAU,EAAE;AADc,GAPI;AAUhC,oCAAkC;AAChCA,IAAAA,UAAU,EAAE;AADoB,GAVF;AAahC,mDAAiD;AAC/CA,IAAAA,UAAU,EAAE;AADmC;AAbjB,CAA3B;;AAkBA,IAAMC,aAAa,GAAG;AAC3B,yBAAuB;AACrBC,IAAAA,SAAS,EAAE,MADU;AAErBC,IAAAA,UAAU,EAAE,iBAFS;AAIrB,qBAAiB;AACfC,MAAAA,OAAO,EAAE,cADM;AAEfD,MAAAA,UAAU,EAAE,gBAFG;AAGfD,MAAAA,SAAS,EAAE;AAHI;AAJI,GADI;AAY3B,iCAA+B;AAC7BG,IAAAA,OAAO,EAAE;AADoB;AAZJ,CAAtB;;AAiBA,IAAMC,YAAY,GAAG;AAC1B,oCAAkC;AAChCC,IAAAA,QAAQ,EAAE,gBADsB;AAEhCC,IAAAA,aAAa,EAAE,kBAFiB;AAGhCC,IAAAA,YAAY,EAAE;AAHkB,GADR;AAM1B,gCAA8B;AAC5BF,IAAAA,QAAQ,EAAE;AADkB,GANJ;AAS1B,mBAAiB;AACfA,IAAAA,QAAQ,EAAE;AADK,GATS;AAY1B,4CAA0C;AACxCC,IAAAA,aAAa,EAAE,mBADyB;AAGxC,iBAAa;AACXE,MAAAA,YAAY,EAAE;AADH;AAH2B,GAZhB;;AAmB1B;AACA,2DAAyD;AACvDF,IAAAA,aAAa,EAAE;AADwC,GApB/B;AAwB1B,oEAAkE;AAChEA,IAAAA,aAAa,EAAE;AADiD;AAxBxC,CAArB;;AA6BA,IAAMG,sBAAsB,GAAG;AACpC,uDACKZ,kBADL,GAEKE,aAFL;AAGE,uCAAmC;AACjCW,MAAAA,GAAG,EAAE;AAD4B,KAHrC;AAOE,iCAA6B;AAC3BR,MAAAA,OAAO,EAAE;AADkB,KAP/B;AAWE,kCAA8B;AAC5BG,MAAAA,QAAQ,EAAE;AADkB,KAXhC;AAeE,qCAAiC;AAC/BL,MAAAA,SAAS,EAAE,MADoB;AAE/BW,MAAAA,UAAU,EAAE;AAFmB,KAfnC;AAoBE,iCAA6B;AAC3BL,MAAAA,aAAa,EAAE;AADY,KApB/B;AAwBE,mEAA+D;AAC7DJ,MAAAA,OAAO,EAAE;AADoD,KAxBjE;AA4BE,kEAA8D;AAC5DA,MAAAA,OAAO,EAAE;AADmD;AA5BhE;AADoC,CAA/B;;eAmCQ;AACbL,EAAAA,kBAAkB,EAAlBA,kBADa;AAEbE,EAAAA,aAAa,EAAbA,aAFa;AAGbK,EAAAA,YAAY,EAAZA,YAHa;AAIbK,EAAAA,sBAAsB,EAAtBA;AAJa,C","sourcesContent":["export const commonMqFontStyles = {\n  fontFamily: 'MJXZERO, MJXTEX !important',\n  '-webkit-font-smoothing': 'antialiased !important',\n\n  '& .mq-math-mode > span > var': {\n    fontFamily: 'MJXZERO, MJXTEX-I !important',\n  },\n  '& .mq-math-mode span var': {\n    fontFamily: 'MJXZERO, MJXTEX-I !important',\n  },\n  '& .mq-math-mode .mq-nonSymbola': {\n    fontFamily: 'MJXZERO, MJXTEX-I !important',\n  },\n  '& .mq-math-mode > span > var.mq-operator-name': {\n    fontFamily: 'MJXZERO, MJXTEX !important',\n  },\n};\n\nexport const longdivStyles = {\n  '& .mq-longdiv-inner': {\n    marginTop: '-1px',\n    marginLeft: '5px !important;',\n\n    '& > .mq-empty': {\n      padding: '0 !important',\n      marginLeft: '0px !important',\n      marginTop: '2px',\n    },\n  },\n\n  '& .mq-math-mode .mq-longdiv': {\n    display: 'inline-flex !important',\n  },\n};\n\nexport const supsubStyles = {\n  '& .mq-math-mode sup.mq-nthroot': {\n    fontSize: '70% !important',\n    verticalAlign: '0.5em !important',\n    paddingRight: '0.15em',\n  },\n  '& .mq-math-mode .mq-supsub': {\n    fontSize: '70.7% !important',\n  },\n  '& .mq-supsub ': {\n    fontSize: '70.7%',\n  },\n  '& .mq-math-mode .mq-supsub.mq-sup-only': {\n    verticalAlign: '-0.1em !important',\n\n    '& .mq-sup': {\n      marginBottom: '0px !important',\n    },\n  },\n  /* But when the base is a fraction, move it higher */\n  '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {\n    verticalAlign: '0.4em !important',\n  },\n\n  '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {\n    verticalAlign: '0.4em !important',\n  },\n};\n\nexport const commonMqKeyboardStyles = {\n  '& *': {\n    ...commonMqFontStyles,\n    ...longdivStyles,\n    '& .mq-math-mode .mq-sqrt-prefix': {\n      top: '0 !important',\n    },\n\n    '& .mq-math-mode .mq-empty': {\n      padding: '9px 1px !important',\n    },\n\n    '& .mq-math-mode .mq-supsub': {\n      fontSize: '70.7% !important',\n    },\n\n    '& .mq-math-mode .mq-sqrt-stem': {\n      marginTop: '-5px',\n      paddingTop: '4px',\n    },\n\n    '& .mq-math-mode .mq-paren': {\n      verticalAlign: 'middle !important',\n    },\n\n    '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {\n      padding: '0 !important',\n    },\n\n    '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {\n      padding: '0 !important',\n    },\n  },\n};\n\nexport default {\n  commonMqFontStyles,\n  longdivStyles,\n  supsubStyles,\n  commonMqKeyboardStyles,\n};\n"],"file":"common-mq-styles.js"}

package/lib/mq/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CommonMqStyles", {
+  enumerable: true,
+  get: function get() {
+    return _commonMqStyles["default"];
+  }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
@@ -21,4 +27,6 @@ Object.defineProperty(exports, "Static", {
 var _input = _interopRequireDefault(require("./input"));
 
 var _static = _interopRequireDefault(require("./static"));
+
+var _commonMqStyles = _interopRequireDefault(require("./common-mq-styles"));
 //# sourceMappingURL=index.js.map

package/lib/mq/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/mq/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import Input from './input';\nimport Static from './static';\n\nexport { Input, Static };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/mq/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["import Input from './input';\nimport Static from './static';\nimport CommonMqStyles from './common-mq-styles';\n\nexport { Input, Static, CommonMqStyles };\n"],"file":"index.js"}

package/lib/mq/input.js

@@ -97,14 +97,17 @@ var Input = /*#__PURE__*/function (_React$Component) {
       }
 
       if (event.charCode === 13) {
-        // if enter's pressed, we're going for a custom embedded element that'll
-        // have a block display (empty div) - for a hacked line break using ccs
-        // all because mathquill doesn't support a line break
-        _this.write('\\embed{newLine}[]');
-
-        _this.onInputEdit();
+        event.preventDefault();
+        return;
       }
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (event) {
+      var onClick = _this.props.onClick;
+
+      _this.refresh();
+
+      onClick && onClick(event);
+    });
     return _this;
   }
 
@@ -136,7 +139,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
       var latex = this.props.latex;
 
-      if (latex) {
+      if (latex !== undefined && latex !== null) {
         this.mathField.latex(latex);
       }
     }
@@ -204,15 +207,14 @@ var Input = /*#__PURE__*/function (_React$Component) {
       var _this3 = this;
 
       var _this$props = this.props,
-          onClick = _this$props.onClick,
           onFocus = _this$props.onFocus,
           onBlur = _this$props.onBlur,
           classes = _this$props.classes,
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: (0, _classnames["default"])(classes.input, className),
-        onKeyPress: this.onKeyPress,
-        onClick: onClick,
+        onKeyDown: this.onKeyPress,
+        onClick: this.onClick,
         onFocus: onFocus,
         onBlur: onBlur,
         ref: function ref(r) {

package/lib/mq/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/mq/input.jsx"],"names":["MQ","window","MathQuill","getInterface","registerEmbed","log","Input","onChange","props","mathField","latex","blur","focus","event","keys","Object","__controller","options","indexOf","refresh","charCode","write","onInputEdit","Error","MathField","input","handlers","edit","bind","updateLatex","v","Array","isArray","forEach","vv","cmd","keystroke","nextProps","onClick","onFocus","onBlur","classes","className","onKeyPress","r","React","Component","PropTypes","string","object","isRequired","func","styles"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport debug from 'debug';\nimport classNames from 'classnames';\nimport { registerLineBreak } from './custom-elements';\nimport MathQuill from '@pie-framework/mathquill';\n\nlet MQ;\nif (typeof window !== 'undefined') {\n  MQ = MathQuill.getInterface(2);\n\n  if (MQ && MQ.registerEmbed) {\n    registerLineBreak(MQ);\n  }\n}\n\nconst log = debug('math-input:mq:input');\n\n/**\n * Wrapper for MathQuill MQ.MathField.\n */\nexport class Input extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    onClick: PropTypes.func,\n    onChange: PropTypes.func,\n    latex: PropTypes.string,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n  };\n\n  componentDidMount() {\n    if (!MQ) {\n      throw new Error('MQ is not defined - but component has mounted?');\n    }\n\n    this.mathField = MQ.MathField(this.input, {\n      handlers: {\n        edit: this.onInputEdit.bind(this),\n      },\n    });\n\n    this.updateLatex();\n  }\n\n  componentDidUpdate() {\n    this.updateLatex();\n  }\n\n  updateLatex() {\n    if (!this.mathField) {\n      return;\n    }\n    const { latex } = this.props;\n    if (latex) {\n      this.mathField.latex(latex);\n    }\n  }\n\n  clear() {\n    this.mathField.latex('');\n    return '';\n  }\n\n  blur() {\n    log('blur mathfield');\n    this.mathField.blur();\n  }\n\n  focus() {\n    log('focus mathfield...');\n    this.mathField.focus();\n  }\n\n  command(v) {\n    log('command: ', v);\n    if (Array.isArray(v)) {\n      v.forEach((vv) => {\n        this.mathField.cmd(vv);\n      });\n    } else {\n      this.mathField.cmd(v);\n    }\n    this.mathField.focus();\n    return this.mathField.latex();\n  }\n\n  keystroke(v) {\n    this.mathField.keystroke(v);\n    this.mathField.focus();\n    return this.mathField.latex();\n  }\n\n  write(v) {\n    log('write: ', v);\n    this.mathField.write(v);\n    this.mathField.focus();\n    return this.mathField.latex();\n  }\n\n  onInputEdit = () => {\n    log('[onInputEdit] ...');\n    const { onChange } = this.props;\n    if (!this.mathField) {\n      return;\n    }\n\n    if (onChange) {\n      onChange(this.mathField.latex());\n    }\n  };\n\n  refresh = () => {\n    this.blur();\n    this.focus();\n  };\n\n  onKeyPress = (event) => {\n    const keys = Object.keys(this.mathField.__controller.options);\n\n    if (keys.indexOf('ignoreNextMousedown') < 0) {\n      // It seems like the controller has the above handler as an option\n      // when all the right events are set and everything works fine\n      // this seems to work in all cases\n      this.refresh();\n    }\n\n    if (event.charCode === 13) {\n      // if enter's pressed, we're going for a custom embedded element that'll\n      // have a block display (empty div) - for a hacked line break using ccs\n      // all because mathquill doesn't support a line break\n      this.write('\\\\embed{newLine}[]');\n      this.onInputEdit();\n    }\n  };\n\n  shouldComponentUpdate(nextProps) {\n    log('next: ', nextProps.latex);\n    log('current: ', this.mathField.latex());\n    return nextProps.latex !== this.mathField.latex();\n  }\n\n  render() {\n    const { onClick, onFocus, onBlur, classes, className } = this.props;\n\n    return (\n      <span\n        className={classNames(classes.input, className)}\n        onKeyPress={this.onKeyPress}\n        onClick={onClick}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        ref={(r) => (this.input = r)}\n      />\n    );\n  }\n}\n\nconst styles = () => ({});\n\nexport default withStyles(styles)(Input);\n"],"file":"input.js"}
+{"version":3,"sources":["../../src/mq/input.jsx"],"names":["MQ","window","MathQuill","getInterface","registerEmbed","log","Input","onChange","props","mathField","latex","blur","focus","event","keys","Object","__controller","options","indexOf","refresh","charCode","preventDefault","onClick","Error","MathField","input","handlers","edit","onInputEdit","bind","updateLatex","undefined","v","Array","isArray","forEach","vv","cmd","keystroke","write","nextProps","onFocus","onBlur","classes","className","onKeyPress","r","React","Component","PropTypes","string","object","isRequired","func","styles"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport debug from 'debug';\nimport classNames from 'classnames';\nimport { registerLineBreak } from './custom-elements';\nimport MathQuill from '@pie-framework/mathquill';\n\nlet MQ;\nif (typeof window !== 'undefined') {\n  MQ = MathQuill.getInterface(2);\n\n  if (MQ && MQ.registerEmbed) {\n    registerLineBreak(MQ);\n  }\n}\n\nconst log = debug('math-input:mq:input');\n\n/**\n * Wrapper for MathQuill MQ.MathField.\n */\nexport class Input extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    onClick: PropTypes.func,\n    onChange: PropTypes.func,\n    latex: PropTypes.string,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n  };\n\n  componentDidMount() {\n    if (!MQ) {\n      throw new Error('MQ is not defined - but component has mounted?');\n    }\n\n    this.mathField = MQ.MathField(this.input, {\n      handlers: {\n        edit: this.onInputEdit.bind(this),\n      },\n    });\n\n    this.updateLatex();\n  }\n\n  componentDidUpdate() {\n    this.updateLatex();\n  }\n\n  updateLatex() {\n    if (!this.mathField) {\n      return;\n    }\n\n    const { latex } = this.props;\n\n    if (latex !== undefined && latex !== null) {\n      this.mathField.latex(latex);\n    }\n  }\n\n  clear() {\n    this.mathField.latex('');\n\n    return '';\n  }\n\n  blur() {\n    log('blur mathfield');\n    this.mathField.blur();\n  }\n\n  focus() {\n    log('focus mathfield...');\n    this.mathField.focus();\n  }\n\n  command(v) {\n    log('command: ', v);\n    if (Array.isArray(v)) {\n      v.forEach((vv) => {\n        this.mathField.cmd(vv);\n      });\n    } else {\n      this.mathField.cmd(v);\n    }\n\n    this.mathField.focus();\n\n    return this.mathField.latex();\n  }\n\n  keystroke(v) {\n    this.mathField.keystroke(v);\n    this.mathField.focus();\n\n    return this.mathField.latex();\n  }\n\n  write(v) {\n    log('write: ', v);\n    this.mathField.write(v);\n    this.mathField.focus();\n\n    return this.mathField.latex();\n  }\n\n  onInputEdit = () => {\n    log('[onInputEdit] ...');\n    const { onChange } = this.props;\n\n    if (!this.mathField) {\n      return;\n    }\n\n    if (onChange) {\n      onChange(this.mathField.latex());\n    }\n  };\n\n  refresh = () => {\n    this.blur();\n    this.focus();\n  };\n\n  onKeyPress = (event) => {\n    const keys = Object.keys(this.mathField.__controller.options);\n\n    if (keys.indexOf('ignoreNextMousedown') < 0) {\n      // It seems like the controller has the above handler as an option\n      // when all the right events are set and everything works fine\n      // this seems to work in all cases\n      this.refresh();\n    }\n\n    if (event.charCode === 13) {\n      event.preventDefault();\n      return;\n    }\n  };\n\n  onClick = (event) => {\n    const { onClick } = this.props;\n\n    this.refresh();\n    onClick && onClick(event);\n  };\n\n  shouldComponentUpdate(nextProps) {\n    log('next: ', nextProps.latex);\n    log('current: ', this.mathField.latex());\n\n    return nextProps.latex !== this.mathField.latex();\n  }\n\n  render() {\n    const { onFocus, onBlur, classes, className } = this.props;\n\n    return (\n      <span\n        className={classNames(classes.input, className)}\n        onKeyDown={this.onKeyPress}\n        onClick={this.onClick}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        ref={(r) => (this.input = r)}\n      />\n    );\n  }\n}\n\nconst styles = () => ({});\n\nexport default withStyles(styles)(Input);\n"],"file":"input.js"}

package/lib/mq/static.js

@@ -29,7 +29,7 @@ var _debug = _interopRequireDefault(require("debug"));
 
 var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
 
-var _index = require("../index");
+var _updateSpans = require("../updateSpans");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -49,6 +49,18 @@ function stripSpaces() {
   var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return string.replace(WHITESPACE_REGEX, '');
 }
+
+function countBraces(latex) {
+  var count = 0;
+
+  for (var i = 0; i < (latex || '').length; i++) {
+    if (latex[i] === '{') {
+      count++;
+    }
+  }
+
+  return count;
+}
 /**
  * Wrapper for MathQuill MQ.MathField.
  */
@@ -59,73 +71,78 @@ var Static = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Static);
 
-  function Static() {
+  function Static(props) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, Static);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createLiveRegion", function () {
+      _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';
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+      _this.liveRegion.setAttribute('aria-live', 'polite');
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
-      try {
-        var rootBlock = e.target.parentElement.nextSibling;
-        var id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
-
-        if (!id) {
-          rootBlock = rootBlock.parentElement;
-          id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
-        }
+      _this.liveRegion.setAttribute('aria-atomic', 'true');
 
-        var innerField = _this.mathField.innerFields.find(function (f) {
-          return f.id === id;
-        });
-
-        if (innerField) {
-          var name = _this.props.getFieldName(innerField, _this.mathField.innerFields);
+      document.body.appendChild(_this.liveRegion);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addEventListeners", function () {
+      var input = _this.inputRef.current;
 
-          if (_this.props.setInput) {
-            _this.props.setInput(innerField);
-          }
+      if (input) {
+        input.addEventListener('keydown', _this.handleKeyDown);
+        input.addEventListener('click', _this.handleMathKeyboardClick);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeEventListeners", function () {
+      var input = _this.inputRef.current;
 
-          _this.props.onSubFieldFocus(name, innerField);
-        }
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error('error finding root block', err.message);
+      if (input) {
+        input.removeEventListener('keydown', _this.handleKeyDown);
+        input.removeEventListener('click', _this.handleMathKeyboardClick);
       }
     });
-    return _this;
-  }
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeLiveRegion", function () {
+      if (_this.liveRegion) {
+        document.body.removeChild(_this.liveRegion);
+        _this.liveRegion = null;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+      if ((event === null || event === void 0 ? void 0 : event.key) === 'Backspace' || (event === null || event === void 0 ? void 0 : event.key) === 'Delete') {
+        _this.setState({
+          isDeleteKeyPressed: true
+        });
+      }
 
-  (0, _createClass2["default"])(Static, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.update();
-      (0, _index.updateSpans)();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.update();
-      (0, _index.updateSpans)();
-    }
-  }, {
-    key: "onInputEdit",
-    value: function onInputEdit(field) {
-      if (!this.mathField) {
+      _this.setState({
+        inputSource: 'keyboard'
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMathKeyboardClick", function () {
+      _this.setState({
+        inputSource: 'mathKeyboard'
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onInputEdit", function (field) {
+      if (!_this.mathField) {
         return;
       }
 
-      var name = this.props.getFieldName(field, this.mathField.innerFields);
+      var name = _this.props.getFieldName(field, _this.mathField.innerFields);
+
+      if (_this.props.onSubFieldChange) {
+        var _this$inputRef;
 
-      if (this.props.onSubFieldChange) {
         // eslint-disable-next-line no-useless-escape
         var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
 
-        if (this.input && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
+        if ((_this$inputRef = _this.inputRef) !== null && _this$inputRef !== void 0 && _this$inputRef.current && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
           try {
             field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
 
@@ -137,45 +154,155 @@ var Static = /*#__PURE__*/function (_React$Component) {
             console.error(e.toString());
           }
         } else {
-          this.props.onSubFieldChange(name, field.latex());
+          _this.props.onSubFieldChange(name, field.latex());
         }
       }
-    }
-  }, {
-    key: "update",
-    value: function update() {
+
+      _this.announceLatexConversion(field.latex());
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceLatexConversion", function (newLatex) {
+      if (!_this.state) {
+        console.error('State is not initialized');
+        return;
+      }
+
+      var _this$state = _this.state,
+          previousLatex = _this$state.previousLatex,
+          inputSource = _this$state.inputSource,
+          isDeleteKeyPressed = _this$state.isDeleteKeyPressed;
+      var announcement = 'Converted to math symbol';
+
+      if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
+        var newBraces = countBraces(newLatex);
+        var 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) {
+            console.warn('Error parsing latex:', e.message);
+            console.warn(e);
+          }
+        }
+      }
+
+      _this.setState({
+        previousLatex: newLatex,
+        isDeleteKeyPressed: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceMessage", function (message) {
+      _this.setState({
+        previousLatex: ''
+      });
+
+      if (_this.liveRegion) {
+        _this.liveRegion.textContent = message; // Clear the message after it is announced
+
+        setTimeout(function () {
+          _this.liveRegion.textContent = '';
+        }, 500);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "update", function () {
       if (!MQ) {
         throw new Error('MQ is not defined - but component has mounted?');
-      } // this.input.innerHTML = this.props.latex;
+      }
 
+      if (!_this.mathField) {
+        var _this$inputRef2;
 
-      if (!this.mathField) {
-        this.mathField = MQ.StaticMath(this.input, {
+        _this.mathField = MQ.StaticMath((_this$inputRef2 = _this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.current, {
           handlers: {
-            edit: this.onInputEdit.bind(this)
+            edit: _this.onInputEdit.bind((0, _assertThisInitialized2["default"])(_this))
           }
         });
       }
 
       try {
-        this.mathField.parseLatex(this.props.latex);
-        this.mathField.latex(this.props.latex);
+        _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]{}');
+        _this.mathField.latex('\\MathQuillMathField[r1]{}');
       }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+      log('blur mathfield');
+
+      _this.mathField.blur();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
+      log('focus mathfield...');
+
+      _this.mathField.focus();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
+      try {
+        var rootBlock = e.target.parentElement.nextSibling;
+        var id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+
+        if (!id) {
+          rootBlock = rootBlock.parentElement;
+          id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+        }
+
+        var innerField = _this.mathField.innerFields.find(function (f) {
+          return f.id === id;
+        });
+
+        if (innerField) {
+          var 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);
+      }
+    });
+    _this.state = {
+      announcement: '',
+      previousLatex: '',
+      inputSource: null,
+      isDeleteKeyPressed: false
+    };
+    _this.inputRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Static, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.update();
+      (0, _updateSpans.updateSpans)();
+      this.createLiveRegion();
+      this.addEventListeners();
     }
   }, {
-    key: "blur",
-    value: function blur() {
-      log('blur mathfield');
-      this.mathField.blur();
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.update();
+      (0, _updateSpans.updateSpans)();
     }
   }, {
-    key: "focus",
-    value: function focus() {
-      log('focus mathfield...');
-      this.mathField.focus();
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.removeLiveRegion();
+      this.removeEventListeners();
     }
   }, {
     key: "shouldComponentUpdate",
@@ -198,8 +325,6 @@ var Static = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           onBlur = _this$props.onBlur,
           className = _this$props.className;
@@ -207,9 +332,7 @@ var Static = /*#__PURE__*/function (_React$Component) {
         className: className,
         onFocus: this.onFocus,
         onBlur: onBlur,
-        ref: function ref(r) {
-          return _this2.input = r;
-        }
+        ref: this.inputRef
       });
     }
   }]);