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

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],
+      ]);
+    });
+  });
+});

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 { constants } from '@pie-lib/editable-html';
+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(`.${constants.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(`.${constants.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({