Éditeur rich text et checklists collaboratives — TipTap dans React Native

Un mémo, ce n'est pas juste du texte brut. C'est des titres, du gras, des listes, des checklists. Et dans un contexte collaboratif, une checklist c'est un outil de coordination.

TipTap dans React Native

TipTap est fantastique sur le web. Sur React Native, c'est une autre histoire. Pas de DOM. La solution : une WebView qui embarque l'éditeur avec un bridge bidirectionnel. Le contenu est sérialisé en JSON, envoyé via le bridge, et stocké en HTML.

L'éditeur supporte : titres, gras/italique, listes, blocs de code, et checklists interactives. Le plus dur : gérer le clavier mobile et le scroll automatique du curseur.

Checklists : single vs everyone

Single : un seul membre doit cocher pour valider. "Acheter le café" — le premier qui le fait, c'est bon.

Everyone : chaque membre doit cocher individuellement. "Lire le CR" — on veut s'assurer que tout le monde l'a lu.

En base, une table de validation stocke l'état par utilisateur et par item.

La synchronisation temps réel

J'utilise Supabase Realtime pour les changements. Le merge se fait au niveau des items individuels, pas du document entier — ce qui réduit les conflits. C'est pas du CRDT mais c'est suffisant pour un usage collaboratif normal.