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

package/src/keypad/index.jsx

@@ -6,13 +6,16 @@ import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { lighten, fade } from '@material-ui/core/styles/colorManipulator';
 import green from '@material-ui/core/colors/green';
-import { sortKeys } from './keys-layout';
-import * as mq from '../mq';
-import { baseSet } from '../keys';
 import debug from 'debug';
 import _ from 'lodash';
 import MathQuill from '@pie-framework/mathquill';
 
+import * as mq from '../mq';
+import { baseSet } from '../keys';
+import editableHtmlConstants from '../../../editable-html/src/constants';
+import { commonMqKeyboardStyles } from '../mq/common-mq-styles';
+import { sortKeys } from './keys-layout';
+
 const log = debug('pie-lib:math-inline:keypad');
 
 const LatexButton = withStyles((theme) => ({
@@ -37,6 +40,9 @@ const LatexButton = withStyles((theme) => ({
     '& .mq-overline .mq-overline-inner': {
       borderTop: '2px solid black',
     },
+    '& .mq-non-leaf.mq-overline': {
+      borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
+    },
     '& .mq-overarrow': {
       width: '30px',
       marginTop: '0 !important',
@@ -47,11 +53,12 @@ const LatexButton = withStyles((theme) => ({
         top: '0px !important',
         '& *': {
           lineHeight: '1 !important',
+          borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line,
         },
         '&:before': {
           fontSize: '80%',
-          left: 'calc(-13%)',
-          top: '-0.31em',
+          left: 'calc(-13%) !important',
+          top: '-0.31em !important',
         },
         '&:after': {
           fontSize: '80% !important',
@@ -74,8 +81,8 @@ const LatexButton = withStyles((theme) => ({
       },
       '&.mq-arrow-right:before': {
         fontSize: '80%',
-        right: 'calc(-13%)',
-        top: '-0.26em',
+        right: 'calc(-13%) !important',
+        top: '-0.26em !important',
       },
       '& .mq-overarrow-inner': {
         border: 'none !important',
@@ -111,6 +118,9 @@ const LatexButton = withStyles((theme) => ({
     },
     '& .mq-overarc': {
       borderTop: '2px solid black !important',
+      '& .mq-overline': {
+        borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
+      },
       '& .mq-overline-inner': {
         borderTop: 'none !important',
         paddingTop: '0 !important',
@@ -118,7 +128,7 @@ const LatexButton = withStyles((theme) => ({
     },
   },
   parallelButton: {
-    fontStyle: 'italic',
+    fontStyle: 'italic !important',
   },
   leftRightArrowButton: {
     '& .mq-overarrow.mq-arrow-both': {
@@ -183,22 +193,83 @@ export class KeyPad extends React.Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
+    controlledKeypadMode: PropTypes.bool,
     baseSet: PropTypes.array,
     additionalKeys: PropTypes.array,
     layoutForKeyPad: PropTypes.object,
     onPress: PropTypes.func.isRequired,
     onFocus: PropTypes.func,
     noDecimal: PropTypes.bool,
-    mode: PropTypes.string,
+    setKeypadInteraction: PropTypes.func,
+    mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   };
   static defaultProps = {
     baseSet: baseSet,
     noDecimal: false,
   };
 
+  constructor(props) {
+    super(props);
+    this.keypadRef = React.createRef();
+  }
+
+  componentDidMount() {
+    const keyPadElement = this.keypadRef?.current;
+    const mainContainer = keyPadElement?.closest(`.${editableHtmlConstants.MAIN_CONTAINER_CLASS}`);
+    const currentToolbar = keyPadElement?.closest('.pie-toolbar');
+
+    // need only for math keyboard so we need also controlledKeypadMode
+    if (this.props.controlledKeypadMode && mainContainer && currentToolbar) {
+      const mainContainerPosition = mainContainer.getBoundingClientRect();
+      const currentToolbarPosition = currentToolbar.getBoundingClientRect();
+      const difference =
+        mainContainerPosition.top +
+        mainContainerPosition.height -
+        (currentToolbarPosition.top + currentToolbarPosition.height);
+      if (difference < 0) {
+        const totalHeight = mainContainerPosition.height + mainContainerPosition.top - difference;
+        // increase the height of the main container if keyboard needs it
+        if (mainContainer) {
+          mainContainer.style.height = `${totalHeight}px`;
+        }
+      }
+    }
+
+    if (keyPadElement) {
+      keyPadElement.addEventListener('touchstart', this.handleKeypadInteraction, true);
+      keyPadElement.addEventListener('mousedown', this.handleKeypadInteraction, true);
+    }
+  }
+
+  componentWillUnmount() {
+    const keyPadElement = this.keypadRef?.current;
+    // need only for math keyboard
+    if (this.props.controlledKeypadMode && keyPadElement) {
+      const mainContainer = keyPadElement.closest(`.${editableHtmlConstants.MAIN_CONTAINER_CLASS}`);
+
+      if (mainContainer) {
+        mainContainer.style.height = 'unset';
+      }
+    }
+
+    if (keyPadElement) {
+      keyPadElement.removeEventListener('touchstart', this.handleKeypadInteraction, true);
+      keyPadElement.removeEventListener('mousedown', this.handleKeypadInteraction, true);
+    }
+  }
+
+  handleKeypadInteraction = () => {
+    // Check if the setKeypadInteraction prop is available, which is used for both
+    // the language keypad and the special characters keypad
+    if (this.props.setKeypadInteraction) {
+      this.props.setKeypadInteraction(true);
+    }
+  };
+
   buttonClick = (key) => {
     log('[buttonClick]', key);
     const { onPress } = this.props;
+
     onPress(key);
   };
 
@@ -234,7 +305,12 @@ export class KeyPad extends React.Component {
     };
 
     return (
-      <div className={classNames(classes.keys, className, classes[mode])} style={style} onFocus={onFocus}>
+      <div
+        ref={this.keypadRef}
+        className={classNames(classes.keys, className, classes[mode])}
+        style={style}
+        onFocus={onFocus}
+      >
         {allKeys.map((k, index) => {
           const onClick = this.buttonClick.bind(this, k);
 
@@ -271,7 +347,12 @@ export class KeyPad extends React.Component {
 
           if (k.label) {
             return (
-              <Button key={index} {...common} aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}>
+              <Button
+                key={index}
+                {...common}
+                className={classNames(common.className, { [classes.deleteButton]: k.label === '⌫' })}
+                aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
+              >
                 {k.label}
               </Button>
             );
@@ -292,9 +373,7 @@ export class KeyPad extends React.Component {
 
 const styles = (theme) => ({
   keys: {
-    '& *': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
+    ...commonMqKeyboardStyles,
     width: '100%',
     display: 'grid',
     gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
@@ -307,7 +386,7 @@ const styles = (theme) => ({
     gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
   },
   language: {
-    gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
+    gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
     '& *': {
       fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
     },
@@ -337,6 +416,11 @@ const styles = (theme) => ({
       backgroundColor: lighten(theme.palette.primary.light, 0.7),
     },
   },
+  deleteButton: {
+    '& > span': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  },
   base: {},
   operators: {
     backgroundColor: lighten(theme.palette.secondary.light, 0.5),

package/src/keys/__tests__/utils.test.js

@@ -0,0 +1,57 @@
+import { extendKeySet } from '../utils';
+import { keysForGrade, gradeSets } from '../grades';
+import * as comparison from '../../keys/comparison';
+
+describe('utils', () => {
+  const base = [[comparison.lessThan]];
+  describe('extendKeySet', () => {
+    it('removes duplicates by latex key', () => {
+      const extras = [{ name: 'foo', latex: '<', write: '<', label: 'less than' }];
+      const result = extendKeySet(base, extras);
+      const resultTwo = extendKeySet(base, []);
+      expect(result).toEqual(resultTwo);
+    });
+
+    it('removes duplicates by name key', () => {
+      const extras = [{ name: 'Less than', latex: 'this is latex', write: '<', label: '<' }];
+      const result = extendKeySet(base, extras);
+      const resultTwo = extendKeySet(base, []);
+      expect(result).toEqual(resultTwo);
+    });
+  });
+
+  describe('keysForGrade', () => {
+    it.each`
+      key                        | expected
+      ${'1'}                     | ${[]}
+      ${'2'}                     | ${[]}
+      ${'3'}                     | ${gradeSets[0].set}
+      ${'4'}                     | ${gradeSets[0].set}
+      ${'5'}                     | ${gradeSets[0].set}
+      ${'6'}                     | ${gradeSets[1].set}
+      ${'7'}                     | ${gradeSets[1].set}
+      ${'8'}                     | ${gradeSets[2].set}
+      ${'9'}                     | ${gradeSets[2].set}
+      ${'HS'}                    | ${gradeSets[2].set}
+      ${'non-negative-integers'} | ${gradeSets[3].set}
+      ${'integers'}              | ${gradeSets[4].set}
+      ${'decimals'}              | ${gradeSets[5].set}
+      ${'fractions'}             | ${gradeSets[6].set}
+      ${'geometry'}              | ${gradeSets[7].set}
+      ${'advanced-algebra'}      | ${gradeSets[8].set}
+      ${'statistics'}            | ${gradeSets[9].set}
+      ${'something else'}        | ${gradeSets[2].set}
+      ${undefined}               | ${[]}
+      ${null}                    | ${[]}
+      ${0}                       | ${[]}
+      ${'0'}                     | ${[]}
+    `('$key => $expected', ({ key, expected }) => {
+      expect(keysForGrade(key)).toEqual(expected);
+
+      const n = parseInt(key, 10);
+      if (!isNaN(n)) {
+        expect(keysForGrade(n)).toEqual(expected);
+      }
+    });
+  });
+});

package/src/keys/geometry.js

@@ -101,6 +101,7 @@ export const congruentTo = set({
   command: '\\cong',
   latex: '\\cong',
 });
+
 export const notCongruentTo = set({
   name: 'Not Congruent To',
   command: '\\ncong',
@@ -115,10 +116,13 @@ export const primeArcminute = set({
   // eslint-disable-next-line
   write: "'",
 });
+
 export const doublePrimeArcSecond = set({
   name: 'Double Prime',
-  latex: '"',
-  write: '"',
+  // eslint-disable-next-line
+  latex: "''",
+  // eslint-disable-next-line
+  write: "''",
 });
 
 export const leftArrow = set({

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 };