Editor de texto enriquecido y listas de verificación colaborativas — TipTap en React Native

Una nota no es solo texto sin formato. Son títulos, negritas, listas, listas de verificación. Y en un contexto colaborativo, una lista de verificación es una herramienta de coordinación.

TipTap en React Native

TipTap es fantástico en la web. En React Native, es otra historia. No hay DOM. La solución: una WebView que incrusta el editor con un puente bidireccional. El contenido se serializa en JSON, se envía a través del puente y se almacena en HTML.

El editor soporta: títulos, negritas/cursivas, listas, bloques de código y listas de verificación interactivas. Lo más difícil: gestionar el teclado móvil y el desplazamiento automático del cursor.

Listas de verificación: individual vs. todos

Individual: solo un miembro debe marcar para validar. "Comprar café" — el primero que lo hace, listo.

Todos: cada miembro debe marcar individualmente. "Leer el informe" — queremos asegurarnos de que todos lo hayan leído.

En la base de datos, una tabla de validación almacena el estado por usuario y por elemento.

La sincronización en tiempo real

Utilizo Supabase Realtime para los cambios. La fusión se realiza a nivel de elementos individuales, no del documento completo, lo que reduce los conflictos. No es CRDT, pero es suficiente para un uso colaborativo normal.