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

package/dist/author/main.js

@@ -1,379 +0,0 @@
-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 };

package/dist/author/markupUtils.d.ts

@@ -1,12 +0,0 @@
-/**
- * @synced-from pie-elements/packages/inline-dropdown/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 createElementFromHTML: (htmlString: any) => HTMLDivElement;
-export declare const processMarkup: (markup: any) => string;
-export declare const createSlateMarkup: (markup: any, choices: any) => any;

package/dist/author/markupUtils.js

@@ -1,23 +0,0 @@
-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));
-	return t.querySelectorAll("[data-type=\"inline_dropdown\"]").forEach((e) => {
-		e.replaceWith(`{{${e.dataset.index}}}`);
-	}), t.innerHTML;
-}, s = /\{\{(\d+)\}\}/g, c = (t, n) => {
-	let r = i(t), a = (t) => {
-		let r = n[t] && n[t].find((e) => e.correct);
-		return (!r || !r.value) && (r = {
-			id: "",
-			value: "",
-			label: ""
-		}), `<span data-type="inline_dropdown" data-index="${t}" data-value="${e(r.label)}"></span>`;
-	};
-	return r.replace(s, (e, t) => a(t));
-};
-//#endregion
-export { c as createSlateMarkup, o as processMarkup };

package/dist/author/response-area.d.ts

@@ -1,20 +0,0 @@
-/**
- * @synced-from pie-elements/packages/inline-dropdown/configure/src/response-area.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';
-declare class ResponseAreaComponent extends React.Component {
-    static propTypes: {
-        editableHtmlProps: PropTypes.Validator<object>;
-        responseAreasError: PropTypes.Requireable<string>;
-        responseAreaChoicesError: PropTypes.Requireable<string>;
-    };
-    componentDidMount(): void;
-    render(): React.JSX.Element;
-}
-export default ResponseAreaComponent;

package/dist/author/response-area.js

@@ -1,32 +0,0 @@
-import e from "react";
-import { renderMath as t } from "@pie-element/shared-math-rendering-mathjax";
-import n from "react-dom";
-import r from "prop-types";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { styled as o } from "@mui/material/styles";
-import s from "@pie-lib/editable-html-tip-tap";
-//#region src/author/response-area.tsx
-var c = o("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2.5) })), l = o("div")(({ theme: e }) => ({
-	fontSize: e.typography.fontSize - 2,
-	color: e.palette.error.main,
-	paddingTop: e.spacing(1)
-})), u = class extends e.Component {
-	static propTypes = {
-		editableHtmlProps: r.object.isRequired,
-		responseAreasError: r.string,
-		responseAreaChoicesError: r.string
-	};
-	componentDidMount() {
-		t(n.findDOMNode(this));
-	}
-	render() {
-		let { editableHtmlProps: e, responseAreasError: t, responseAreaChoicesError: n } = this.props;
-		return /* @__PURE__ */ a(c, { children: [
-			/* @__PURE__ */ i(s, { ...e }),
-			t && /* @__PURE__ */ i(l, { children: t }),
-			n && /* @__PURE__ */ i(l, { children: n })
-		] });
-	}
-};
-//#endregion
-export { u as default };

package/dist/author/utils.d.ts

@@ -1,10 +0,0 @@
-/**
- * @synced-from pie-elements/packages/inline-dropdown/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;
-export declare const getPluginProps: (props?: {}, baseInputConfiguration?: {}) => {};

package/dist/author/utils.js

@@ -1,10 +0,0 @@
-//#region src/author/utils.ts
-var e = (e) => {
-	let { maxResponseAreas: t, maxResponseAreaChoices: n } = e;
-	return "Validation requirements:" + ("\nThere should be at least 1 " + (t ? `and at most ${t} ` : "") + "response area" + (t ? "s" : "") + " defined." + (n ? `\nThere should be at most ${n} choices defined per response area.` : ""));
-}, t = (e = {}, t = {}) => ({
-	...t,
-	...e
-});
-//#endregion
-export { e as generateValidationMessage, t as getPluginProps };