Rich-Text-Editor und kollaborative Checklisten – TipTap in React Native

Ein Memo ist nicht nur einfacher Text. Es sind Überschriften, Fettdruck, Listen, Checklisten. Und in einem kollaborativen Kontext ist eine Checkliste ein Koordinationswerkzeug.

TipTap in React Native

TipTap ist fantastisch im Web. Auf React Native ist das eine andere Geschichte. Kein DOM. Die Lösung: eine WebView, die den Editor mit einer bidirektionalen Brücke einbettet. Der Inhalt wird in JSON serialisiert, über die Brücke gesendet und als HTML gespeichert.

Der Editor unterstützt: Überschriften, Fett-/Kursivschrift, Listen, Codeblöcke und interaktive Checklisten. Das Schwierigste: die Verwaltung der mobilen Tastatur und des automatischen Scrollens des Cursors.

Checklisten: Einzeln vs. Alle

Einzeln: Nur ein Mitglied muss abhaken, um zu bestätigen. „Kaffee kaufen“ – der Erste, der es tut, ist erledigt.

Alle: Jedes Mitglied muss individuell abhaken. „CR lesen“ – wir wollen sicherstellen, dass es jeder gelesen hat.

In der Datenbank speichert eine Validierungstabelle den Status pro Benutzer und pro Element.

Echtzeit-Synchronisierung

Ich verwende Supabase Realtime für Änderungen. Das Zusammenführen erfolgt auf der Ebene einzelner Elemente, nicht des gesamten Dokuments – was Konflikte reduziert. Es ist kein CRDT, aber für eine normale kollaborative Nutzung ausreichend.