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

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

@@ -0,0 +1,269 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import { getPluginProps as n } from "./utils.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 { 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 r.Component {
+	static propTypes = {
+		correct: o.bool.isRequired,
+		onClick: o.func.isRequired,
+		onRemoveChoice: o.func.isRequired,
+		onEditChoice: o.func.isRequired,
+		value: o.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 r.Component {
+	static propTypes = {
+		node: o.object,
+		pos: o.number,
+		uploadSoundSupport: o.object,
+		onDone: o.func,
+		choices: o.array,
+		onAddChoice: o.func.isRequired,
+		editorCallback: o.func,
+		onRemoveChoice: o.func.isRequired,
+		onSelectChoice: o.func.isRequired,
+		onToolbarDone: o.func.isRequired,
+		editor: o.object,
+		spellCheck: o.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() {
+		i(a.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 = (t) => {
+		let { choices: n, node: r, editor: i, onAddChoice: a, onToolbarDone: o } = this.props, { editedChoiceIndex: s } = this.state, c = C(t).textContent.trim();
+		s >= 0 && n?.[s]?.correct && i.commands.updateAttributes("inline_dropdown", { value: t }), e(c) || (a(r.attrs.index, t, s), i.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, n) => {
+		let { node: r, editor: i, onToolbarDone: a, onRemoveChoice: o } = this.props;
+		t(e, r.attrs.value) && i.commands.updateAttributes("inline_dropdown", { value: null }), o(n), i.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: e, spellCheck: t, 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: n(o?.inputConfiguration, a),
+				spellCheck: t,
+				uploadSoundSupport: r,
+				mathMlOptions: i
+			}), /* @__PURE__ */ c(E, {
+				onClick: () => this.onAddChoice(),
+				size: "small",
+				"aria-label": "Add",
+				children: /* @__PURE__ */ c(f, { fontSize: "inherit" })
+			})] }), e && /* @__PURE__ */ c(D, { children: e.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,384 @@
+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/isEqual.js";
+import r from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isUndefined.js";
+import i from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/max.js";
+import a from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/reduce.js";
+import { generateValidationMessage as o } from "./utils.js";
+import s from "./inline-dropdown-toolbar.js";
+import c from "./response-area.js";
+import l from "react";
+import { renderMath as u } from "@pie-element/shared-math-rendering-mathjax";
+import d from "react-dom";
+import f from "prop-types";
+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 l.Component {
+	static propTypes = {
+		configuration: f.object.isRequired,
+		model: f.object.isRequired,
+		disableSidePanel: f.bool,
+		onModelChanged: f.func.isRequired,
+		onConfigurationChanged: f.func.isRequired,
+		imageSupport: f.shape({
+			add: f.func.isRequired,
+			delete: f.func.isRequired
+		}),
+		uploadSoundSupport: f.shape({
+			add: f.func.isRequired,
+			delete: f.func.isRequired
+		})
+	};
+	state = { warning: { open: !1 } };
+	componentDidMount() {
+		let { model: { choices: t } } = this.props;
+		this.setState({ respAreaChoices: e(t) });
+	}
+	UNSAFE_componentWillReceiveProps(r) {
+		let i = {};
+		(!n(r.model.choices, this.props.model.choices) || !n(r.model.choices, this.state.respAreaChoices)) && (i.respAreaChoices = e(r.model.choices)), t(i) || this.setState(i);
+	}
+	componentDidUpdate() {
+		u(d.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 = (t) => {
+		let { respAreaChoices: n } = this.state, i = F(t), o = i.querySelectorAll("[data-type=\"inline_dropdown\"]"), s = {};
+		o.forEach((e) => {
+			s[e.dataset.index] = e.dataset.value || "";
+		});
+		let c = a(n, (e, t, i) => (r(s[i]) || (e[i] = n[i]), e), {}), l = {};
+		o.forEach((e, t) => {
+			let n = c[e.dataset.index];
+			n && (l[t] = n), e.dataset.index = t;
+		}), this.onModelChange({
+			choices: e(l),
+			slateMarkup: i.innerHTML
+		});
+	};
+	onAddChoice = (t, n, r) => {
+		let { respAreaChoices: a } = this.state, { maxResponseAreaChoices: o } = this.props.configuration, s = (e) => this.setState({ warning: {
+			open: !0,
+			text: e,
+			onClose: void 0,
+			onConfirm: () => {
+				this.setState({ warning: { open: !1 } });
+			}
+		} });
+		if (a[t] && a[t].length >= o) {
+			s(`There are only ${o} answers allowed per choice.`);
+			return;
+		}
+		if (a[t] || (a[t] = []), (a[t] || []).find((e, t) => e.label === n && t !== r)) {
+			s("Duplicate answers are not allowed.");
+			return;
+		}
+		if (r >= 0 && a[t]?.[r]) a[t][r].label = n;
+		else {
+			let e = a[t] && i(a[t].map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
+			a[t].push({
+				label: n,
+				value: `${e + 1}`,
+				correct: !1
+			});
+		}
+		this.onModelChange({ choices: e(a) });
+	};
+	onRemoveChoice = (t, n) => {
+		let { respAreaChoices: r } = this.state;
+		r[t].splice(n, 1), this.onModelChange({ choices: e(r) });
+	};
+	onSelectChoice = (t, n) => {
+		let { respAreaChoices: r } = this.state;
+		r[t] = r[t].map((e, t) => ({
+			...e,
+			correct: t === n
+		})), this.onModelChange({ choices: e(r) });
+	};
+	render() {
+		let { warning: e } = this.state, { model: t, configuration: n, onConfigurationChanged: r, imageSupport: i, uploadSoundSupport: a } = 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 = {} } = n || {}, { choiceRationaleEnabled: H, choices: U, errors: W, extraCSSRules: le, promptEnabled: ue, rationaleEnabled: de, spellCheckEnabled: G, teacherInstructionsEnabled: fe, toolbarEditorPosition: pe } = t || {}, { 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(l.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: i,
+				maxImageWidth: y && y.rationale || X,
+				maxImageHeight: b && b.rationale || Z,
+				uploadSoundSupport: a,
+				mathMlOptions: R
+			}) })] }, t.label)) })]
+		}) }, e)), Q = { position: pe === "top" ? "top" : "bottom" }, ge = o(n), _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: t,
+				configuration: n,
+				onChangeModel: (e) => this.onModelChange(e),
+				onChangeConfiguration: (e) => r(e, !0),
+				groups: {
+					Settings: _e,
+					Properties: ve
+				}
+			}),
+			children: [
+				fe && /* @__PURE__ */ h(O, {
+					label: I.label,
+					children: [/* @__PURE__ */ m(_, {
+						markup: t.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChanged,
+						imageSupport: i,
+						nonEmpty: !1,
+						error: Y,
+						toolbarOpts: Q,
+						pluginProps: $(I?.inputConfiguration),
+						spellCheck: G,
+						maxImageWidth: y && y.teacherInstructions || X,
+						maxImageHeight: b && b.teacherInstructions || Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), Y && /* @__PURE__ */ m(P, { children: Y })]
+				}),
+				ue && /* @__PURE__ */ h(O, {
+					label: S.label,
+					children: [/* @__PURE__ */ m(_, {
+						markup: t.prompt,
+						onChange: this.onPromptChanged,
+						imageSupport: i,
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: K,
+						toolbarOpts: Q,
+						pluginProps: $(S?.inputConfiguration),
+						spellCheck: G,
+						maxImageWidth: X,
+						maxImageHeight: Z,
+						uploadSoundSupport: a,
+						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(c, {
+					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, t, n) => {
+								let [r, i] = e, { respAreaChoices: o } = this.state;
+								return (e) => /* @__PURE__ */ m(s, {
+									...e,
+									onAddChoice: this.onAddChoice,
+									onRemoveChoice: (e) => this.onRemoveChoice(r.attrs.index, e),
+									onSelectChoice: (e) => this.onSelectChoice(r.attrs.index, e),
+									node: r,
+									pos: i,
+									editor: t,
+									onToolbarDone: n,
+									choices: o[r.attrs.index],
+									spellCheck: G,
+									uploadSoundSupport: a,
+									mathMlOptions: R,
+									baseInputConfiguration: u,
+									responseAreaInputConfiguration: V
+								});
+							}
+						},
+						spellCheck: G,
+						markup: t.slateMarkup || "",
+						onChange: this.onChange,
+						imageSupport: i,
+						disableImageAlignmentButtons: !0,
+						disabled: !1,
+						highlightShape: !1,
+						error: J,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}
+				}),
+				H && he(),
+				de && /* @__PURE__ */ h(O, {
+					label: C.label,
+					children: [/* @__PURE__ */ m(_, {
+						markup: t.rationale || "",
+						onChange: this.onRationaleChanged,
+						imageSupport: i,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(C?.inputConfiguration),
+						spellCheck: G,
+						maxImageWidth: y && y.rationale || X,
+						maxImageHeight: b && b.rationale || Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), q && /* @__PURE__ */ m(P, { children: q })]
+				}),
+				/* @__PURE__ */ m(ee, {
+					open: e.open,
+					title: "Warning",
+					text: e.text,
+					onClose: e.onClose,
+					onConfirm: e.onConfirm,
+					disableAutoFocus: !0,
+					disableEnforceFocus: !0,
+					disableRestoreFocus: !0
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { I as default };