@pie-element/math-inline 12.1.1-next.20 → 12.1.1-next.22

package/dist/author/general-config-block.js

@@ -1,12 +1,12 @@
 import e from "./response.js";
 import { ResponseTypes as t, generateValidationMessage as n, getPluginProps as r } from "./utils.js";
 import * as i from "react";
-import { isEqual as a } from "@pie-element/shared-lodash";
-import o from "prop-types";
-import { applyStaticMath as s, registerEmbed as c } from "@pie-lib/math-input";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { styled as d } from "@mui/material/styles";
-import f from "@mui/material/Tooltip";
+import a from "prop-types";
+import { applyStaticMath as o, registerEmbed as s } from "@pie-lib/math-input";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u } from "@mui/material/styles";
+import d from "@mui/material/Tooltip";
+import { isEqual as f } from "@pie-element/shared-lodash";
 import { MathToolbar as p } from "@pie-lib/math-toolbar";
 import { InputContainer as m } from "@pie-lib/config-ui";
 import h from "@pie-lib/editable-html-tip-tap";
@@ -15,20 +15,20 @@ import _ from "@mui/material/Select";
 import v from "@mui/material/MenuItem";
 import y from "@mui/icons-material/Info";
 //#region src/author/general-config-block.tsx
-var b = !1, x = d("div")({
+var b = !1, x = u("div")({
 	display: "flex",
 	flexDirection: "column"
-}), S = d(g)({ fontSize: "0.85rem" }), C = d("div")({ fontSize: "1.1rem" }), w = d("div")({
+}), S = u(g)({ fontSize: "0.85rem" }), C = u("div")({ fontSize: "1.1rem" }), w = u("div")({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between"
-}), T = d(m)(({ theme: e }) => ({
+}), T = u(m)(({ theme: e }) => ({
 	flex: "initial",
 	width: "40%",
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(2),
 	"& > *:not(label)": { marginTop: e.spacing(1) }
-})), ee = d("div")({
+})), ee = u("div")({
 	display: "flex",
 	flexDirection: "column",
 	".block-container": {
@@ -62,18 +62,18 @@ var b = !1, x = d("div")({
 		padding: "8px"
 	},
 	".math-toolbar": { maxWidth: "900px" }
-}), E = d(f)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+}), E = u(d)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre-wrap"
-} })), D = d("div")(({ theme: e }) => ({
+} })), D = u("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), O = d(m)(({ theme: e }) => ({
+})), O = u(m)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), k = d("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), A = /{{response}}/gm, j = /\\%response\\%/gm, M = /\\embed\{answerBlock\}\[r\d*\]/g, N = /\\embed\{newLine\}\[\]/g, P = /\\newline/g;
+})), k = u("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), A = /{{response}}/gm, j = /\\%response\\%/gm, M = /\\embed\{answerBlock\}\[r\d*\]/g, N = /\\embed\{newLine\}\[\]/g, P = /\\newline/g;
 function F(e) {
 	if (e) {
 		let t = 1;
@@ -85,14 +85,14 @@ function I(e) {
 }
 var L = class extends i.Component {
 	static propTypes = {
-		model: o.object.isRequired,
-		imageSupport: o.object,
-		uploadSoundSupport: o.object,
-		configuration: o.object,
-		onChange: o.func.isRequired,
-		promptEnabled: o.bool,
-		rationaleEnabled: o.bool,
-		toolbarOpts: o.object
+		model: a.object.isRequired,
+		imageSupport: a.object,
+		uploadSoundSupport: a.object,
+		configuration: a.object,
+		onChange: a.func.isRequired,
+		promptEnabled: a.bool,
+		rationaleEnabled: a.bool,
+		toolbarOpts: a.object
 	};
 	constructor(e) {
 		super(e);
@@ -123,7 +123,7 @@ var L = class extends i.Component {
 		this.setState({ showKeypad: !1 });
 	};
 	UNSAFE_componentWillMount() {
-		typeof window < "u" && (b ||= (c("answerBlock", (e) => ({
+		typeof window < "u" && (b ||= (s("answerBlock", (e) => ({
 			htmlString: `
             <div class="block-container block-container-generic">
               <div class="block-response block-response-generic" id="${e}Index">Response</div>
@@ -146,10 +146,10 @@ var L = class extends i.Component {
 				t[`r${n++}`] = { value: "" };
 			});
 		}
-		a(t, this.state.responseAreas) || this.setState({ responseAreas: t }, () => {
+		f(t, this.state.responseAreas) || this.setState({ responseAreas: t }, () => {
 			this.root && Object.keys(t).length && Object.keys(t).forEach((e, t) => {
 				let n = this.root.querySelector(`#${e}`), r = this.root.querySelector(`#${e}Index`);
-				n && (s(n), r.textContent = `R${t + 1}`);
+				n && (o(n), r.textContent = `R${t + 1}`);
 			});
 		});
 	};
@@ -169,26 +169,26 @@ var L = class extends i.Component {
 		i.responses[t] = e, r(i);
 	};
 	render() {
-		let { model: i, imageSupport: a, uploadSoundSupport: o, configuration: s, promptEnabled: c, rationaleEnabled: d, toolbarOpts: f } = this.props, { showKeypad: m } = this.state, { prompt: g, expression: b, equationEditor: A, promptEquationEditor: j = "8", responses: M, responseType: N, rationale: P, spellCheckEnabled: I, errors: L = {} } = i, { baseInputConfiguration: R = {}, rationale: z = {}, prompt: B = {}, ignoreOrder: V = {}, allowTrailingZeros: H = {}, maxResponseAreas: U, maxImageWidth: W = {}, maxImageHeight: G = {}, mathMlOptions: K = {} } = s || {}, te = n(s, i), { prompt: q, rationale: J, responsesErrors: Y, responseAreasError: X } = L, Z = W && W.prompt, Q = G && G.prompt, ne = {
+		let { model: i, imageSupport: a, uploadSoundSupport: o, configuration: s, promptEnabled: u, rationaleEnabled: d, toolbarOpts: f } = this.props, { showKeypad: m } = this.state, { prompt: g, expression: b, equationEditor: A, promptEquationEditor: j = "8", responses: M, responseType: N, rationale: P, spellCheckEnabled: I, errors: L = {} } = i, { baseInputConfiguration: R = {}, rationale: z = {}, prompt: B = {}, ignoreOrder: V = {}, allowTrailingZeros: H = {}, maxResponseAreas: U, maxImageWidth: W = {}, maxImageHeight: G = {}, mathMlOptions: K = {} } = s || {}, te = n(s, i), { prompt: q, rationale: J, responsesErrors: Y, responseAreasError: X } = L, Z = W && W.prompt, Q = G && G.prompt, ne = {
 			editor: "response-editor",
 			mathToolbar: "math-toolbar"
-		}, re = N === t.advanced ? M : M.slice(0, 1), $ = /* @__PURE__ */ l(E, {
+		}, re = N === t.advanced ? M : M.slice(0, 1), $ = /* @__PURE__ */ c(E, {
 			disableFocusListener: !0,
 			disableTouchListener: !0,
 			placement: "right",
 			title: te,
-			children: /* @__PURE__ */ l(y, {
+			children: /* @__PURE__ */ c(y, {
 				fontSize: "small",
 				color: "primary",
 				style: { marginLeft: "5px" }
 			})
 		});
-		return /* @__PURE__ */ u(x, {
+		return /* @__PURE__ */ l(x, {
 			ref: (e) => this.root = e || this.root,
 			children: [
-				c && /* @__PURE__ */ u(O, {
+				u && /* @__PURE__ */ l(O, {
 					label: B.label,
-					children: [/* @__PURE__ */ l(h, {
+					children: [/* @__PURE__ */ c(h, {
 						onFocus: this.onPromptFocus,
 						markup: g || "",
 						onChange: this.onChange("prompt"),
@@ -203,16 +203,16 @@ var L = class extends i.Component {
 						uploadSoundSupport: o,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: K
-					}), q && /* @__PURE__ */ l(D, { children: q })]
+					}), q && /* @__PURE__ */ c(D, { children: q })]
 				}),
-				N === t.advanced && /* @__PURE__ */ u(k, { children: [
-					/* @__PURE__ */ u(w, {
+				N === t.advanced && /* @__PURE__ */ l(k, { children: [
+					/* @__PURE__ */ l(w, {
 						style: { justifyContent: "flex-start" },
-						children: [/* @__PURE__ */ l(C, { children: "Define Response" }), $]
+						children: [/* @__PURE__ */ c(C, { children: "Define Response" }), $]
 					}),
-					/* @__PURE__ */ l(T, {
+					/* @__PURE__ */ c(T, {
 						label: "Response Template Equation Editor",
-						children: /* @__PURE__ */ u(_, {
+						children: /* @__PURE__ */ l(_, {
 							onChange: this.onChange("promptEquationEditor"),
 							value: j,
 							MenuProps: { transitionDuration: {
@@ -220,58 +220,58 @@ var L = class extends i.Component {
 								exit: 195
 							} },
 							children: [
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "non-negative-integers",
 									children: "Numeric - Non-Negative Integers"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "integers",
 									children: "Numeric - Integers"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "decimals",
 									children: "Numeric - Decimals"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "fractions",
 									children: "Numeric - Fractions"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: 1,
 									children: "Grade 1 - 2"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: 3,
 									children: "Grade 3 - 5"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: 6,
 									children: "Grade 6 - 7"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: 8,
 									children: "Grade 8 - HS"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "geometry",
 									children: "Geometry"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "advanced-algebra",
 									children: "Advanced Algebra"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "statistics",
 									children: "Statistics"
 								}),
-								/* @__PURE__ */ l(v, {
+								/* @__PURE__ */ c(v, {
 									value: "item-authoring",
 									children: "Item Authoring"
 								})
 							]
 						})
 					}, "templateEditorType"),
-					/* @__PURE__ */ u(ee, { children: [/* @__PURE__ */ l(S, { children: "RESPONSE TEMPLATE" }), /* @__PURE__ */ l(p, {
+					/* @__PURE__ */ l(ee, { children: [/* @__PURE__ */ c(S, { children: "RESPONSE TEMPLATE" }), /* @__PURE__ */ c(p, {
 						classNames: ne,
 						allowAnswerBlock: !0,
 						keypadMode: j,
@@ -284,15 +284,15 @@ var L = class extends i.Component {
 						maxResponseAreas: U,
 						error: X
 					})] }, "templateHolder"),
-					X && /* @__PURE__ */ l(D, { children: X })
+					X && /* @__PURE__ */ c(D, { children: X })
 				] }),
-				/* @__PURE__ */ u(w, {
+				/* @__PURE__ */ l(w, {
 					style: { justifyContent: "flex-start" },
-					children: [/* @__PURE__ */ l(C, { children: "Define Correct Response" }), N === t.simple ? $ : null]
+					children: [/* @__PURE__ */ c(C, { children: "Define Correct Response" }), N === t.simple ? $ : null]
 				}),
-				/* @__PURE__ */ l(T, {
+				/* @__PURE__ */ c(T, {
 					label: "Equation Editor",
-					children: /* @__PURE__ */ u(_, {
+					children: /* @__PURE__ */ l(_, {
 						onChange: this.onChange("equationEditor"),
 						value: A,
 						MenuProps: { transitionDuration: {
@@ -300,58 +300,58 @@ var L = class extends i.Component {
 							exit: 195
 						} },
 						children: [
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "non-negative-integers",
 								children: "Numeric - Non-Negative Integers"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "integers",
 								children: "Numeric - Integers"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "decimals",
 								children: "Numeric - Decimals"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "fractions",
 								children: "Numeric - Fractions"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: 1,
 								children: "Grade 1 - 2"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: 3,
 								children: "Grade 3 - 5"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: 6,
 								children: "Grade 6 - 7"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: 8,
 								children: "Grade 8 - HS"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "geometry",
 								children: "Geometry"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "advanced-algebra",
 								children: "Advanced Algebra"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "statistics",
 								children: "Statistics"
 							}),
-							/* @__PURE__ */ l(v, {
+							/* @__PURE__ */ c(v, {
 								value: "item-authoring",
 								children: "Item Authoring"
 							})
 						]
 					})
 				}),
-				re.map((n, r) => /* @__PURE__ */ l(e, {
+				re.map((n, r) => /* @__PURE__ */ c(e, {
 					mode: A,
 					response: n,
 					defaultResponse: N === t.simple,
@@ -361,9 +361,9 @@ var L = class extends i.Component {
 					cAllowTrailingZeros: H,
 					error: Y && Y[r]
 				}, n.id)),
-				d && /* @__PURE__ */ u(O, {
+				d && /* @__PURE__ */ l(O, {
 					label: z.label,
-					children: [/* @__PURE__ */ l(h, {
+					children: [/* @__PURE__ */ c(h, {
 						markup: P || "",
 						onChange: this.onChange("rationale"),
 						imageSupport: a,
@@ -380,7 +380,7 @@ var L = class extends i.Component {
 						uploadSoundSupport: o,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: K
-					}), J && /* @__PURE__ */ l(D, { children: J })]
+					}), J && /* @__PURE__ */ c(D, { children: J })]
 				})
 			]
 		});

package/dist/browser/author/index.js

@@ -26473,6 +26473,8 @@ var gj = (e) => {
 		classes: t
 	}) });
 }, _j = M("div")(() => ({
+	height: 0,
+	overflow: "visible",
 	"& .defaultToolbar": {
 		display: "flex",
 		width: "100%",
@@ -26508,13 +26510,14 @@ var gj = (e) => {
 		color: "var(--white)"
 	},
 	"& .toolbar": {
-		position: "absolute",
+		position: "relative",
+		top: "5px",
 		zIndex: 20,
 		cursor: "pointer",
 		justifyContent: "space-between",
 		background: "var(--editable-html-toolbar-bg, #efefef)",
 		minWidth: "280px",
-		margin: "5px 0 0 0",
+		margin: 0,
 		padding: "2px",
 		boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
 		boxSizing: "border-box",
@@ -26523,7 +26526,10 @@ var gj = (e) => {
 		pointerEvents: "none"
 	},
 	"& .toolbarWithNoDone": { minWidth: "265px" },
-	"& .toolbarTop": { top: "-45px" },
+	"& .toolbarTop": {
+		position: "absolute",
+		top: "-45px"
+	},
 	"& .toolbarRight": { right: 0 },
 	"& .fullWidth": { width: "100%" },
 	"& .hidden": { visibility: "hidden" },
@@ -33195,6 +33201,8 @@ var tB = W_.create({
 	"--red-light": "#ffebe5",
 	"--shadow": "0px 12px 33px 0px rgba(0, 0, 0, .06),\n               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)"
 }, dB = (e) => ({
+	role: "textbox",
+	"data-pie-editor": "true",
 	spellcheck: e ? "true" : "false",
 	autocorrect: e ? "on" : "off",
 	autocapitalize: e ? "on" : "off"
@@ -33361,7 +33369,10 @@ var tB = W_.create({
 		g?.setEditable(!e.disabled);
 	}, [e.disabled, g]), L(() => {
 		if (!g) return;
-		let e = g.options?.editorProps, t = dB(h);
+		let e = g.options?.editorProps, t = {
+			...e?.attributes,
+			...dB(h)
+		};
 		e?.attributes?.spellcheck !== t.spellcheck && g.setOptions({ editorProps: {
 			...e,
 			attributes: t