Optimizando la edición de CV en devlog-ist/landing con Livewire y Alpine.js

En el proyecto devlog-ist/landing, hemos estado trabajando en mejorar la estabilidad y la experiencia de usuario del editor de currículums (CV). El objetivo principal fue consolidar la estructura del editor utilizando un contenedor wire:ignore para evitar conflictos de renderizado entre Livewire y el DOM manejado por JavaScript.

Desafío de Sincronización

Al integrar un editor enriquecido, a menudo surge el problema de que el estado interno del componente de Livewire se desincroniza con el contenido visible en el DOM. Para solucionar esto, implementamos una estrategia basada en eventos.

Implementación del Editor

Utilizamos Alpine.js junto con x-ref para manipular directamente el elemento editable. El flujo consiste en escuchar eventos específicos desde Livewire para refrescar el contenido, asegurando que las actualizaciones de estado sean fluidas y no interrumpan la escritura del usuario.

// Ejemplo de estructura en Blade con Livewire
<div wire:ignore>
    <div 
        x-data="editor()" 
        x-ref="editor" 
        @cv-html-updated.window="refreshEditor($event.detail.html)"
        contenteditable="true">
    </div>
</div>

Pruebas de Calidad

Para garantizar que estas integraciones no regresen, hemos ampliado nuestra suite de pruebas en Filament. Verificamos no solo la accesibilidad de la página, sino también que la acción de generación dispare correctamente el evento cvHtmlUpdated, permitiendo que el componente de edición reaccione de forma reactiva y consistente.

Este cambio no solo mejora la fiabilidad del editor, sino que también prepara el terreno para futuras funcionalidades interactivas dentro del flujo de creación de perfiles.