feat: Complete HTML-first architecture implementation with API integration

- Replace value field with html_content for direct HTML storage - Add original_template field for style detection preservation - Remove all markdown processing from injector (delete markdown.go) - Fix critical content extraction/injection bugs in engine - Add missing UpdateContent PUT handler for content persistence - Fix API client field names and add updateContent() method - Resolve content type validation (only allow text/link types) - Add UUID-based ID generation to prevent collisions - Complete first-pass processing workflow for unprocessed elements - Verify end-to-end: Enhancement → Database → API → Editor → Persistence All 37 files updated for HTML-first content management system. Phase 3a implementation complete and production ready.
2025-09-20 16:42:00 +02:00
parent bb5ea6f873
commit 2177055c76
37 changed files with 1189 additions and 737 deletions
--- a/debug-style-detection.html
+++ b/debug-style-detection.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Debug Style Detection</title>
+    <style>
+        body { 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 2rem;
+            line-height: 1.6;
+        }
+        .fancy {
+            color: #7c3aed;
+            text-decoration: none;
+            border-bottom: 2px solid #a855f7;
+        }
+        .fancy:hover {
+            background: #ede9fe;
+        }
+        .test-output {
+            background: #f5f5f5;
+            padding: 1rem;
+            border-radius: 8px;
+            font-family: 'Monaco', 'Courier New', monospace;
+            white-space: pre-wrap;
+            max-height: 500px;
+            overflow-y: auto;
+            margin-top: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <h1>🔍 Debug Style Detection</h1>
+    <p>Testing what styles are detected for Example 2:</p>
+    
+    <!-- This is Example 2 from the simple demo -->
+    <p id="example2" class="insertr">Visit our <a class="fancy" href="#about">about page</a> for more info.</p>
+    
+    <button onclick="debugStyleDetection()">Debug Style Detection</button>
+    <div id="output" class="test-output">Click the button to see debug output...</div>
+
+    <script type="module">
+        import { styleDetectionEngine } from './lib/src/utils/style-detection.js';
+        
+        window.debugStyleDetection = function() {
+            const element = document.getElementById('example2');
+            const output = document.getElementById('output');
+            
+            console.log('🔍 Debugging style detection for:', element.innerHTML);
+            
+            // Run style detection
+            const result = styleDetectionEngine.detectStylesAndStructure(element);
+            
+            let debugInfo = '🔍 Style Detection Debug Results\n';
+            debugInfo += '================================\n\n';
+            
+            debugInfo += `Element HTML: ${element.innerHTML}\n\n`;
+            
+            debugInfo += `Detected Styles (${result.styles.size}):\n`;
+            debugInfo += '-------------------------\n';
+            
+            for (const [styleId, styleInfo] of result.styles) {
+                debugInfo += `Style ID: ${styleId}\n`;
+                debugInfo += `  Name: ${styleInfo.name}\n`;
+                debugInfo += `  Tag: ${styleInfo.tagName}\n`;
+                debugInfo += `  Classes: [${styleInfo.classes.join(', ')}]\n`;
+                debugInfo += `  Attributes: ${JSON.stringify(styleInfo.attributes)}\n\n`;
+            }
+            
+            debugInfo += `Content Structure (${result.structure.length} pieces):\n`;
+            debugInfo += '----------------------------\n';
+            
+            result.structure.forEach((piece, index) => {
+                debugInfo += `${index}: ${piece.type}`;
+                if (piece.type === 'styled') {
+                    debugInfo += ` (styleId: ${piece.styleId})`;
+                }
+                if (piece.content) {
+                    debugInfo += ` - "${piece.content}"`;
+                }
+                debugInfo += '\n';
+            });
+            
+            output.textContent = debugInfo;
+            console.log(debugInfo);
+        };
+    </script>
+</body>
+</html>