@pie-element/inline-dropdown 11.0.5-esm.1 → 11.0.5-next.20261012010413

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

@@ -0,0 +1,269 @@
+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")(() => ({
+	display: "flex",
+	alignItems: "flex-start",
+	position: "relative",
+	background: s.white(),
+	borderBottom: `1px solid ${s.border()}`,
+	"&: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,
+		mathMlOptions: i.object,
+		baseInputConfiguration: i.object,
+		responseAreaInputConfiguration: i.object
+	};
+	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 - n.top, i = e.left - n.left;
+			this.setState({ toolbarStyle: {
+				position: "absolute",
+				top: `${r + e.height + 25}px`,
+				left: `${i}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 });
+	};
+	finishEditing = () => {
+		let e = this.editorRef.getHTML() || "";
+		this.onDone(e), this.preventDone = !0;
+	};
+	onKeyDown = (e) => e.key === "Enter" ? (this.finishEditing(), !0) : !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: u, toolbarStyle: d, editedChoiceIndex: m } = this.state;
+		return d ? /* @__PURE__ */ l(w, {
+			"data-inline-dropdown-toolbar": "",
+			style: {
+				...d,
+				backgroundColor: s.dropdownBackground(),
+				zIndex: 999
+			},
+			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: u,
+				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: () => m >= 0 ? this.finishEditing() : this.onAddChoice(),
+				size: "small",
+				"aria-label": "Add",
+				children: c(m >= 0 ? p : 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,65 @@
+import React from 'react';
+import type { DeleteDone, ImageHandler, SoundHandler } from '@pie-element/shared-configure-events';
+import type { InlineDropdownValidationErrors } from '../controller/index.js';
+import type { Choice, Choices, InlineDropdownConfiguration, InlineDropdownModel } from '../types.js';
+/** The model the author edits; the host sets `errors` from the controller's `validate()`. */
+export type AuthorModel = Partial<InlineDropdownModel> & {
+    choices: Choices;
+    markup: string;
+    slateMarkup: string;
+    errors?: InlineDropdownValidationErrors;
+};
+type MediaSupport<Handler> = {
+    add: (handler: Handler) => void;
+    delete: (src: string, done: DeleteDone) => void;
+};
+export type MainProps = {
+    model: AuthorModel;
+    configuration: InlineDropdownConfiguration;
+    disableSidePanel?: boolean;
+    onModelChanged: (model: Partial<AuthorModel>, reset?: boolean) => void;
+    onConfigurationChanged: (configuration: InlineDropdownConfiguration, reset?: boolean) => void;
+    imageSupport?: MediaSupport<ImageHandler>;
+    uploadSoundSupport?: MediaSupport<SoundHandler>;
+};
+type Warning = {
+    open: boolean;
+    text?: string;
+    onClose?: () => void;
+    onConfirm?: () => void;
+};
+type State = {
+    warning: Warning;
+    /** The choices of each response area as the toolbar edits them; set on mount */
+    respAreaChoices?: Choices;
+};
+/** A response area node in the template editor */
+type ResponseAreaNode = {
+    attrs: {
+        index: string;
+    };
+};
+/** The template editor; it keeps a response area's toolbar open while this holds the area's index */
+type TemplateEditor = {
+    _holdInlineDropdownToolbarIndex?: string;
+};
+export declare class Main extends React.Component<MainProps, State> {
+    state: State;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nProps: MainProps): void;
+    componentDidUpdate(): void;
+    onModelChange: (newVal: Partial<AuthorModel>) => void;
+    onPromptChanged: (prompt: string) => void;
+    onRationaleChanged: (rationale: string) => void;
+    onChoiceRationaleChanged: (index: string, choice: Choice) => void;
+    onTeacherInstructionsChanged: (teacherInstructions: string) => void;
+    onMarkupChanged: (slateMarkup: string) => void;
+    onCheck: (confirmCallback: () => void, cancelCallback: () => void) => void;
+    validateResponseAreaClose: (node: ResponseAreaNode, pos: number, editor: TemplateEditor, closeToolbar: () => void, onCancel: () => void) => void;
+    onChange: (markup: string) => void;
+    onAddChoice: (index: string, label: string, choiceIndex: number) => void;
+    onRemoveChoice: (respIndex: string, index: number) => void;
+    onSelectChoice: (respIndex: string, selectedIndex: number) => void;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/author/main.js

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

package/dist/author/markupUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const removeUnwantedCharacters: (markup: any) => any;
+export declare const createElementFromHTML: (htmlString: any) => HTMLDivElement;
+export declare const processMarkup: (markup: any) => string;
+export declare const createSlateMarkup: (markup: any, choices: any) => any;