gkachele-saas/memoria/EDITOR_VISUAL_PREVIEW.md

🎨 Editor Visual en Preview - GKACHELE™

© 2025 GKACHELE™. Todos los derechos reservados.

📋 ANÁLISIS: Edición en Preview vs Sidebar

Hash: gkachele-editor-visual-20250114-1425

---

🎯 OBJETIVO

Permitir editar el contenido del sitio de dos formas:

1. Desde el sidebar (actual) - Controles organizados
2. Directamente en el preview (nuevo) - Click to edit, como sistemas modernos

---

🔍 ANÁLISIS DE OPCIONES

Opción A: Click to Edit en Preview (Recomendado)

Cómo funciona:

• Usuario hace click en cualquier elemento del preview (título, texto, imagen)
• Se abre un modal o inline editor
• Cambios se reflejan inmediatamente
• Similar a WordPress Gutenberg o Elementor

Ventajas:

• ✅ Más intuitivo y visual
• ✅ El usuario ve exactamente qué está editando
• ✅ Experiencia moderna y profesional
• ✅ Reduce la necesidad de buscar en el sidebar

Desventajas:

• ⚠️ Requiere JavaScript más complejo
• ⚠️ Necesita identificar elementos editables
• ⚠️ Puede ser más lento en sitios grandes

Implementación:

// Agregar atributos data-editable a elementos del preview
<div data-editable="hero_title" data-type="text">
    {{ hero_title }}
</div>

// JavaScript para detectar clicks y abrir editor
document.querySelectorAll('[data-editable]').forEach(el => {
    el.addEventListener('click', (e) => {
        openInlineEditor(el);
    });
});

---

Opción B: Mejorar Sidebar Actual

Cómo funciona:

• Mantener sidebar actual
• Añadir más controles específicos
• Mejorar organización y UX
• Añadir previews visuales en el sidebar

Ventajas:

• ✅ Más fácil de implementar
• ✅ Ya funciona
• ✅ Controles organizados

Desventajas:

• ⚠️ Menos intuitivo
• ⚠️ Usuario debe buscar en el sidebar
• ⚠️ Menos visual

---

Opción C: Híbrido (Mejor Opción)

Cómo funciona:

• Sidebar: Controles avanzados, configuración, colores, etc.
• Preview: Click to edit para contenido principal (títulos, textos, imágenes)
• Ambos sincronizados: Cambios en uno se reflejan en el otro

Ventajas:

• ✅ Lo mejor de ambos mundos
• ✅ Usuario elige cómo editar
• ✅ Flexible y potente
• ✅ Experiencia profesional

Implementación:

1. Sidebar para configuración avanzada
2. Preview con click to edit para contenido
3. Sincronización bidireccional

---

🚀 PLAN DE IMPLEMENTACIÓN (Opción C - Híbrido)

Fase 1: Click to Edit en Preview

Elementos editables:

• hero_title - Título principal
• hero_description - Descripción
• site_name - Nombre del sitio (en header)
• Textos de secciones (menú, horarios, etc.)
• Imágenes (click para cambiar URL)

Funcionalidad:

1. Agregar data-editable a elementos del template
2. JavaScript detecta clicks
3. Abre editor inline (modal o input overlay)
4. Guarda cambios automáticamente
5. Actualiza preview en tiempo real

Fase 2: Sincronización Bidireccional

Cómo funciona:

• Cambio en sidebar → Actualiza preview
• Cambio en preview → Actualiza sidebar
• Todo se guarda en content_json

Fase 3: Mejoras del Sidebar

• Agregar previews visuales
• Mejor organización
• Búsqueda de controles
• Atajos de teclado

---

📝 ESTRUCTURA TÉCNICA

Template HTML (con data-editable)

<!-- En template.html -->
<h1 data-editable="hero_title" data-type="text" class="editable">
    {{ hero_title or 'Bienvenido' }}
</h1>

<p data-editable="hero_description" data-type="textarea" class="editable">
    {{ hero_description or '' }}
</p>

<img data-editable="media.hero_image" data-type="image" 
     src="{{ media.hero_image or '' }}" class="editable">

JavaScript (Click to Edit)

// Detectar clicks en elementos editables
document.querySelectorAll('[data-editable]').forEach(el => {
    el.addEventListener('click', function(e) {
        if (e.target.closest('.editable')) {
            const field = this.dataset.editable;
            const type = this.dataset.type;
            openEditor(this, field, type);
        }
    });
    
    // Indicador visual de que es editable
    el.style.cursor = 'pointer';
    el.title = 'Click para editar';
});

function openEditor(element, field, type) {
    // Crear overlay con input
    const overlay = createEditorOverlay(element, field, type);
    document.body.appendChild(overlay);
}

function createEditorOverlay(element, field, type) {
    // Modal o input inline
    // Guardar al hacer blur o Enter
    // Actualizar preview
}

Backend (Guardar cambios)

@app.route('/api/customizer/update-field', methods=['POST'])
def update_field():
    """Actualizar un campo específico desde preview"""
    data = request.get_json()
    site_id = data.get('site_id')
    field = data.get('field')  # 'hero_title', 'horarios.lunes_viernes', etc.
    value = data.get('value')
    
    # Actualizar content_json
    # Retornar éxito

---

🎨 UX/UI

Indicadores Visuales

• Hover: Borde punteado o sombra
• Cursor: Pointer
• Tooltip: "Click para editar"
• Icono: ✏️ en esquina del elemento

Editor Inline

• Input/Textarea: Aparece sobre el elemento
• Botones: Guardar, Cancelar
• Atajos: Enter = Guardar, Esc = Cancelar
• Auto-save: Guardar después de 2 segundos sin escribir

---

✅ CHECKLIST DE IMPLEMENTACIÓN

Fase 1: Click to Edit

• Agregar data-editable a elementos del template
• JavaScript para detectar clicks
• Crear editor inline/modal
• Guardar cambios automáticamente
• Actualizar preview en tiempo real

Fase 2: Sincronización

• Sidebar → Preview (ya funciona)
• Preview → Sidebar (nuevo)
• Validar que ambos estén sincronizados

Fase 3: Mejoras

• Indicadores visuales de elementos editables
• Tooltips y ayuda contextual
• Atajos de teclado
• Búsqueda en sidebar

---

🔄 FLUJO COMPLETO

1. Usuario abre customizer
2. Ve preview con elementos editables (indicados visualmente)
3. Click en "Bienvenido" (hero_title)
4. Se abre editor inline
5. Usuario escribe nuevo título
6. Presiona Enter o hace blur
7. Cambio se guarda en content_json
8. Preview se actualiza automáticamente
9. Sidebar también se actualiza (si tiene ese campo)

---

📊 COMPARACIÓN CON SISTEMAS SIMILARES

Característica	WordPress	Elementor	GKACHELE™ (Propuesto)
Click to Edit	✅	✅	✅ (Fase 1)
Sidebar Controls	✅	✅	✅ (Actual)
Preview en Tiempo Real	✅	✅	✅ (Actual)
Sincronización Bidireccional	✅	✅	✅ (Fase 2)
Editor Inline	✅	✅	✅ (Fase 1)

---

🎯 DECISIÓN

Implementar Opción C (Híbrido):

• Mantener sidebar actual (funciona bien)
• Añadir click to edit en preview
• Sincronización bidireccional
• Mejoras progresivas

---

Última actualización: 14 Enero 2025 - 14:25
Hash: gkachele-editor-visual-20250114-1425

---

© 2025 GKACHELE™. Todos los derechos reservados.