Editor de rich text e checklists colaborativas — TipTap no React Native

Um memorando não é apenas texto simples. São títulos, negrito, listas, checklists. E em um contexto colaborativo, uma checklist é uma ferramenta de coordenação.

TipTap no React Native

TipTap é fantástico na web. No React Native, é outra história. Sem DOM. A solução: uma WebView que incorpora o editor com uma ponte bidirecional. O conteúdo é serializado em JSON, enviado via ponte e armazenado em HTML.

O editor suporta: títulos, negrito/itálico, listas, blocos de código e checklists interativas. O mais difícil: gerenciar o teclado móvel e a rolagem automática do cursor.

Checklists: individual vs. todos

Individual: apenas um membro precisa marcar para validar. "Comprar café" — o primeiro que o faz, está feito.

Todos: cada membro deve marcar individualmente. "Ler o relatório" — queremos garantir que todos o leram.

No banco de dados, uma tabela de validação armazena o status por usuário e por item.

Sincronização em tempo real

Eu uso o Supabase Realtime para as mudanças. A mesclagem é feita no nível dos itens individuais, não do documento inteiro — o que reduz os conflitos. Não é CRDT, mas é suficiente para um uso colaborativo normal.