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

package/src/keys/grades.js

@@ -304,6 +304,12 @@ export const gradeSets = [
       ],
     ],
   },
+  // for grade 1-2, we want to display the base set only
+  // we need it here because we don't want to display the default set (grade 8)
+  {
+    predicate: (n) => n >= 1 && n <= 2,
+    set: [],
+  },
 ];
 
 export const keysForGrade = (n) => {
@@ -324,6 +330,11 @@ export const keysForGrade = (n) => {
   if (match) {
     return match.set || [];
   }
+
+  // if the grade is not found, return the default set which is grade 8 (as per PD-3549), for mode language it is not the default
+  if (n !== 'language') {
+    return gradeSets[2].set;
+  }
 };
 
 const ALL_KEYS = [

package/src/keys/log.js

@@ -12,7 +12,7 @@ export const logSubscript = set({
   name: 'log base n',
   label: 'log s',
   latex: '\\log_{}',
-  command: ['\\log', '_', ' '],
+  command: ['\\log', '_'],
 });
 export const ln = set({
   name: 'natural log',

package/src/mq/__tests__/__snapshots__/input.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input snapshot renders 1`] = `
+<span
+  className="className"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+/>
+`;

package/src/mq/__tests__/input.test.jsx

@@ -0,0 +1,92 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Input } from '../input';
+
+describe('Input', () => {
+  let w;
+  let onChange;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    const out = shallow(<Input {...props} />);
+
+    out.mathField = () => out.instance().mathField;
+    return out;
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {
+    beforeEach(() => {
+      w = wrapper();
+    });
+    describe('clear', () => {
+      it('calls latex', () => {
+        w.instance().clear();
+        expect(w.mathField().latex).toHaveBeenCalledWith('');
+      });
+    });
+    describe('blur', () => {
+      it('calls blur', () => {
+        w.instance().blur();
+        expect(w.mathField().blur).toHaveBeenCalled();
+      });
+    });
+    describe('focus', () => {
+      it('calls focus', () => {
+        w.instance().focus();
+        expect(w.mathField().focus).toHaveBeenCalled();
+      });
+    });
+    describe('command', () => {
+      it('calls cmd', () => {
+        w.instance().command('foo');
+        expect(w.mathField().cmd).toHaveBeenCalledWith('foo');
+      });
+      it('calls cmd if passed an array', () => {
+        w.instance().command(['foo', 'bar']);
+        expect(w.mathField().cmd).toHaveBeenCalledWith('foo');
+        expect(w.mathField().cmd).toHaveBeenCalledWith('bar');
+      });
+    });
+
+    describe('keystroke', () => {
+      beforeEach(() => {
+        w.instance().keystroke('9');
+      });
+      it('calls keystroke', () => expect(w.mathField().keystroke).toHaveBeenCalledWith('9'));
+      it('calls focus', () => expect(w.mathField().focus).toHaveBeenCalled());
+      it('calls latex', () => expect(w.mathField().latex).toHaveBeenCalled());
+    });
+
+    describe('write', () => {
+      beforeEach(() => {
+        w.instance().write('hi');
+      });
+      it('calls write', () => expect(w.mathField().write).toHaveBeenCalledWith('hi'));
+      it('calls focus', () => expect(w.mathField().focus).toHaveBeenCalled());
+      it('calls latex', () => expect(w.mathField().latex).toHaveBeenCalled());
+    });
+
+    describe('onInputEdit', () => {
+      it('calls onChange', () => {
+        w = wrapper();
+        w.mathField().latex.mockReturnValue('foo');
+        w.instance().onInputEdit();
+        expect(onChange).toHaveBeenCalledWith('foo');
+      });
+    });
+  });
+});

package/src/mq/__tests__/static.test.jsx

@@ -0,0 +1,57 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Static from '../static';
+
+const Mathquill = require('@pie-framework/mathquill');
+
+jest.mock('@pie-framework/mathquill', () => ({
+  StaticMath: jest.fn().mockReturnValue({
+    latex: jest.fn(),
+    parseLatex: jest.fn(),
+  }),
+  getInterface: jest.fn().mockReturnThis(),
+}));
+
+describe('static', () => {
+  let w;
+  describe('mount', () => {
+    beforeEach(() => {
+      w = shallow(<Static latex="foo" />, {
+        disableLifecycleMethods: true,
+      });
+
+      w.instance().input = {};
+      w.instance().componentDidMount();
+    });
+
+    it('set the html', () => {
+      expect(Mathquill.getInterface().StaticMath().latex).toBeCalledWith('foo');
+    });
+
+    it('calls MQ.StaticMath', () => {
+      expect(Mathquill.getInterface().StaticMath).toHaveBeenCalled();
+    });
+  });
+
+  describe('shouldComponentUpdate', () => {
+    it('returns false if there is an error', () => {
+      w = shallow(<Static latex="foo" />, { disableLifecycleMethods: true });
+      w.instance().mathField = {
+        parseLatex: jest.fn((e) => {
+          throw new Error('boom');
+        }),
+      };
+      expect(w.instance().shouldComponentUpdate({ latex: '\\abs{}' })).toEqual(false);
+    });
+
+    it('returns true if ??', () => {
+      w = shallow(<Static latex="foo" />, { disableLifecycleMethods: true });
+      w.instance().mathField = {
+        latex: jest.fn().mockReturnValue('foo'),
+        parseLatex: jest.fn().mockReturnValue('foo'),
+        innerFields: ['field1', 'field2'],
+      };
+      expect(w.instance().shouldComponentUpdate({ latex: '\\abs{}' })).toEqual(true);
+    });
+  });
+});

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

@@ -0,0 +1,105 @@
+export const 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',
+  },
+};
+
+export const 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',
+  },
+};
+
+export const 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',
+  },
+};
+
+export const commonMqKeyboardStyles = {
+  '& *': {
+    ...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',
+    },
+  },
+};
+
+export default {
+  commonMqFontStyles,
+  longdivStyles,
+  supsubStyles,
+  commonMqKeyboardStyles,
+};

package/src/mq/index.js

@@ -1,4 +1,5 @@
 import Input from './input';
 import Static from './static';
+import CommonMqStyles from './common-mq-styles';
 
-export { Input, Static };
+export { Input, Static, CommonMqStyles };

package/src/mq/input.jsx

@@ -53,14 +53,17 @@ export class Input extends React.Component {
     if (!this.mathField) {
       return;
     }
+
     const { latex } = this.props;
-    if (latex) {
+
+    if (latex !== undefined && latex !== null) {
       this.mathField.latex(latex);
     }
   }
 
   clear() {
     this.mathField.latex('');
+
     return '';
   }
 
@@ -83,13 +86,16 @@ export class Input extends React.Component {
     } else {
       this.mathField.cmd(v);
     }
+
     this.mathField.focus();
+
     return this.mathField.latex();
   }
 
   keystroke(v) {
     this.mathField.keystroke(v);
     this.mathField.focus();
+
     return this.mathField.latex();
   }
 
@@ -97,12 +103,14 @@ export class Input extends React.Component {
     log('write: ', v);
     this.mathField.write(v);
     this.mathField.focus();
+
     return this.mathField.latex();
   }
 
   onInputEdit = () => {
     log('[onInputEdit] ...');
     const { onChange } = this.props;
+
     if (!this.mathField) {
       return;
     }
@@ -128,28 +136,33 @@ export class Input extends 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;
     }
   };
 
+  onClick = (event) => {
+    const { onClick } = this.props;
+
+    this.refresh();
+    onClick && onClick(event);
+  };
+
   shouldComponentUpdate(nextProps) {
     log('next: ', nextProps.latex);
     log('current: ', this.mathField.latex());
+
     return nextProps.latex !== this.mathField.latex();
   }
 
   render() {
-    const { onClick, onFocus, onBlur, classes, className } = this.props;
+    const { onFocus, onBlur, classes, className } = this.props;
 
     return (
       <span
         className={classNames(classes.input, className)}
-        onKeyPress={this.onKeyPress}
-        onClick={onClick}
+        onKeyDown={this.onKeyPress}
+        onClick={this.onClick}
         onFocus={onFocus}
         onBlur={onBlur}
         ref={(r) => (this.input = r)}

package/src/mq/static.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
 import MathQuill from '@pie-framework/mathquill';
-import { updateSpans } from '../index';
+import { updateSpans } from '../updateSpans';
 
 let MQ;
 if (typeof window !== 'undefined') {
@@ -17,6 +17,18 @@ 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.
  */
@@ -36,9 +48,24 @@ export default class Static extends React.Component {
     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() {
@@ -46,7 +73,62 @@ export default class Static extends React.Component {
     updateSpans();
   }
 
-  onInputEdit(field) {
+  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) {
       return;
     }
@@ -56,7 +138,7 @@ export default class Static extends React.Component {
       // eslint-disable-next-line no-useless-escape
       const regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
 
-      if (this.input && regexMatch && regexMatch?.length) {
+      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 }));
@@ -68,15 +150,62 @@ export default class Static extends React.Component {
         this.props.onSubFieldChange(name, field.latex());
       }
     }
-  }
 
-  update() {
+    this.announceLatexConversion(field.latex());
+  };
+
+  announceLatexConversion = (newLatex) => {
+    if (!this.state) {
+      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) {
+          console.warn('Error parsing latex:', e.message);
+          console.warn(e);
+        }
+      }
+    }
+
+    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?');
     }
-    // this.input.innerHTML = this.props.latex;
     if (!this.mathField) {
-      this.mathField = MQ.StaticMath(this.input, {
+      this.mathField = MQ.StaticMath(this.inputRef?.current, {
         handlers: {
           edit: this.onInputEdit.bind(this),
         },
@@ -90,17 +219,17 @@ export default class Static extends React.Component {
       // default latex if received has errors
       this.mathField.latex('\\MathQuillMathField[r1]{}');
     }
-  }
+  };
 
-  blur() {
+  blur = () => {
     log('blur mathfield');
     this.mathField.blur();
-  }
+  };
 
-  focus() {
+  focus = () => {
     log('focus mathfield...');
     this.mathField.focus();
-  }
+  };
 
   shouldComponentUpdate(nextProps) {
     try {
@@ -151,6 +280,6 @@ export default class Static extends React.Component {
   render() {
     const { onBlur, className } = this.props;
 
-    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={(r) => (this.input = r)} />;
+    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={this.inputRef} />;
   }
 }

package/src/updateSpans.js

@@ -0,0 +1,15 @@
+// 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 };

package/README.md

@@ -1,27 +0,0 @@
-# math-input  
-
-A [React](http://github.com/facebook/react) math input field, with a material design feel. Uses [Mathquill](http://mathquill.com/).
-
-## install 
-
-```bash
-npm|yarn install
-```
-
-## demo
-```bash
-
-cd demo 
-../node_modules/.bin/webpack-dev-server --hot --inline
-```
-
-## test
-
-```bash
-npm|yarn test
-```
-
-
-## Using in another app
-
-We expose the jsx directly, so you'll need to update your build pipeline to build from src.