@pie-lib/math-input-mathlive 1.1.5-beta.8 → 2.0.1-next.20261107131445

package/src/keypad/index.jsx

@@ -1,386 +0,0 @@
-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, rootIndexStyles } 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.
- */
-// Labels that the legacy keypad drew slanted. MathQuill styled `\parallel` as
-// italic, which slants the two bars; MathLive draws it upright. A skew is used
-// rather than `font-style: italic` so the slant does not depend on the font
-// having an italic face for this glyph.
-const SLANTED_LABELS = ['\\parallel'];
-const SLANT = 'skewX(-15deg)';
-// MathLive's `∥` has hairline bars next to the radical sign and the other keys, so
-// they are thickened with a text stroke and stretched a little taller.
-const SLANTED_STROKE = '0.03em currentColor';
-const SLANTED_SCALE_Y = 1.25;
-
-// The `color.*()` helpers must be called lazily, inside the styled callback.
-// Evaluating them in a plain object literal runs them at module load, which
-// breaks any consumer that mocks a subset of @pie-lib/render-ui.
-const LabelHolder = styled('span', { shouldForwardProp: (prop) => prop !== 'slanted' })(({ slanted }) => ({
-  ...(slanted && {
-    transform: `${SLANT} scaleY(${SLANTED_SCALE_Y})`,
-    '& *': { WebkitTextStroke: SLANTED_STROKE },
-  }),
-  pointerEvents: 'none',
-  textTransform: 'none',
-  color: color.text(),
-  // Deliberately inline-block, NOT inline-flex: MathLive's markup relies on
-  // normal inline flow. Making its spans flex items collapses their width, and
-  // stretchy accents render an <svg width="100%" preserveAspectRatio="none">
-  // that then squeezes into a spike instead of spanning the content.
-  display: 'inline-block',
-  textAlign: 'center',
-  lineHeight: 1,
-  // Keep a label from sizing its grid column. `overflow: hidden` also collapses
-  // the label's min-content contribution, so a wide accent cannot drag the
-  // column across the screen. The svg's own positioning is left to
-  // mathlive-static.css (injected by the package) - duplicating it here broke
-  // the accent's containing block.
-  maxWidth: '100%',
-  overflow: 'hidden',
-  // Answer-block / empty-slot boxes inside a label.
-  '& .ML__placeholder': {
-    backgroundColor: color.keypadEmptyPlaceholder ? color.keypadEmptyPlaceholder() : undefined,
-  },
-  // The stand-in glyph for an empty argument slot (see EMPTY_SLOT). Muted so it
-  // reads as "a slot goes here" rather than as part of the symbol, matching how
-  // MathQuill shaded `.mq-empty`.
-  '& [data-pie-empty]': {
-    opacity: 0.5,
-  },
-  // A readable index on the nth-root key. Carried by the label itself, not only
-  // by the keypad container, so it holds wherever a LatexLabel is mounted.
-  ...rootIndexStyles,
-}));
-
-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) {
-      return;
-    }
-
-    await loadMathLive();
-
-    if (this.unmounted) {
-      return;
-    }
-
-    const markup = latexToMarkup(this.props.latex);
-
-    if (markup) {
-      this.setState({ markup });
-      return;
-    }
-
-    // Still nothing: the engine is genuinely unavailable (a missing chunk, a
-    // blocked request). Keep the raw-latex fallback visible rather than an
-    // empty button, and log once so this is diagnosable.
-    if (!LatexLabel.warned) {
-      LatexLabel.warned = true;
-      log('MathLive unavailable - keypad labels are falling back to raw 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 slanted={SLANTED_LABELS.includes(this.props.latex)} dangerouslySetInnerHTML={{ __html: markup }} />
-    ) : (
-      <LabelHolder slanted={SLANTED_LABELS.includes(this.props.latex)}>{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

@@ -1,16 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

package/src/keys/exponent.js

@@ -1,28 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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',
-});