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

package/dist/author/main.js

@@ -0,0 +1,291 @@
+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 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: 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)
+})), ae = p(m)(({ theme: e }) => ({
+	minHeight: "100px",
+	paddingTop: e.spacing(1),
+	width: "100%",
+	"& [data-slate-editor=\"true\"]": { minHeight: "100px" }
+})), 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"
+} })), S = p("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), se = p("div")({
+	display: "flex",
+	alignItems: "center"
+}), ce = p(_)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize + 2,
+	marginTop: e.spacing(3),
+	marginBottom: e.spacing(1)
+})), C = (e) => {
+	let t = document.createElement("div");
+	return t.innerHTML = e.trim(), t;
+}, w = class extends a.Component {
+	static propTypes = {
+		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: o.object
+	};
+	state = {};
+	componentDidMount() {
+		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 });
+	};
+	onPromptChanged = (e) => {
+		this.props.onModelChanged({ prompt: e });
+	};
+	onRationaleChanged = (e) => {
+		this.props.onModelChanged({ rationale: e });
+	};
+	onTeacherInstructionsChanged = (e) => {
+		let { onModelChanged: t } = this.props;
+		t({ teacherInstructions: e });
+	};
+	onMarkupChanged = (e) => {
+		this.props.onModelChanged({ slateMarkup: e });
+	};
+	onResponsesChanged = (e) => {
+		this.props.onModelChanged({ choices: e });
+	};
+	onLengthChanged = (e) => {
+		let { onModelChanged: t } = this.props;
+		t({ maxLengthPerChoice: e });
+	};
+	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 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 = (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[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 = 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;
+			!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: 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: 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(te.ConfigLayout, {
+			extraCSSRules: L,
+			dimensions: u,
+			hideSettings: E,
+			settings: /* @__PURE__ */ d(re, {
+				model: e,
+				configuration: t,
+				onChangeModel: (e) => this.onModelChange(e),
+				onChangeConfiguration: (e) => a(e, !0),
+				groups: {
+					Settings: ue,
+					Properties: de
+				}
+			}),
+			children: [
+				H && /* @__PURE__ */ f(b, {
+					label: k.label,
+					children: [/* @__PURE__ */ d(m, {
+						className: "prompt",
+						markup: e.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChanged,
+						imageSupport: o,
+						nonEmpty: !1,
+						error: J,
+						toolbarOpts: Q,
+						pluginProps: $(k?.inputConfiguration),
+						spellCheck: V,
+						maxImageWidth: p && p.teacherInstructions || X,
+						maxImageHeight: h && h.teacherInstructions || Z,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: j,
+						autoWidthToolbar: !0
+					}), J && /* @__PURE__ */ d(S, { children: J })]
+				}),
+				z && /* @__PURE__ */ f(b, {
+					label: w.label,
+					children: [/* @__PURE__ */ d(m, {
+						className: "prompt",
+						markup: e.prompt,
+						onChange: this.onPromptChanged,
+						imageSupport: o,
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: G,
+						toolbarOpts: Q,
+						pluginProps: $(w?.inputConfiguration),
+						spellCheck: V,
+						maxImageWidth: X,
+						maxImageHeight: Z,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: j,
+						autoWidthToolbar: !0
+					}), G && /* @__PURE__ */ d(S, { children: G })]
+				}),
+				/* @__PURE__ */ f(se, { children: [/* @__PURE__ */ d(oe, {
+					component: "div",
+					children: "Define Template, Choices, and Correct Responses"
+				}), /* @__PURE__ */ d(x, {
+					disableFocusListener: !0,
+					disableTouchListener: !0,
+					placement: "right",
+					title: Y,
+					children: /* @__PURE__ */ d(ne, {
+						fontSize: "small",
+						color: "primary",
+						style: { marginLeft: "8px" }
+					})
+				})] }),
+				/* @__PURE__ */ d(ae, {
+					activePlugins: ee,
+					toolbarOpts: { position: "top" },
+					spellCheck: V,
+					pluginProps: $(le?.inputConfiguration),
+					responseAreaProps: {
+						type: "explicit-constructed-response",
+						options: { duplicates: !0 },
+						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: r,
+								correctChoice: s,
+								maxLengthPerChoiceEnabled: R,
+								pluginProps: $(F?.inputConfiguration)
+							});
+						},
+						error: () => W,
+						onHandleAreaChange: this.onHandleAreaChange
+					},
+					markup: e.slateMarkup,
+					onChange: this.onChange,
+					imageSupport: o,
+					disableImageAlignmentButtons: !0,
+					onBlur: this.onBlur,
+					disabled: !1,
+					highlightShape: !1,
+					error: q,
+					uploadSoundSupport: s,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: j,
+					autoWidthToolbar: !0
+				}),
+				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: R,
+					spellCheck: V,
+					choicesErrors: W,
+					pluginProps: $(F?.inputConfiguration)
+				}),
+				B && /* @__PURE__ */ f(b, {
+					label: T.label,
+					children: [/* @__PURE__ */ d(m, {
+						className: "prompt",
+						markup: e.rationale || "",
+						onChange: this.onRationaleChanged,
+						imageSupport: o,
+						error: K,
+						toolbarOpts: Q,
+						pluginProps: $(T?.inputConfiguration),
+						spellCheck: V,
+						maxImageWidth: p && p.rationale || X,
+						maxImageHeight: h && h.rationale || Z,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: j,
+						autoWidthToolbar: !0
+					}), K && /* @__PURE__ */ d(S, { children: K })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { w as default };

package/dist/author/markupUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/markupUtils.js
+ * @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.
+ */
+export declare const removeUnwantedCharacters: (markup: any) => any;
+export declare const processMarkup: (markup: any) => string;
+export declare const createSlateMarkup: (markup: any, choices: any) => any;
+export declare const getAdjustedLength: (length: any) => any;
+export declare const stripHtmlTags: (markup: any) => string;
+export declare const decodeHTML: (html: any) => string;

package/dist/author/markupUtils.js

@@ -0,0 +1,13 @@
+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");
+	return t.innerHTML = e.trim(), t;
+}, o = (e) => {
+	let t = a(i(e || "") || ""), n = 0;
+	return t.querySelectorAll("[data-type=\"explicit_constructed_response\"]").forEach((e) => {
+		e.replaceWith(`{{${n++}}}`);
+	}), t.innerHTML;
+}, s = /\{\{(\d+)\}\}/g, c = (t, n) => t ? i(t).replace(s, (t, r) => `<span data-type="explicit_constructed_response" data-index="${r}" data-value="${e(n[r][0].label || "")}"></span>`) : "", l = (e) => e <= 2 ? e + 2 : e <= 4 ? e + 3 : e <= 6 ? e + 4 : e + 5, u = (e) => typeof e == "string" ? e.replace(/<\/?[^>]+(>|$)/g, "") : "", d = (e) => new DOMParser().parseFromString(e, "text/html").body.textContent || "";
+//#endregion
+export { c as createSlateMarkup, d as decodeHTML, l as getAdjustedLength, o as processMarkup, u as stripHtmlTags };

package/dist/author/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/utils.js
+ * @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.
+ */
+export declare const generateValidationMessage: (config: any) => string;

package/dist/author/utils.js

@@ -0,0 +1,7 @@
+//#region src/author/utils.ts
+var e = (e) => {
+	let { maxResponseAreas: t } = e;
+	return "Validation requirements:" + ("\nCorrect answers should not be blank.\nEach answer defined for a response area should be unique.\nThere should be at least 1 " + (t ? `and at most ${t} ` : "") + "response area" + (t ? "s" : "") + " defined.");
+};
+//#endregion
+export { e as generateValidationMessage };