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

package/dist/author/choice.js

@@ -1,18 +1,19 @@
 import { choiceIsEmpty as e } from "./markupUtils.js";
 import "react";
-import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-import { useDraggable as a } from "@dnd-kit/core";
-import o from "@mui/icons-material/MoreVert";
-import s from "@mui/icons-material/Delete";
+import { color as t } from "@pie-lib/render-ui";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import { useDraggable as o } from "@dnd-kit/core";
+import s from "@mui/icons-material/MoreVert";
+import c from "@mui/icons-material/Delete";
 //#region src/author/choice.tsx
-var c = ({ style: e }) => /* @__PURE__ */ r("span", {
+var l = ({ style: e }) => /* @__PURE__ */ i("span", {
 	style: e,
-	children: [/* @__PURE__ */ n(o, { style: { margin: "0 -16px" } }), /* @__PURE__ */ n(o, {})]
+	children: [/* @__PURE__ */ r(s, { style: { margin: "0 -16px" } }), /* @__PURE__ */ r(s, {})]
 });
-c.propTypes = { style: t.object };
-var l = i("div", { shouldForwardProp: (e) => !["error", "isDragging"].includes(e) })(({ theme: e, error: t }) => ({
+l.propTypes = { style: n.object };
+var u = a("div", { shouldForwardProp: (e) => !["error", "isDragging"].includes(e) })(({ theme: e, error: n }) => ({
 	display: "inline-flex",
 	minWidth: "178px",
 	minHeight: "36px",
@@ -23,66 +24,66 @@ var l = i("div", { shouldForwardProp: (e) => !["error", "isDragging"].includes(e
 	position: "relative",
 	padding: "8px 35px 8px 35px",
 	cursor: "grab",
-	border: `1px solid ${t ? "#f44336" : "#C0C3CF"}`,
+	border: `1px solid ${n ? "#f44336" : t.border()}`,
 	"& img": { display: "flex" },
 	"& p": { margin: 0 },
 	"& mjx-frac": { fontSize: "120% !important" }
-})), u = i(s)(({ theme: e }) => ({
+})), d = a(c)(({ theme: e }) => ({
 	position: "absolute",
 	top: "6px",
 	right: "0",
-	color: e.palette.grey[500],
+	color: t.text(),
 	zIndex: 2,
 	"&:hover": {
 		cursor: "pointer",
 		color: e.palette.common.black
 	}
-})), d = (t) => {
-	let { choice: i, onClick: o, onRemoveChoice: s, error: d, instanceId: f, disabled: p } = t, { attributes: m, listeners: h, setNodeRef: g, isDragging: _ } = a({
-		id: `choice-${i.id}-${f || "default"}`,
+})), f = (n) => {
+	let { choice: a, onClick: s, onRemoveChoice: c, error: f, instanceId: p, disabled: m } = n, { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = o({
+		id: `choice-${a.id}-${p || "default"}`,
 		data: {
 			type: "drag-in-the-blank-choice",
-			id: i.id,
-			value: i,
-			instanceId: f
+			id: a.id,
+			value: a,
+			instanceId: p
 		},
-		disabled: p || e(i)
-	}), v = (t) => {
-		if (e(i)) {
+		disabled: m || e(a)
+	}), y = (t) => {
+		if (e(a)) {
 			t.preventDefault(), alert("You need to define a value for an answer choice before it can be associated with a response area.");
 			return;
 		}
 	};
-	return /* @__PURE__ */ r(l, {
-		ref: g,
-		error: d,
-		isDragging: _,
-		onClick: o,
-		...m,
+	return /* @__PURE__ */ i(u, {
+		ref: _,
+		error: f,
+		isDragging: v,
+		onClick: s,
 		...h,
-		onDragStart: v,
+		...g,
+		onDragStart: y,
 		children: [
-			/* @__PURE__ */ n(c, { style: {
+			/* @__PURE__ */ r(l, { style: {
 				position: "absolute",
 				top: "6px",
 				left: "15px",
-				color: "#9e9e9e",
+				color: t.borderGray(),
 				zIndex: 2
 			} }),
-			/* @__PURE__ */ n("span", { dangerouslySetInnerHTML: { __html: i.value } }),
-			/* @__PURE__ */ n(u, { onClick: (e) => {
-				e.preventDefault(), e.stopPropagation(), s(e);
+			/* @__PURE__ */ r("span", { dangerouslySetInnerHTML: { __html: a.value } }),
+			/* @__PURE__ */ r(d, { onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), c(e);
 			} })
 		]
 	});
 };
-d.propTypes = {
-	choice: t.object.isRequired,
-	onClick: t.func,
-	onRemoveChoice: t.func.isRequired,
-	error: t.bool,
-	instanceId: t.string,
-	disabled: t.bool
+f.propTypes = {
+	choice: n.object.isRequired,
+	onClick: n.func,
+	onRemoveChoice: n.func.isRequired,
+	error: n.bool,
+	instanceId: n.string,
+	disabled: n.bool
 };
 //#endregion
-export { d as default };
+export { f as BlankContent, f as default };

package/dist/author/choices.js

@@ -1,5 +1,5 @@
 import { choiceIsEmpty as e } from "./markupUtils.js";
-import t from "./choice.js";
+import { BlankContent as t } from "./choice.js";
 import n from "react";
 import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
 import i from "prop-types";
@@ -76,13 +76,16 @@ var d = s("div")(({ theme: e }) => ({
 		}
 		i(l);
 	};
-	onChoiceDone = (t) => {
-		let { onChange: n, model: r } = this.props, { choices: i } = r, a = (i || []).find((e) => e.id === t);
-		if (!a || !e(a)) {
-			this.setState({ focusedEl: void 0 });
+	onChoiceDone = (t, n) => {
+		let { onChange: r, model: i } = this.props, { choices: a } = i, o = (a || []).find((e) => e.id === t), s = n === void 0 ? o && o.value : n;
+		if (!o || !e({ value: s })) {
+			o && o.value !== s && r((a || []).map((e) => e.id === t ? {
+				...e,
+				value: s
+			} : e)), this.setState({ focusedEl: void 0 });
 			return;
 		}
-		n((i || []).filter((e) => e.id !== t)), this.setState({
+		r((a || []).filter((e) => e.id !== t)), this.setState({
 			focusedEl: void 0,
 			warning: {
 				open: !0,
@@ -135,8 +138,8 @@ var d = s("div")(({ theme: e }) => ({
 						onChange: (e) => {
 							this.preventDone || this.onChoiceChanged(n.value, e, n.id);
 						},
-						onDone: () => {
-							this.preventDone || this.onChoiceDone(n.id);
+						onDone: (e) => {
+							this.preventDone || this.onChoiceDone(n.id, e);
 						},
 						onBlur: (e) => {
 							let t = e.relatedTarget && e.relatedTarget.closest(".insert-character-dialog");
@@ -169,4 +172,4 @@ var d = s("div")(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { h as default };
+export { h as Choices, h as default };

package/dist/author/index.d.ts

@@ -38,5 +38,6 @@ export default class DragInTheBlank extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _render(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,39 +1,39 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/defaults.js";
-import { createSlateMarkup as t, processMarkup as n } from "./markupUtils.js";
-import r from "./main.js";
-import i from "./defaults.js";
-import a from "react";
-import { createRoot as o } from "react-dom/client";
-import { renderMath as s } from "@pie-element/shared-math-rendering-mathjax";
+import { createSlateMarkup as e, processMarkup as t } from "./markupUtils.js";
+import { Main as n } from "./main.js";
+import r from "./defaults.js";
+import i from "react";
+import { createRoot as a } from "react-dom/client";
+import { renderMath as o } from "@pie-element/shared-math-rendering-mathjax";
+import { defaults as s } from "@pie-element/shared-lodash";
 import { DeleteImageEvent as c, DeleteSoundEvent as l, InsertImageEvent as u, InsertSoundEvent as d, ModelUpdatedEvent as f } from "@pie-element/shared-configure-events";
 import p from "debug";
 //#region src/author/index.tsx
 var m = p("multiple-choice:configure"), h = class p extends HTMLElement {
-	static prepareModel = (e = {}) => {
-		let r = {
-			...i.model,
-			...e
-		}, a = e.slateMarkup || t(r.markup, r.choices, r.correctResponse), o = n(a);
+	static prepareModel = (n = {}) => {
+		let i = {
+			...r.model,
+			...n
+		}, a = n.slateMarkup || e(i.markup, i.choices, i.correctResponse), o = t(a);
 		return {
-			...r,
+			...i,
 			slateMarkup: a,
 			markup: o.markup,
 			correctResponse: o.correctResponse
 		};
 	};
 	constructor() {
-		super(), this._root = null, this._model = p.prepareModel(), this._configuration = i.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+		super(), this._root = null, this._model = p.prepareModel(), this._configuration = r.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
 	}
 	set model(e) {
 		let t = {
 			...e,
-			markup: `<div>${e.markup || i.model.markup}</div>`
+			markup: `<div>${e.markup || r.model.markup}</div>`
 		};
 		this._model = p.prepareModel(t), this._render();
 	}
-	set configuration(t) {
-		let n = e(t, i.configuration);
-		this._configuration = n, n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
+	set configuration(e) {
+		let t = s(e, r.configuration);
+		this._configuration = t, t?.language?.enabled ? t?.languageChoices?.options?.length && (this._model.language = t?.languageChoices.options[0].value) : t.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
 			value: this._model.language,
 			label: this._model.language
 		})) : delete this._model.language, this._render();
@@ -65,7 +65,7 @@ var m = p("multiple-choice:configure"), h = class p extends HTMLElement {
 	}
 	_render() {
 		m("_render");
-		let e = a.createElement(r, {
+		let e = i.createElement(n, {
 			model: this._model,
 			configuration: this._configuration,
 			onModelChanged: this.onModelChanged,
@@ -80,12 +80,15 @@ var m = p("multiple-choice:configure"), h = class p extends HTMLElement {
 				delete: this.onDeleteSound.bind(this)
 			}
 		});
-		this._root ||= o(this), this._root.render(e), setTimeout(() => {
-			s(this);
+		this._root ||= a(this), this._root.render(e), setTimeout(() => {
+			o(this);
 		}, 0);
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/main.js

@@ -1,6 +1,6 @@
 import { createSlateMarkup as e } from "./markupUtils.js";
-import t from "./choice.js";
-import n from "./choices.js";
+import { BlankContent as t } from "./choice.js";
+import { Choices as 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";
@@ -298,4 +298,4 @@ var y = v(s, "InputContainer") || v(S.InputContainer, "InputContainer"), b = o,
 	}
 };
 //#endregion
-export { A as default };
+export { A as Main, A as default };

package/dist/author/markupUtils.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/escape.js";
+import { escape as e } from "@pie-element/shared-lodash";
 //#region src/author/markupUtils.tsx
 var t = (e) => {
 	let t = document.createElement("div");
@@ -35,4 +35,4 @@ var t = (e) => {
 	return !1;
 };
 //#endregion
-export { l as choiceIsEmpty, c as createSlateMarkup, o as processMarkup };
+export { l as choiceIsEmpty, t as createElementFromHTML, c as createSlateMarkup, o as processMarkup, a as removeUnwantedCharacters };