[UI / PRESENTATION] F-03.3 — Editor de Texto Enriquecido para Comentarios
Épica: EPIC-03 — Detalle y Archivado de un Log
🏷️ Categoría
Categoría: UI / PresentationSecundaria: DX / ToolingImpacta en: Equipo Frontend (Livewire/Blade)
📦 Dependencias
Backlogs que deben estar completados antes de implementar esta feature.
| Backlog | Motivo |
|---|---|
| F-00.1 | Entorno npm disponible (npm install @tiptap/core @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-link) y Composer para mews/purifier |
Prioridad: Must
Descripción: Como administrador del sistema Quiero escribir comentarios usando un editor rich text que me permita dar formato al texto e insertar imágenes Para documentar la resolución de un error con capturas de pantalla y contexto visual detallado
Criterios de Aceptación (Checklist):
- [ ] Escenario 1 (Formato texto): Dado que estoy escribiendo un comentario, cuando aplico negrita, cursiva, listas o encabezados, entonces el formato se preserva al guardar y al visualizar posteriormente.
- [ ] Escenario 2 (Imágenes): Dado que arrastro o pego una imagen en el editor, cuando se inserta, entonces la imagen queda embebida en el comentario y es visible en la vista de detalle del histórico.
- [ ] Escenario 3 (Límite de tamaño): Dado que intento subir una imagen mayor de 2 MB, cuando se intenta insertar, entonces el editor muestra un mensaje de error y no la incluye.
- [ ] Escenario 4 (Seguridad XSS): Dado que el admin guarda un comentario con HTML potencialmente malicioso, cuando el backend lo persiste, entonces el contenido pasa por sanitización server-side (DOMPurify/HTMLPurifier) antes de almacenarse.
- [ ] Requisito Técnico: Usar TipTap 2 integrado con Livewire vía Alpine.js bridge: un componente Alpine captura el HTML del editor y lo sincroniza con
$wire.set('commentContent', html). Extensiones: StarterKit, Image, Link. Almacenar contenido como HTML sanitizado (HTMLPurifier en backend). Límite total de comentario: 10 MB (STRIDE D-RTE-01). Validar MIME type real de imágenes en backend (STRIDE E-RTE-01).