@websline/system-components 1.3.11 → 1.3.12

package/dist/components/atoms/icon/index.js

@@ -10,6 +10,13 @@ const moduleRegistry = import.meta.glob("./**/*.svelte", {
 
 const registry = {};
 
+// e.g. for backwards compatibility
+const synonyms = {
+	"checkbox-stack": "checkboxStack",
+	"file-pdf": "filePDF",
+	unlink: "connectCrossed",
+};
+
 const addIconsToRegistry = (pathModuleRecord) => {
 	const map = Object.fromEntries(
 		Object.entries(pathModuleRecord).map(([path, module]) => {
@@ -28,26 +35,14 @@ const addIconsToRegistry = (pathModuleRecord) => {
 		}),
 	);
 	Object.assign(registry, map);
-};
 
-// e.g. for backwards compatibility
-const synonyms = {
-	"checkbox-stack": "checkboxStack",
-	"file-pdf": "filePDF",
-	unlink: "connectCrossed",
+	// attach synonyms to registry
+	Object.entries(synonyms).map(([k, v]) => {
+		if (registry[k]) return;
+		registry[k] = registry[v];
+	});
 };
 
 addIconsToRegistry(moduleRegistry);
 
-// attach synonyms to registry, with error handling for duplicates
-Object.entries(synonyms).map(([k, v]) => {
-	if (registry[k]) {
-		console.error(
-			`skipping synonym "${k}" because it already exists in the registry`,
-		);
-		return;
-	}
-	registry[k] = registry[v];
-});
-
 export { addIconsToRegistry, registry, synonyms };

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, setContext } from "svelte";
+	import { setContext, untrack } from "svelte";
 	import RichTextEditorToolbar from "./toolbar/RichTextEditorToolbar.svelte";
 	import { richTextEditorVariants } from "./richTextEditor.variants.js";
 
@@ -42,9 +42,11 @@
 		...rest
 	} = $props();
 
+	let DOMPurify;
 	let element = $state();
-	let htmlInputValue = $state();
+	/** @type {import("@tiptap/core").Editor} */
 	let editor = $state.raw();
+	let htmlInputValue = $state();
 
 	let styles = $derived(richTextEditorVariants({ hideToolbar, size }));
 
@@ -58,7 +60,7 @@
 		const { TextStyle } = await import("@tiptap/extension-text-style");
 		const Highlight = (await import("@tiptap/extension-highlight")).default;
 		const Placeholder = (await import("@tiptap/extension-placeholder")).default;
-		const DOMPurify = (await import("dompurify")).default;
+		DOMPurify = (await import("dompurify")).default;
 
 		editor = new Editor({
 			element: element,
@@ -86,24 +88,13 @@
 			editorProps: {
 				handlePaste(view, event) {
 					const html = event.clipboardData.getData("text/html");
+					const sanitized = sanitizeContent(html);
+					if (!sanitized) return false;
 
-					if (html) {
-						const cleaned = DOMPurify.sanitize(html, {
-							ALLOWED_TAGS: ["b", "strong", "i", "em", "u", "s", "strike", "p", "br"],
-							ALLOWED_ATTR: [],
-						});
-
-						const normalized = cleanHTMLWhitespace(cleaned);
-
-						editor.commands.insertContent(normalized);
-
-						return true;
-					}
-
-					return false;
+					editor.commands.insertContent(sanitized);
+					return true;
 				},
 			},
-			content,
 			onUpdate: () => {
 				htmlInputValue = editor.getHTML();
 				oninput?.(htmlInputValue);
@@ -113,14 +104,24 @@
 		editor.commands.focus("end");
 	};
 
-	onMount(() => {
-		initEditor();
+	$effect(() => {
+		element;
+		placeholder;
+		untrack(initEditor);
 
 		return () => {
 			editor?.destroy();
 		};
 	});
 
+	$effect(() => {
+		content;
+		if (editor) {
+			const sanitized = untrack(() => sanitizeContent(content));
+			editor.commands.setContent(sanitized ?? "");
+		}
+	});
+
 	const cleanHTMLWhitespace = (html) => {
 		const dom = document.createElement("div");
 		dom.innerHTML = html;
@@ -143,6 +144,17 @@
 
 		return dom.innerHTML.trim();
 	};
+
+	const sanitizeContent = (html) => {
+		if (typeof html !== "string" || !DOMPurify) return;
+
+		const cleaned = DOMPurify.sanitize(html, {
+			ALLOWED_TAGS: ["b", "strong", "i", "em", "u", "s", "strike", "p", "br"],
+			ALLOWED_ATTR: [],
+		});
+
+		return cleanHTMLWhitespace(cleaned);
+	};
 </script>
 
 <div class={styles.base({ class: classes.base })} {...rest}>
@@ -152,7 +164,7 @@
 		</div>
 	{/if}
 	{#if fieldName}
-		<input type="hidden" name={fieldName} bind:value={htmlInputValue} />
+		<input type="hidden" name={fieldName} value={htmlInputValue} />
 	{/if}
 	<div
 		class={styles.field({ class: classes.field })}

package/dist/components/organisms/dialog/dialog.variants.js

@@ -7,12 +7,12 @@ const dialogVariants = tv({
 			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[1fr_auto] gap-4 overflow-hidden rounded-lg bg-white px-4 py-3 leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
 		overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
 		positioner:
-			"fixed inset-0 z-1 z-modal grid items-center justify-items-center overflow-auto",
+			"fixed inset-0 z-modal grid items-center justify-items-center overflow-auto",
 		trigger: "cursor-pointer",
 		formActions: [
-			"[&>[data-role=dismiss]]:order-1 [&>[data-role=dismiss]]:mr-auto",
-			"[&>[data-role=secondary]]:order-2",
-			"[&>[data-role=cta]]:order-3",
+			"*:data-[role=dismiss]:order-1 *:data-[role=dismiss]:mr-auto",
+			"*:data-[role=secondary]:order-2",
+			"*:data-[role=cta]:order-3",
 		],
 	},
 	variants: {

package/dist/components/organisms/modal/modal.variants.js

@@ -9,7 +9,8 @@ const modalVariants = tv({
 			"flex items-end border-b border-neutral-300 px-4 py-3 ui-title-2 dark:border-neutral-700",
 		body: "h-full overflow-auto",
 		overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
-		positioner: "fixed inset-0 z-modal grid items-center justify-items-center",
+		positioner:
+			"fixed inset-0 z-modal grid items-center justify-items-center overflow-auto",
 		trigger: "cursor-pointer",
 	},
 	variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "publishConfig": {
     "access": "public"
   },