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

package/dist/author/main.js

@@ -0,0 +1,294 @@
+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 { 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";
+//#region src/author/main.tsx
+var { toggle: x, Panel: te, dropdown: ne } = _, S = p(g)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(1),
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), C = 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": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), w = p("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), T = p("div")({
+	display: "flex",
+	alignItems: "center"
+}), E = p(v)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize + 2,
+	marginTop: e.spacing(3),
+	marginBottom: e.spacing(1)
+})), D = (e) => {
+	let t = document.createElement("div");
+	return t.innerHTML = e.trim(), t;
+}, O = class extends l.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
+		}),
+		uploadSoundSupport: u.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 });
+	}
+	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 = (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 || "",
+				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({
+			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 || "",
+				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,
+			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) => {
+			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 }));
+	}, 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)
+		}, 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)
+		}, $ = (e = {}) => ({
+			...l,
+			...e
+		});
+		return /* @__PURE__ */ f(ee.ConfigLayout, {
+			extraCSSRules: B,
+			dimensions: u,
+			hideSettings: oe,
+			settings: /* @__PURE__ */ d(te, {
+				model: e,
+				configuration: n,
+				onChangeModel: (e) => this.onModelChange(e),
+				onChangeConfiguration: (e) => r(e, !0),
+				groups: {
+					Settings: ue,
+					Properties: de
+				}
+			}),
+			children: [
+				se && /* @__PURE__ */ f(S, {
+					label: M.label,
+					children: [/* @__PURE__ */ d(m, {
+						className: "prompt",
+						markup: e.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChanged,
+						imageSupport: i,
+						nonEmpty: !1,
+						error: Y,
+						toolbarOpts: Q,
+						pluginProps: $(M?.inputConfiguration),
+						spellCheck: W,
+						maxImageWidth: p && p.teacherInstructions || X,
+						maxImageHeight: g && g.teacherInstructions || Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: P,
+						autoWidthToolbar: !0
+					}), Y && /* @__PURE__ */ d(w, { children: Y })]
+				}),
+				H && /* @__PURE__ */ f(S, {
+					label: O.label,
+					children: [/* @__PURE__ */ d(m, {
+						className: "prompt",
+						markup: e.prompt,
+						onChange: this.onPromptChanged,
+						imageSupport: i,
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: K,
+						toolbarOpts: Q,
+						pluginProps: $(O?.inputConfiguration),
+						spellCheck: W,
+						maxImageWidth: X,
+						maxImageHeight: Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: P,
+						autoWidthToolbar: !0
+					}), K && /* @__PURE__ */ d(w, { children: K })]
+				}),
+				/* @__PURE__ */ f(T, { children: [/* @__PURE__ */ d(re, {
+					component: "div",
+					children: "Define Template, Choices, and Correct Responses"
+				}), /* @__PURE__ */ d(ie, {
+					disableFocusListener: !0,
+					disableTouchListener: !0,
+					placement: "right",
+					title: le,
+					children: /* @__PURE__ */ d(y, {
+						fontSize: "small",
+						color: "primary",
+						style: { marginLeft: "8px" }
+					})
+				})] }),
+				/* @__PURE__ */ d(C, {
+					activePlugins: h,
+					toolbarOpts: { position: "top" },
+					spellCheck: W,
+					pluginProps: $(ae?.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,
+								editor: t,
+								onToolbarDone: n,
+								correctChoice: s,
+								maxLengthPerChoiceEnabled: V,
+								pluginProps: $(R?.inputConfiguration)
+							});
+						},
+						error: () => G,
+						onHandleAreaChange: this.onHandleAreaChange
+					},
+					markup: e.slateMarkup,
+					onChange: this.onChange,
+					imageSupport: i,
+					disableImageAlignmentButtons: !0,
+					onBlur: this.onBlur,
+					disabled: !1,
+					highlightShape: !1,
+					error: J,
+					uploadSoundSupport: a,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: P,
+					autoWidthToolbar: !0
+				}),
+				J && /* @__PURE__ */ d(w, { children: J }),
+				!t(e.choices) && /* @__PURE__ */ d(E, { children: `Define Alternates ${V ? "and Character Limits" : ""}` }),
+				/* @__PURE__ */ d(s, {
+					model: e,
+					onChange: this.onResponsesChanged,
+					onLengthChange: this.onLengthChanged,
+					maxLengthPerChoiceEnabled: V,
+					spellCheck: W,
+					choicesErrors: G,
+					pluginProps: $(R?.inputConfiguration)
+				}),
+				U && /* @__PURE__ */ f(S, {
+					label: k.label,
+					children: [/* @__PURE__ */ d(m, {
+						className: "prompt",
+						markup: e.rationale || "",
+						onChange: this.onRationaleChanged,
+						imageSupport: i,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(k?.inputConfiguration),
+						spellCheck: W,
+						maxImageWidth: p && p.rationale || X,
+						maxImageHeight: g && g.rationale || Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: P,
+						autoWidthToolbar: !0
+					}), q && /* @__PURE__ */ d(w, { children: q })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { O 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 e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/escape.js";
+//#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 };