@pie-lib/text-select 4.0.2-next.20261007001636 → 4.0.2-next.20261007021359

package/dist/token-select/index.js

@@ -9,22 +9,23 @@ import { noSelect as d } from "@pie-lib/style-utils";
 import f from "debug";
 import { renderToString as p } from "react-dom/server";
 import m from "@pie-lib/translator";
+import { sanitizeModelHtml as h } from "@pie-element/shared-utils";
 //#region src/token-select/index.tsx
-var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("div")(() => ({
+var { translator: g } = m, _ = f("@pie-lib:text-select:token-select"), v = i("div")(() => ({
 	backgroundColor: "none",
 	whiteSpace: "pre",
 	...d(),
 	"& p": { whiteSpace: "break-spaces" }
-})), v = i("div")(() => ({
+})), y = i("div")(() => ({
 	display: "none",
 	position: "absolute",
 	visibility: "hidden",
 	pointerEvents: "none"
-})), y = (e = "") => e.replace(/&nbsp;/gi, "\xA0"), b = (e = "") => y(e).replace(/<\/p>\s*<p[^>]*>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, ""), x = {
+})), b = (e = "") => e.replace(/&nbsp;/gi, "\xA0"), x = (e = "") => b(e).replace(/<\/p>\s*<p[^>]*>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, ""), S = {
 	correct: "selectText.correctAnswerSelected",
 	incorrect: "selectText.incorrectSelection",
 	missing: "selectText.correctAnswerNotSelected"
-}, S = (e) => e.correct === void 0 ? e.isMissing ? "missing" : void 0 : e.correct ? "correct" : "incorrect", C = (e) => e.text === "\n\n" || e.text === "\n", w = "[data-indexkey][tabindex]", T = (e) => e ? Number(e.dataset.indexkey) : void 0, E = class extends n.Component {
+}, C = (e) => e.correct === void 0 ? e.isMissing ? "missing" : void 0 : e.correct ? "correct" : "incorrect", w = (e) => e.text === "\n\n" || e.text === "\n", T = "[data-indexkey][tabindex]", E = (e) => e ? Number(e.dataset.indexkey) : void 0, D = class extends n.Component {
 	static propTypes = {
 		tokens: r.arrayOf(r.shape(t)).isRequired,
 		className: r.string,
@@ -48,7 +49,7 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 	selectedCount = () => this.props.tokens.filter((e) => e.selected).length;
 	canSelectMore = (e) => {
 		let { maxNoOfSelections: t } = this.props;
-		return t === 1 ? !0 : (g("[canSelectMore] maxNoOfSelections: ", t, "selectedCount: ", e), t <= 0 || isFinite(t) && e < t);
+		return t === 1 ? !0 : (_("[canSelectMore] maxNoOfSelections: ", t, "selectedCount: ", e), t <= 0 || isFinite(t) && e < t);
 	};
 	toggleToken = (t) => {
 		let n = (t.target.closest?.(`.${e.rootClassName}`))?.dataset?.indexkey;
@@ -72,7 +73,7 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 				s.splice(e, 1, c), n(s);
 			} else {
 				if (o && a > 0 && this.selectedCount() >= a) {
-					g("skip toggle max reached");
+					_("skip toggle max reached");
 					return;
 				}
 				let t = {
@@ -83,28 +84,28 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 			}
 		}
 	};
-	sequence = () => Array.from(this.containerRef.current?.querySelectorAll(w) || []);
+	sequence = () => Array.from(this.containerRef.current?.querySelectorAll(T) || []);
 	focusedToken = () => {
 		let e = this.containerRef.current, t = e?.getRootNode().activeElement;
-		return t && e.contains(t) ? t.closest(w) : null;
+		return t && e.contains(t) ? t.closest(T) : null;
 	};
 	syncTabStop = () => {
-		let e = this.sequence(), t = e.find((e) => T(e) === this.activeIndex) || e.find((e) => e.getAttribute("aria-pressed") === "true") || e[0];
+		let e = this.sequence(), t = e.find((e) => E(e) === this.activeIndex) || e.find((e) => e.getAttribute("aria-pressed") === "true") || e[0];
 		return e.forEach((e) => {
 			let n = e === t ? "0" : "-1";
 			e.getAttribute("tabindex") !== n && e.setAttribute("tabindex", n);
 		}), t;
 	};
 	onFocus = (e) => {
-		let t = e.target.closest?.(w);
-		t && (this.activeIndex = T(t), this.syncTabStop());
+		let t = e.target.closest?.(T);
+		t && (this.activeIndex = E(t), this.syncTabStop());
 	};
 	onKeyDown = (e) => {
 		if (!this.operable() || e.altKey || e.ctrlKey || e.metaKey) return;
-		let t = e.target.closest?.(w);
+		let t = e.target.closest?.(T);
 		if (!t) return;
 		if (e.key === " " || e.key === "Enter") {
-			e.preventDefault(), !e.repeat && t.getAttribute("aria-disabled") !== "true" && (this.keyboardToggle = !0, this.toggleAt(T(t)));
+			e.preventDefault(), !e.repeat && t.getAttribute("aria-disabled") !== "true" && (this.keyboardToggle = !0, this.toggleAt(E(t)));
 			return;
 		}
 		let n = this.sequence(), r = n.indexOf(t), i = n.length - 1, a = {
@@ -122,56 +123,56 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 	}
 	getSnapshotBeforeUpdate() {
 		let e = this.focusedToken();
-		return e ? T(e) : null;
+		return e ? E(e) : null;
 	}
 	componentDidUpdate(e, t, n) {
 		let r = this.syncTabStop();
-		n == null || this.focusedToken() || (this.sequence().find((e) => T(e) === n) || r)?.focus({
+		n == null || this.focusedToken() || (this.sequence().find((e) => E(e) === n) || r)?.focus({
 			preventScroll: !0,
 			focusVisible: this.keyboardToggle
 		});
 	}
 	groupName = () => {
 		let { maxNoOfSelections: e, language: t } = this.props;
-		return e > 0 ? h.t("selectText.textGroupWithLimit", {
+		return e > 0 ? g.t("selectText.textGroupWithLimit", {
 			lng: t,
 			max: e
-		}) : h.t("selectText.textGroup", { lng: t });
+		}) : g.t("selectText.textGroup", { lng: t });
 	};
 	generateTokensInHtml = () => {
-		let { tokens: t, disabled: n, highlightChoices: r, animationsDisabled: i, language: a } = this.props, o = this.selectedCount(), c = this.operable(), l = {}, u = (e) => c && !C(e) && (e.selected || e.selectable), d = (t || []).filter(u).length, f = 0, m = (e, t) => {
+		let { tokens: t, disabled: n, highlightChoices: r, animationsDisabled: i, language: a } = this.props, o = this.selectedCount(), c = this.operable(), l = {}, u = (e) => c && !w(e) && (e.selected || e.selectable), d = (t || []).filter(u).length, f = 0, m = (e, t) => {
 			let n = `${this.idPrefix}-${e}`;
 			return l[n] = t, n;
 		};
 		return {
 			html: (t || []).reduce((t, c, l) => {
-				let g = c.selected || c.selectable && this.canSelectMore(o), _ = c.correct !== void 0 && (c.selectable || c.selected);
+				let h = c.selected || c.selectable && this.canSelectMore(o), _ = c.correct !== void 0 && (c.selectable || c.selected);
 				if (c.text === "\n\n") return `${t}</p><p>`;
 				if (c.text === "\n") return `${t}<br>`;
-				if (u(c) || g && !n || _ || c.selected || c.isMissing || i && c.predefined) {
+				if (u(c) || h && !n || _ || c.selected || c.isMissing || i && c.predefined) {
 					let o = u(c), _;
-					if (o) f += 1, _ = m(`position-${f}`, h.t("selectText.tokenPosition", {
+					if (o) f += 1, _ = m(`position-${f}`, g.t("selectText.tokenPosition", {
 						lng: a,
 						index: f,
 						total: d
 					}));
 					else {
-						let e = S(c);
-						e && (_ = m(e, h.t(x[e], { lng: a })));
+						let e = C(c);
+						e && (_ = m(e, g.t(S[e], { lng: a })));
 					}
 					return t + p(/* @__PURE__ */ s(e, {
 						disabled: n,
 						index: l,
 						...c,
-						text: b(c.text),
-						selectable: g,
+						text: x(c.text),
+						selectable: h,
 						highlight: r,
 						animationsDisabled: i,
 						operable: o,
 						describedBy: _
 					}, l));
 				}
-				return t + y(c.text);
+				return t + b(c.text);
 			}, "<p>") + "</p>",
 			descriptions: l
 		};
@@ -179,7 +180,7 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 	render() {
 		let { className: t } = this.props, { html: n, descriptions: r } = this.generateTokensInHtml();
 		return /* @__PURE__ */ c(o, { children: [
-			/* @__PURE__ */ c(v, {
+			/* @__PURE__ */ c(y, {
 				"aria-hidden": "true",
 				children: [
 					/* @__PURE__ */ s(e, {
@@ -255,7 +256,7 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 					})
 				]
 			}),
-			/* @__PURE__ */ s(_, {
+			/* @__PURE__ */ s(v, {
 				ref: this.containerRef,
 				className: t,
 				role: "group",
@@ -263,7 +264,7 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 				onClick: this.toggleToken,
 				onKeyDown: this.onKeyDown,
 				onFocus: this.onFocus,
-				dangerouslySetInnerHTML: { __html: n }
+				dangerouslySetInnerHTML: { __html: h(n) }
 			}),
 			Object.keys(r).length > 0 && /* @__PURE__ */ s("div", {
 				hidden: !0,
@@ -276,4 +277,4 @@ var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("di
 	}
 };
 //#endregion
-export { E as TokenSelect, E as default, t as TokenTypes };
+export { D as TokenSelect, D as default, t as TokenTypes };

package/dist/utils.js

@@ -1,21 +1,22 @@
+import { sanitizeModelHtml as e } from "@pie-element/shared-utils";
 //#region src/utils.tsx
-var e = (e = "") => {
-	let t = document.createElement("div");
-	return t.innerHTML = e.trim(), t;
-}, t = (e) => {
+var t = (t = "") => {
+	let n = document.createElement("div");
+	return n.innerHTML = e(t).trim(), n;
+}, n = (e) => {
 	e.querySelectorAll("br").forEach((e) => e.replaceWith("\n")), e.innerHTML = e.innerHTML.replace(/\n\n/g, "\n");
-}, n = (e, t) => t ? e.innerHTML : `${e.innerHTML}\n\n`, r = (e) => {
-	let t = e.querySelectorAll("p"), r = "";
+}, r = (e, t) => t ? e.innerHTML : `${e.innerHTML}\n\n`, i = (e) => {
+	let t = e.querySelectorAll("p"), n = "";
 	return t.forEach((e, i) => {
-		r += n(e, i === t.length - 1);
-	}), r || null;
-}, i = (n) => {
-	let i = e(n), a = Array.from(i.querySelectorAll("*"));
-	if (i.querySelectorAll("p").length === 0) {
+		n += r(e, i === t.length - 1);
+	}), n || null;
+}, a = (e) => {
+	let r = t(e), a = Array.from(r.querySelectorAll("*"));
+	if (r.querySelectorAll("p").length === 0) {
 		let e = document.createElement("div");
-		e.innerHTML = `<p>${i.innerHTML}</p>`, i = e;
+		e.innerHTML = `<p>${r.innerHTML}</p>`, r = e;
 	}
-	return a.length === 0 ? n : (t(i), r(i));
+	return a.length === 0 ? e : (n(r), i(r));
 };
 //#endregion
-export { t as parseBrs, n as parseParagraph, r as parseParagraphs, i as prepareText };
+export { n as parseBrs, r as parseParagraph, i as parseParagraphs, a as prepareText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/text-select",
-  "version": "4.0.2-next.20261007001636",
+  "version": "4.0.2-next.20261007021359",
   "description": "Some react components for text selection",
   "repository": {
     "type": "git",
@@ -12,8 +12,9 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
+    "@pie-element/shared-utils": "0.2.0-next.20261007021359",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "8.0.2-next.20261007001636",
+    "@pie-lib/render-ui": "8.0.2-next.20261007021359",
     "@pie-lib/style-utils": "3.0.2-next.20261006160832",
     "@pie-lib/translator": "5.0.2-next.20261006160832",
     "debug": "^4.1.1",