@pie-lib/mask-markup 4.0.2-next.20261007003844 → 4.0.2

package/dist/__tests__/model-html-sanitization.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/choices/choice.js

@@ -2,22 +2,23 @@ import { useEffect as e, useRef as t } from "react";
 import n from "prop-types";
 import { styled as r } from "@mui/material/styles";
 import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
-import { jsx as a } from "react/jsx-runtime";
-import { useDraggable as o } from "@dnd-kit/core";
-import s from "@mui/material/Chip";
-import { color as c } from "@pie-lib/render-ui";
+import { sanitizeModelHtml as a } from "@pie-element/shared-utils";
+import { jsx as o } from "react/jsx-runtime";
+import { useDraggable as s } from "@dnd-kit/core";
+import c from "@mui/material/Chip";
+import { color as l } from "@pie-lib/render-ui";
 //#region src/choices/choice.tsx
-var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
+var u = "MaskBlank", d = r("span")(({ theme: e, disabled: t }) => ({
 	border: `solid 0px ${e.palette.primary.main}`,
 	margin: e.spacing(.5),
 	transform: "translate(0, 0)",
 	display: "inline-flex",
 	...t && {}
-})), d = r(s)(({ selected: e }) => ({
-	backgroundColor: c.v("pie")("background", c.defaults.WHITE),
-	border: e ? `solid 2px ${c.buttonFocusOutline()}` : `1px solid ${c.text()}`,
+})), f = r(c)(({ selected: e }) => ({
+	backgroundColor: l.v("pie")("background", l.defaults.WHITE),
+	border: e ? `solid 2px ${l.buttonFocusOutline()}` : `1px solid ${l.text()}`,
 	opacity: e ? .7 : 1,
-	color: c.text(),
+	color: l.text(),
 	alignItems: "center",
 	display: "inline-flex",
 	height: "initial",
@@ -31,7 +32,7 @@ var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
 	paddingTop: "12px",
 	paddingBottom: "12px",
 	"&.Mui-disabled": { opacity: 1 }
-})), f = r("span")(() => ({
+})), p = r("span")(() => ({
 	whiteSpace: "normal",
 	"& img": {
 		display: "block",
@@ -40,49 +41,49 @@ var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
 	"& mjx-frac": { fontSize: "120% !important" },
 	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { fontSize: "120% !important" }
 }));
-function p({ choice: n, disabled: r, instanceId: s, selectedItem: c, onSelectClick: p }) {
-	let m = t(null), { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = o({
+function m({ choice: n, disabled: r, instanceId: c, selectedItem: l, onSelectClick: m }) {
+	let h = t(null), { attributes: g, listeners: _, setNodeRef: v, isDragging: y } = s({
 		id: `choice-${n.id}`,
 		data: {
 			choice: n,
-			instanceId: s,
+			instanceId: c,
 			fromChoice: !0,
-			type: l
+			type: u
 		},
 		disabled: r
 	});
 	e(() => {
-		i(m.current);
+		i(h.current);
 	}, [n.value]);
-	let y = !!c && c.fromChoice === !0 && c.choice.id === n.id;
-	return /* @__PURE__ */ a(u, {
-		ref: _,
-		style: v ? {
-			width: m.current?.offsetWidth || 90,
-			height: m.current?.offsetHeight || 32
+	let b = !!l && l.fromChoice === !0 && l.choice.id === n.id;
+	return /* @__PURE__ */ o(d, {
+		ref: v,
+		style: y ? {
+			width: h.current?.offsetWidth || 90,
+			height: h.current?.offsetHeight || 32
 		} : {},
 		disabled: r,
-		selected: y,
+		selected: b,
 		onClick: (e) => {
-			r || (e.stopPropagation(), p?.({
+			r || (e.stopPropagation(), m?.({
 				choice: n,
-				instanceId: s,
+				instanceId: c,
 				fromChoice: !0,
-				type: l
+				type: u
 			}));
 		},
+		..._,
 		...g,
-		...h,
-		children: /* @__PURE__ */ a(d, {
+		children: /* @__PURE__ */ o(f, {
 			clickable: !1,
 			disabled: r,
-			selected: y,
-			ref: m,
-			label: /* @__PURE__ */ a(f, { dangerouslySetInnerHTML: { __html: n.value } })
+			selected: b,
+			ref: h,
+			label: /* @__PURE__ */ o(p, { dangerouslySetInnerHTML: { __html: a(n.value) } })
 		})
 	});
 }
-p.propTypes = {
+m.propTypes = {
 	choice: n.object.isRequired,
 	disabled: n.bool,
 	instanceId: n.oneOfType([n.string, n.number]),
@@ -90,4 +91,4 @@ p.propTypes = {
 	onSelectClick: n.func
 };
 //#endregion
-export { l as DRAG_TYPE, p as default };
+export { u as DRAG_TYPE, m as default };

package/dist/components/blank.js

@@ -4,17 +4,18 @@ import a from "prop-types";
 import { styled as o } from "@mui/material/styles";
 import { renderMath as s } from "@pie-element/shared-math-rendering-mathjax";
 import c from "debug";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useDraggable as d, useDroppable as f } from "@dnd-kit/core";
-import p from "@mui/material/Chip";
-import { color as m } from "@pie-lib/render-ui";
-import h from "@pie-lib/translator";
-import { grey as g } from "@mui/material/colors";
+import { sanitizeModelHtml as l } from "@pie-element/shared-utils";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useDraggable as f, useDroppable as p } from "@dnd-kit/core";
+import m from "@mui/material/Chip";
+import { color as h } from "@pie-lib/render-ui";
+import g from "@pie-lib/translator";
+import { grey as _ } from "@mui/material/colors";
 //#region src/components/blank.tsx
-var { translator: _ } = h;
+var { translator: v } = g;
 c("pie-lib:mask-markup:blank");
-var v = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r }) => ({
-	border: `solid 0px ${m.primary()}`,
+var y = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r }) => ({
+	border: `solid 0px ${h.primary()}`,
 	display: "inline-flex",
 	whiteSpace: "nowrap",
 	opacity: 1,
@@ -22,14 +23,14 @@ var v = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r })
 	...t && { whiteSpace: "nowrap" },
 	...(e || n) && { opacity: .5 },
 	...r && { "&:hover": { cursor: "pointer" } }
-})), y = o("span")({
+})), b = o("span")({
 	display: "inline-flex",
 	touchAction: "none"
-}), b = o(p)(() => ({
-	backgroundColor: m.background(),
-	border: `2px dashed ${m.text()}`,
+}), x = o(m)(() => ({
+	backgroundColor: h.background(),
+	border: `2px dashed ${h.text()}`,
 	touchAction: "none",
-	color: m.text(),
+	color: h.text(),
 	fontSize: "inherit",
 	lineHeight: "normal",
 	maxWidth: "374px",
@@ -40,13 +41,13 @@ var v = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r })
 		overflow: "hidden"
 	},
 	"&.parentOver": {
-		border: `1px solid ${g[500]}`,
-		backgroundColor: `${g[300]}`
+		border: `1px solid ${_[500]}`,
+		backgroundColor: `${_[300]}`
 	},
-	"&.correct": { border: `solid 1px ${m.correct()}` },
-	"&.incorrect": { border: `solid 1px ${m.incorrect()}` },
+	"&.correct": { border: `solid 1px ${h.correct()}` },
+	"&.incorrect": { border: `solid 1px ${h.incorrect()}` },
 	"&.Mui-disabled": { opacity: 1 }
-})), x = o("span")(() => ({
+})), S = o("span")(() => ({
 	whiteSpace: "normal",
 	pointerEvents: "none",
 	"& img": {
@@ -75,114 +76,114 @@ var v = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r })
 		transform: "translateY(-50%)"
 	}
 }));
-function S({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, correct: p, emptyResponseAreaWidth: m, emptyResponseAreaHeight: h }) {
-	let g = r(null), _ = r(null), v = r(null), y = r(!1), [S, C] = i({
+function C({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, correct: m, emptyResponseAreaWidth: h, emptyResponseAreaHeight: g }) {
+	let _ = r(null), v = r(null), y = r(null), b = r(!1), [C, w] = i({
 		height: 0,
 		width: 0
-	}), w = () => {
-		D();
-	}, T = () => {
-		let e = _.current?.querySelector("img");
-		e ? e.onload = w : setTimeout(() => {
-			D();
-		}, 300);
+	}), T = () => {
+		O();
 	}, E = () => {
-		if (!_.current) return null;
-		if (_.current.querySelector("mjx-container") && _.current.parentElement) return _.current.parentElement;
-		let e = _.current.querySelector("img");
-		return e ? _.current.textContent.trim().length > 0 ? _.current : e : _.current;
+		let e = v.current?.querySelector("img");
+		e ? e.onload = T : setTimeout(() => {
+			O();
+		}, 300);
 	}, D = () => {
-		if (_.current && g.current && !y.current) {
-			y.current = !0, g.current.style.width = "auto", g.current.style.height = "auto", g.current.offsetHeight;
-			let e = E() || _.current, t = e.getBoundingClientRect(), n = e.offsetWidth || t.width || 0, r = Math.max(e.offsetHeight || 0, t.height || 0, e.scrollHeight || 0, _.current.scrollHeight || 0), i = n + 24 + 4 + 1, a = r + 24 + 4 + 1, o = parseFloat(m) || 0, s = parseFloat(h) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
-			C((e) => ({
+		if (!v.current) return null;
+		if (v.current.querySelector("mjx-container") && v.current.parentElement) return v.current.parentElement;
+		let e = v.current.querySelector("img");
+		return e ? v.current.textContent.trim().length > 0 ? v.current : e : v.current;
+	}, O = () => {
+		if (v.current && _.current && !b.current) {
+			b.current = !0, _.current.style.width = "auto", _.current.style.height = "auto", _.current.offsetHeight;
+			let e = D() || v.current, t = e.getBoundingClientRect(), n = e.offsetWidth || t.width || 0, r = Math.max(e.offsetHeight || 0, t.height || 0, e.scrollHeight || 0, v.current.scrollHeight || 0), i = n + 24 + 4 + 1, a = r + 24 + 4 + 1, o = parseFloat(h) || 0, s = parseFloat(g) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
+			w((e) => ({
 				width: c > o ? c : e.width,
 				height: l > s ? l : e.height
 			}));
 			let u = `${c}px`, d = `${l}px`;
-			g.current.style.width !== u && (g.current.style.width = u), g.current.style.height !== d && (g.current.style.height = d), y.current = !1;
+			_.current.style.width !== u && (_.current.style.width = u), _.current.style.height !== d && (_.current.style.height = d), b.current = !1;
 		}
-	}, O = () => {
-		let e = isNaN(parseFloat(m)) ? 0 : parseFloat(m), t = isNaN(parseFloat(h)) ? 0 : parseFloat(h);
+	}, k = () => {
+		let e = isNaN(parseFloat(h)) ? 0 : parseFloat(h), t = isNaN(parseFloat(g)) ? 0 : parseFloat(g);
 		return {
-			height: S.height || t,
-			width: S.width || e,
+			height: C.height || t,
+			width: C.width || e,
 			...e ? {} : { minWidth: 90 },
 			...t ? {} : { minHeight: 32 }
 		};
 	};
 	n(() => {
-		T();
+		E();
 	}, []), n(() => {
-		if (typeof IntersectionObserver > "u" || !g.current) return;
+		if (typeof IntersectionObserver > "u" || !_.current) return;
 		let e = new IntersectionObserver((e) => {
-			e.some((e) => e.isIntersecting) && D();
+			e.some((e) => e.isIntersecting) && O();
 		}, { threshold: 0 });
-		return e.observe(g.current), () => e.disconnect();
+		return e.observe(_.current), () => e.disconnect();
 	}, []), n(() => {
-		g.current && s(g.current);
+		_.current && s(_.current);
 	}, [
-		p,
+		m,
 		c,
-		f?.choice?.value
+		p?.choice?.value
 	]), n(() => {
 		if (!o) {
-			C({
+			w({
 				height: 0,
 				width: 0
 			});
 			return;
 		}
-		T();
+		E();
 	}, [o?.value]), n(() => {
-		!c && !d && (v.current = {
-			width: g.current.offsetWidth,
-			height: g.current.offsetHeight
+		!c && !f && (y.current = {
+			width: _.current.offsetWidth,
+			height: _.current.offsetHeight
 		});
 	}, [
 		o,
 		c,
-		d
+		f
 	]);
-	let k = f && c && f.choice && f.choice.value, A = o && o.value, j = c || d ? {
-		width: v.current?.width,
-		height: v.current?.height
-	} : O();
-	return /* @__PURE__ */ l(b, {
+	let A = p && c && p.choice && p.choice.value, j = o && o.value, M = c || f ? {
+		width: y.current?.width,
+		height: y.current?.height
+	} : k();
+	return /* @__PURE__ */ u(x, {
 		clickable: !1,
 		disabled: a,
-		ref: g,
+		ref: _,
 		component: "span",
-		label: /* @__PURE__ */ u(t.Fragment, { children: [/* @__PURE__ */ l(x, {
-			ref: _,
+		label: /* @__PURE__ */ d(t.Fragment, { children: [/* @__PURE__ */ u(S, {
+			ref: v,
 			draggable: !0,
 			className: e({
 				over: c,
-				hidden: k
+				hidden: A
 			}),
-			dangerouslySetInnerHTML: { __html: A || "" }
-		}), k && /* @__PURE__ */ l(x, {
+			dangerouslySetInnerHTML: { __html: l(j) }
+		}), A && /* @__PURE__ */ u(S, {
 			draggable: !0,
 			className: e({
 				over: c,
 				dragged: !0
 			}),
-			dangerouslySetInnerHTML: { __html: k || "" }
+			dangerouslySetInnerHTML: { __html: l(A) }
 		})] }),
 		className: e({
 			over: c,
 			parentOver: c,
-			correct: p !== void 0 && p,
-			incorrect: p !== void 0 && !p
+			correct: m !== void 0 && m,
+			incorrect: m !== void 0 && !m
 		}),
 		variant: a ? "outlined" : void 0,
-		style: j
+		style: M
 	});
 }
-S.defaultProps = {
+C.defaultProps = {
 	emptyResponseAreaWidth: 0,
 	emptyResponseAreaHeight: 0
-}, S.propTypes = {
+}, C.propTypes = {
 	id: a.oneOfType([a.string, a.number]),
 	disabled: a.bool,
 	duplicates: a.bool,
@@ -195,35 +196,35 @@ S.defaultProps = {
 	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
 	instanceId: a.string
 };
-function C({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange: o, emptyResponseAreaWidth: s, emptyResponseAreaHeight: c, instanceId: u, language: p, selectedItem: m, onSelectClick: h, onPlacementClick: g }) {
-	let [b, x] = i(!1), C = {
+function w({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange: o, emptyResponseAreaWidth: s, emptyResponseAreaHeight: c, instanceId: l, language: d, selectedItem: m, onSelectClick: h, onPlacementClick: g }) {
+	let [_, x] = i(!1), S = {
 		id: e,
 		choice: r,
-		instanceId: u,
+		instanceId: l,
 		fromChoice: !1,
 		type: "MaskBlank"
-	}, { attributes: w, listeners: T, setNodeRef: E, isDragging: D } = d({
+	}, { attributes: w, listeners: T, setNodeRef: E, isDragging: D } = f({
 		id: `mask-blank-drag-${e}`,
 		disabled: t || !r,
-		data: C,
+		data: S,
 		attributes: { tabIndex: r && !t ? 0 : -1 }
-	}), { setNodeRef: O, isOver: k, active: A } = f({
+	}), { setNodeRef: O, isOver: k, active: A } = p({
 		id: `mask-blank-drop-${e}`,
 		data: {
 			id: e,
 			accepts: ["MaskBlank"],
-			instanceId: u
+			instanceId: l
 		}
 	}), j = !!m && m.fromChoice === !1 && m.id === e, M = () => {
-		t || (j ? h?.(C) : m ? g?.(e) : r && h?.(C));
+		t || (j ? h?.(S) : m ? g?.(e) : r && h?.(S));
 	}, N = !r && !t, P = !!r && !t, F = (e) => {
 		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), M());
-	}, I = !!m, L = A ? k : k || I && b && !t;
-	return /* @__PURE__ */ l(v, {
+	}, I = !!m, L = A ? k : k || I && _ && !t;
+	return /* @__PURE__ */ u(y, {
 		ref: O,
 		role: N ? "button" : "group",
-		"aria-label": _.t("dragInTheBlank.blank", {
-			lng: p,
+		"aria-label": v.t("dragInTheBlank.blank", {
+			lng: d,
 			index: Number(e) + 1
 		}),
 		tabIndex: N ? 0 : -1,
@@ -235,11 +236,11 @@ function C({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange:
 		over: L,
 		selected: j,
 		showsPointerCursor: I && !t,
-		children: /* @__PURE__ */ l(y, {
+		children: /* @__PURE__ */ u(b, {
 			ref: E,
 			...P ? w : {},
 			...T,
-			children: /* @__PURE__ */ l(S, {
+			children: /* @__PURE__ */ u(C, {
 				id: e,
 				disabled: t,
 				duplicates: n,
@@ -250,15 +251,15 @@ function C({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange:
 				onChange: o,
 				emptyResponseAreaWidth: s,
 				emptyResponseAreaHeight: c,
-				instanceId: u
+				instanceId: l
 			})
 		})
 	});
 }
-C.defaultProps = {
+w.defaultProps = {
 	emptyResponseAreaWidth: 0,
 	emptyResponseAreaHeight: 0
-}, C.propTypes = {
+}, w.propTypes = {
 	id: a.oneOfType([a.string, a.number]),
 	disabled: a.bool,
 	duplicates: a.bool,
@@ -274,4 +275,4 @@ C.defaultProps = {
 	onPlacementClick: a.func
 };
 //#endregion
-export { C as default };
+export { w as default };

package/dist/components/dropdown.js

@@ -2,30 +2,31 @@ import e from "react";
 import t from "prop-types";
 import { styled as n } from "@mui/material/styles";
 import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import * as s from "@pie-lib/render-ui";
-import { InlineMenu as c, color as l, createUniqueId as u } from "@pie-lib/render-ui";
-import d from "@pie-lib/translator";
-import f from "@mui/material/Button";
-import p from "@mui/material/InputLabel";
-import m from "@mui/material/MenuItem";
-import h from "@mui/icons-material/ArrowDropDown";
-import g from "@mui/icons-material/ArrowDropUp";
-import _ from "@mui/icons-material/Close";
-import v from "@mui/icons-material/Check";
+import { sanitizeModelHtml as i } from "@pie-element/shared-utils";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import * as c from "@pie-lib/render-ui";
+import { InlineMenu as l, color as u, createUniqueId as d } from "@pie-lib/render-ui";
+import f from "@pie-lib/translator";
+import p from "@mui/material/Button";
+import m from "@mui/material/InputLabel";
+import h from "@mui/material/MenuItem";
+import g from "@mui/icons-material/ArrowDropDown";
+import _ from "@mui/icons-material/ArrowDropUp";
+import v from "@mui/icons-material/Close";
+import y from "@mui/icons-material/Check";
 //#region src/components/dropdown.tsx
-function y(e) {
+function b(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function b(e, t) {
-	return !e || y(e) ? e : y(e.default) ? e.default : t && y(e[t]) ? e[t] : t && y(e[t]?.default) ? e[t].default : e;
+function x(e, t) {
+	return !e || b(e) ? e : b(e.default) ? e.default : t && b(e[t]) ? e[t] : t && b(e[t]?.default) ? e[t].default : e;
 }
-var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.default, w = C && typeof C == "object" ? C : S, { translator: T } = d, E = l.v("pie"), D = n(f)(() => ({
-	color: l.text(),
-	border: `1px solid ${l.borderGray()}`,
+var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.default, T = w && typeof w == "object" ? w : C, { translator: E } = f, D = u.v("pie"), O = n(p)(() => ({
+	color: u.text(),
+	border: `1px solid ${u.borderGray()}`,
 	borderRadius: "4px",
 	justifyContent: "space-between",
-	backgroundColor: l.background(),
+	backgroundColor: u.background(),
 	position: "relative",
 	height: "45px",
 	width: "fit-content",
@@ -37,29 +38,29 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 		right: "4px",
 		top: "calc(50% - 12px)",
 		pointerEvents: "none",
-		color: l.text(),
+		color: u.text(),
 		marginLeft: "5px"
 	},
 	"&.Mui-focusVisible": {
-		outline: `3px solid ${l.tertiary()}`,
+		outline: `3px solid ${u.tertiary()}`,
 		outlineOffset: "2px",
 		borderWidth: "3px"
 	},
-	"&.Mui-disabled": { color: l.disabledText() },
+	"&.Mui-disabled": { color: u.disabledText() },
 	"&.disabledCorrect": {
 		borderWidth: "2px",
-		borderColor: l.correct(),
-		color: `${l.text()} !important`
+		borderColor: u.correct(),
+		color: `${u.text()} !important`
 	},
 	"&.disabledIncorrect": {
 		borderWidth: "2px",
-		borderColor: l.incorrectWithIcon(),
-		color: `${l.text()} !important`
+		borderColor: u.incorrectWithIcon(),
+		color: `${u.text()} !important`
 	}
-})), O = n(x)(() => ({
-	"& .MuiPaper-root": { backgroundColor: E("background", l.defaults.WHITE) },
+})), k = n(S)(() => ({
+	"& .MuiPaper-root": { backgroundColor: D("background", u.defaults.WHITE) },
 	"& .MuiList-root": { padding: 0 }
-})), k = n(m)(() => ({
+})), A = n(h)(() => ({
 	height: 24,
 	overflow: "hidden",
 	fontSize: "1rem",
@@ -67,42 +68,42 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 	fontFamily: "inherit",
 	lineHeight: "1.5em",
 	whiteSpace: "nowrap",
-	color: l.text(),
-	backgroundColor: l.background(),
+	color: u.text(),
+	backgroundColor: u.background(),
 	"&.Mui-focusVisible": {
-		outline: `3px solid ${l.tertiary()}`,
+		outline: `3px solid ${u.tertiary()}`,
 		outlineOffset: "-1px",
-		color: l.text(),
-		backgroundColor: l.background()
+		color: u.text(),
+		backgroundColor: u.background()
 	},
 	"&:hover": {
-		color: l.text(),
-		backgroundColor: l.dropdownBackground()
+		color: u.text(),
+		backgroundColor: u.dropdownBackground()
 	},
 	boxSizing: "border-box",
 	padding: "16px 8px",
 	borderRadius: "4px",
 	"&.selected": {
-		color: `${l.text()} !important`,
-		backgroundColor: `${l.background()} !important`,
+		color: `${u.text()} !important`,
+		backgroundColor: `${u.background()} !important`,
 		"&:hover": {
-			color: l.text(),
-			backgroundColor: `${l.dropdownBackground()} !important`
+			color: u.text(),
+			backgroundColor: `${u.dropdownBackground()} !important`
 		}
 	}
-})), A = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), j = n("span")(() => ({
+})), j = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), M = n("span")(() => ({
 	fontSize: "max(1rem, 14px)",
 	flexShrink: 0,
 	paddingLeft: "8px"
-})), M = n(p)(() => ({
+})), N = n(m)(() => ({
 	position: "absolute",
 	left: "-10000px",
 	top: "auto",
 	width: "1px",
 	height: "1px",
 	overflow: "hidden"
-})), N = n(v)(() => ({
-	color: `${l.white()} !important`,
+})), P = n(y)(() => ({
+	color: `${u.white()} !important`,
 	position: "absolute",
 	top: "-8px !important",
 	left: "-8px",
@@ -110,10 +111,10 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 	borderRadius: "50%",
 	fontSize: "16px",
 	padding: "2px",
-	"&.correct": { backgroundColor: l.correct() },
-	"&.incorrect": { backgroundColor: l.incorrectWithIcon() }
-})), P = n(_)(() => ({
-	color: `${l.white()} !important`,
+	"&.correct": { backgroundColor: u.correct() },
+	"&.incorrect": { backgroundColor: u.incorrectWithIcon() }
+})), F = n(v)(() => ({
+	color: `${u.white()} !important`,
 	position: "absolute",
 	top: "-8px !important",
 	left: "-8px",
@@ -121,9 +122,9 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 	borderRadius: "50%",
 	fontSize: "16px",
 	padding: "2px",
-	"&.correct": { backgroundColor: l.correct() },
-	"&.incorrect": { backgroundColor: l.incorrectWithIcon() }
-})), F = class extends e.Component {
+	"&.correct": { backgroundColor: u.correct() },
+	"&.incorrect": { backgroundColor: u.incorrectWithIcon() }
+})), I = class extends e.Component {
 	static propTypes = {
 		id: t.string,
 		value: t.string,
@@ -145,7 +146,7 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 			highlightedOptionId: null,
 			menuWidth: null,
 			previewValue: null
-		}, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [], this.idPrefix = u(`dropdown-${t.id}`);
+		}, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [], this.idPrefix = d(`dropdown-${t.id}`);
 	}
 	optionId = (e) => `${this.idPrefix}-option-${e}`;
 	componentDidMount() {
@@ -206,14 +207,14 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 		return n ? n.label.trim() : void 0;
 	}
 	render() {
-		let { id: e, correct: t, disabled: n, value: r, choices: s, showCorrectAnswer: c, singleQuery: l, correctValue: u, language: d } = this.props, { anchorEl: f } = this.state, p = !!f, m = `${this.idPrefix}-button`, _ = `${this.idPrefix}-menu`, v = `${this.idPrefix}-listbox`, y = `${this.idPrefix}-value`, b;
-		this.elementRefs = [], n && t !== void 0 && (b = t || c ? "disabledCorrect" : "disabledIncorrect");
-		let x = parseInt(e, 10) + 1, S = `${this.idPrefix}-query-label`, C = l ? T.t("inlineDropdown.query", { lng: d }) : T.t("inlineDropdown.queryNumber", {
-			lng: d,
-			index: x
-		}), w = null;
-		return n && t !== void 0 && (w = t || c ? /* @__PURE__ */ a(N, { className: "correct" }) : /* @__PURE__ */ a(P, { className: "incorrect" })), /* @__PURE__ */ o(i, { children: [
-			/* @__PURE__ */ a("div", {
+		let { id: e, correct: t, disabled: n, value: r, choices: c, showCorrectAnswer: l, singleQuery: u, correctValue: d, language: f } = this.props, { anchorEl: p } = this.state, m = !!p, h = `${this.idPrefix}-button`, v = `${this.idPrefix}-menu`, y = `${this.idPrefix}-listbox`, b = `${this.idPrefix}-value`, x;
+		this.elementRefs = [], n && t !== void 0 && (x = t || l ? "disabledCorrect" : "disabledIncorrect");
+		let S = parseInt(e, 10) + 1, C = `${this.idPrefix}-query-label`, w = u ? E.t("inlineDropdown.query", { lng: f }) : E.t("inlineDropdown.queryNumber", {
+			lng: f,
+			index: S
+		}), T = null;
+		return n && t !== void 0 && (T = t || l ? /* @__PURE__ */ o(P, { className: "correct" }) : /* @__PURE__ */ o(F, { className: "incorrect" })), /* @__PURE__ */ s(a, { children: [
+			/* @__PURE__ */ o("div", {
 				ref: this.hiddenRef,
 				style: {
 					position: "absolute",
@@ -223,50 +224,50 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 				},
 				tabIndex: -1,
 				"aria-hidden": "true",
-				children: (s || []).map((e, t) => /* @__PURE__ */ a(k, {
+				children: (c || []).map((e, t) => /* @__PURE__ */ o(A, {
 					tabIndex: -1,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ a(A, { dangerouslySetInnerHTML: { __html: e.label } })
+					children: /* @__PURE__ */ o(j, { dangerouslySetInnerHTML: { __html: i(e.label) } })
 				}, t))
 			}),
-			/* @__PURE__ */ a(M, {
-				id: S,
+			/* @__PURE__ */ o(N, {
+				id: C,
 				tabIndex: -1,
 				"aria-hidden": "true",
-				children: C
+				children: w
 			}),
-			/* @__PURE__ */ o(D, {
+			/* @__PURE__ */ s(O, {
 				ref: this.buttonRef,
 				style: {
 					...this.state.menuWidth && { minWidth: `calc(${this.state.menuWidth}px + 8px)` },
-					borderWidth: p ? "2px" : "1px",
+					borderWidth: m ? "2px" : "1px",
 					transition: "border-width 0.2s ease-in-out"
 				},
-				"aria-controls": p ? v : void 0,
+				"aria-controls": m ? y : void 0,
 				"aria-haspopup": "listbox",
-				"aria-expanded": p ? "true" : "false",
+				"aria-expanded": m ? "true" : "false",
 				"aria-activedescendant": this.state.highlightedOptionId,
 				onClick: this.handleClick,
-				className: b,
+				className: x,
 				disabled: n,
-				id: m,
+				id: h,
 				role: "combobox",
-				"aria-labelledby": `${S} ${y}`,
+				"aria-labelledby": `${C} ${b}`,
 				children: [
-					w,
-					/* @__PURE__ */ a(A, {
-						id: y,
+					T,
+					/* @__PURE__ */ o(j, {
+						id: b,
 						ref: this.previewRef,
-						dangerouslySetInnerHTML: { __html: u || (p && this.state.previewValue ? this.getLabel(s, this.state.previewValue) : this.getLabel(s, r) || "") }
+						dangerouslySetInnerHTML: { __html: i(d || (m && this.state.previewValue ? this.getLabel(c, this.state.previewValue) : this.getLabel(c, r) || "")) }
 					}),
-					a(p ? g : h, {})
+					o(m ? _ : g, {})
 				]
 			}),
-			/* @__PURE__ */ a(O, {
-				id: _,
-				anchorEl: f,
+			/* @__PURE__ */ o(k, {
+				id: v,
+				anchorEl: p,
 				keepMounted: !0,
-				open: p,
+				open: m,
 				onClose: this.handleClose,
 				getContentAnchorEl: null,
 				anchorOrigin: {
@@ -287,15 +288,15 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 						padding: "4px"
 					} } : void 0,
 					list: {
-						id: v,
-						"aria-labelledby": S,
+						id: y,
+						"aria-labelledby": C,
 						role: "listbox",
 						disablePadding: !0
 					}
 				},
-				children: (s || []).map((e, t) => {
+				children: (c || []).map((e, t) => {
 					let n = this.optionId(t);
-					return /* @__PURE__ */ o(k, {
+					return /* @__PURE__ */ s(A, {
 						id: n,
 						className: e.value === r ? "selected" : "",
 						selected: e.value === r,
@@ -304,10 +305,10 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 						role: "option",
 						"aria-selected": this.state.highlightedOptionId === n ? "true" : void 0,
 						onMouseOver: () => this.handleHover(t),
-						children: [/* @__PURE__ */ a(A, {
+						children: [/* @__PURE__ */ o(j, {
 							ref: (e) => this.elementRefs[t] = e,
-							dangerouslySetInnerHTML: { __html: e.label }
-						}), /* @__PURE__ */ a(j, { dangerouslySetInnerHTML: { __html: e.value === r ? " ✓" : "" } })]
+							dangerouslySetInnerHTML: { __html: i(e.label) }
+						}), /* @__PURE__ */ o(M, { dangerouslySetInnerHTML: { __html: e.value === r ? " ✓" : "" } })]
 					}, `${e.label}-${t}`);
 				})
 			})
@@ -315,4 +316,4 @@ var x = b(c, "InlineMenu") || b(w.InlineMenu, "InlineMenu"), S = s, C = S.defaul
 	}
 };
 //#endregion
-export { F as default };
+export { I as default };

package/dist/mask.js

@@ -4,63 +4,64 @@ import n from "prop-types";
 import { get as r } from "@pie-element/shared-lodash";
 import { styled as i } from "@mui/material/styles";
 import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
-import { jsx as o } from "react/jsx-runtime";
+import { sanitizeModelHtml as o } from "@pie-element/shared-utils";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/mask.tsx
-var s = i("div")(({ theme: e }) => ({
+var c = i("div")(({ theme: e }) => ({
 	paddingTop: e.spacing(.5),
 	paddingBottom: e.spacing(.5)
-})), c = i("span")(() => ({
+})), l = i("span")(() => ({
 	display: "inline-block",
 	width: ".75em"
-})), l = ["tbody", "tr"], u = (e, t) => {
+})), u = ["tbody", "tr"], d = (e, t) => {
 	let n = t.trim() === "", r = e && e.type;
-	if (!(n && l.includes(r))) return t;
-}, d = (e) => {
+	if (!(n && u.includes(r))) return t;
+}, f = (e) => {
 	let t = e.leaves.find((e) => r(e, "marks", []).length);
 	return t ? t.marks : null;
-}, f = (t, n, r, i, a, l) => {
+}, p = (t, n, r, i, a, u) => {
 	if (!n) return null;
-	let p = [];
-	return (t.nodes || []).forEach((t, m) => {
-		let h = t.type ? `${t.type}-${m}` : `${m}`;
-		if (t.isMath) return p.push(/* @__PURE__ */ o("span", { dangerouslySetInnerHTML: { __html: `<math displaystyle="true">${t.nodes[0].innerHTML}</math>` } })), p;
+	let m = [];
+	return (t.nodes || []).forEach((t, h) => {
+		let g = t.type ? `${t.type}-${h}` : `${h}`;
+		if (t.isMath) return m.push(/* @__PURE__ */ s("span", { dangerouslySetInnerHTML: { __html: o(`<math displaystyle="true">${t.nodes[0].innerHTML}</math>`) } })), m;
 		if (i) {
 			let e = i(t, n, r);
 			if (e) {
 				let n = t.data?.dataset?.component === "blank" && a?.type !== "td";
-				n && p.push(/* @__PURE__ */ o(c, {}, `spacer-${m}-before`)), p.push(e), n && p.push(/* @__PURE__ */ o(c, {}, `spacer-${m}-after`));
+				n && m.push(/* @__PURE__ */ s(l, {}, `spacer-${h}-before`)), m.push(e), n && m.push(/* @__PURE__ */ s(l, {}, `spacer-${h}-after`));
 				return;
 			}
 		}
 		if (t.object === "text") {
 			let n = t.leaves.reduce((e, t) => {
-				let n = t.text, r = u(a, n);
+				let n = t.text, r = d(a, n);
 				return r ? e + r : e;
-			}, ""), r = d(t);
+			}, ""), r = f(t);
 			if (r?.length > 0) {
 				let t = r.map((t) => Object.keys(e).find((n) => e[n] === t.type)).filter(Boolean);
-				t.length > 0 ? p.push(t.reduceRight((e, t, n) => /* @__PURE__ */ o(t, { children: e }, `${h}-${t}-${n}`), n)) : p.push(n);
-			} else n.length > 0 && p.push(n);
+				t.length > 0 ? m.push(t.reduceRight((e, t, n) => /* @__PURE__ */ s(t, { children: e }, `${g}-${t}-${n}`), n)) : m.push(n);
+			} else n.length > 0 && m.push(n);
 		} else {
-			let e = f(t, n, r, i, t, l);
-			if (t.type === "p" || t.type === "paragraph") p.push(/* @__PURE__ */ o(s, { children: e }, h));
+			let e = p(t, n, r, i, t, u);
+			if (t.type === "p" || t.type === "paragraph") m.push(/* @__PURE__ */ s(c, { children: e }, g));
 			else {
 				let n = t.type;
-				t.nodes && t.nodes.length > 0 ? p.push(/* @__PURE__ */ o(n, {
+				t.nodes && t.nodes.length > 0 ? m.push(/* @__PURE__ */ s(n, {
 					...t.data.attributes,
 					children: e
-				}, h)) : p.push(/* @__PURE__ */ o(n, { ...t.data.attributes }, h));
+				}, g)) : m.push(/* @__PURE__ */ s(n, { ...t.data.attributes }, g));
 			}
 		}
-	}), p;
-}, p = i("div")(() => ({
+	}), m;
+}, m = i("div")(() => ({
 	display: "initial",
 	"&:not(.MathJax) table": { borderCollapse: "collapse" },
 	"&:not(.MathJax) table td, &:not(.MathJax) table th": {
 		padding: "8px 12px",
 		textAlign: "left"
 	}
-})), m = class extends t.Component {
+})), h = class extends t.Component {
 	constructor(e) {
 		super(e), this.internalContainerRef = t.createRef();
 	}
@@ -84,12 +85,12 @@ var s = i("div")(({ theme: e }) => ({
 		this.props.onChange(n);
 	};
 	render() {
-		let { value: e, layout: t, elementType: n, containerRef: r } = this.props, i = f(t, e, this.handleChange, this.props.renderChildren, null, n);
-		return /* @__PURE__ */ o(p, {
+		let { value: e, layout: t, elementType: n, containerRef: r } = this.props, i = p(t, e, this.handleChange, this.props.renderChildren, null, n);
+		return /* @__PURE__ */ s(m, {
 			ref: r || this.internalContainerRef,
 			children: i
 		});
 	}
 };
 //#endregion
-export { m as default, f as renderChildren };
+export { h as default, p as renderChildren };

package/dist/with-mask.js

@@ -3,12 +3,13 @@ import t from "./mask.js";
 import n from "./componentize.js";
 import r from "react";
 import i from "prop-types";
-import { jsx as a } from "react/jsx-runtime";
+import { sanitizeModelHtml as a } from "@pie-element/shared-utils";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/with-mask.tsx
-var o = (t, r) => {
+var s = (t, r) => {
 	let { markup: i } = n(t, r);
-	return e(i).document;
-}, s = (e, n) => class extends r.Component {
+	return e(a(i)).document;
+}, c = (e, n) => class extends r.Component {
 	static propTypes = {
 		markup: i.string,
 		layout: i.object,
@@ -25,21 +26,21 @@ var o = (t, r) => {
 			let e = this.containerRef.current;
 			(e && e.querySelectorAll("[data-latex][data-math-handled=\"true\"]") || []).forEach((e) => {
 				let t = e.querySelector("mjx-container");
-				t && e.removeChild(t), e.innerHTML = e.getAttribute("data-raw"), e.removeAttribute("data-math-handled");
+				t && e.removeChild(t), e.textContent = e.getAttribute("data-raw"), e.removeAttribute("data-math-handled");
 			});
 		}
 	}
 	render() {
-		let { markup: r, layout: i, value: s, onChange: c, elementType: l } = this.props, u = i || o(r, e);
-		return /* @__PURE__ */ a(t, {
+		let { markup: r, layout: i, value: a, onChange: c, elementType: l } = this.props, u = i || s(r, e);
+		return /* @__PURE__ */ o(t, {
 			containerRef: this.containerRef,
 			elementType: l,
 			layout: u,
-			value: s,
+			value: a,
 			onChange: c,
 			renderChildren: n(this.props)
 		});
 	}
 };
 //#endregion
-export { o as buildLayoutFromMarkup, s as withMask };
+export { s as buildLayoutFromMarkup, c as withMask };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "4.0.2-next.20261007003844",
+  "version": "4.0.2",
   "description": "",
   "repository": {
     "type": "git",
@@ -12,16 +12,17 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "5.0.2-next.20261007003844",
-    "@pie-lib/editable-html-tip-tap": "3.0.2-next.20261007003844",
-    "@pie-lib/render-ui": "8.0.2-next.20261007003844",
-    "@pie-lib/translator": "5.0.2-next.20261006160832",
+    "@pie-element/shared-utils": "0.1.2",
+    "@pie-lib/drag": "5.0.2",
+    "@pie-lib/editable-html-tip-tap": "3.0.2",
+    "@pie-lib/render-ui": "8.0.2",
+    "@pie-lib/translator": "5.0.1",
     "debug": "^4.1.1",
     "prop-types": "^15.7.2",
     "to-style": "^1.3.3",
     "@dnd-kit/core": "^6.3.1",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.3-next.20261007003844",
-    "@pie-element/shared-lodash": "0.1.3-next.20261006160832",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.3",
+    "@pie-element/shared-lodash": "0.1.2",
     "clsx": "^2.1.1"
   },
   "type": "module",