@pie-lib/math-input-mathlive 1.0.0

package/src/keypad/index.jsx

@@ -0,0 +1,335 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import debug from 'debug';
+import { flatten } from 'lodash-es';
+import { color } from '@pie-lib/render-ui';
+
+import { baseSet } from '../keys';
+import { sortKeys } from './keys-layout';
+import { commonKeyboardStyles } from '../mf/common-styles';
+import { loadMathLive, latexToMarkup } from '../mathlive-instance';
+
+const log = debug('pie-lib:math-input-mathlive:keypad');
+
+/**
+ * A LaTeX keypad label.
+ *
+ * The MathQuill implementation rendered every LaTeX label as its own
+ * `MQ.StaticMath` instance. Here each label is static HTML produced once by
+ * `convertLatexToMarkup`, so a 40-key keypad no longer creates 40 live math
+ * instances.
+ */
+const LabelHolder = styled('span')({
+  pointerEvents: 'none',
+  textTransform: 'none',
+  color: color.text(),
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 1,
+  // Answer-block / empty-slot boxes inside a label.
+  '& .ML__placeholder': {
+    backgroundColor: color.keypadEmptyPlaceholder(),
+  },
+});
+
+export class LatexLabel extends React.Component {
+  static propTypes = {
+    latex: PropTypes.string.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { markup: latexToMarkup(props.latex) };
+  }
+
+  async componentDidMount() {
+    // MathLive may not have finished loading when the keypad first mounts.
+    if (!this.state.markup) {
+      await loadMathLive();
+
+      if (!this.unmounted) {
+        this.setState({ markup: latexToMarkup(this.props.latex) });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.latex !== this.props.latex) {
+      this.setState({ markup: latexToMarkup(this.props.latex) });
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true;
+  }
+
+  render() {
+    const { markup } = this.state;
+
+    // Fall back to the raw latex so a button is never blank.
+    return markup ? (
+      // eslint-disable-next-line react/no-danger
+      <LabelHolder dangerouslySetInnerHTML={{ __html: markup }} />
+    ) : (
+      <LabelHolder>{this.props.latex}</LabelHolder>
+    );
+  }
+}
+
+const createCustomLayout = (layoutObj) => {
+  if (layoutObj) {
+    return {
+      gridTemplateColumns: `repeat(${layoutObj.columns}, minmax(min-content, 150px))`,
+      gridTemplateRows: `repeat(${layoutObj.rows}, minmax(40px, 60px))`,
+      gridAutoFlow: 'initial',
+    };
+  }
+
+  return {};
+};
+
+const KeyPadContainer = styled('div')(() => ({
+  ...commonKeyboardStyles,
+  width: '100%',
+  display: 'grid',
+  gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
+  gridRowGap: '0px',
+  gridColumnGap: '0px',
+  gridAutoFlow: 'column',
+  '&.character': {
+    textTransform: 'initial !important',
+    gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
+  },
+  '&.language': {
+    gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  },
+}));
+
+const buttonBackground = (category) => ({
+  backgroundColor: category === 'operators' ? color.keypadButtonOperator() : color.keypadButton(),
+  '&:hover': {
+    backgroundColor: category === 'operators' ? color.keypadButtonOperatorHover() : color.keypadButtonHover(),
+  },
+});
+
+const StyledButton = styled(Button)(({ category, isDelete, isComma, isDot }) => ({
+  minWidth: 'auto',
+  textTransform: 'none',
+  fontSize: isComma || isDot ? '200% !important' : '140% !important',
+  lineHeight: isComma || isDot ? '100%' : 'normal',
+  color: color.text(),
+  ...buttonBackground(category),
+  borderRadius: 0,
+  ...(isDelete && {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  }),
+}));
+
+const StyledLatexButtonWrapper = styled(Button)(({ category }) => ({
+  textTransform: 'none',
+  padding: 0,
+  margin: 0,
+  fontSize: '110% !important',
+  minWidth: 'auto',
+  borderRadius: 0,
+  ...buttonBackground(category),
+}));
+
+const StyledIconButton = styled(IconButton)(({ category }) => ({
+  minWidth: 'auto',
+  ...buttonBackground(category),
+  borderRadius: 0,
+  '& .icon': {
+    height: '30px',
+  },
+}));
+
+export class KeyPad extends React.Component {
+  static propTypes = {
+    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,
+    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() {
+    // Ensure MathLive is available for the LaTeX labels.
+    loadMathLive();
+
+    const keyPadElement = this.keypadRef?.current;
+    const mainContainer = keyPadElement?.closest('.main-container');
+    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;
+
+        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;
+
+    if (this.props.controlledKeypadMode && keyPadElement) {
+      const mainContainer = keyPadElement.closest('.main-container');
+
+      if (mainContainer) {
+        mainContainer.style.height = 'unset';
+      }
+    }
+
+    if (keyPadElement) {
+      keyPadElement.removeEventListener('touchstart', this.handleKeypadInteraction, true);
+      keyPadElement.removeEventListener('mousedown', this.handleKeypadInteraction, true);
+    }
+  }
+
+  handleKeypadInteraction = () => {
+    if (this.props.setKeypadInteraction) {
+      this.props.setKeypadInteraction(true);
+    }
+  };
+
+  buttonClick = (key) => {
+    log('[buttonClick]', key);
+    this.props.onPress(key);
+  };
+
+  flowKeys = (base, extras) => flatten([...sortKeys(base), ...sortKeys(extras)]);
+
+  keyIsNotAllowed = (key) => {
+    const { noDecimal } = this.props;
+
+    return !!(
+      ((key.write === '.' && key.label === '.') || (key.write === ',' && key.label === ',')) &&
+      noDecimal
+    );
+  };
+
+  render() {
+    const { className, baseSet: base, additionalKeys, layoutForKeyPad, onFocus, mode } = this.props;
+
+    const noBaseSet = ['non-negative-integers', 'integers', 'decimals', 'fractions', 'item-authoring', 'language'];
+    const keysWithoutBaseSet = noBaseSet.includes(mode);
+    const allKeys = keysWithoutBaseSet
+      ? this.flowKeys([], additionalKeys || [])
+      : this.flowKeys(base, additionalKeys || []);
+
+    const shift = allKeys.length % 5 ? 1 : 0;
+    const style = {
+      gridTemplateColumns: `repeat(${Math.floor(allKeys.length / 5) + shift}, minmax(min-content, 150px))`,
+      ...createCustomLayout(layoutForKeyPad),
+    };
+
+    return (
+      <KeyPadContainer
+        ref={this.keypadRef}
+        className={[className, mode].filter(Boolean).join(' ')}
+        style={style}
+        onFocus={onFocus}
+      >
+        {allKeys.map((k, index) => {
+          if (!k) {
+            return <span key={`empty-${index}`} />;
+          }
+
+          const key = `${k.label || k.latex || k.command}-${index}`;
+          const category = !keysWithoutBaseSet ? k.category : undefined;
+          const extra = { ...(k.actions || {}), ...(k.extraProps || {}) };
+          const onClick = this.buttonClick.bind(this, k);
+          const disabled = this.keyIsNotAllowed(k);
+          const ariaLabel = k.ariaLabel ? k.ariaLabel : k.name || k.label;
+
+          if (k.latex) {
+            return (
+              <StyledLatexButtonWrapper
+                key={key}
+                onClick={onClick}
+                disabled={disabled}
+                category={category}
+                aria-label={ariaLabel}
+                {...extra}
+              >
+                <LatexLabel latex={k.latex} />
+              </StyledLatexButtonWrapper>
+            );
+          }
+
+          if (k.label) {
+            return (
+              <StyledButton
+                key={key}
+                onClick={onClick}
+                disabled={disabled}
+                category={category}
+                isDelete={k.label === '⌫'}
+                isComma={k.label === ','}
+                isDot={k.label === '.'}
+                aria-label={ariaLabel}
+                {...extra}
+              >
+                {k.label}
+              </StyledButton>
+            );
+          }
+
+          const Icon = k.icon ? k.icon : 'div';
+
+          return (
+            <StyledIconButton
+              key={key}
+              tabIndex={'-1'}
+              onClick={onClick}
+              disabled={disabled}
+              category={category}
+              size="large"
+              {...extra}
+            >
+              <Icon className="icon" />
+            </StyledIconButton>
+          );
+        })}
+      </KeyPadContainer>
+    );
+  }
+}
+
+export default KeyPad;

package/src/keypad/keys-layout.js

@@ -0,0 +1,16 @@
+import { times, zip } from 'lodash-es';
+
+/**
+ * Sort additional keys.
+ *
+ * Expects an array of rows.
+ * @param {} keys
+ */
+export const sortKeys = (keys) => {
+  // add any missing rows
+  times(5 - keys.length, () => keys.push([]));
+
+  const out = zip.apply(null, keys);
+
+  return out;
+};

package/src/keys/basic-operators.js

@@ -0,0 +1,32 @@
+import { DIVIDE, MULTIPLY } from './chars';
+import { mkSet } from './utils';
+
+const set = mkSet('operators');
+
+export const equals = set({
+  write: '=',
+  label: '=',
+});
+
+export const plus = set({
+  write: '+',
+  label: '+',
+});
+
+export const minus = set({
+  write: '−',
+  label: '−',
+});
+
+export const divide = set({
+  name: 'divide',
+  label: DIVIDE,
+  command: '\\divide',
+  otherNotation: '\\div',
+});
+
+export const multiply = set({
+  name: 'multiply',
+  label: MULTIPLY,
+  command: '\\times',
+});

package/src/keys/chars.js

@@ -0,0 +1,5 @@
+export const DELETE = '\u232B';
+export const LEFT_ARROW = '◀';
+export const RIGHT_ARROW = '▶';
+export const DIVIDE = '\u00F7';
+export const MULTIPLY = '\u00D7';

package/src/keys/comparison.js

@@ -0,0 +1,28 @@
+const set = (o) => ({ ...o, category: 'comparison' });
+
+export const lessThan = set({
+  name: 'Less than',
+  latex: '<',
+  command: '\\lt',
+});
+
+export const greaterThan = set({
+  name: 'Greater than',
+  latex: '>',
+  command: '\\gt',
+});
+
+export const lessThanEqual = set({
+  name: 'Less than or equal',
+  latex: '\\le',
+  symbol: '<=',
+  command: '\\le',
+  ariaLabel: 'less than or equal to',
+});
+
+export const greaterThanEqual = set({
+  name: 'Greater than or equal',
+  symbol: '>=',
+  command: '\\ge',
+  latex: '\\ge',
+});

package/src/keys/constants.js

@@ -0,0 +1,35 @@
+import { mkSet } from './utils';
+
+const set = mkSet('constants');
+
+export const pi = set({
+  name: 'Pi',
+  label: 'π',
+  latex: '\\pi',
+  command: '\\pi',
+  category: 'constants',
+});
+
+export const eulers = set({
+  name: 'Eulers',
+  label: 'e',
+  latex: 'e',
+  command: 'e',
+  category: 'constants',
+});
+
+export const infinity = set({
+  name: 'Infinity',
+  label: '\\infty',
+  latex: '\\infty',
+  command: '\\infty',
+  category: 'constants',
+});
+
+export const halfInfinity = set({
+  name: 'Half Infinity',
+  label: '\\propto',
+  latex: '\\propto',
+  command: '\\propto',
+  category: 'constants',
+});

package/src/keys/digits.js

@@ -0,0 +1,40 @@
+import { times } from 'lodash-es';
+
+const digitMap = {
+  0: 'zero',
+  1: 'one',
+  2: 'two',
+  3: 'three',
+  4: 'four',
+  5: 'five',
+  6: 'six',
+  7: 'seven',
+  8: 'eight',
+  9: 'nine',
+};
+
+const comma = { name: 'comma', label: ',', write: ',', category: 'digit' };
+
+const decimalPoint = {
+  name: 'decimal-point',
+  label: '.',
+  write: '.',
+  category: 'digit',
+};
+
+export default times(10, String)
+  .map((n) => {
+    return {
+      name: digitMap[n],
+      write: n,
+      label: n,
+      category: 'digit',
+    };
+  })
+  .reduce(
+    (acc, o) => {
+      acc[o.name] = o;
+      return acc;
+    },
+    { comma, decimalPoint },
+  );

package/src/keys/edit.js

@@ -0,0 +1,3 @@
+import { DELETE } from './chars';
+
+export const del = { label: DELETE, category: 'edit', keystroke: 'Backspace', ariaLabel: 'Delete' };

package/src/keys/exponent.js

@@ -0,0 +1,28 @@
+import { mkSet } from './utils';
+
+const set = mkSet('exponent');
+
+export const squared = set({
+  name: 'Squared',
+  latex: 'x^2',
+  write: '^2',
+});
+
+export const xToPowerOfN = set({
+  name: 'X to the power of n',
+  latex: 'x^{}',
+  command: '^',
+  ariaLabel: 'exponent',
+});
+
+export const squareRoot = set({
+  name: 'Square root',
+  latex: '\\sqrt{}',
+  command: '\\sqrt',
+});
+
+export const nthRoot = set({
+  name: 'Nth root',
+  latex: '\\sqrt[{}]{}',
+  command: '\\nthroot',
+});

package/src/keys/fractions.js

@@ -0,0 +1,26 @@
+import { mkSet } from './utils';
+
+const set = mkSet('fractions');
+
+export const blankOverBlank = set({
+  name: 'blank/blank',
+  latex: '\\frac{}{}',
+  command: '\\frac',
+  ariaLabel: 'fraction',
+});
+
+export const xOverBlank = set({
+  latex: '\\frac{x}{ }',
+  name: 'X/blank',
+  label: 'x/[]',
+  command: '/',
+  ariaLabel: 'x over blank fraction',
+});
+
+export const xBlankBlank = set({
+  name: 'X (blank/blank)',
+  latex: 'x\\frac{}{}',
+  label: 'x([]/[])',
+  command: '\\frac',
+  ariaLabel: 'mixed number',
+});

package/src/keys/geometry.js

@@ -0,0 +1,144 @@
+const set = (o) => ({ ...o, category: 'geometry' });
+
+export const overline = set({
+  name: 'Line',
+  latex: '\\overline{}',
+  command: '\\overline',
+});
+
+export const overRightArrow = set({
+  name: 'Ray',
+  latex: '\\overrightarrow{}',
+  command: '\\overrightarrow',
+});
+
+export const overLeftRightArrow = set({
+  name: 'Segment',
+  latex: '\\overleftrightarrow{\\overline{}}', // used this notation to display the pink box
+  symbol: 'AB',
+  command: '\\overleftrightarrow',
+});
+
+export const segment = set({
+  name: 'Segment',
+  latex: '\\overleftrightarrow{AB}',
+  write: '\\overleftrightarrow{AB}',
+  label: 'AB',
+});
+
+export const parallel = set({
+  name: 'Parallel',
+  latex: '\\parallel',
+  command: '\\parallel',
+});
+
+export const notParallel = set({
+  name: 'Not Parallel',
+  latex: '\\nparallel',
+  command: '\\nparallel',
+});
+
+export const perpindicular = set({
+  name: 'Perpendicular',
+  latex: '\\perp',
+  command: '\\perpendicular',
+});
+
+export const angle = set({
+  name: 'Angle',
+  latex: '\\angle',
+  command: '\\angle',
+});
+export const overArc = set({
+  name: 'Over arc',
+  latex: '\\overarc{\\overline{}}', // used this notation to display the pink box
+  command: '\\overarc',
+});
+export const measureOfAngle = set({
+  name: 'Measured Angle',
+  latex: '\\measuredangle',
+  command: ['m', '\\angle'],
+});
+
+export const triangle = set({
+  name: 'Triangle',
+  latex: '\\triangle',
+  command: '\\triangle',
+});
+
+export const square = set({
+  name: 'Square',
+  latex: '\\square',
+  command: '\\square',
+});
+
+export const parallelogram = set({
+  name: 'Parallelogram',
+  latex: '\\parallelogram',
+  command: '\\parallelogram',
+});
+
+export const circledDot = set({
+  name: 'Circled Dot',
+  latex: '\\odot',
+  command: '\\odot',
+});
+
+export const degree = set({
+  name: 'Degree',
+  latex: '\\degree',
+  command: '\\degree',
+});
+
+export const similarTo = set({
+  name: 'Similar',
+  command: '\\sim',
+  latex: '\\sim',
+});
+
+export const congruentTo = set({
+  name: 'Congruent To',
+  command: '\\cong',
+  latex: '\\cong',
+});
+
+export const notCongruentTo = set({
+  name: 'Not Congruent To',
+  command: '\\ncong',
+  latex: '\\ncong',
+});
+
+export const primeArcminute = set({
+  name: 'Prime',
+  label: 'pam',
+  // eslint-disable-next-line
+  latex: "'",
+  // eslint-disable-next-line
+  write: "'",
+});
+
+export const doublePrimeArcSecond = set({
+  name: 'Double Prime',
+  // eslint-disable-next-line
+  latex: "''",
+  // eslint-disable-next-line
+  write: "''",
+});
+
+export const leftArrow = set({
+  name: 'Left Arrow',
+  latex: '\\leftarrow',
+  command: '\\leftarrow',
+});
+
+export const rightArrow = set({
+  name: 'Right Arrow',
+  latex: '\\rightarrow',
+  command: '\\rightarrow',
+});
+
+export const leftrightArrow = set({
+  name: 'Left and Right Arrow',
+  latex: '\\leftrightarrow',
+  command: '\\leftrightarrow',
+});