@pie-lib/math-toolbar 3.1.0-beta.9 → 4.0.0-next.42

package/src/index.jsx

@@ -1,220 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import EditorAndPad from './editor-and-pad';
-import { DoneButton } from './done-button';
-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,
-    allowAnswerBlock: PropTypes.bool,
-    controlledKeypad: PropTypes.bool,
-    controlledKeypadMode: PropTypes.bool,
-    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    classNames: PropTypes.object,
-    error: PropTypes.string,
-    maxResponseAreas: PropTypes.number,
-    showKeypad: PropTypes.bool,
-    noDecimal: PropTypes.bool,
-    additionalKeys: PropTypes.array,
-    latex: PropTypes.string.isRequired,
-    onAnswerBlockAdd: PropTypes.func,
-    onChange: PropTypes.func,
-    onDone: PropTypes.func.isRequired,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    hideDoneButton: PropTypes.bool,
-    keyPadCharacterRef: PropTypes.func,
-    setKeypadInteraction: PropTypes.func,
-  };
-
-  static defaultProps = {
-    classNames: {},
-    keypadMode: 'item-authoring',
-    autoFocus: false,
-    allowAnswerBlock: false,
-    controlledKeypad: false,
-    controlledKeypadMode: false,
-    noDecimal: false,
-    showKeypad: true,
-    additionalKeys: [],
-    onChange: () => {},
-    onAnswerBlockAdd: () => {},
-    onFocus: () => {},
-    hideDoneButton: false,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      latex: props.latex,
-    };
-  }
-
-  done = () => {
-    this.props.onDone(this.state.latex);
-  };
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ latex: nextProps.latex });
-  }
-
-  onChange = (latex) => {
-    this.setState({ latex });
-    this.props.onChange(latex);
-  };
-
-  render() {
-    const { latex } = this.state;
-    const {
-      classNames,
-      autoFocus,
-      allowAnswerBlock,
-      onAnswerBlockAdd,
-      controlledKeypad,
-      controlledKeypadMode,
-      keypadMode,
-      noDecimal,
-      additionalKeys,
-      showKeypad,
-      onFocus,
-      onBlur,
-      hideDoneButton,
-      error,
-      keyPadCharacterRef,
-      setKeypadInteraction,
-      maxResponseAreas,
-    } = this.props;
-
-    return (
-      <PureToolbar
-        autoFocus={autoFocus}
-        classNames={classNames}
-        onAnswerBlockAdd={onAnswerBlockAdd}
-        allowAnswerBlock={allowAnswerBlock}
-        latex={latex}
-        additionalKeys={additionalKeys}
-        noDecimal={noDecimal}
-        keypadMode={keypadMode}
-        keyPadCharacterRef={keyPadCharacterRef}
-        setKeypadInteraction={setKeypadInteraction}
-        onChange={this.onChange}
-        onDone={this.done}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        showKeypad={showKeypad}
-        controlledKeypad={controlledKeypad}
-        controlledKeypadMode={controlledKeypadMode}
-        hideDoneButton={hideDoneButton}
-        error={error}
-        maxResponseAreas={maxResponseAreas}
-      />
-    );
-  }
-}
-
-export class RawPureToolbar extends React.Component {
-  static propTypes = {
-    classNames: PropTypes.object,
-    latex: PropTypes.string.isRequired,
-    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    hideInput: PropTypes.bool,
-    noLatexHandling: PropTypes.bool,
-    layoutForKeyPad: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDone: PropTypes.func.isRequired,
-    onBlur: PropTypes.func,
-    onAnswerBlockAdd: PropTypes.func,
-    additionalKeys: PropTypes.array,
-    onFocus: PropTypes.func,
-    autoFocus: PropTypes.bool,
-    noDecimal: PropTypes.bool,
-    allowAnswerBlock: PropTypes.bool,
-    controlledKeypad: PropTypes.bool,
-    controlledKeypadMode: PropTypes.bool,
-    showKeypad: PropTypes.bool,
-    hideDoneButton: PropTypes.bool,
-    hideDoneButtonBackground: PropTypes.bool,
-    error: PropTypes.any,
-    maxResponseAreas: PropTypes.number,
-    keyPadCharacterRef: PropTypes.object,
-    setKeypadInteraction: PropTypes.func,
-  };
-
-  static defaultProps = {
-    classNames: {},
-    hideDoneButtonBackground: false,
-  };
-
-  render() {
-    const {
-      classNames,
-      autoFocus,
-      allowAnswerBlock,
-      onAnswerBlockAdd,
-      controlledKeypad,
-      controlledKeypadMode,
-      additionalKeys,
-      showKeypad,
-      keypadMode,
-      noDecimal,
-      hideInput,
-      noLatexHandling,
-      layoutForKeyPad,
-      keyPadCharacterRef,
-      setKeypadInteraction,
-      latex,
-      onChange,
-      onDone,
-      onFocus,
-      onBlur,
-      hideDoneButton,
-      hideDoneButtonBackground,
-      error,
-      maxResponseAreas,
-    } = this.props;
-
-    return (
-      <PureToolbarContainer className={(classNames && classNames.toolbar) || ''} ref={keyPadCharacterRef}>
-        <div />
-        <EditorAndPad
-          autoFocus={autoFocus}
-          keypadMode={keypadMode}
-          classNames={classNames || {}}
-          controlledKeypad={controlledKeypad}
-          controlledKeypadMode={controlledKeypadMode}
-          noDecimal={noDecimal}
-          hideInput={hideInput}
-          noLatexHandling={noLatexHandling}
-          layoutForKeyPad={layoutForKeyPad}
-          showKeypad={showKeypad}
-          additionalKeys={additionalKeys}
-          allowAnswerBlock={allowAnswerBlock}
-          onAnswerBlockAdd={onAnswerBlockAdd}
-          latex={latex}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          error={error}
-          maxResponseAreas={maxResponseAreas}
-          setKeypadInteraction={setKeypadInteraction}
-        />
-        {(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
-          <DoneButton hideBackground={hideDoneButtonBackground} onClick={onDone} />
-        )}
-      </PureToolbarContainer>
-    );
-  }
-}
-
-export const PureToolbar = RawPureToolbar;

package/src/math-preview.jsx

@@ -1,174 +0,0 @@
-import React from 'react';
-import debug from 'debug';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import { mq } from '@pie-lib/math-input-mathlive';
-import { markFractionBaseSuperscripts } from './utils';
-
-const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
-
-const log = debug('@pie-lib:math-toolbar:math-preview');
-
-const MathPreviewContainer = styled('div')(({ theme, isSelected, outlineOnWrapper }) => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-  position: 'relative',
-  '& *': commonMqFontStyles,
-  ...supsubStyles,
-  ...longdivStyles,
-  '& > .mq-math-mode': {
-    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
-  },
-  '& .ML__latex': {
-    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
-    padding: isSelected ? '0px' : '5px',
-  },
-  ...(!outlineOnWrapper && {
-    '&:not(:has(.ML__latex))': {
-      border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
-      padding: isSelected ? '0px' : '5px',
-    },
-  }),
-  '& > .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',
-    '& *': {
-      lineHeight: '1 !important',
-    },
-    '&:before': {
-      top: '-0.4em',
-      left: '-1px',
-    },
-    '&:after': {
-      top: '0px !important',
-      position: 'absolute !important',
-      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,
-  },
-  '& span[data-prime="true"]': {
-    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-  },
-  ...(isSelected &&
-    !outlineOnWrapper && {
-      border: `solid 1px ${theme.palette.primary.main}`,
-    }),
-}));
-
-const InsideOverlay = styled('span')({
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-});
-
-export class RawMathPreview extends React.Component {
-  static propTypes = {
-    latex: PropTypes.string,
-    isSelected: PropTypes.bool,
-    outlineOnWrapper: PropTypes.bool,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-  };
-
-  componentDidMount() {
-    markFractionBaseSuperscripts();
-  }
-
-  componentDidUpdate(prevProps) {
-    // Re-run only if LaTeX changed
-    if (this.props.latex !== prevProps.latex) {
-      markFractionBaseSuperscripts();
-    }
-  }
-
-  render() {
-    const { isSelected, outlineOnWrapper, onFocus, onBlur, latex } = this.props;
-    log('[render] latex: ', latex);
-    return (
-      <MathPreviewContainer isSelected={isSelected} outlineOnWrapper={outlineOnWrapper}>
-        {' '}
-        <InsideOverlay />
-        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
-      </MathPreviewContainer>
-    );
-  }
-}
-
-export default RawMathPreview;

package/src/utils.js

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