@pie-element/inline-dropdown 10.1.1 → 10.1.2-next.1

package/dist/author/inline-dropdown-toolbar.js

@@ -0,0 +1,268 @@
+import { getPluginProps as e } from "./utils.js";
+import t from "react";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import r from "react-dom";
+import i from "prop-types";
+import { isEmpty as a, isEqual as o } from "@pie-element/shared-lodash";
+import { color as s } from "@pie-lib/render-ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u } from "@mui/material/styles";
+import d from "@pie-lib/editable-html-tip-tap";
+import f from "@mui/icons-material/Add";
+import p from "@mui/icons-material/Check";
+import m from "@mui/icons-material/Close";
+import h from "@mui/icons-material/Edit";
+import g from "@mui/material/IconButton";
+//#region src/author/inline-dropdown-toolbar.tsx
+var _ = u("div")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "flex-start",
+	position: "relative",
+	background: e.palette.common.white,
+	borderBottom: `1px solid ${e.palette.grey[400]}`,
+	"&:last-child": { borderRadius: "0 0 4px 4px" }
+})), v = u("div")(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "center",
+	color: e.palette.common.white,
+	fontSize: e.typography.fontSize,
+	fontStyle: "normal",
+	position: "absolute",
+	transform: "translate(0, -50%)",
+	backgroundColor: s.correct(),
+	borderRadius: "50%",
+	top: e.spacing(2),
+	left: e.spacing(1),
+	zIndex: 3
+})), y = u("div")(({ theme: e, correct: t }) => ({
+	flex: 1,
+	padding: e.spacing(.75),
+	paddingLeft: e.spacing(3.5),
+	...t && { background: s.correctSecondary() },
+	"& p": { margin: 0 }
+})), b = u("div")(({ theme: e }) => ({
+	margin: e.spacing(.5),
+	display: "flex"
+})), x = u(g)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize,
+	padding: e.spacing(.5),
+	color: e.palette.common.black
+})), S = class extends t.Component {
+	static propTypes = {
+		correct: i.bool.isRequired,
+		onClick: i.func.isRequired,
+		onRemoveChoice: i.func.isRequired,
+		onEditChoice: i.func.isRequired,
+		value: i.string.isRequired
+	};
+	onRemoveClick = (e) => {
+		let { onRemoveChoice: t } = this.props;
+		e.preventDefault(), e.stopPropagation(), t();
+	};
+	onEditClick = (e) => {
+		let { onEditChoice: t } = this.props;
+		e.preventDefault(), e.stopPropagation(), t();
+	};
+	render() {
+		let { correct: e, onClick: t, value: n } = this.props;
+		return /* @__PURE__ */ l(_, { children: [
+			e && /* @__PURE__ */ c(v, {
+				onClick: t,
+				children: /* @__PURE__ */ c(p, { fontSize: "inherit" })
+			}),
+			/* @__PURE__ */ c(y, {
+				correct: e,
+				onClick: t,
+				dangerouslySetInnerHTML: { __html: n }
+			}),
+			/* @__PURE__ */ l(b, { children: [/* @__PURE__ */ c(x, {
+				onClick: this.onEditClick,
+				size: "small",
+				"aria-label": "Edit",
+				children: /* @__PURE__ */ c(h, { fontSize: "inherit" })
+			}), /* @__PURE__ */ c(x, {
+				onClick: this.onRemoveClick,
+				size: "small",
+				"aria-label": "Remove",
+				children: /* @__PURE__ */ c(m, { fontSize: "inherit" })
+			})] })
+		] });
+	}
+}, C = (e) => {
+	let t = document.createElement("div");
+	return t.innerHTML = (e || "").trim(), t;
+}, w = u("div")(({ theme: e }) => ({
+	boxShadow: e.shadows[2],
+	borderRadius: "4px",
+	width: "400px"
+})), T = u(d)(({ theme: e }) => ({
+	borderRadius: "4px",
+	backgroundColor: e.palette.common.white,
+	"& [data-slate-editor=\"true\"]": { minHeight: "initial !important" }
+})), E = u(g)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize + 2,
+	padding: e.spacing(.5),
+	color: e.palette.common.black,
+	position: "absolute",
+	top: "50%",
+	right: e.spacing(2),
+	transform: "translate(0, -50%)"
+})), D = u("div")({
+	display: "flex",
+	flexDirection: "column",
+	"& > div:last-child": { border: "none" }
+}), O = u("div")(({ theme: e }) => ({
+	padding: e.spacing(.5),
+	position: "relative"
+})), k = class extends t.Component {
+	static propTypes = {
+		node: i.object,
+		pos: i.number,
+		uploadSoundSupport: i.object,
+		onDone: i.func,
+		choices: i.array,
+		onAddChoice: i.func.isRequired,
+		editorCallback: i.func,
+		onRemoveChoice: i.func.isRequired,
+		onSelectChoice: i.func.isRequired,
+		onToolbarDone: i.func.isRequired,
+		editor: i.object,
+		spellCheck: i.bool
+	};
+	clickedInside = !1;
+	preventDone = !1;
+	state = {
+		respAreaMarkup: "",
+		editedChoiceIndex: -1
+	};
+	componentDidMount() {
+		let { editor: e } = this.props, t = e.view.nodeDOM(e.state.selection.from);
+		if (t?.nodeType === 1) {
+			let e = t.getBoundingClientRect(), n = t.closest(".tiptap").getBoundingClientRect(), r = e.top - e.height, i = e.left - n.left;
+			this.setState({ toolbarStyle: {
+				position: "absolute",
+				top: `${r + e.height + 40}px`,
+				left: `${i + 25}px`
+			} });
+		}
+	}
+	componentDidUpdate() {
+		n(r.findDOMNode(this));
+	}
+	componentWillUnmount() {
+		this.commitPendingEdit();
+	}
+	commitPendingEdit = () => {
+		let { editedChoiceIndex: e } = this.state;
+		e < 0 || !this.editorRef?.getHTML || (this.preventDone = !1, this.onDone(this.editorRef.getHTML() || ""));
+	};
+	onRespAreaChange = (e) => {
+		this.setState({ respAreaMarkup: e });
+	};
+	onAddChoice = () => {
+		let { editor: e } = this.props, { tr: t } = e.state;
+		t.isDone = !0, e.view.dispatch(t);
+	};
+	onDone = (e) => {
+		let { choices: t, node: n, editor: r, onAddChoice: i, onToolbarDone: o } = this.props, { editedChoiceIndex: s } = this.state, c = C(e).textContent.trim();
+		s >= 0 && t?.[s]?.correct && r.commands.updateAttributes("inline_dropdown", { value: e }), a(c) || (i(n.attrs.index, e, s), r.commands.refreshResponseArea()), this.setState({ editedChoiceIndex: -1 });
+	};
+	onSelectChoice = (e, t) => {
+		let { node: n, editor: r, onToolbarDone: i, onSelectChoice: a } = this.props;
+		r.commands.updateAttributes("inline_dropdown", { value: e }), a(t), r.commands.refreshResponseArea();
+	};
+	onRemoveChoice = (e, t) => {
+		let { node: n, editor: r, onToolbarDone: i, onRemoveChoice: a } = this.props;
+		o(e, n.attrs.value) && r.commands.updateAttributes("inline_dropdown", { value: null }), a(t), r.commands.refreshResponseArea();
+	};
+	onEditChoice = (e, t) => {
+		let { editedChoiceIndex: n } = this.state;
+		if (this.clickedInside = !0, this.preventDone = !0, n >= 0) {
+			let e = this.editorRef.getHTML() || "";
+			this.onDone(e);
+		}
+		this.onRespAreaChange(e), this.setState({ editedChoiceIndex: t });
+	};
+	onKeyDown = (e) => {
+		if (e.key === "Enter") {
+			let e = this.editorRef.getHTML() || "";
+			return this.onDone(e), this.preventDone = !0, !0;
+		}
+		return !1;
+	};
+	onBlur = () => {
+		if (this.clickedInside) {
+			this.clickedInside = !1;
+			return;
+		}
+		let { editedChoiceIndex: e } = this.state;
+		if (e >= 0) {
+			this.commitPendingEdit();
+			return;
+		}
+		this.onAddChoice();
+	};
+	onClickInside = () => {
+		this.clickedInside = !0;
+	};
+	render() {
+		let { choices: t, spellCheck: n, uploadSoundSupport: r, mathMlOptions: i = {}, baseInputConfiguration: a = {}, responseAreaInputConfiguration: o = {} } = this.props, { respAreaMarkup: s, toolbarStyle: u } = this.state;
+		return u ? /* @__PURE__ */ l(w, {
+			"data-inline-dropdown-toolbar": "",
+			style: {
+				...u,
+				backgroundColor: "#E0E1E6",
+				zIndex: 1
+			},
+			onMouseDown: this.onClickInside,
+			children: [/* @__PURE__ */ l(O, { children: [/* @__PURE__ */ c(T, {
+				editorRef: (e) => {
+					e && (this.editorRef = e, this.props.editorCallback?.(e));
+				},
+				autoFocus: !0,
+				autoSave: !0,
+				toolbarOpts: {
+					position: "top",
+					alwaysVisible: !1,
+					showDone: !1,
+					doneOn: "blur"
+				},
+				markup: s,
+				onKeyDown: this.onKeyDown,
+				languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+				onChange: (e) => {
+					this.preventDone || this.onRespAreaChange(e);
+				},
+				onDone: (e) => {
+					if (this.preventDone) {
+						this.preventDone = !1;
+						return;
+					}
+					this.onDone(e);
+				},
+				onBlur: (e) => {
+					let t = !!(e.relatedTarget && e.relatedTarget.closest(".insert-character-dialog")), n = !!(e.relatedTarget && e.relatedTarget.closest("[aria-label=\"Done\"]"));
+					e.relatedTarget && (this.preventDone = t || n, (t || n) && (this.clickedInside = !0)), this.onBlur();
+				},
+				placeholder: "Add Choice",
+				pluginProps: e(o?.inputConfiguration, a),
+				spellCheck: n,
+				uploadSoundSupport: r,
+				mathMlOptions: i
+			}), /* @__PURE__ */ c(E, {
+				onClick: () => this.onAddChoice(),
+				size: "small",
+				"aria-label": "Add",
+				children: /* @__PURE__ */ c(f, { fontSize: "inherit" })
+			})] }), t && /* @__PURE__ */ c(D, { children: t.map(({ label: e, correct: t }, n) => /* @__PURE__ */ c(S, {
+				onClick: () => this.onSelectChoice(e, n),
+				onRemoveChoice: () => this.onRemoveChoice(e, n),
+				onEditChoice: () => this.onEditChoice(e, n),
+				value: e,
+				correct: t
+			}, n)) })]
+		}) : null;
+	}
+};
+//#endregion
+export { k as default };

package/dist/author/main.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/configure/src/main.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 Main extends React.Component {
+    static propTypes: {
+        configuration: PropTypes.Validator<object>;
+        model: PropTypes.Validator<object>;
+        disableSidePanel: PropTypes.Requireable<boolean>;
+        onModelChanged: PropTypes.Validator<(...args: any[]) => any>;
+        onConfigurationChanged: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+    };
+    state: {
+        warning: {
+            open: boolean;
+        };
+    };
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nProps: any): void;
+    componentDidUpdate(): void;
+    onModelChange: any;
+    onPromptChanged: any;
+    onRationaleChanged: any;
+    onChoiceRationaleChanged: any;
+    onTeacherInstructionsChanged: any;
+    onMarkupChanged: any;
+    onCheck: any;
+    validateResponseAreaClose: any;
+    onChange: any;
+    onAddChoice: any;
+    onRemoveChoice: any;
+    onSelectChoice: any;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/author/main.js

@@ -0,0 +1,379 @@
+import { generateValidationMessage as e } from "./utils.js";
+import t from "./inline-dropdown-toolbar.js";
+import n from "./response-area.js";
+import r from "react";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+import a from "react-dom";
+import o from "prop-types";
+import { cloneDeep as s, isEmpty as c, isEqual as l, isUndefined as u, max as d, reduce as f } from "@pie-element/shared-lodash";
+import { color as p } from "@pie-lib/render-ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { styled as g } from "@mui/material/styles";
+import _, { ALL_PLUGINS as v, deleteInlineDropdownByIndex as y } from "@pie-lib/editable-html-tip-tap";
+import { AlertDialog as ee, InputContainer as b, layout as te, settings as x } from "@pie-lib/config-ui";
+import S from "@mui/material/Tooltip";
+import C from "@mui/material/Typography";
+import w from "@mui/material/Accordion";
+import ne from "@mui/material/AccordionSummary";
+import T from "@mui/material/AccordionDetails";
+import E from "@mui/icons-material/ExpandMore";
+import re from "@mui/icons-material/Info";
+//#region src/author/main.tsx
+var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), oe = g(b)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(.5),
+	marginBottom: e.spacing(2)
+})), k = g(C)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize + 2,
+	marginRight: e.spacing(1)
+})), se = g("span")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "center",
+	whiteSpace: "break-spaces",
+	color: p.disabled(),
+	padding: 0,
+	fontSize: e.typography.fontSize - 2,
+	lineHeight: 1
+})), A = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), j = g(T)({
+	display: "block",
+	paddingTop: 0,
+	paddingBottom: 0
+}), M = g("div")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "center",
+	marginBottom: e.spacing(1)
+})), N = g(S)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), P = g("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), F = (e) => {
+	let t = document.createElement("div");
+	return t.innerHTML = (e || "").trim(), t;
+}, I = class extends r.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.shape({
+			add: o.func.isRequired,
+			delete: o.func.isRequired
+		})
+	};
+	state = { warning: { open: !1 } };
+	componentDidMount() {
+		let { model: { choices: e } } = this.props;
+		this.setState({ respAreaChoices: s(e) });
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let t = {};
+		(!l(e.model.choices, this.props.model.choices) || !l(e.model.choices, this.state.respAreaChoices)) && (t.respAreaChoices = s(e.model.choices)), c(t) || this.setState(t);
+	}
+	componentDidUpdate() {
+		i(a.findDOMNode(this));
+	}
+	onModelChange = (e) => {
+		this.props.onModelChanged({
+			...this.props.model,
+			...e
+		});
+	};
+	onPromptChanged = (e) => {
+		this.onModelChange({ prompt: e });
+	};
+	onRationaleChanged = (e) => {
+		this.onModelChange({ rationale: e });
+	};
+	onChoiceRationaleChanged = (e, t) => {
+		let { model: n } = this.props, r = n.choices && n.choices[e] && n.choices[e].findIndex((e) => e.label === t.label && e.value === t.value);
+		n.choices[e] && n.choices[e].splice(r, 1, t), this.onModelChange(n);
+	};
+	onTeacherInstructionsChanged = (e) => {
+		this.onModelChange({ teacherInstructions: e });
+	};
+	onMarkupChanged = (e) => {
+		this.onModelChange({ slateMarkup: e });
+	};
+	onCheck = (e, t) => {
+		this.setState({ warning: {
+			open: !0,
+			text: "Response areas with under 2 options or with no correct answers will be discarded.",
+			onClose: () => {
+				this.setState({ warning: { open: !1 } }, t);
+			},
+			onConfirm: () => {
+				this.setState({ warning: { open: !1 } }, e);
+			}
+		} });
+	};
+	validateResponseAreaClose = (e, t, n, r, i) => {
+		let { respAreaChoices: a } = this.state, o = e.attrs.index, s = a[o] || [];
+		if (!(s.length < 2 || !s.find((e) => e.correct))) {
+			r();
+			return;
+		}
+		n._holdInlineDropdownToolbarIndex = o, this.onCheck(() => {
+			delete n._holdInlineDropdownToolbarIndex, y(n, o, t), r();
+		}, i);
+	};
+	onChange = (e) => {
+		let { respAreaChoices: t } = this.state, n = F(e), r = n.querySelectorAll("[data-type=\"inline_dropdown\"]"), i = {};
+		r.forEach((e) => {
+			i[e.dataset.index] = e.dataset.value || "";
+		});
+		let a = f(t, (e, n, r) => (u(i[r]) || (e[r] = t[r]), e), {}), o = {};
+		r.forEach((e, t) => {
+			let n = a[e.dataset.index];
+			n && (o[t] = n), e.dataset.index = t;
+		}), this.onModelChange({
+			choices: s(o),
+			slateMarkup: n.innerHTML
+		});
+	};
+	onAddChoice = (e, t, n) => {
+		let { respAreaChoices: r } = this.state, { maxResponseAreaChoices: i } = this.props.configuration, a = (e) => this.setState({ warning: {
+			open: !0,
+			text: e,
+			onClose: void 0,
+			onConfirm: () => {
+				this.setState({ warning: { open: !1 } });
+			}
+		} });
+		if (r[e] && r[e].length >= i) {
+			a(`There are only ${i} answers allowed per choice.`);
+			return;
+		}
+		if (r[e] || (r[e] = []), (r[e] || []).find((e, r) => e.label === t && r !== n)) {
+			a("Duplicate answers are not allowed.");
+			return;
+		}
+		if (n >= 0 && r[e]?.[n]) r[e][n].label = t;
+		else {
+			let n = r[e] && d(r[e].map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
+			r[e].push({
+				label: t,
+				value: `${n + 1}`,
+				correct: !1
+			});
+		}
+		this.onModelChange({ choices: s(r) });
+	};
+	onRemoveChoice = (e, t) => {
+		let { respAreaChoices: n } = this.state;
+		n[e].splice(t, 1), this.onModelChange({ choices: s(n) });
+	};
+	onSelectChoice = (e, t) => {
+		let { respAreaChoices: n } = this.state;
+		n[e] = n[e].map((e, n) => ({
+			...e,
+			correct: n === t
+		})), this.onModelChange({ choices: s(n) });
+	};
+	render() {
+		let { warning: i } = this.state, { model: a, configuration: o, onConfigurationChanged: s, imageSupport: c, uploadSoundSupport: l } = this.props, { baseInputConfiguration: u = {}, choiceRationale: d = {}, contentDimensions: f = {}, lockChoiceOrder: p = {}, maxResponseAreas: g, maxImageWidth: y = {}, maxImageHeight: b = {}, partialScoring: x = {}, prompt: S = {}, rationale: C = {}, settingsPanelDisabled: T, spellCheck: F = {}, teacherInstructions: I = {}, template: ce = {}, withRubric: L = {}, mathMlOptions: R = {}, language: z = {}, languageChoices: B = {}, responseAreaInputConfiguration: V = {} } = o || {}, { choiceRationaleEnabled: H, choices: U, errors: W, extraCSSRules: le, promptEnabled: ue, rationaleEnabled: de, spellCheckEnabled: G, teacherInstructionsEnabled: fe, toolbarEditorPosition: pe } = a || {}, { prompt: K, rationale: q, responseAreasError: J, responseAreaChoicesError: me, teacherInstructions: Y } = W || {}, X = y && y.prompt, Z = b && b.prompt, he = () => (Object.keys(U) || []).map((e, t) => /* @__PURE__ */ m(A, { children: /* @__PURE__ */ h(w, {
+			slotProps: { transition: { timeout: {
+				enter: 225,
+				exit: 195
+			} } },
+			children: [/* @__PURE__ */ m(ne, {
+				expandIcon: /* @__PURE__ */ m(E, {}),
+				children: /* @__PURE__ */ m(k, {
+					component: "div",
+					children: `Rationale for response area #${t + 1}`
+				})
+			}), /* @__PURE__ */ m(j, { children: (U[e] || []).map((t) => /* @__PURE__ */ h(r.Fragment, { children: [/* @__PURE__ */ m(se, { dangerouslySetInnerHTML: { __html: `${C.label} for ${t.label} (${t.correct ? "correct" : "incorrect"})` } }), /* @__PURE__ */ m(oe, { children: /* @__PURE__ */ m(_, {
+				markup: t.rationale || "",
+				spellCheck: G,
+				pluginProps: $(C?.inputConfiguration),
+				onChange: (n) => this.onChoiceRationaleChanged(e, {
+					...t,
+					rationale: n
+				}),
+				imageSupport: c,
+				maxImageWidth: y && y.rationale || X,
+				maxImageHeight: b && b.rationale || Z,
+				uploadSoundSupport: l,
+				mathMlOptions: R
+			}) })] }, t.label)) })]
+		}) }, e)), Q = { position: pe === "top" ? "top" : "bottom" }, ge = e(o), _e = {
+			partialScoring: x.settings && D(x.label),
+			lockChoiceOrder: p.settings && D(p.label),
+			"language.enabled": z.settings && D(z.label, !0),
+			language: z.settings && z.enabled && ae(B.label, B.options)
+		}, ve = {
+			teacherInstructionsEnabled: I.settings && D(I.label),
+			rationaleEnabled: C.settings && D(C.label),
+			choiceRationaleEnabled: d.settings && D(d.label),
+			promptEnabled: S.settings && D(S.label),
+			spellCheckEnabled: F.settings && D(F.label),
+			rubricEnabled: L?.settings && D(L?.label)
+		}, $ = (e = {}) => ({
+			...u,
+			...e
+		});
+		return /* @__PURE__ */ h(te.ConfigLayout, {
+			extraCSSRules: {
+				names: ["red", "blue"],
+				rules: "\n      .red {\n        color: red !important;\n      }\n\n      .blue {\n        color: blue !important;\n      }\n    "
+			},
+			dimensions: f,
+			hideSettings: T,
+			settings: /* @__PURE__ */ m(ie, {
+				model: a,
+				configuration: o,
+				onChangeModel: (e) => this.onModelChange(e),
+				onChangeConfiguration: (e) => s(e, !0),
+				groups: {
+					Settings: _e,
+					Properties: ve
+				}
+			}),
+			children: [
+				fe && /* @__PURE__ */ h(O, {
+					label: I.label,
+					children: [/* @__PURE__ */ m(_, {
+						markup: a.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChanged,
+						imageSupport: c,
+						nonEmpty: !1,
+						error: Y,
+						toolbarOpts: Q,
+						pluginProps: $(I?.inputConfiguration),
+						spellCheck: G,
+						maxImageWidth: y && y.teacherInstructions || X,
+						maxImageHeight: b && b.teacherInstructions || Z,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), Y && /* @__PURE__ */ m(P, { children: Y })]
+				}),
+				ue && /* @__PURE__ */ h(O, {
+					label: S.label,
+					children: [/* @__PURE__ */ m(_, {
+						markup: a.prompt,
+						onChange: this.onPromptChanged,
+						imageSupport: c,
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: K,
+						toolbarOpts: Q,
+						pluginProps: $(S?.inputConfiguration),
+						spellCheck: G,
+						maxImageWidth: X,
+						maxImageHeight: Z,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), K && /* @__PURE__ */ m(P, { children: K })]
+				}),
+				/* @__PURE__ */ h(M, { children: [/* @__PURE__ */ m(k, {
+					component: "div",
+					children: "Define Template, Choices, and Correct Responses"
+				}), /* @__PURE__ */ m(N, {
+					disableFocusListener: !0,
+					disableTouchListener: !0,
+					placement: "right",
+					title: ge,
+					children: /* @__PURE__ */ m(re, {
+						fontSize: "small",
+						color: "primary"
+					})
+				})] }),
+				/* @__PURE__ */ m(n, {
+					responseAreasError: J,
+					responseAreaChoicesError: me,
+					editableHtmlProps: {
+						pluginProps: $(ce?.inputConfiguration),
+						activePlugins: v,
+						toolbarOpts: { position: "top" },
+						extraCSSRules: {
+							names: ["red", "blue"],
+							rules: "\n      .red {\n        color: red !important;\n      }\n\n      .blue {\n        color: blue !important;\n      }\n    "
+						},
+						responseAreaProps: {
+							type: "inline-dropdown",
+							options: { duplicates: !0 },
+							maxResponseAreas: g,
+							onToolbarCloseRequest: ([e, t], n, r, i) => {
+								this.validateResponseAreaClose(e, t, n, r, i);
+							},
+							respAreaToolbar: (e, n, r) => {
+								let [i, a] = e, { respAreaChoices: o } = this.state;
+								return (e) => /* @__PURE__ */ m(t, {
+									...e,
+									onAddChoice: this.onAddChoice,
+									onRemoveChoice: (e) => this.onRemoveChoice(i.attrs.index, e),
+									onSelectChoice: (e) => this.onSelectChoice(i.attrs.index, e),
+									node: i,
+									pos: a,
+									editor: n,
+									onToolbarDone: r,
+									choices: o[i.attrs.index],
+									spellCheck: G,
+									uploadSoundSupport: l,
+									mathMlOptions: R,
+									baseInputConfiguration: u,
+									responseAreaInputConfiguration: V
+								});
+							}
+						},
+						spellCheck: G,
+						markup: a.slateMarkup || "",
+						onChange: this.onChange,
+						imageSupport: c,
+						disableImageAlignmentButtons: !0,
+						disabled: !1,
+						highlightShape: !1,
+						error: J,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}
+				}),
+				H && he(),
+				de && /* @__PURE__ */ h(O, {
+					label: C.label,
+					children: [/* @__PURE__ */ m(_, {
+						markup: a.rationale || "",
+						onChange: this.onRationaleChanged,
+						imageSupport: c,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(C?.inputConfiguration),
+						spellCheck: G,
+						maxImageWidth: y && y.rationale || X,
+						maxImageHeight: b && b.rationale || Z,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), q && /* @__PURE__ */ m(P, { children: q })]
+				}),
+				/* @__PURE__ */ m(ee, {
+					open: i.open,
+					title: "Warning",
+					text: i.text,
+					onClose: i.onClose,
+					onConfirm: i.onConfirm,
+					disableAutoFocus: !0,
+					disableEnforceFocus: !0,
+					disableRestoreFocus: !0
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { I as default };