@pie-lib/math-input 6.11.5-next.0 → 6.12.0-beta.1

package/lib/mq/static.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/mq/static.jsx"],"names":["MQ","window","MathQuill","getInterface","log","REGEX","WHITESPACE_REGEX","stripSpaces","string","replace","Static","e","rootBlock","target","parentElement","nextSibling","id","parseInt","getAttribute","innerField","mathField","innerFields","find","f","name","props","getFieldName","setInput","onSubFieldFocus","err","console","error","message","update","field","onSubFieldChange","regexMatch","latex","match","input","length","__controller","cursor","insLeftOf","parent","el","dispatchEvent","KeyboardEvent","keyCode","toString","Error","StaticMath","handlers","edit","onInputEdit","bind","parseLatex","blur","focus","nextProps","parsedLatex","stripped","newFieldCount","out","trim","Object","keys","warn","onBlur","className","onFocus","r","React","Component","PropTypes","isRequired","func"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport MathQuill from '@pie-framework/mathquill';\nimport { updateSpans } from '../index';\n\nlet MQ;\nif (typeof window !== 'undefined') {\n  MQ = MathQuill.getInterface(2);\n}\n\nconst log = debug('pie-lib:math-input:mq:static');\nconst REGEX = /\\\\MathQuillMathField\\[r\\d*\\]\\{(.*?)\\}/g;\nconst WHITESPACE_REGEX = / /g;\n\nfunction stripSpaces(string = '') {\n  return string.replace(WHITESPACE_REGEX, '');\n}\n\n/**\n * Wrapper for MathQuill MQ.MathField.\n */\nexport default class Static extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string.isRequired,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    className: PropTypes.string,\n    getFieldName: PropTypes.func,\n    onSubFieldChange: PropTypes.func,\n    onSubFieldFocus: PropTypes.func,\n    setInput: PropTypes.func,\n  };\n\n  static defaultProps = {\n    getFieldName: () => {},\n  };\n\n  componentDidMount() {\n    this.update();\n    updateSpans();\n  }\n\n  componentDidUpdate() {\n    this.update();\n    updateSpans();\n  }\n\n  onInputEdit(field) {\n    if (!this.mathField) {\n      return;\n    }\n    const name = this.props.getFieldName(field, this.mathField.innerFields);\n\n    if (this.props.onSubFieldChange) {\n      // eslint-disable-next-line no-useless-escape\n      const regexMatch = field.latex().match(/[0-9]\\\\ \\\\frac\\{[^\\{]*\\}\\{ \\}/);\n\n      if (this.input && regexMatch && regexMatch?.length) {\n        try {\n          field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);\n          field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error(e.toString());\n        }\n      } else {\n        this.props.onSubFieldChange(name, field.latex());\n      }\n    }\n  }\n\n  update() {\n    if (!MQ) {\n      throw new Error('MQ is not defined - but component has mounted?');\n    }\n    // this.input.innerHTML = this.props.latex;\n    if (!this.mathField) {\n      this.mathField = MQ.StaticMath(this.input, {\n        handlers: {\n          edit: this.onInputEdit.bind(this),\n        },\n      });\n    }\n\n    try {\n      this.mathField.parseLatex(this.props.latex);\n      this.mathField.latex(this.props.latex);\n    } catch (e) {\n      // default latex if received has errors\n      this.mathField.latex('\\\\MathQuillMathField[r1]{}');\n    }\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  shouldComponentUpdate(nextProps) {\n    try {\n      const parsedLatex = this.mathField.parseLatex(nextProps.latex);\n      const stripped = stripSpaces(parsedLatex);\n      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;\n\n      const out =\n        stripped !== stripSpaces(this.mathField.latex().trim()) ||\n        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;\n\n      log('[shouldComponentUpdate] ', out);\n      return out;\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn('Error parsing latex:', e.message, 'skip update');\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      return false;\n    }\n  }\n\n  onFocus = (e) => {\n    try {\n      let rootBlock = e.target.parentElement.nextSibling;\n      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n\n      if (!id) {\n        rootBlock = rootBlock.parentElement;\n        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n      }\n\n      const innerField = this.mathField.innerFields.find((f) => f.id === id);\n\n      if (innerField) {\n        const name = this.props.getFieldName(innerField, this.mathField.innerFields);\n        if (this.props.setInput) {\n          this.props.setInput(innerField);\n        }\n        this.props.onSubFieldFocus(name, innerField);\n      }\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('error finding root block', err.message);\n    }\n  };\n\n  render() {\n    const { onBlur, className } = this.props;\n\n    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={(r) => (this.input = r)} />;\n  }\n}\n"],"file":"static.js"}
+{"version":3,"sources":["../../src/mq/static.jsx"],"names":["MQ","window","MathQuill","getInterface","log","REGEX","WHITESPACE_REGEX","stripSpaces","string","replace","countBraces","latex","count","i","length","Static","props","liveRegion","document","createElement","style","position","width","height","marginTop","clip","overflow","setAttribute","body","appendChild","input","inputRef","current","addEventListener","handleKeyDown","handleMathKeyboardClick","removeEventListener","removeChild","event","key","setState","isDeleteKeyPressed","inputSource","field","mathField","name","getFieldName","innerFields","onSubFieldChange","regexMatch","match","__controller","cursor","insLeftOf","parent","el","dispatchEvent","KeyboardEvent","keyCode","e","console","error","toString","announceLatexConversion","newLatex","state","previousLatex","announcement","newBraces","oldBraces","announceMessage","parseLatex","warn","message","textContent","setTimeout","Error","StaticMath","handlers","edit","onInputEdit","bind","blur","focus","rootBlock","target","parentElement","nextSibling","id","parseInt","getAttribute","innerField","find","f","setInput","onSubFieldFocus","err","React","createRef","update","createLiveRegion","addEventListeners","removeLiveRegion","removeEventListeners","nextProps","parsedLatex","stripped","newFieldCount","out","trim","Object","keys","onBlur","className","onFocus","Component","PropTypes","isRequired","func"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport MathQuill from '@pie-framework/mathquill';\nimport { updateSpans } from '../updateSpans';\n\nlet MQ;\nif (typeof window !== 'undefined') {\n  MQ = MathQuill.getInterface(2);\n}\n\nconst log = debug('pie-lib:math-input:mq:static');\nconst REGEX = /\\\\MathQuillMathField\\[r\\d*\\]\\{(.*?)\\}/g;\nconst WHITESPACE_REGEX = / /g;\n\nfunction stripSpaces(string = '') {\n  return string.replace(WHITESPACE_REGEX, '');\n}\n\nfunction countBraces(latex) {\n  let count = 0;\n\n  for (let i = 0; i < (latex || '').length; i++) {\n    if (latex[i] === '{') {\n      count++;\n    }\n  }\n\n  return count;\n}\n\n/**\n * Wrapper for MathQuill MQ.MathField.\n */\nexport default class Static extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string.isRequired,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    className: PropTypes.string,\n    getFieldName: PropTypes.func,\n    onSubFieldChange: PropTypes.func,\n    onSubFieldFocus: PropTypes.func,\n    setInput: PropTypes.func,\n  };\n\n  static defaultProps = {\n    getFieldName: () => {},\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      announcement: '',\n      previousLatex: '',\n      inputSource: null,\n      isDeleteKeyPressed: false,\n    };\n\n    this.inputRef = React.createRef();\n  }\n\n  componentDidMount() {\n    this.update();\n    updateSpans();\n\n    this.createLiveRegion();\n    this.addEventListeners();\n  }\n\n  componentDidUpdate() {\n    this.update();\n    updateSpans();\n  }\n\n  componentWillUnmount() {\n    this.removeLiveRegion();\n    this.removeEventListeners();\n  }\n\n  createLiveRegion = () => {\n    this.liveRegion = document.createElement('div');\n    this.liveRegion.style.position = 'absolute';\n    this.liveRegion.style.width = '1px';\n    this.liveRegion.style.height = '1px';\n    this.liveRegion.style.marginTop = '-1px';\n    this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';\n    this.liveRegion.style.overflow = 'hidden';\n    this.liveRegion.setAttribute('aria-live', 'polite');\n    this.liveRegion.setAttribute('aria-atomic', 'true');\n\n    document.body.appendChild(this.liveRegion);\n  };\n\n  addEventListeners = () => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      input.addEventListener('keydown', this.handleKeyDown);\n      input.addEventListener('click', this.handleMathKeyboardClick);\n    }\n  };\n\n  removeEventListeners = () => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      input.removeEventListener('keydown', this.handleKeyDown);\n      input.removeEventListener('click', this.handleMathKeyboardClick);\n    }\n  };\n\n  removeLiveRegion = () => {\n    if (this.liveRegion) {\n      document.body.removeChild(this.liveRegion);\n      this.liveRegion = null;\n    }\n  };\n\n  handleKeyDown = (event) => {\n    if (event?.key === 'Backspace' || event?.key === 'Delete') {\n      this.setState({ isDeleteKeyPressed: true });\n    }\n    this.setState({ inputSource: 'keyboard' });\n  };\n\n  handleMathKeyboardClick = () => {\n    this.setState({ inputSource: 'mathKeyboard' });\n  };\n\n  onInputEdit = (field) => {\n    if (!this.mathField) {\n      return;\n    }\n    const name = this.props.getFieldName(field, this.mathField.innerFields);\n\n    if (this.props.onSubFieldChange) {\n      // eslint-disable-next-line no-useless-escape\n      const regexMatch = field.latex().match(/[0-9]\\\\ \\\\frac\\{[^\\{]*\\}\\{ \\}/);\n\n      if (this.inputRef?.current && regexMatch && regexMatch?.length) {\n        try {\n          field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);\n          field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error(e.toString());\n        }\n      } else {\n        this.props.onSubFieldChange(name, field.latex());\n      }\n    }\n\n    this.announceLatexConversion(field.latex());\n  };\n\n  announceLatexConversion = (newLatex) => {\n    if (!this.state) {\n      console.error('State is not initialized');\n      return;\n    }\n\n    const { previousLatex, inputSource, isDeleteKeyPressed } = this.state;\n    const announcement = 'Converted to math symbol';\n\n    if (inputSource === 'keyboard' && !isDeleteKeyPressed) {\n      const newBraces = countBraces(newLatex);\n      const oldBraces = countBraces(previousLatex);\n\n      if (newBraces > oldBraces) {\n        this.announceMessage(announcement);\n      } else {\n        try {\n          this.mathField.parseLatex(previousLatex);\n          this.mathField.parseLatex(newLatex);\n\n          if (newLatex == previousLatex) {\n            this.announceMessage(announcement);\n          }\n        } catch (e) {\n          console.warn('Error parsing latex:', e.message);\n          console.warn(e);\n        }\n      }\n    }\n\n    this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });\n  };\n\n  announceMessage = (message) => {\n    this.setState({ previousLatex: '' });\n\n    if (this.liveRegion) {\n      this.liveRegion.textContent = message;\n\n      // Clear the message after it is announced\n      setTimeout(() => {\n        this.liveRegion.textContent = '';\n      }, 500);\n    }\n  };\n\n  update = () => {\n    if (!MQ) {\n      throw new Error('MQ is not defined - but component has mounted?');\n    }\n    if (!this.mathField) {\n      this.mathField = MQ.StaticMath(this.inputRef?.current, {\n        handlers: {\n          edit: this.onInputEdit.bind(this),\n        },\n      });\n    }\n\n    try {\n      this.mathField.parseLatex(this.props.latex);\n      this.mathField.latex(this.props.latex);\n    } catch (e) {\n      // default latex if received has errors\n      this.mathField.latex('\\\\MathQuillMathField[r1]{}');\n    }\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  shouldComponentUpdate(nextProps) {\n    try {\n      const parsedLatex = this.mathField.parseLatex(nextProps.latex);\n      const stripped = stripSpaces(parsedLatex);\n      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;\n\n      const out =\n        stripped !== stripSpaces(this.mathField.latex().trim()) ||\n        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;\n\n      log('[shouldComponentUpdate] ', out);\n      return out;\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn('Error parsing latex:', e.message, 'skip update');\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      return false;\n    }\n  }\n\n  onFocus = (e) => {\n    try {\n      let rootBlock = e.target.parentElement.nextSibling;\n      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n\n      if (!id) {\n        rootBlock = rootBlock.parentElement;\n        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n      }\n\n      const innerField = this.mathField.innerFields.find((f) => f.id === id);\n\n      if (innerField) {\n        const name = this.props.getFieldName(innerField, this.mathField.innerFields);\n        if (this.props.setInput) {\n          this.props.setInput(innerField);\n        }\n        this.props.onSubFieldFocus(name, innerField);\n      }\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('error finding root block', err.message);\n    }\n  };\n\n  render() {\n    const { onBlur, className } = this.props;\n\n    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={this.inputRef} />;\n  }\n}\n"],"file":"static.js"}

package/lib/updateSpans.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSpans = void 0;
+
+// increase the font of parallel notation
+var updateSpans = function updateSpans() {
+  var spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));
+  (spans || []).forEach(function (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');
+    }
+  });
+};
+
+exports.updateSpans = updateSpans;
+//# sourceMappingURL=updateSpans.js.map

package/lib/updateSpans.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/updateSpans.js"],"names":["updateSpans","spans","Array","from","document","querySelectorAll","forEach","span","innerText","className","style","fontSize","hasAttribute","setAttribute"],"mappings":";;;;;;;AAAA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWC,QAAQ,CAACC,gBAAT,CAA0B,4BAA1B,CAAX,CAAd;AACA,GAACJ,KAAK,IAAI,EAAV,EAAcK,OAAd,CAAsB,UAACC,IAAD,EAAU;AAC9B,QAAIA,IAAI,IAAIA,IAAI,CAACC,SAAL,KAAmB,GAA3B,IAAkCD,IAAI,CAACE,SAAL,KAAmB,mBAAzD,EAA8E;AAC5EF,MAAAA,IAAI,CAACG,KAAL,CAAWC,QAAX,GAAsB,MAAtB;AACD;;AAED,QAAI,CAACJ,IAAI,CAACC,SAAL,KAAmB,GAAnB,IAA0BD,IAAI,CAACC,SAAL,KAAmB,IAA9C,KAAuD,CAACD,IAAI,CAACK,YAAL,CAAkB,YAAlB,CAA5D,EAA6F;AAC3FL,MAAAA,IAAI,CAACM,YAAL,CAAkB,YAAlB,EAAgC,MAAhC;AACD;AACF,GARD;AASD,CAXD","sourcesContent":["// increase the font of parallel notation\nconst updateSpans = () => {\n  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));\n  (spans || []).forEach((span) => {\n    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {\n      span.style.fontSize = '32px';\n    }\n\n    if ((span.innerText === '′' || span.innerText === '′′') && !span.hasAttribute('data-prime')) {\n      span.setAttribute('data-prime', 'true');\n    }\n  });\n};\n\nexport { updateSpans };\n"],"file":"updateSpans.js"}

package/package.json

@@ -3,15 +3,18 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.11.5-next.0+4c9745a8",
+  "version": "6.12.0-beta.1",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/mathquill": "^1.1.3",
+    "@pie-lib/editable-html": "latest",
+    "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
     "react-portal": "^4.2.0"
   },
   "peerDependencies": {
@@ -22,5 +25,5 @@
     "react-dom": "^16.9.0"
   },
   "scripts": {},
-  "gitHead": "4c9745a87b6810fe06bfc35d7bc7ff8ec435ac2b"
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
 }

package/src/__tests__/__snapshots__/math-input-test.jsx.snap

@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MathInput snapshot renders 1`] = `
+<div
+  className="className"
+>
+  <WithStyles(Input)
+    innerRef={[Function]}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+  />
+  <div>
+    <WithStyles(KeyPad)
+      additionalKeys={Array []}
+      baseSet={
+        Array [
+          Array [
+            Object {
+              "category": "digit",
+              "label": "7",
+              "name": "seven",
+              "write": "7",
+            },
+            Object {
+              "category": "digit",
+              "label": "8",
+              "name": "eight",
+              "write": "8",
+            },
+            Object {
+              "category": "digit",
+              "label": "9",
+              "name": "nine",
+              "write": "9",
+            },
+            Object {
+              "category": "operators",
+              "command": "\\\\divide",
+              "label": "÷",
+              "name": "divide",
+              "otherNotation": "\\\\div",
+            },
+          ],
+          Array [
+            Object {
+              "category": "digit",
+              "label": "4",
+              "name": "four",
+              "write": "4",
+            },
+            Object {
+              "category": "digit",
+              "label": "5",
+              "name": "five",
+              "write": "5",
+            },
+            Object {
+              "category": "digit",
+              "label": "6",
+              "name": "six",
+              "write": "6",
+            },
+            Object {
+              "category": "operators",
+              "command": "\\\\times",
+              "label": "×",
+              "name": "multiply",
+            },
+          ],
+          Array [
+            Object {
+              "category": "digit",
+              "label": "1",
+              "name": "one",
+              "write": "1",
+            },
+            Object {
+              "category": "digit",
+              "label": "2",
+              "name": "two",
+              "write": "2",
+            },
+            Object {
+              "category": "digit",
+              "label": "3",
+              "name": "three",
+              "write": "3",
+            },
+            Object {
+              "category": "operators",
+              "label": "−",
+              "write": "−",
+            },
+          ],
+          Array [
+            Object {
+              "category": "digit",
+              "label": "0",
+              "name": "zero",
+              "write": "0",
+            },
+            Object {
+              "category": "digit",
+              "label": ".",
+              "name": "decimal-point",
+              "write": ".",
+            },
+            Object {
+              "category": "digit",
+              "label": ",",
+              "name": "comma",
+              "write": ",",
+            },
+            Object {
+              "category": "operators",
+              "label": "+",
+              "write": "+",
+            },
+          ],
+          Array [
+            Object {
+              "ariaLabel": "Move cursor left",
+              "category": "navigation",
+              "keystroke": "Left",
+              "label": "◀",
+            },
+            Object {
+              "ariaLabel": "Move cursor right",
+              "category": "navigation",
+              "keystroke": "Right",
+              "label": "▶",
+            },
+            Object {
+              "ariaLabel": "Delete",
+              "category": "edit",
+              "keystroke": "Backspace",
+              "label": "⌫",
+            },
+            Object {
+              "category": "operators",
+              "label": "=",
+              "write": "=",
+            },
+          ],
+        ]
+      }
+      onPress={[Function]}
+    />
+  </div>
+</div>
+`;

package/src/__tests__/math-input-test.jsx

@@ -0,0 +1,85 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { MathInput } from '../math-input';
+
+describe('MathInput', () => {
+  let w;
+  let onChange;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<MathInput {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {
+    beforeEach(() => {
+      w = wrapper();
+      w.instance().input = {
+        write: jest.fn(),
+        command: jest.fn(),
+        keystroke: jest.fn(),
+      };
+    });
+    describe('keypadPress', () => {
+      it('calls input.write for latex', () => {
+        w.instance().keypadPress({ latex: 'latex' });
+        expect(w.instance().input.write).toHaveBeenLastCalledWith('latex');
+      });
+      it('calls input.write for write', () => {
+        w.instance().keypadPress({ write: 'write' });
+        expect(w.instance().input.write).toHaveBeenLastCalledWith('write');
+      });
+      it('calls input.command for command', () => {
+        w.instance().keypadPress({ command: 'cmd' });
+        expect(w.instance().input.command).toHaveBeenLastCalledWith('cmd');
+      });
+      it('calls input.keystroke for keystroke', () => {
+        w.instance().keypadPress({ keystroke: 'k' });
+        expect(w.instance().input.keystroke).toHaveBeenLastCalledWith('k');
+      });
+    });
+  });
+
+  describe('changeLatex', () => {
+    it('calls onChange', () => {
+      w = wrapper();
+      w.instance().changeLatex('new-latex');
+      expect(onChange).toHaveBeenCalledWith('new-latex');
+    });
+    it('does not call onChange if it is the same as the existing latex', () => {
+      w = wrapper();
+      w.setProps({ latex: 'new-latex' });
+      w.instance().changeLatex('new-latex');
+      expect(onChange).not.toHaveBeenCalledWith('new-latex');
+    });
+  });
+
+  describe('inputFocus', () => {
+    it('sets state', () => {
+      w = wrapper();
+      w.instance().inputFocus();
+      expect(w.state().focused).toBe(true);
+    });
+  });
+  describe('inputBlur', () => {
+    it('sets state', () => {
+      w = wrapper();
+      w.instance().inputFocus();
+      w.instance().inputBlur();
+      expect(w.state().focused).toBe(false);
+    });
+  });
+});

package/src/horizontal-keypad.jsx

@@ -17,12 +17,14 @@ const toOldModel = (d) => {
 export default class HorizontalKeypad extends React.Component {
   static propTypes = {
     className: PropTypes.string,
+    controlledKeypadMode: PropTypes.bool,
     mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     layoutForKeyPad: PropTypes.object,
     onClick: PropTypes.func.isRequired,
     onFocus: PropTypes.func,
     noDecimal: PropTypes.bool,
     additionalKeys: PropTypes.array,
+    setKeypadInteraction: PropTypes.func,
   };
 
   static defaultProps = {
@@ -38,18 +40,29 @@ export default class HorizontalKeypad extends React.Component {
   };
 
   render() {
-    const { mode, onFocus, noDecimal, className, additionalKeys, layoutForKeyPad } = this.props;
+    const {
+      mode,
+      onFocus,
+      controlledKeypadMode,
+      noDecimal,
+      className,
+      additionalKeys,
+      layoutForKeyPad,
+      setKeypadInteraction,
+    } = this.props;
     const normalizedKeys = normalizeAdditionalKeys(additionalKeys);
 
     return (
       <Keypad
         className={className}
+        controlledKeypadMode={controlledKeypadMode}
         onFocus={onFocus}
         noDecimal={noDecimal}
         layoutForKeyPad={layoutForKeyPad}
         additionalKeys={extendKeySet(keysForGrade(mode), normalizedKeys)}
         onPress={this.keypadPress}
         mode={mode}
+        setKeypadInteraction={setKeypadInteraction}
       />
     );
   }

package/src/index.jsx

@@ -1,4 +1,5 @@
 import { keysForGrade } from './keys/grades';
+import { updateSpans } from './updateSpans';
 
 const addLeftBracket = (s) => (s.indexOf('\\(') === 0 ? s : `\\(${s}`);
 const addRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s : `${s}\\)`);
@@ -8,16 +9,6 @@ const rmRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s.substring(0
 const addBrackets = (s) => addRightBracket(addLeftBracket(s));
 const removeBrackets = (s) => rmRightBracket(rmLeftBracket(s));
 
-// 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';
-    }
-  });
-};
-
 import * as keys from './keys';
 
 import HorizontalKeypad from './horizontal-keypad';

package/src/keypad/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Keypad snapshot renders 1`] = `
+<div
+  className="className"
+  style={
+    Object {
+      "gridTemplateColumns": "repeat(4, minmax(min-content, 150px))",
+    }
+  }
+>
+  <WithStyles(Button)
+    aria-label="seven"
+    className=""
+    disabled={false}
+    key="7-0"
+    onClick={[Function]}
+  >
+    7
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="four"
+    className=""
+    disabled={false}
+    key="4-1"
+    onClick={[Function]}
+  >
+    4
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="one"
+    className=""
+    disabled={false}
+    key="1-2"
+    onClick={[Function]}
+  >
+    1
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="zero"
+    className=""
+    disabled={false}
+    key="0-3"
+    onClick={[Function]}
+  >
+    0
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="Move cursor left"
+    className=""
+    disabled={false}
+    key="◀-4"
+    onClick={[Function]}
+  >
+    ◀
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="eight"
+    className=""
+    disabled={false}
+    key="8-5"
+    onClick={[Function]}
+  >
+    8
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="five"
+    className=""
+    disabled={false}
+    key="5-6"
+    onClick={[Function]}
+  >
+    5
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="two"
+    className=""
+    disabled={false}
+    key="2-7"
+    onClick={[Function]}
+  >
+    2
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="decimal-point"
+    className=""
+    disabled={false}
+    key=".-8"
+    onClick={[Function]}
+  >
+    .
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="Move cursor right"
+    className=""
+    disabled={false}
+    key="▶-9"
+    onClick={[Function]}
+  >
+    ▶
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="nine"
+    className=""
+    disabled={false}
+    key="9-10"
+    onClick={[Function]}
+  >
+    9
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="six"
+    className=""
+    disabled={false}
+    key="6-11"
+    onClick={[Function]}
+  >
+    6
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="three"
+    className=""
+    disabled={false}
+    key="3-12"
+    onClick={[Function]}
+  >
+    3
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="comma"
+    className=""
+    disabled={false}
+    key=",-13"
+    onClick={[Function]}
+  >
+    ,
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="Delete"
+    className="undefined"
+    disabled={false}
+    key="⌫-14"
+    onClick={[Function]}
+  >
+    ⌫
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="divide"
+    className=""
+    disabled={false}
+    key="÷-15"
+    onClick={[Function]}
+  >
+    ÷
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="multiply"
+    className=""
+    disabled={false}
+    key="×-16"
+    onClick={[Function]}
+  >
+    ×
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="−"
+    className=""
+    disabled={false}
+    key="−-17"
+    onClick={[Function]}
+  >
+    −
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="+"
+    className=""
+    disabled={false}
+    key="+-18"
+    onClick={[Function]}
+  >
+    +
+  </WithStyles(Button)>
+  <WithStyles(Button)
+    aria-label="="
+    className=""
+    disabled={false}
+    key="=-19"
+    onClick={[Function]}
+  >
+    =
+  </WithStyles(Button)>
+</div>
+`;

package/src/keypad/__tests__/index.test.jsx

@@ -0,0 +1,24 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { KeyPad } from '../index';
+
+describe('Keypad', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      onPress: jest.fn(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<KeyPad {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/keypad/__tests__/keys-layout.test.js

@@ -0,0 +1,15 @@
+import { sortKeys } from '../keys-layout';
+import { baseSet, comparison } from '../../keys';
+
+describe('keys-layout', () => {
+  describe('sortKeys', () => {
+    it('pads the rows', () => {
+      const result = sortKeys([[1, 2, 3]]);
+      expect(result).toEqual([
+        [1, undefined, undefined, undefined, undefined],
+        [2, undefined, undefined, undefined, undefined],
+        [3, undefined, undefined, undefined, undefined],
+      ]);
+    });
+  });
+});