@pie-lib/math-toolbar 3.0.3-next.38 → 3.0.3-next.57

package/src/index.jsx

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

@@ -0,0 +1,162 @@
+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';
+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 }) => ({
+  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',
+    '& *': {
+      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 && {
+    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,
+    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, onFocus, onBlur, latex } = this.props;
+    log('[render] latex: ', latex);
+    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');
+    }
+  });
+};

package/dist/done-button.d.ts

@@ -1,30 +0,0 @@
-/**
- * @synced-from pie-lib/packages/math-toolbar/src/done-button.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare const RawDoneButton: {
-    ({ onClick, hideBackground }: {
-        onClick: any;
-        hideBackground: any;
-    }): React.JSX.Element;
-    propTypes: {
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        hideBackground: PropTypes.Requireable<boolean>;
-    };
-};
-export declare const DoneButton: {
-    ({ onClick, hideBackground }: {
-        onClick: any;
-        hideBackground: any;
-    }): React.JSX.Element;
-    propTypes: {
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        hideBackground: PropTypes.Requireable<boolean>;
-    };
-};

package/dist/done-button.js

@@ -1,34 +0,0 @@
-import "react";
-import e from "prop-types";
-import { styled as t } from "@mui/material/styles";
-import { jsx as n } from "react/jsx-runtime";
-import r from "@mui/material/IconButton";
-import i from "@mui/icons-material/Check";
-//#region src/done-button.tsx
-var a = t(r)(({ theme: e, hideBackground: t }) => ({
-	verticalAlign: "top",
-	width: "28px",
-	height: "28px",
-	color: "#00bb00",
-	...t && {
-		backgroundColor: e.palette.common.white,
-		"&:hover": { backgroundColor: e.palette.grey[200] }
-	},
-	"& .MuiIconButton-label": {
-		position: "absolute",
-		top: "2px"
-	}
-})), o = ({ onClick: e, hideBackground: t }) => /* @__PURE__ */ n(a, {
-	"aria-label": "Done",
-	onClick: e,
-	hideBackground: t,
-	size: "large",
-	children: /* @__PURE__ */ n(i, {})
-});
-o.propTypes = {
-	onClick: e.func,
-	hideBackground: e.bool
-};
-var s = o;
-//#endregion
-export { s as DoneButton };

package/dist/editor-and-pad.d.ts

@@ -1,47 +0,0 @@
-/**
- * @synced-from pie-lib/packages/math-toolbar/src/editor-and-pad.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare class EditorAndPad extends React.Component {
-    static propTypes: {
-        classNames: PropTypes.Requireable<object>;
-        keypadMode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        autoFocus: PropTypes.Requireable<boolean>;
-        allowAnswerBlock: PropTypes.Requireable<boolean>;
-        showKeypad: PropTypes.Requireable<boolean>;
-        controlledKeypad: PropTypes.Requireable<boolean>;
-        controlledKeypadMode: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<string>;
-        noDecimal: PropTypes.Requireable<boolean>;
-        hideInput: PropTypes.Requireable<boolean>;
-        noLatexHandling: PropTypes.Requireable<boolean>;
-        layoutForKeyPad: PropTypes.Requireable<object>;
-        maxResponseAreas: PropTypes.Requireable<number>;
-        additionalKeys: PropTypes.Requireable<any[]>;
-        latex: PropTypes.Validator<string>;
-        onAnswerBlockAdd: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    constructor(props: any);
-    componentDidMount(): void;
-    onClick: any;
-    updateDisable: any;
-    onAnswerBlockClick: any;
-    onEditorChange: any;
-    /** Only render if the mathquill instance's latex is different
-     * or the keypad state changed from one state to the other (shown / hidden) */
-    shouldComponentUpdate(nextProps: any, nextState: any): boolean;
-    onEditorTypeChange: any;
-    checkResponseAreasNumber: any;
-    render(): React.JSX.Element;
-}
-export default EditorAndPad;