# 🎨 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:**
```javascript
// 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)

```html
<!-- 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)

```javascript
// 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)

```python
@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.**