@webmate-studio/builder 0.2.113 → 0.2.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.113",
+  "version": "0.2.114",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/index.js

@@ -5,6 +5,7 @@ import { bundleIsland, bundleComponentIslands } from './bundler.js';
 import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
 import TemplateProcessor, { templateProcessor } from './template-processor.js';
+import { SafeHtml } from './safe-html.js';
 import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens } from './design-tokens.js';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
@@ -18,4 +19,4 @@ function getMotionRuntime() {
 	return readFileSync(join(__dirname, '../dist/motion-runtime.min.js'), 'utf-8');
 }
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens };

package/src/markdown.js

@@ -6,6 +6,7 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import { JSDOM } from 'jsdom';
+import { SafeHtml } from './safe-html.js';
 
 // DOMPurify für Server-Side Rendering konfigurieren
 const window = new JSDOM('').window;
@@ -160,8 +161,9 @@ export function processMarkdownProps(props, propSchema = null, componentMetadata
 				options.headingStartLevel = headingStartLevel;
 			}
 
-			// Convert markdown to HTML
-			processed[key] = markdownToHtml(value, options);
+			// Convert markdown to HTML and wrap in SafeHtml
+			// (already sanitized by DOMPurify — evaluator will not escape)
+			processed[key] = new SafeHtml(markdownToHtml(value, options));
 		}
 	}
 

package/src/safe-html.js

@@ -0,0 +1,30 @@
+/**
+ * SafeHtml — Marker for pre-sanitized HTML content.
+ *
+ * When processMarkdownProps() converts markdown to HTML, the result is
+ * already sanitized by DOMPurify. Wrapping it in SafeHtml tells the
+ * template evaluator to output it without escaping.
+ *
+ * Usage:
+ *   const safe = new SafeHtml('<h2>Hello</h2>');
+ *   safe.toString() // → '<h2>Hello</h2>'
+ *   safe.__safeHtml // → true (marker for evaluator)
+ */
+
+class SafeHtml {
+	constructor(html) {
+		this.html = String(html ?? '');
+		this.__safeHtml = true;
+	}
+
+	toString() {
+		return this.html;
+	}
+
+	valueOf() {
+		return this.html;
+	}
+}
+
+export { SafeHtml };
+export default SafeHtml;

package/src/template-evaluator.js

@@ -72,7 +72,8 @@ class TemplateEvaluator {
 	}
 
 	/**
-	 * {expression} — evaluate and escape for safe HTML output
+	 * {expression} — evaluate and escape for safe HTML output.
+	 * SafeHtml instances (from processMarkdownProps) are output without escaping.
 	 */
 	evalExpression(node, ctx) {
 		const value = this.expr.evaluate(node.expression, ctx);
@@ -80,6 +81,11 @@ class TemplateEvaluator {
 		if (value === undefined || value === null) return '';
 		if (typeof value === 'boolean') return '';
 
+		// SafeHtml marker — already sanitized by DOMPurify, don't escape
+		if (value && value.__safeHtml) {
+			return value.toString();
+		}
+
 		// Handle special objects
 		const resolved = this.resolveValue(value);
 		return this.escapeHtml(String(resolved));
@@ -360,12 +366,16 @@ class TemplateEvaluator {
 	// HTML escaping
 	// ========================================
 
+	/**
+	 * Escape HTML for text content.
+	 * Only escapes < and > (XSS protection).
+	 * Does NOT escape & — CMS users legitimately use & in content,
+	 * and escaping it would turn "Hallo & Hi" into "Hallo &amp; Hi".
+	 */
 	escapeHtml(str) {
 		return str
-			.replace(/&/g, '&amp;')
 			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;')
-			.replace(/"/g, '&quot;');
+			.replace(/>/g, '&gt;');
 	}
 
 	escapeAttr(str) {