@pie-element/hotspot 9.0.2-esm.0 → 11.0.5-esm.0

package/configure/node_modules/@pie-lib/math-toolbar/src/index.jsx

@@ -0,0 +1,224 @@
+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 MathPreview from './math-preview';
+
+export { MathPreview };
+
+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,
+    classes: PropTypes.object.isRequired,
+    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,
+      classes,
+      error,
+      maxResponseAreas,
+    } = this.props;
+
+    return (
+      <div className={cx(classes.pureToolbar, (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} />
+        )}
+      </div>
+    );
+  }
+}
+const styles = () => ({
+  pureToolbar: {
+    display: 'flex',
+    width: '100%',
+    zIndex: 8,
+    alignItems: 'center',
+  },
+});
+
+export const PureToolbar = withStyles(styles)(RawPureToolbar);

package/configure/node_modules/@pie-lib/math-toolbar/src/math-preview.jsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import classNames from 'classnames';
+import debug from 'debug';
+import { withStyles } from '@material-ui/core/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');
+
+export class RawMathPreview extends React.Component {
+  static propTypes = {
+    latex: PropTypes.string,
+    node: PropTypes.object,
+    classes: 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 { classes, isSelected, onFocus, onBlur } = this.props;
+    return (
+      <div className={classNames(classes.root, isSelected && classes.selected)}>
+        {' '}
+        <span className={classes.insideOverlay} />
+        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
+      </div>
+    );
+  }
+}
+
+const mp = (theme) => ({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    position: 'relative',
+    '& *': commonMqFontStyles,
+    ...supsubStyles,
+    ...longdivStyles,
+    '& > .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 .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',
+      },
+      // NOTE: This workaround adds `!important` to enforce the correct positioning and styling
+      // of `.mq-overarrow.mq-arrow-both` elements in MathQuill. This ensures consistent display
+      // regardless of the order in which MathQuill is initialized on our websites.
+      //
+      // In the future, investigate why MathQuill scripts and styles are being initialized
+      // more than once and address the root cause to prevent potential conflicts and ensure
+      // optimal performance.
+      '&: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',
+    },
+  },
+  selected: {
+    border: `solid 1px ${theme.palette.primary.main}`,
+    '& > .mq-math-mode': {
+      border: 'solid 0px lightgrey',
+    },
+  },
+  insideOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  },
+});
+
+export default withStyles(mp)(RawMathPreview);

package/configure/node_modules/@pie-lib/math-toolbar/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');
+    }
+  });
+};

package/configure/node_modules/@pie-lib/render-ui/CHANGELOG.json

@@ -0,0 +1 @@
+[]