Implement complete content injection and enhancement pipeline

- Add content API client with HTTP and mock implementations - Implement HTML content injection with database content replacement - Create enhance command for build-time content injection - Integrate enhancement with servedev for live development workflow - Add editor asset injection and serving (/_insertr/ endpoints) - Support on-the-fly HTML enhancement during development - Enable complete 'Tailwind of CMS' workflow: parse → inject → serve
2025-09-03 12:35:54 +02:00
parent 1f97acc1bf
commit 4407f84bbc
8 changed files with 1017 additions and 20 deletions
--- a/insertr-cli/assets/editor/insertr-editor.js
+++ b/insertr-cli/assets/editor/insertr-editor.js
@@ -0,0 +1,85 @@
+/**
+ * Insertr Editor - Development Mode
+ * Loads editing capabilities for elements marked with data-insertr-enhanced="true"
+ */
+
+(function() {
+    'use strict';
+    
+    console.log('🔧 Insertr Editor loaded (development mode)');
+    
+    // Initialize editor when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initEditor);
+    } else {
+        initEditor();
+    }
+    
+    function initEditor() {
+        console.log('🚀 Initializing Insertr Editor');
+        
+        // Find all enhanced elements
+        const enhancedElements = document.querySelectorAll('[data-insertr-enhanced="true"]');
+        console.log(`📝 Found ${enhancedElements.length} editable elements`);
+        
+        // Add visual indicators for development
+        enhancedElements.forEach(addEditIndicator);
+        
+        // Add global styles
+        addEditorStyles();
+    }
+    
+    function addEditIndicator(element) {
+        const contentId = element.getAttribute('data-content-id');
+        const contentType = element.getAttribute('data-content-type');
+        
+        // Add hover effect
+        element.style.cursor = 'pointer';
+        element.style.position = 'relative';
+        
+        // Add click handler for development demo
+        element.addEventListener('click', function(e) {
+            e.preventDefault();
+            alert(`Edit: ${contentId}\nType: ${contentType}\nCurrent: "${element.textContent.trim()}"`);
+        });
+        
+        // Add visual indicator on hover
+        element.addEventListener('mouseenter', function() {
+            element.classList.add('insertr-editing-hover');
+        });
+        
+        element.addEventListener('mouseleave', function() {
+            element.classList.remove('insertr-editing-hover');
+        });
+    }
+    
+    function addEditorStyles() {
+        const styles = `
+            .insertr-editing-hover {
+                outline: 2px dashed #007cba !important;
+                outline-offset: 2px !important;
+                background-color: rgba(0, 124, 186, 0.05) !important;
+            }
+            
+            [data-insertr-enhanced="true"]:hover::after {
+                content: "✏️ " attr(data-content-type);
+                position: absolute;
+                top: -25px;
+                left: 0;
+                background: #007cba;
+                color: white;
+                padding: 2px 6px;
+                font-size: 11px;
+                border-radius: 3px;
+                white-space: nowrap;
+                z-index: 1000;
+                font-family: monospace;
+            }
+        `;
+        
+        const styleSheet = document.createElement('style');
+        styleSheet.type = 'text/css';
+        styleSheet.innerHTML = styles;
+        document.head.appendChild(styleSheet);
+    }
+})();