@pie-lib/math-toolbar 2.0.0-beta.3 → 2.0.0-next.0

package/src/index.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import EditorAndPad from './editor-and-pad';
 import { DoneButton } from './done-button';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import MathPreview from './math-preview';
 
 export { MathPreview };
 
+const PureToolbarContainer = styled('div')({
+  display: 'flex',
+  width: '100%',
+  zIndex: 8,
+  alignItems: 'center',
+});
+
 export class MathToolbar extends React.Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
@@ -28,6 +34,8 @@ export class MathToolbar extends React.Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     hideDoneButton: PropTypes.bool,
+    keyPadCharacterRef: PropTypes.func,
+    setKeypadInteraction: PropTypes.func,
   };
 
   static defaultProps = {
@@ -83,6 +91,8 @@ export class MathToolbar extends React.Component {
       onBlur,
       hideDoneButton,
       error,
+      keyPadCharacterRef,
+      setKeypadInteraction,
       maxResponseAreas,
     } = this.props;
 
@@ -96,6 +106,8 @@ export class MathToolbar extends React.Component {
         additionalKeys={additionalKeys}
         noDecimal={noDecimal}
         keypadMode={keypadMode}
+        keyPadCharacterRef={keyPadCharacterRef}
+        setKeypadInteraction={setKeypadInteraction}
         onChange={this.onChange}
         onDone={this.done}
         onFocus={onFocus}
@@ -114,7 +126,7 @@ export class MathToolbar extends React.Component {
 export class RawPureToolbar extends React.Component {
   static propTypes = {
     classNames: PropTypes.object,
-    latex: PropTypes.string,
+    latex: PropTypes.string.isRequired,
     keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     hideInput: PropTypes.bool,
     noLatexHandling: PropTypes.bool,
@@ -125,7 +137,6 @@ export class RawPureToolbar extends React.Component {
     onAnswerBlockAdd: PropTypes.func,
     additionalKeys: PropTypes.array,
     onFocus: PropTypes.func,
-    classes: PropTypes.object.isRequired,
     autoFocus: PropTypes.bool,
     noDecimal: PropTypes.bool,
     allowAnswerBlock: PropTypes.bool,
@@ -136,6 +147,8 @@ export class RawPureToolbar extends React.Component {
     hideDoneButtonBackground: PropTypes.bool,
     error: PropTypes.any,
     maxResponseAreas: PropTypes.number,
+    keyPadCharacterRef: PropTypes.object,
+    setKeypadInteraction: PropTypes.func,
   };
 
   static defaultProps = {
@@ -158,6 +171,8 @@ export class RawPureToolbar extends React.Component {
       hideInput,
       noLatexHandling,
       layoutForKeyPad,
+      keyPadCharacterRef,
+      setKeypadInteraction,
       latex,
       onChange,
       onDone,
@@ -165,13 +180,12 @@ export class RawPureToolbar extends React.Component {
       onBlur,
       hideDoneButton,
       hideDoneButtonBackground,
-      classes,
       error,
       maxResponseAreas,
     } = this.props;
 
     return (
-      <div className={cx(classes.pureToolbar, (classNames || {}).toolbar)} contentEditable={false}>
+      <PureToolbarContainer className={(classNames && classNames.toolbar) || ''} ref={keyPadCharacterRef}>
         <div />
         <EditorAndPad
           autoFocus={autoFocus}
@@ -193,21 +207,14 @@ export class RawPureToolbar extends React.Component {
           onBlur={onBlur}
           error={error}
           maxResponseAreas={maxResponseAreas}
+          setKeypadInteraction={setKeypadInteraction}
         />
         {(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
           <DoneButton hideBackground={hideDoneButtonBackground} onClick={onDone} />
         )}
-      </div>
+      </PureToolbarContainer>
     );
   }
 }
-const styles = () => ({
-  pureToolbar: {
-    display: 'flex',
-    width: '100%',
-    zIndex: 8,
-    alignItems: 'center',
-  },
-});
 
-export const PureToolbar = withStyles(styles)(RawPureToolbar);
+export const PureToolbar = RawPureToolbar;

package/src/math-preview.jsx

@@ -1,205 +1,164 @@
 import React from 'react';
-import classNames from 'classnames';
-import get from 'lodash/get';
 import debug from 'debug';
-import { makeStyles } from '@material-ui/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { mq } from '@pie-lib/math-input';
+import { markFractionBaseSuperscripts } from './utils';
+
+const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
 
 const log = debug('@pie-lib:math-toolbar:math-preview');
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    position: 'relative',
+const MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  position: 'relative',
+  '& *': commonMqFontStyles,
+  ...supsubStyles,
+  ...longdivStyles,
+  '& > .mq-math-mode': {
+    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
+  },
+  '& > .mq-focused': {
+    outline: 'none',
+    boxShadow: 'none',
+    border: 'solid 1px black',
+    borderRadius: '0px',
+  },
+  '& > .mq-math-mode .mq-root-block': {
+    paddingTop: '7px !important',
+  },
+  '& > .mq-math-mode .mq-overarc ': {
+    paddingTop: '0.45em !important',
+  },
+  '& > .mq-math-mode .mq-sqrt-prefix': {
+    verticalAlign: 'baseline !important',
+    top: '1px !important',
+    left: '-0.1em !important',
+  },
+  '& > .mq-math-mode .mq-denominator': {
+    marginTop: '-5px !important',
+    padding: '0.5em 0.1em 0.1em !important',
+  },
+  '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
+    padding: '0 0.1em !important',
+    paddingBottom: '0 !important',
+    marginBottom: '-2px',
+  },
+  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
+    paddingTop: '6px !important',
+    paddingLeft: '4px !important',
+  },
+  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
+    marginLeft: '0 !important',
+  },
+  '& > .mq-math-mode .mq-overarrow': {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  },
+  '& > .mq-math-mode .mq-paren': {
+    verticalAlign: 'top !important',
+    padding: '1px 0.1em !important',
+  },
+  '& > .mq-math-mode .mq-sqrt-stem': {
+    borderTop: '0.07em solid',
+    marginLeft: '-1.5px',
+    marginTop: '-2px !important',
+    paddingTop: '5px !important',
+  },
+  '& .mq-overarrow-inner': {
+    paddingTop: '0 !important',
+    border: 'none !important',
+  },
+  '& .mq-editable-field .mq-cursor': {
+    marginTop: '-15px !important',
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    top: '7.5px',
+    marginTop: '0px',
+    minWidth: '1.23em',
     '& *': {
-      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',
-    },
-    '& > .mq-math-mode': {
-      border: 'solid 1px lightgrey',
-    },
-    '& > .mq-focused': {
-      outline: 'none',
-      boxShadow: 'none',
-      border: 'solid 1px black',
-      borderRadius: '0px',
-    },
-    '& > .mq-math-mode .mq-root-block': {
-      paddingTop: '7px !important',
-    },
-    '& > .mq-math-mode .mq-overarc ': {
-      paddingTop: '0.45em !important',
-    },
-    '& > .mq-math-mode .mq-sqrt-prefix': {
-      verticalAlign: 'baseline !important',
-      top: '1px !important',
-      left: '-0.1em !important',
-    },
-    '& > .mq-math-mode .mq-denominator': {
-      marginTop: '-5px !important',
-      padding: '0.5em 0.1em 0.1em !important',
-    },
-    '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
-      padding: '0 0.1em !important',
-      paddingBottom: '0 !important',
-      marginBottom: '-2px',
-    },
-    '& > .mq-math-mode sup.mq-nthroot': {
-      fontSize: '70.7% !important',
-      verticalAlign: '0.5em !important',
-      paddingRight: '0.15em',
+      lineHeight: '1 !important',
     },
-    '& > .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',
-    },
-    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
-      paddingTop: '6px !important',
-      paddingLeft: '4px !important',
-    },
-    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
-      marginLeft: '0 !important',
-    },
-    '& > .mq-math-mode .mq-supsub': {
-      fontSize: '70.7% !important',
-    },
-    '& > .mq-math-mode .mq-overarrow': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-    '& > .mq-math-mode .mq-paren': {
-      verticalAlign: 'top !important',
-      padding: '1px 0.1em !important',
-    },
-
-    '& > .mq-math-mode .mq-sqrt-stem': {
-      borderTop: '0.07em solid',
-      marginLeft: '-1.5px',
-      marginTop: '-2px !important',
-      paddingTop: '5px !important',
-    },
-    '& > .mq-supsub ': {
-      fontSize: '70.7%',
-    },
-
-    '& > .mq-math-mode .mq-supsub.mq-sup-only': {
-      verticalAlign: '-0.1em !important',
-
-      '& .mq-sup': {
-        marginBottom: '0px !important',
-      },
-    },
-    '& .mq-overarrow-inner': {
-      paddingTop: '0 !important',
-      border: 'none !important',
+    '&:before': {
+      top: '-0.4em',
+      left: '-1px',
     },
-    '& .mq-editable-field .mq-cursor': {
-      marginTop: '-15px !important',
+    '&:after': {
+      top: '0px !important',
+      position: 'absolute !important',
+      right: '-2px',
     },
-    '& .mq-overarrow.mq-arrow-both': {
-      top: '7.5px',
-      marginTop: '0px',
-      minWidth: '1.23em',
-      '& *': {
-        lineHeight: '1 !important',
-      },
-      '&:before': {
-        top: '-0.4em',
-        left: '-1px',
-      },
-      '&:after': {
-        top: '0px !important',
-        position: 'absolute',
-        right: '-2px',
-      },
-      '&.mq-empty:after': {
-        top: '-0.45em',
-      },
-    },
-    '& .mq-overarrow.mq-arrow-right': {
-      '&:before': {
-        top: '-0.4em',
-        right: '-1px',
-      },
-    },
-    '& .mq-overarrow-inner-right': {
-      display: 'none !important',
-    },
-    '& .mq-overarrow-inner-left': {
-      display: 'none !important',
-    },
-    '& .mq-longdiv-inner': {
-      borderTop: '1px solid !important',
-      paddingTop: '1.5px !important',
-    },
-    '& .mq-parallelogram': {
-      lineHeight: 0.85,
+    '&.mq-empty:after': {
+      top: '-0.45em',
     },
   },
-  selected: {
-    border: `solid 1px ${get(theme, 'palette.primary.main')}`,
-    '& > .mq-math-mode': {
-      border: 'solid 0px lightgrey',
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px',
     },
   },
-  insideOverlay: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
+  '& .mq-overarrow-inner-right': {
+    display: 'none !important',
+  },
+  '& .mq-overarrow-inner-left': {
+    display: 'none !important',
+  },
+  '& .mq-longdiv-inner': {
+    borderTop: '1px solid !important',
+    paddingTop: '1.5px !important',
   },
+  '& .mq-parallelogram': {
+    lineHeight: 0.85,
+  },
+  '& span[data-prime="true"]': {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  },
+  ...(isSelected && {
+    border: `solid 1px ${theme.palette.primary.main}`,
+  }),
 }));
 
-export const RawMathPreview = React.forwardRef((props, ref) => {
-  log('[render] data: ', props.element.data);
-  const latex = props.element.data.latex;
-  const { isSelected, onFocus, onBlur, attributes, children } = props;
-  const classes = useStyles(props);
-
-  return (
-    <div
-      className={classNames(classes.root, isSelected && classes.selected)}
-      {...attributes}
-      contentEditable={false}
-      ref={ref}
-    >
-      {children} <span className={classes.insideOverlay} />
-      <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
-    </div>
-  );
+const InsideOverlay = styled('span')({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
 });
 
-RawMathPreview.propTypes = {
-  element: PropTypes.object,
-  latex: PropTypes.string,
-  node: PropTypes.object,
-  classes: PropTypes.object,
-  isSelected: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-};
+export class RawMathPreview extends React.Component {
+  static propTypes = {
+    latex: PropTypes.string,
+    node: PropTypes.object,
+    isSelected: PropTypes.bool,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+  };
+
+  componentDidMount() {
+    markFractionBaseSuperscripts();
+  }
+
+  componentDidUpdate(prevProps) {
+    // Re-run only if LaTeX changed
+    if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {
+      markFractionBaseSuperscripts();
+    }
+  }
+
+  render() {
+    log('[render] data: ', this.props.node.data);
+    const latex = this.props.node.data.get('latex');
+    const { isSelected, onFocus, onBlur } = this.props;
+    return (
+      <MathPreviewContainer isSelected={isSelected}>
+        {' '}
+        <InsideOverlay />
+        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
+      </MathPreviewContainer>
+    );
+  }
+}
 
 export default RawMathPreview;

package/src/utils.js

@@ -0,0 +1,11 @@
+export const markFractionBaseSuperscripts = () => {
+  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach((supsub) => {
+    const prev = supsub.previousElementSibling;
+
+    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {
+      supsub.classList.add('mq-after-fraction-group');
+    } else {
+      supsub.classList.remove('mq-after-fraction-group');
+    }
+  });
+};