insertr/insertr-cli/assets/editor/insertr-editor.js

/**
 * 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);
    }
})();