【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識

BRANK

概要4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。対象読者の例リッチテキストエディタに興味があるリッチテキストエディタの開発がどれくらい難しそうかなんとなく把握しておきたい同じ会社や近いチームにリッチテキストエディタの開発者がいて、そのうち関わることになるかもだから事前にキャッチアップしておきたい筆者についてこれまで実装経験のあるリッチテキストエディタQuillSlatePlateTiptapAzukiリッチテキストエデ…