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

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,5 +1,5 @@
 import { createSlateMarkup as e, processMarkup as t } from "./markupUtils.js";
-import n from "./main.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";
@@ -84,8 +84,11 @@ var m = p("multiple-choice:configure"), h = class p extends HTMLElement {
 			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

@@ -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 };