@webmate-studio/builder 0.2.51 → 0.2.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.51",
+  "version": "0.2.53",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -35,11 +35,14 @@
     "@webmate-studio/core": "^0.2.7",
     "@webmate-studio/parser": "^0.2.8",
     "dom-serializer": "^2.0.0",
+    "dompurify": "^3.3.0",
     "esbuild": "^0.19.0",
     "esbuild-svelte": "^0.9.3",
     "glob": "^10.3.0",
     "htmlparser2": "^9.0.0",
+    "jsdom": "^27.0.1",
     "lit": "^3.3.1",
+    "marked": "^17.0.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.6.0",
     "react": "^19.2.0",

package/src/index.js

@@ -3,5 +3,6 @@ import { generateComponentCSS, generateTailwindCSS, extractTailwindClasses } fro
 import { cleanComponentHTML } from './html-cleaner.js';
 import { bundleIsland, bundleComponentIslands } from './bundler.js';
 import { deduplicateCSS } from './css-deduplicator.js';
+import { markdownToHtml, processMarkdownProps } from './markdown.js';
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps };

package/src/markdown.js

@@ -0,0 +1,90 @@
+/**
+ * Markdown Parser Utility für @webmate-studio/builder
+ * Konvertiert Markdown zu sicherem HTML
+ */
+
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { JSDOM } from 'jsdom';
+
+// DOMPurify für Server-Side Rendering konfigurieren
+const window = new JSDOM('').window;
+const purify = DOMPurify(window);
+
+// Marked Konfiguration
+marked.setOptions({
+	gfm: true, // GitHub Flavored Markdown
+	breaks: true, // Konvertiere \n zu <br>
+	headerIds: true, // IDs für Headings
+	mangle: false, // Email-Adressen nicht verschleiern
+});
+
+/**
+ * Konvertiert Markdown zu sicherem HTML
+ *
+ * @param {string} markdown - Markdown-String
+ * @param {object} options - Optionale Konfiguration
+ * @param {boolean} options.sanitize - HTML sanitizen (default: true)
+ * @returns {string} - Sicherer HTML-String
+ */
+export function markdownToHtml(markdown, options = {}) {
+	if (!markdown || typeof markdown !== 'string') {
+		return '';
+	}
+
+	// Markdown zu HTML
+	let html = marked.parse(markdown);
+
+	// XSS-Schutz mit DOMPurify
+	if (options.sanitize !== false) {
+		const config = {
+			ALLOWED_TAGS: [
+				'p', 'br', 'strong', 'em', 'u', 's', 'del', 'ins',
+				'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+				'ul', 'ol', 'li',
+				'blockquote', 'pre', 'code',
+				'a', 'img',
+				'table', 'thead', 'tbody', 'tr', 'th', 'td',
+				'hr', 'abbr', 'cite', 'mark', 'small', 'sub', 'sup'
+			],
+			ALLOWED_ATTR: [
+				'href', 'title', 'alt', 'src',
+				'target', 'rel',
+				'class', 'id'
+			],
+			ALLOW_DATA_ATTR: false
+		};
+
+		html = purify.sanitize(html, config);
+	}
+
+	return html;
+}
+
+/**
+ * Process markdown props: Convert markdown strings to HTML
+ *
+ * @param {Object} props - Component props
+ * @param {Object} propSchema - Prop schema with format info (from component.json)
+ * @returns {Object} Props with markdown converted to HTML
+ */
+export function processMarkdownProps(props, propSchema = null) {
+	if (!props || typeof props !== 'object') return props;
+
+	const processed = { ...props };
+
+	for (const [key, value] of Object.entries(processed)) {
+		// Only process strings
+		if (typeof value !== 'string' || !value) continue;
+
+		// Check if this prop is markdown (via schema)
+		const isMarkdown = propSchema?.[key]?.format === 'markdown';
+
+		if (isMarkdown) {
+			// Convert markdown to HTML
+			processed[key] = markdownToHtml(value);
+		}
+	}
+
+	return processed;
+}