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

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;

package/dist/editor-and-pad.js

@@ -1,352 +0,0 @@
-import { markFractionBaseSuperscripts as e } from "./utils.js";
-import t from "react";
-import n from "prop-types";
-import r from "debug";
-import i from "@mui/material/Button";
-import { styled as a } from "@mui/material/styles";
-import o from "@mui/material/MenuItem";
-import s from "@mui/material/Select";
-import { isEqual as c } from "@pie-element/shared-lodash";
-import l from "@mui/material/FormControl";
-import u from "@mui/material/InputLabel";
-import { HorizontalKeypad as d, mq as f, updateSpans as p } from "@pie-lib/math-input";
-import { color as m } from "@pie-lib/render-ui";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region src/editor-and-pad.tsx
-var { commonMqFontStyles: _, commonMqKeyboardStyles: v, longdivStyles: y, supsubStyles: b } = f.CommonMqStyles, x = r("@pie-lib:math-toolbar:editor-and-pad"), S = /\.|,/g, C = a("div")(({ theme: e }) => ({
-	zIndex: 9,
-	position: "relative",
-	textAlign: "center",
-	width: "auto",
-	"& > .mq-math-mode": { border: "solid 1px lightgrey" },
-	"& > .mq-focused": {
-		outline: "none",
-		boxShadow: "none",
-		border: `dotted 1px ${e.palette.primary.main}`,
-		borderRadius: "0px"
-	},
-	"& .mq-overarrow-inner": {
-		border: "none !important",
-		paddingTop: "0 !important"
-	},
-	"& .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-overarrow.mq-arrow-both": {
-		top: "7.8px",
-		marginTop: "0px",
-		minWidth: "1.23em"
-	},
-	"& .mq-parallelogram": { lineHeight: .85 }
-})), w = a("div")(({ theme: e, hide: t }) => ({
-	display: t ? "none" : "flex",
-	alignItems: "center",
-	"& .mq-editable-field .mq-cursor": { top: "-4px" },
-	"& .mq-math-mode .mq-selection, .mq-editable-field .mq-selection": { paddingTop: "18px" },
-	"& .mq-math-mode .mq-overarrow": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" },
-	"& .mq-math-mode .mq-overline .mq-overline-inner": { paddingTop: "0.4em !important" },
-	"& .mq-overarrow.mq-arrow-both": {
-		minWidth: "1.23em",
-		"& *": { lineHeight: "1 !important" },
-		"&:before": {
-			top: "-0.45em",
-			left: "-1px"
-		},
-		"&:after": {
-			position: "absolute !important",
-			top: "0px !important",
-			right: "-2px"
-		},
-		"&.mq-empty:after": { top: "-0.45em" }
-	},
-	"& .mq-overarrow.mq-arrow-right": { "&:before": {
-		top: "-0.4em",
-		right: "-1px"
-	} },
-	"& *": {
-		..._,
-		...b,
-		...y,
-		"& .mq-math-mode .mq-sqrt-prefix": {
-			verticalAlign: "baseline !important",
-			top: "1px !important",
-			left: "-0.1em !important"
-		},
-		"& .mq-math-mode .mq-overarc ": { paddingTop: "0.45em !important" },
-		"& .mq-math-mode .mq-empty": { padding: "9px 1px !important" },
-		"& .mq-math-mode .mq-root-block": { paddingTop: "10px" },
-		"& .mq-scaled .mq-sqrt-prefix": { top: "0 !important" },
-		"& .mq-math-mode .mq-longdiv .mq-longdiv-inner": {
-			marginLeft: "4px !important",
-			paddingTop: "6px !important",
-			paddingLeft: "6px !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-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"
-		}
-	},
-	"& span[data-prime=\"true\"]": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" }
-})), T = a(l)({
-	flex: "initial",
-	width: "25%",
-	minWidth: "100px",
-	marginLeft: "15px",
-	marginTop: "5px",
-	marginBottom: "5px",
-	marginRight: "5px",
-	"& label": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" },
-	"& div": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" }
-}), E = a(u)(() => ({ backgroundColor: "transparent" })), D = a("div")(({ theme: e, error: t }) => ({
-	minWidth: "500px",
-	maxWidth: "900px",
-	minHeight: "30px",
-	width: "100%",
-	display: "flex",
-	marginTop: e.spacing(1),
-	marginBottom: e.spacing(1),
-	...t && { border: "2px solid red" },
-	"& .mq-sqrt-prefix .mq-scaled": { verticalAlign: "middle !important" }
-})), O = a(f.Input)(({ controlledKeypadMode: e }) => ({
-	maxWidth: e ? "400px" : "500px",
-	color: m.text(),
-	backgroundColor: m.background(),
-	padding: "2px"
-})), k = a(i)({
-	position: "absolute",
-	right: "12px",
-	border: "1px solid lightgrey",
-	color: m.text()
-}), A = a("hr")(({ theme: e }) => ({
-	padding: 0,
-	margin: 0,
-	height: "1px",
-	border: "none",
-	borderBottom: `solid 1px ${e.palette.primary.main}`
-})), j = a(d)(({ mode: e }) => ({
-	...v,
-	...e === "language" && { "& *": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" } }
-})), M = (e) => {
-	if (!e) return;
-	let { type: t, value: n } = e;
-	return t === "command" || t === "cursor" ? e : t === "answer" ? {
-		type: "answer",
-		...e
-	} : n === "clear" ? { type: "clear" } : {
-		type: "write",
-		value: n
-	};
-}, N = class extends t.Component {
-	static propTypes = {
-		classNames: n.object,
-		keypadMode: n.oneOfType([n.string, n.number]),
-		autoFocus: n.bool,
-		allowAnswerBlock: n.bool,
-		showKeypad: n.bool,
-		controlledKeypad: n.bool,
-		controlledKeypadMode: n.bool,
-		error: n.string,
-		noDecimal: n.bool,
-		hideInput: n.bool,
-		noLatexHandling: n.bool,
-		layoutForKeyPad: n.object,
-		maxResponseAreas: n.number,
-		additionalKeys: n.array,
-		latex: n.string.isRequired,
-		onAnswerBlockAdd: n.func,
-		onFocus: n.func,
-		onBlur: n.func,
-		onChange: n.func.isRequired,
-		setKeypadInteraction: n.func
-	};
-	constructor(e) {
-		super(e), this.state = {
-			equationEditor: "item-authoring",
-			addDisabled: !1
-		};
-	}
-	componentDidMount() {
-		this.input && this.props.autoFocus && this.input.focus();
-	}
-	onClick = (e) => {
-		let { noDecimal: t, noLatexHandling: n, onChange: r } = this.props, i = M(e);
-		if (x("mathChange: ", i), n) {
-			r(i.value);
-			return;
-		}
-		t && (i.value === "." || i.value === ",") || i && (i.type === "clear" ? (x("call clear..."), this.input.clear()) : i.type === "command" ? this.input.command(i.value) : i.type === "cursor" ? this.input.keystroke(i.value) : i.type === "answer" ? this.input.write("%response%") : this.input.write(i.value));
-	};
-	updateDisable = (e) => {
-		let { maxResponseAreas: t } = this.props;
-		if (t) {
-			let n = this.checkResponseAreasNumber(t, e);
-			this.setState({ addDisabled: n });
-		}
-	};
-	onAnswerBlockClick = () => {
-		this.props.onAnswerBlockAdd(), this.onClick({ type: "answer" }), this.updateDisable(!0);
-	};
-	onEditorChange = (t) => {
-		let { onChange: n, noDecimal: r } = this.props;
-		if (p(), e(), this.updateDisable(!0), r && (t.indexOf(".") !== -1 || t.indexOf(",") !== -1) && this.input) {
-			this.input.clear(), this.input.write(t.replace(S, ""));
-			return;
-		}
-		let i = t.match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
-		if (this.input && i && i?.length) {
-			try {
-				this.input.mathField.__controller.cursor.insLeftOf(this.input.mathField.__controller.cursor.parent[-1].parent), this.input.mathField.el().dispatchEvent(new KeyboardEvent("keydown", { keyCode: 8 }));
-			} catch (e) {
-				console.error(e.toString());
-			}
-			return;
-		}
-		n(t);
-	};
-	shouldComponentUpdate(e, t) {
-		let n = this.input.mathField.latex() !== e.latex;
-		return x("[shouldComponentUpdate] ", "inputIsDifferent: ", n), !c(this.props.error, e.error) || !n && this.props.keypadMode !== e.keypadMode || !n && this.props.noDecimal !== e.noDecimal || !n && this.state.equationEditor !== t.equationEditor ? !0 : !n && this.props.controlledKeypad ? this.props.showKeypad !== e.showKeypad : n;
-	}
-	onEditorTypeChange = (e) => {
-		this.setState({ equationEditor: e.target.value });
-	};
-	checkResponseAreasNumber = (e, t) => {
-		let { latex: n } = this.input && this.input.props || {};
-		if (n) {
-			let r = (n.match(/answerBlock/g) || []).length;
-			return t ? r === e - 1 : r === e;
-		}
-		return !1;
-	};
-	render() {
-		let { classNames: e, keypadMode: t, allowAnswerBlock: n, additionalKeys: r, controlledKeypad: i, controlledKeypadMode: a, showKeypad: c, setKeypadInteraction: l, noDecimal: u, hideInput: d, layoutForKeyPad: f, latex: p, onFocus: m, onBlur: _, error: v } = this.props, y = !i || i && c, { addDisabled: b } = this.state;
-		return x("[render]", p), /* @__PURE__ */ g(C, {
-			className: e.mathToolbar,
-			children: [
-				/* @__PURE__ */ g(w, {
-					hide: d,
-					children: [a && /* @__PURE__ */ g(T, {
-						variant: "standard",
-						children: [/* @__PURE__ */ h(E, {
-							id: "equation-editor-label",
-							children: "Equation Editor"
-						}), /* @__PURE__ */ g(s, {
-							labelId: "equation-editor-label",
-							id: "equation-editor-select",
-							name: "equationEditor",
-							label: "Equation Editor",
-							onChange: this.onEditorTypeChange,
-							value: this.state.equationEditor,
-							MenuProps: { transitionDuration: {
-								enter: 225,
-								exit: 195
-							} },
-							children: [
-								/* @__PURE__ */ h(o, {
-									value: "non-negative-integers",
-									children: "Numeric - Non-Negative Integers"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "integers",
-									children: "Numeric - Integers"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "decimals",
-									children: "Numeric - Decimals"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "fractions",
-									children: "Numeric - Fractions"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: 1,
-									children: "Grade 1 - 2"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: 3,
-									children: "Grade 3 - 5"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: 6,
-									children: "Grade 6 - 7"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: 8,
-									children: "Grade 8 - HS"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "geometry",
-									children: "Geometry"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "advanced-algebra",
-									children: "Advanced Algebra"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "statistics",
-									children: "Statistics"
-								}),
-								/* @__PURE__ */ h(o, {
-									value: "item-authoring",
-									children: "Item Authoring"
-								})
-							]
-						})]
-					}), /* @__PURE__ */ h(D, {
-						error: v,
-						children: /* @__PURE__ */ h(O, {
-							onFocus: () => {
-								m && m(), this.updateDisable(!1);
-							},
-							onBlur: (e) => {
-								this.updateDisable(!1), _ && _(e);
-							},
-							className: e && e.editor || "",
-							controlledKeypadMode: a,
-							ref: (e) => this.input = e,
-							latex: p,
-							onChange: this.onEditorChange
-						})
-					})]
-				}),
-				n && /* @__PURE__ */ h(k, {
-					type: "primary",
-					style: { bottom: y ? "320px" : "20px" },
-					onClick: this.onAnswerBlockClick,
-					disabled: b,
-					children: "+ Response Area"
-				}),
-				/* @__PURE__ */ h(A, {}),
-				y && /* @__PURE__ */ h(j, {
-					mode: a ? this.state.equationEditor : t,
-					controlledKeypadMode: a,
-					layoutForKeyPad: f,
-					additionalKeys: r,
-					onClick: this.onClick,
-					noDecimal: u,
-					setKeypadInteraction: l
-				})
-			]
-		});
-	}
-};
-//#endregion
-export { N as default };