@pie-element/explicit-constructed-response 11.1.2-next.0 → 11.1.2-next.1

package/dist/author/main.js

@@ -1,69 +1,66 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
-import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/pick.js";
-import r from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/throttle.js";
-import { decodeHTML as i, getAdjustedLength as a } from "./markupUtils.js";
-import o from "./ecr-toolbar.js";
-import s from "./alternateResponses.js";
-import { generateValidationMessage as c } from "./utils.js";
-import l from "react";
-import u from "prop-types";
+import { decodeHTML as e, getAdjustedLength as t } from "./markupUtils.js";
+import n from "./ecr-toolbar.js";
+import r from "./alternateResponses.js";
+import { generateValidationMessage as i } from "./utils.js";
+import a from "react";
+import o from "prop-types";
+import { cloneDeep as s, isEmpty as c, pick as l, throttle as u } from "@pie-element/shared-lodash";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { styled as p } from "@mui/material/styles";
-import m, { ALL_PLUGINS as h } from "@pie-lib/editable-html-tip-tap";
-import { InputContainer as g, layout as ee, settings as _ } from "@pie-lib/config-ui";
-import v from "@mui/material/Typography";
-import y from "@mui/icons-material/Info";
-import b from "@mui/material/Tooltip";
+import m, { ALL_PLUGINS as ee } from "@pie-lib/editable-html-tip-tap";
+import { InputContainer as h, layout as te, settings as g } from "@pie-lib/config-ui";
+import _ from "@mui/material/Typography";
+import ne from "@mui/icons-material/Info";
+import v from "@mui/material/Tooltip";
 //#region src/author/main.tsx
-var { toggle: x, Panel: te, dropdown: ne } = _, S = p(g)(({ theme: e }) => ({
+var { toggle: y, Panel: re, dropdown: ie } = g, b = p(h)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(1),
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), C = p(m)(({ theme: e }) => ({
+})), ae = p(m)(({ theme: e }) => ({
 	minHeight: "100px",
 	paddingTop: e.spacing(1),
 	width: "100%",
 	"& [data-slate-editor=\"true\"]": { minHeight: "100px" }
-})), re = p(v)(({ theme: e }) => ({ fontSize: e.typography.fontSize + 2 })), ie = p(b)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+})), oe = p(_)(({ theme: e }) => ({ fontSize: e.typography.fontSize + 2 })), x = p(v)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), w = p("div")(({ theme: e }) => ({
+} })), S = p("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), T = p("div")({
+})), se = p("div")({
 	display: "flex",
 	alignItems: "center"
-}), E = p(v)(({ theme: e }) => ({
+}), ce = p(_)(({ theme: e }) => ({
 	fontSize: e.typography.fontSize + 2,
 	marginTop: e.spacing(3),
 	marginBottom: e.spacing(1)
-})), D = (e) => {
+})), C = (e) => {
 	let t = document.createElement("div");
 	return t.innerHTML = e.trim(), t;
-}, O = class extends l.Component {
+}, w = class extends a.Component {
 	static propTypes = {
-		configuration: u.object.isRequired,
-		model: u.object.isRequired,
-		disableSidePanel: u.bool,
-		onModelChanged: u.func.isRequired,
-		onConfigurationChanged: u.func.isRequired,
-		imageSupport: u.shape({
-			add: u.func.isRequired,
-			delete: u.func.isRequired
+		configuration: o.object.isRequired,
+		model: o.object.isRequired,
+		disableSidePanel: o.bool,
+		onModelChanged: o.func.isRequired,
+		onConfigurationChanged: o.func.isRequired,
+		imageSupport: o.shape({
+			add: o.func.isRequired,
+			delete: o.func.isRequired
 		}),
-		uploadSoundSupport: u.object
+		uploadSoundSupport: o.object
 	};
 	state = {};
 	componentDidMount() {
-		let { model: { slateMarkup: e, choices: t, maxLengthPerChoice: n = [] }, onModelChanged: r } = this.props, o = !n.length;
-		this.setState({ markup: e }), Object.values(t).forEach((e, t) => {
-			let r = e.map((e) => i(e.label || "").length), s = Math.max(...r);
-			(o || !n[t] || n[t] < s || n[t] > s + 10) && (n[t] = a(s));
-		}), r({ maxLengthPerChoice: n });
+		let { model: { slateMarkup: n, choices: r, maxLengthPerChoice: i = [] }, onModelChanged: a } = this.props, o = !i.length;
+		this.setState({ markup: n }), Object.values(r).forEach((n, r) => {
+			let a = n.map((t) => e(t.label || "").length), s = Math.max(...a);
+			(o || !i[r] || i[r] < s || i[r] > s + 10) && (i[r] = t(s));
+		}), a({ maxLengthPerChoice: i });
 	}
 	onModelChange = (e) => {
 		this.props.onModelChanged({ ...e });
@@ -88,207 +85,207 @@ var { toggle: x, Panel: te, dropdown: ne } = _, S = p(g)(({ theme: e }) => ({
 		let { onModelChanged: t } = this.props;
 		t({ maxLengthPerChoice: e });
 	};
-	onChangeResponse = (e, t) => {
-		let { model: n, onModelChanged: r } = this.props, { choices: o } = n, { maxLengthPerChoice: s } = n, c = i(t || "").length;
-		if (!o[e] || !o[e].length) {
-			o[e] = [{
-				label: t || "",
+	onChangeResponse = (n, r) => {
+		let { model: i, onModelChanged: a } = this.props, { choices: o } = i, { maxLengthPerChoice: s } = i, c = e(r || "").length;
+		if (!o[n] || !o[n].length) {
+			o[n] = [{
+				label: r || "",
 				value: "0"
 			}];
-			let n = e > s.length ? e - s.length : 0;
-			s = [...s, ...Array(n).fill(1)], s.splice(e, 0, a(c));
-		} else o[e][0].label = t || "", s && (s[e] < c || s[e] > c + 10) && (s[e] = a(c));
-		r({
+			let e = n > s.length ? n - s.length : 0;
+			s = [...s, ...Array(e).fill(1)], s.splice(n, 0, t(c));
+		} else o[n][0].label = r || "", s && (s[n] < c || s[n] > c + 10) && (s[n] = t(c));
+		a({
 			choices: o,
 			maxLengthPerChoice: s
 		});
 	};
-	onChange = (t) => {
-		let { model: { choices: n, maxLengthPerChoice: r }, onModelChanged: i } = this.props, a = D(t), o = a.querySelectorAll("[data-type=\"explicit_constructed_response\"]"), s = {}, c = [];
-		o.forEach((t, i) => {
-			let a = e(n[t.dataset.index]);
-			a && (a[0] = {
-				label: t.dataset.value || "",
+	onChange = (e) => {
+		let { model: { choices: t, maxLengthPerChoice: n }, onModelChanged: r } = this.props, i = C(e), a = i.querySelectorAll("[data-type=\"explicit_constructed_response\"]"), o = {}, c = [];
+		a.forEach((e, r) => {
+			let i = s(t[e.dataset.index]);
+			i && (i[0] = {
+				label: e.dataset.value || "",
 				value: "0"
-			}, c[i] = r[t.dataset.index]), s[i] = a, t.dataset.index = i;
-		}), this.setState({ cachedChoices: void 0 }, () => i({
-			choices: s,
-			slateMarkup: a.innerHTML,
+			}, c[r] = n[e.dataset.index]), o[r] = i, e.dataset.index = r;
+		}), this.setState({ cachedChoices: void 0 }, () => r({
+			choices: o,
+			slateMarkup: i.innerHTML,
 			maxLengthPerChoice: c
 		}));
 	};
-	onHandleAreaChange = r((t) => {
-		let { model: { choices: r }, onModelChanged: i } = this.props, { cachedChoices: a } = this.state;
-		if (!t) return;
-		let o = r ? e(r) : {}, s = a ? e(a) : {};
-		t.forEach((e) => {
+	onHandleAreaChange = u((e) => {
+		let { model: { choices: t }, onModelChanged: n } = this.props, { cachedChoices: r } = this.state;
+		if (!e) return;
+		let i = t ? s(t) : {}, a = r ? s(r) : {};
+		e.forEach((e) => {
 			let t = e.index;
-			!o[t] && s[t] ? (Object.assign(o, n(s, t)), Object.prototype.hasOwnProperty.call(s, t) && delete s[t]) : (Object.assign(s, n(o, t)), Object.prototype.hasOwnProperty.call(o, t) && delete o[t]);
-		}), this.setState({ cachedChoices: s }, () => i({ choices: o }));
+			!i[t] && a[t] ? (Object.assign(i, l(a, t)), Object.prototype.hasOwnProperty.call(a, t) && delete a[t]) : (Object.assign(a, l(i, t)), Object.prototype.hasOwnProperty.call(i, t) && delete i[t]);
+		}), this.setState({ cachedChoices: a }, () => n({ choices: i }));
 	}, 500, {
 		trailing: !1,
 		leading: !0
 	});
 	render() {
-		let { model: e, configuration: n, onConfigurationChanged: r, imageSupport: i, uploadSoundSupport: a } = this.props, { baseInputConfiguration: l = {}, contentDimensions: u = {}, maxImageWidth: p = {}, maxImageHeight: g = {}, maxLengthPerChoice: _ = {}, maxResponseAreas: v, partialScoring: b = {}, playerSpellCheck: D = {}, prompt: O = {}, rationale: k = {}, template: ae = {}, settingsPanelDisabled: oe, spellCheck: A = {}, editSource: j = {}, teacherInstructions: M = {}, withRubric: N = {}, mathMlOptions: P = {}, language: F = {}, languageChoices: I = {}, spanishButton: L = {}, responseAreaInputConfiguration: R = {} } = n || {}, { errors: z, extraCSSRules: B, maxLengthPerChoiceEnabled: V, promptEnabled: H, rationaleEnabled: U, spellCheckEnabled: W, teacherInstructionsEnabled: se, toolbarEditorPosition: ce } = e || {}, { choices: G = {}, prompt: K, rationale: q, responseAreas: J, teacherInstructions: Y } = z || {}, le = c(n), X = p && p.prompt, Z = g && g.prompt, Q = { position: ce === "top" ? "top" : "bottom" }, ue = {
-			partialScoring: b.settings && x(b.label),
-			maxLengthPerChoiceEnabled: _.settings && x(_.label),
-			"language.enabled": F.settings && x(F.label, !0),
-			language: F.settings && F.enabled && ne(I.label, I.options),
-			"responseAreaInputConfiguration.inputConfiguration.characters.disabled": L.settings && x(L.label, !0)
+		let { model: e, configuration: t, onConfigurationChanged: a, imageSupport: o, uploadSoundSupport: s } = this.props, { baseInputConfiguration: l = {}, contentDimensions: u = {}, maxImageWidth: p = {}, maxImageHeight: h = {}, maxLengthPerChoice: g = {}, maxResponseAreas: _, partialScoring: v = {}, playerSpellCheck: C = {}, prompt: w = {}, rationale: T = {}, template: le = {}, settingsPanelDisabled: E, spellCheck: D = {}, editSource: O = {}, teacherInstructions: k = {}, withRubric: A = {}, mathMlOptions: j = {}, language: M = {}, languageChoices: N = {}, spanishButton: P = {}, responseAreaInputConfiguration: F = {} } = t || {}, { errors: I, extraCSSRules: L, maxLengthPerChoiceEnabled: R, promptEnabled: z, rationaleEnabled: B, spellCheckEnabled: V, teacherInstructionsEnabled: H, toolbarEditorPosition: U } = e || {}, { choices: W = {}, prompt: G, rationale: K, responseAreas: q, teacherInstructions: J } = I || {}, Y = i(t), X = p && p.prompt, Z = h && h.prompt, Q = { position: U === "top" ? "top" : "bottom" }, ue = {
+			partialScoring: v.settings && y(v.label),
+			maxLengthPerChoiceEnabled: g.settings && y(g.label),
+			"language.enabled": M.settings && y(M.label, !0),
+			language: M.settings && M.enabled && ie(N.label, N.options),
+			"responseAreaInputConfiguration.inputConfiguration.characters.disabled": P.settings && y(P.label, !0)
 		}, de = {
-			teacherInstructionsEnabled: M.settings && x(M.label),
-			rationaleEnabled: k.settings && x(k.label),
-			promptEnabled: O.settings && x(O.label),
-			spellCheckEnabled: A.settings && x(A.label),
-			playerSpellCheckEnabled: D.settings && x(D.label),
-			rubricEnabled: N?.settings && x(N?.label),
-			"editSource.enabled": j?.settings && x(j.label, !0)
+			teacherInstructionsEnabled: k.settings && y(k.label),
+			rationaleEnabled: T.settings && y(T.label),
+			promptEnabled: w.settings && y(w.label),
+			spellCheckEnabled: D.settings && y(D.label),
+			playerSpellCheckEnabled: C.settings && y(C.label),
+			rubricEnabled: A?.settings && y(A?.label),
+			"editSource.enabled": O?.settings && y(O.label, !0)
 		}, $ = (e = {}) => ({
 			...l,
 			...e
 		});
-		return /* @__PURE__ */ f(ee.ConfigLayout, {
-			extraCSSRules: B,
+		return /* @__PURE__ */ f(te.ConfigLayout, {
+			extraCSSRules: L,
 			dimensions: u,
-			hideSettings: oe,
-			settings: /* @__PURE__ */ d(te, {
+			hideSettings: E,
+			settings: /* @__PURE__ */ d(re, {
 				model: e,
-				configuration: n,
+				configuration: t,
 				onChangeModel: (e) => this.onModelChange(e),
-				onChangeConfiguration: (e) => r(e, !0),
+				onChangeConfiguration: (e) => a(e, !0),
 				groups: {
 					Settings: ue,
 					Properties: de
 				}
 			}),
 			children: [
-				se && /* @__PURE__ */ f(S, {
-					label: M.label,
+				H && /* @__PURE__ */ f(b, {
+					label: k.label,
 					children: [/* @__PURE__ */ d(m, {
 						className: "prompt",
 						markup: e.teacherInstructions || "",
 						onChange: this.onTeacherInstructionsChanged,
-						imageSupport: i,
+						imageSupport: o,
 						nonEmpty: !1,
-						error: Y,
+						error: J,
 						toolbarOpts: Q,
-						pluginProps: $(M?.inputConfiguration),
-						spellCheck: W,
+						pluginProps: $(k?.inputConfiguration),
+						spellCheck: V,
 						maxImageWidth: p && p.teacherInstructions || X,
-						maxImageHeight: g && g.teacherInstructions || Z,
-						uploadSoundSupport: a,
+						maxImageHeight: h && h.teacherInstructions || Z,
+						uploadSoundSupport: s,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: P,
+						mathMlOptions: j,
 						autoWidthToolbar: !0
-					}), Y && /* @__PURE__ */ d(w, { children: Y })]
+					}), J && /* @__PURE__ */ d(S, { children: J })]
 				}),
-				H && /* @__PURE__ */ f(S, {
-					label: O.label,
+				z && /* @__PURE__ */ f(b, {
+					label: w.label,
 					children: [/* @__PURE__ */ d(m, {
 						className: "prompt",
 						markup: e.prompt,
 						onChange: this.onPromptChanged,
-						imageSupport: i,
+						imageSupport: o,
 						nonEmpty: !1,
 						disableUnderline: !0,
-						error: K,
+						error: G,
 						toolbarOpts: Q,
-						pluginProps: $(O?.inputConfiguration),
-						spellCheck: W,
+						pluginProps: $(w?.inputConfiguration),
+						spellCheck: V,
 						maxImageWidth: X,
 						maxImageHeight: Z,
-						uploadSoundSupport: a,
+						uploadSoundSupport: s,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: P,
+						mathMlOptions: j,
 						autoWidthToolbar: !0
-					}), K && /* @__PURE__ */ d(w, { children: K })]
+					}), G && /* @__PURE__ */ d(S, { children: G })]
 				}),
-				/* @__PURE__ */ f(T, { children: [/* @__PURE__ */ d(re, {
+				/* @__PURE__ */ f(se, { children: [/* @__PURE__ */ d(oe, {
 					component: "div",
 					children: "Define Template, Choices, and Correct Responses"
-				}), /* @__PURE__ */ d(ie, {
+				}), /* @__PURE__ */ d(x, {
 					disableFocusListener: !0,
 					disableTouchListener: !0,
 					placement: "right",
-					title: le,
-					children: /* @__PURE__ */ d(y, {
+					title: Y,
+					children: /* @__PURE__ */ d(ne, {
 						fontSize: "small",
 						color: "primary",
 						style: { marginLeft: "8px" }
 					})
 				})] }),
-				/* @__PURE__ */ d(C, {
-					activePlugins: h,
+				/* @__PURE__ */ d(ae, {
+					activePlugins: ee,
 					toolbarOpts: { position: "top" },
-					spellCheck: W,
-					pluginProps: $(ae?.inputConfiguration),
+					spellCheck: V,
+					pluginProps: $(le?.inputConfiguration),
 					responseAreaProps: {
 						type: "explicit-constructed-response",
 						options: { duplicates: !0 },
-						maxResponseAreas: v,
-						respAreaToolbar: (e, t, n) => {
-							let [r, i] = e, { model: a } = this.props, s = (a.choices[r.attrs.index] || [])[0];
-							return () => /* @__PURE__ */ d(o, {
-								onChangeResponse: (e) => this.onChangeResponse(r.attrs.index, e),
-								node: r,
-								pos: i,
+						maxResponseAreas: _,
+						respAreaToolbar: (e, t, r) => {
+							let [i, a] = e, { model: o } = this.props, s = (o.choices[i.attrs.index] || [])[0];
+							return () => /* @__PURE__ */ d(n, {
+								onChangeResponse: (e) => this.onChangeResponse(i.attrs.index, e),
+								node: i,
+								pos: a,
 								editor: t,
-								onToolbarDone: n,
+								onToolbarDone: r,
 								correctChoice: s,
-								maxLengthPerChoiceEnabled: V,
-								pluginProps: $(R?.inputConfiguration)
+								maxLengthPerChoiceEnabled: R,
+								pluginProps: $(F?.inputConfiguration)
 							});
 						},
-						error: () => G,
+						error: () => W,
 						onHandleAreaChange: this.onHandleAreaChange
 					},
 					markup: e.slateMarkup,
 					onChange: this.onChange,
-					imageSupport: i,
+					imageSupport: o,
 					disableImageAlignmentButtons: !0,
 					onBlur: this.onBlur,
 					disabled: !1,
 					highlightShape: !1,
-					error: J,
-					uploadSoundSupport: a,
+					error: q,
+					uploadSoundSupport: s,
 					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-					mathMlOptions: P,
+					mathMlOptions: j,
 					autoWidthToolbar: !0
 				}),
-				J && /* @__PURE__ */ d(w, { children: J }),
-				!t(e.choices) && /* @__PURE__ */ d(E, { children: `Define Alternates ${V ? "and Character Limits" : ""}` }),
-				/* @__PURE__ */ d(s, {
+				q && /* @__PURE__ */ d(S, { children: q }),
+				!c(e.choices) && /* @__PURE__ */ d(ce, { children: `Define Alternates ${R ? "and Character Limits" : ""}` }),
+				/* @__PURE__ */ d(r, {
 					model: e,
 					onChange: this.onResponsesChanged,
 					onLengthChange: this.onLengthChanged,
-					maxLengthPerChoiceEnabled: V,
-					spellCheck: W,
-					choicesErrors: G,
-					pluginProps: $(R?.inputConfiguration)
+					maxLengthPerChoiceEnabled: R,
+					spellCheck: V,
+					choicesErrors: W,
+					pluginProps: $(F?.inputConfiguration)
 				}),
-				U && /* @__PURE__ */ f(S, {
-					label: k.label,
+				B && /* @__PURE__ */ f(b, {
+					label: T.label,
 					children: [/* @__PURE__ */ d(m, {
 						className: "prompt",
 						markup: e.rationale || "",
 						onChange: this.onRationaleChanged,
-						imageSupport: i,
-						error: q,
+						imageSupport: o,
+						error: K,
 						toolbarOpts: Q,
-						pluginProps: $(k?.inputConfiguration),
-						spellCheck: W,
+						pluginProps: $(T?.inputConfiguration),
+						spellCheck: V,
 						maxImageWidth: p && p.rationale || X,
-						maxImageHeight: g && g.rationale || Z,
-						uploadSoundSupport: a,
+						maxImageHeight: h && h.rationale || Z,
+						uploadSoundSupport: s,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: P,
+						mathMlOptions: j,
 						autoWidthToolbar: !0
-					}), q && /* @__PURE__ */ d(w, { children: q })]
+					}), K && /* @__PURE__ */ d(S, { children: K })]
 				})
 			]
 		});
 	}
 };
 //#endregion
-export { O as default };
+export { w as default };

package/dist/author/markupUtils.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/escape.js";
+import { escape as e } from "@pie-element/shared-lodash";
 //#region src/author/markupUtils.tsx
 var t = "imes|riangle|an|heta|herefore", n = "throot|parallel|cong|approx|eq|e|sim", r = RegExp(`(\\t(?!${t}))|(\\n(?!${n}))|(\\\\t(?!${t}))|(\\\\n(?!${n}))`, "g"), i = (e) => e.replace(r, "").replace(/\\"/g, "\"").replace(/\\\//g, "/"), a = (e = "") => {
 	let t = document.createElement("div");