Editor rich text e checklist collaborative — TipTap in React Native

Un memo non è solo testo semplice. È titoli, grassetto, elenchi, checklist. E in un contesto collaborativo, una checklist è uno strumento di coordinamento.

TipTap in React Native

TipTap è fantastico sul web. Su React Native, è un'altra storia. Nessun DOM. La soluzione: una WebView che incorpora l'editor con un bridge bidirezionale. Il contenuto viene serializzato in JSON, inviato tramite il bridge e memorizzato in HTML.

L'editor supporta: titoli, grassetto/corsivo, elenchi, blocchi di codice e checklist interattive. La parte più difficile: gestire la tastiera mobile e lo scorrimento automatico del cursore.

Checklist: singolo vs tutti

Singolo: un solo membro deve spuntare per convalidare. "Compra il caffè" — il primo che lo fa, va bene.

Tutti: ogni membro deve spuntare individualmente. "Leggi il verbale" — vogliamo assicurarci che tutti l'abbiano letto.

Nel database, una tabella di convalida memorizza lo stato per utente e per elemento.

La sincronizzazione in tempo reale

Utilizzo Supabase Realtime per le modifiche. L'unione avviene a livello dei singoli elementi, non dell'intero documento — il che riduce i conflitti. Non è CRDT ma è sufficiente per un uso collaborativo normale.