add HTML compat for text, sanitise HTML

Author: everloste

bun.lock

@@ -10,6 +10,7 @@
 		"typescript": "~5.8.3"
 	},
 	"dependencies": {
+		"dompurify": "^3.2.6",
 		"jszip": "^3.10.1",
 		"typescript-event-target": "^1.1.1",
 		"vite": "^7.1.0"

package.json

@@ -1,4 +1,5 @@
 import JSZip from "jszip";
+import DOMPurify from "dompurify";
 import type { Datapack } from "./datapack";
 import { DatapackModifierInstance, type DatapackChangeMethod, type DatapackChangeValue } from "./datapack_changes";
 
@@ -114,8 +115,11 @@ export class ConfigClass {
 
 				const widgetText = clone.querySelector(".widget-text") as HTMLElement | null;
 				const inputElement = clone.querySelector(".widget-input") as HTMLInputElement | null;
-
-				if ("text" in element && widgetText) widgetText.innerText = element.text;
+				
+				if ("text" in element && widgetText) {
+					const sanitized_html = DOMPurify.sanitize(element.text);
+					widgetText.innerHTML = sanitized_html;
+				}
 
 				if (type === "switch") {
 					(clone.querySelector(".widget-switch-input") as HTMLInputElement).checked = !(

src/config.ts

@@ -280,6 +280,21 @@ input[type="range"]::-moz-range-thumb {
 	color: inherit;
 	font-family: inherit;
 }
+.text-widget {
+	padding-top: 0.25em;
+	padding-bottom: 0.25em;
+	line-height: 1.25;
+}
+.heading-widget {
+	padding-top: 0.25em;
+	padding-bottom: 0.25em;
+	line-height: 1.25;
+}
+.title-widget {
+	padding-top: 0.25em;
+	padding-bottom: 0.25em;
+	line-height: 1.25;
+}
 
 footer {
 	p {