@pie-element/drag-in-the-blank 10.1.2-next.2 → 10.1.2

package/dist/author/main.js

@@ -1,301 +0,0 @@
-import { createSlateMarkup as e } from "./markupUtils.js";
-import t from "./choice.js";
-import n from "./choices.js";
-import { generateValidationMessage as r } from "./utils.js";
-import i from "react";
-import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
-import * as o from "@pie-lib/render-ui";
-import { InputContainer as s } from "@pie-lib/render-ui";
-import c from "prop-types";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { styled as d } from "@mui/material/styles";
-import f, { ALL_PLUGINS as ee } from "@pie-lib/editable-html-tip-tap";
-import { layout as te, settings as p } from "@pie-lib/config-ui";
-import { DragProvider as m } from "@pie-lib/drag";
-import h from "@mui/material/Typography";
-import ne from "@mui/icons-material/Info";
-import g from "@mui/material/Tooltip";
-import { DragOverlay as re } from "@dnd-kit/core";
-//#region src/author/main.tsx
-function _(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function v(e, t) {
-	return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
-}
-var y = v(s, "InputContainer") || v(S.InputContainer, "InputContainer"), b = o, x = b.default, S = x && typeof x == "object" ? x : b, ie = class extends i.Component {
-	containerRef = i.createRef();
-	componentDidMount() {
-		setTimeout(() => {
-			this.containerRef.current && a(this.containerRef.current);
-		}, 0);
-	}
-	componentDidUpdate() {
-		setTimeout(() => {
-			this.containerRef.current && a(this.containerRef.current);
-		}, 0);
-	}
-	render() {
-		return /* @__PURE__ */ l("div", {
-			ref: this.containerRef,
-			children: this.props.children
-		});
-	}
-}, { dropdown: C, toggle: w, Panel: T } = p, E = d(y)(({ theme: e }) => ({
-	width: "100%",
-	paddingTop: e.spacing(2),
-	marginBottom: e.spacing(2)
-})), D = d("div")(({ theme: e }) => ({
-	minHeight: "235px",
-	paddingTop: e.spacing(1),
-	paddingBottom: e.spacing(2),
-	width: "100%",
-	"& [data-slate-editor=\"true\"]": { minHeight: "235px" }
-})), ae = d(h)(({ theme: e }) => ({ fontSize: e.typography.fontSize + 2 })), oe = d(g)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
-	fontSize: e.typography.fontSize - 2,
-	whiteSpace: "pre",
-	maxWidth: "500px"
-} })), O = d("div")(({ theme: e }) => ({
-	fontSize: e.typography.fontSize - 2,
-	color: e.palette.error.main,
-	paddingTop: e.spacing(1)
-})), k = d("div")({
-	display: "flex",
-	alignItems: "center"
-}), A = class extends i.Component {
-	static propTypes = {
-		configuration: c.object.isRequired,
-		model: c.object.isRequired,
-		disableSidePanel: c.bool,
-		onModelChanged: c.func.isRequired,
-		onConfigurationChanged: c.func.isRequired,
-		imageSupport: c.shape({
-			add: c.func.isRequired,
-			delete: c.func.isRequired
-		}),
-		uploadSoundSupport: c.object
-	};
-	state = { activeDragItem: null };
-	constructor(e) {
-		super(e), this.markupRef = i.createRef();
-	}
-	onModelChange = (e) => {
-		this.props.onModelChanged({
-			...this.props.model,
-			...e
-		});
-	};
-	onPromptChanged = (e) => {
-		this.props.onModelChanged({
-			...this.props.model,
-			prompt: e
-		});
-	};
-	onRationaleChanged = (e) => {
-		this.props.onModelChanged({
-			...this.props.model,
-			rationale: e
-		});
-	};
-	onTeacherInstructionsChanged = (e) => {
-		this.props.onModelChanged({
-			...this.props.model,
-			teacherInstructions: e
-		});
-	};
-	onMarkupChanged = (e) => {
-		this.props.onModelChanged({
-			...this.props.model,
-			slateMarkup: e
-		});
-	};
-	onResponsesChanged = (t) => {
-		let { model: { correctResponse: n, markup: r } } = this.props, i = e(r, t, n);
-		this.props.onModelChanged({
-			...this.props.model,
-			slateMarkup: i,
-			choices: t
-		});
-	};
-	render() {
-		let { model: e, configuration: i, onConfigurationChanged: a, imageSupport: o, uploadSoundSupport: s } = this.props, { addChoice: c = {}, baseInputConfiguration: d = {}, contentDimensions: p = {}, duplicates: h = {}, prompt: g = {}, partialScoring: _ = {}, lockChoiceOrder: v = {}, rationale: y = {}, teacherInstructions: b = {}, choicesPosition: x = {}, spellCheck: S = {}, settingsPanelDisabled: A, maxChoices: se, maxResponseAreas: ce, maxImageWidth: j = {}, maxImageHeight: M = {}, withRubric: N = {}, mathMlOptions: P = {}, language: F = {}, languageChoices: I = {}, maxLength: L = {} } = i || {}, { rationaleEnabled: R, promptEnabled: z, teacherInstructionsEnabled: B, spellCheckEnabled: V, toolbarEditorPosition: H, errors: U, extraCSSRules: W } = e || {}, { choicesError: le, correctResponseError: G, prompt: K, rationale: q, responseAreasError: J, teacherInstructions: Y } = U || {}, ue = r(i), X = j && j.prompt, Z = M && M.prompt, Q = { position: H === "top" ? "top" : "bottom" }, de = {
-			partialScoring: _.settings && w(_.label),
-			duplicates: h.settings && w(h.label),
-			lockChoiceOrder: v.settings && w(v.label),
-			choicesPosition: x.settings && C(x.label, [
-				"above",
-				"below",
-				"left",
-				"right"
-			]),
-			"language.enabled": F.settings && w(F.label, !0),
-			language: F.settings && F.enabled && C(I.label, I.options)
-		}, fe = {
-			teacherInstructionsEnabled: b.settings && w(b.label),
-			rationaleEnabled: y.settings && w(y.label),
-			spellCheckEnabled: S.settings && w(S.label),
-			promptEnabled: g.settings && w(g.label),
-			rubricEnabled: N?.settings && w(N?.label)
-		}, $ = (e) => Object.assign({ ...d }, e || {});
-		return /* @__PURE__ */ u(m, {
-			onDragEnd: ({ active: e, over: t }) => {
-				if (e && !t) {
-					let t = e.data.current;
-					if (t && t.type === "drag-in-the-blank-placed-choice" && this.markupRef.current) {
-						let n = this.markupRef.current.getBoundingClientRect(), r = e.rect.current.translated?.x || 0, i = e.rect.current.translated?.y || 0;
-						(r < n.left || r > n.right || i < n.top || i > n.bottom) && t.onRemove && typeof t.onRemove == "function" && t.onRemove(t);
-					}
-				}
-				if (!e || !t) {
-					this.setState({ activeDragItem: null });
-					return;
-				}
-				let n = e.data.current, r = t.data.current;
-				if (r && typeof r.onDrop == "function") {
-					r.onDrop(n, r);
-					return;
-				}
-				n && typeof n.onDrop == "function" && n.onDrop(n, r), this.setState({ activeDragItem: null });
-			},
-			onDragStart: (e) => {
-				let { active: t } = e;
-				t?.data?.current && this.setState({ activeDragItem: t.data.current });
-			},
-			children: [/* @__PURE__ */ u(te.ConfigLayout, {
-				extraCSSRules: W,
-				dimensions: p,
-				hideSettings: A,
-				settings: /* @__PURE__ */ l(T, {
-					model: e,
-					configuration: i,
-					onChangeModel: (e) => this.onModelChange(e),
-					onChangeConfiguration: (e) => a(e, !0),
-					groups: {
-						Settings: de,
-						Properties: fe
-					}
-				}),
-				children: [
-					B && /* @__PURE__ */ u(E, {
-						label: b.label,
-						children: [/* @__PURE__ */ l(f, {
-							markup: e.teacherInstructions || "",
-							onChange: this.onTeacherInstructionsChanged,
-							imageSupport: o,
-							nonEmpty: !1,
-							error: Y,
-							toolbarOpts: Q,
-							pluginProps: $(b?.inputConfiguration),
-							spellCheck: V,
-							maxImageWidth: j && j.teacherInstructions || X,
-							maxImageHeight: M && M.teacherInstructions || Z,
-							uploadSoundSupport: s,
-							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-							mathMlOptions: P
-						}), Y && /* @__PURE__ */ l(O, { children: Y })]
-					}),
-					z && /* @__PURE__ */ u(E, {
-						label: g.label,
-						children: [/* @__PURE__ */ l(f, {
-							markup: e.prompt,
-							onChange: this.onPromptChanged,
-							imageSupport: o,
-							nonEmpty: !1,
-							disableUnderline: !0,
-							error: K,
-							toolbarOpts: Q,
-							pluginProps: $(g?.inputConfiguration),
-							spellCheck: V,
-							maxImageWidth: X,
-							maxImageHeight: Z,
-							uploadSoundSupport: s,
-							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-							mathMlOptions: P
-						}), K && /* @__PURE__ */ l(O, { children: K })]
-					}),
-					/* @__PURE__ */ u(k, { children: [/* @__PURE__ */ l(ae, {
-						component: "div",
-						children: "Define Template, Choices, and Correct Responses"
-					}), /* @__PURE__ */ l(oe, {
-						disableFocusListener: !0,
-						disableTouchListener: !0,
-						placement: "right",
-						title: ue,
-						children: /* @__PURE__ */ l(ne, {
-							fontSize: "small",
-							color: "primary",
-							style: { marginLeft: "5px" }
-						})
-					})] }),
-					/* @__PURE__ */ l(D, {
-						ref: this.markupRef,
-						children: /* @__PURE__ */ l(f, {
-							activePlugins: ee,
-							responseAreaProps: {
-								type: "drag-in-the-blank",
-								options: { duplicates: e.duplicates },
-								maxResponseAreas: ce
-							},
-							pluginProps: $(),
-							markup: e.slateMarkup,
-							onChange: this.onMarkupChanged,
-							imageSupport: o,
-							disableImageAlignmentButtons: !0,
-							nonEmpty: !1,
-							disableUnderline: !0,
-							error: J || G,
-							toolbarOpts: Q,
-							spellCheck: V,
-							uploadSoundSupport: s,
-							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-							mathMlOptions: P
-						})
-					}),
-					J && /* @__PURE__ */ l(O, { children: J }),
-					G && /* @__PURE__ */ l(O, { children: G }),
-					/* @__PURE__ */ l(n, {
-						model: e,
-						imageSupport: o,
-						duplicates: e.duplicates,
-						error: le,
-						onChange: this.onResponsesChanged,
-						toolbarOpts: Q,
-						maxChoices: se,
-						uploadSoundSupport: s,
-						mathMlOptions: P,
-						pluginProps: $(c?.inputConfiguration),
-						maxImageWidth: j && j.choice || X,
-						maxImageHeight: M && M.choice || Z,
-						maxLength: L
-					}),
-					R && /* @__PURE__ */ u(E, {
-						label: y.label,
-						children: [/* @__PURE__ */ l(f, {
-							markup: e.rationale || "",
-							onChange: this.onRationaleChanged,
-							imageSupport: o,
-							error: q,
-							toolbarOpts: Q,
-							pluginProps: $(y?.inputConfiguration),
-							spellCheck: V,
-							maxImageWidth: j && j.rationale || X,
-							maxImageHeight: M && M.rationale || Z,
-							uploadSoundSupport: s,
-							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-							mathMlOptions: P
-						}), q && /* @__PURE__ */ l(O, { children: q })]
-					})
-				]
-			}), /* @__PURE__ */ l(re, { children: /* @__PURE__ */ l(ie, { children: (() => {
-				let { activeDragItem: e } = this.state, { model: n } = this.props;
-				if (!e) return null;
-				if ((e.type === "drag-in-the-blank-choice" || e.type === "drag-in-the-blank-placed-choice") && e.value) {
-					let r = n.choices?.find((t) => t.id === e.value.id);
-					return r ? /* @__PURE__ */ l(t, { choice: r }) : null;
-				}
-			})() }) })]
-		});
-	}
-};
-//#endregion
-export { A as default };

package/dist/author/markupUtils.d.ts

@@ -1,17 +0,0 @@
-/**
- * @synced-from pie-elements/packages/drag-in-the-blank/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 createElementFromHTML: (htmlString: any) => HTMLDivElement;
-export declare const removeUnwantedCharacters: (markup: any) => any;
-export declare const processMarkup: (markup: any) => {
-    markup: string;
-    choices: any[];
-    correctResponse: any;
-};
-export declare const createSlateMarkup: (markup: any, choices: any, correctResponse: any) => any;
-export declare const choiceIsEmpty: (choice: any) => boolean;

package/dist/author/markupUtils.js

@@ -1,38 +0,0 @@
-import { escape as e } from "@pie-element/shared-lodash";
-//#region src/author/markupUtils.tsx
-var t = (e) => {
-	let t = document.createElement("div");
-	return t.innerHTML = e.trim(), t;
-}, n = "imes|riangle|an|heta|herefore", r = "throot|parallel|cong|approx|eq|e|sim", i = RegExp(`(\\t(?!${n}))|(\\n(?!${r}))|(\\\\t(?!${n}))|(\\\\n(?!${r}))`, "g"), a = (e) => e.replace(i, "").replace(/\\"/g, "\"").replace(/\\\//g, "/"), o = (e) => {
-	let n = t(a(e)), r = [], i = 0;
-	return n.querySelectorAll("[data-type=\"drag_in_the_blank\"]").forEach((e) => {
-		let t = e.dataset.value && e.dataset.value.replace(/ /g, " ").trim();
-		t ||= "", r.push({
-			value: t,
-			id: e.dataset.id
-		}), e.replaceWith(`{{${i++}}}`);
-	}), {
-		markup: n.innerHTML,
-		choices: r,
-		correctResponse: r.reduce((e, t, n) => (e[n] = t.id !== void 0 && t.id || "", e), {})
-	};
-}, s = /\{\{(\d+)\}\}/g, c = (t, n, r) => {
-	let i = a(t), o = 0;
-	return i.replace(s, (t, i) => {
-		let a = r[i], s = n.find((e) => e.id === a);
-		return (!s || !s.value) && (s = {
-			id: "",
-			value: ""
-		}), `<span data-type="drag_in_the_blank" data-index="${o++}" data-id="${s.id}" data-value="${e(s.value)}"></span>`;
-	});
-}, l = (e) => {
-	if (e) {
-		let { value: n = "" } = e, r = t(n);
-		return Array.from(r.querySelectorAll("*")).forEach((e) => {
-			e.tagName !== "IMG" && e.childNodes.length === 0 && e.remove();
-		}), r.innerHTML.trim() === "";
-	}
-	return !1;
-};
-//#endregion
-export { l as choiceIsEmpty, c as createSlateMarkup, o as processMarkup };

package/dist/author/utils.d.ts

@@ -1,9 +0,0 @@
-/**
- * @synced-from pie-elements/packages/drag-in-the-blank/configure/utils.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-export declare const generateValidationMessage: (config: any) => string;

package/dist/author/utils.js

@@ -1,7 +0,0 @@
-//#region src/author/utils.ts
-var e = (e) => {
-	let { maxResponseAreas: t, minChoices: n, maxChoices: r } = e;
-	return n ||= 2, "Validation requirements:" + ("\nThe tokens should not be empty and should be unique.\nThere should be at least 1 " + (t ? `and at most ${t} ` : "") + "response area" + (t ? "s" : "") + ` defined.\nThere should be at least ${n} ` + (r ? `and at most ${r} ` : "") + "tokens defined.");
-};
-//#endregion
-export { e as generateValidationMessage };