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

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

[nekoline]

“海外製のちょっとアーリーなSaaSいじっていると、日本語の確定が変なことってよくあるじゃないですか。あれは大抵Contenteditable属性をTrueにしたDOMに対して、onCompositionEndをちゃんと実装せずに、onChangeとかonBlurとかだけ取

[tamanecoplus]

エンジニア「マークアップで編集しろ！」vs非エンジニア「ウィジウィグで編集させろ！」のせめぎあい

[ka-ka_xyz]

そいやTeamsのコメント入力欄が中華フォントになってるの、多分この辺のリッチテキストエディタコンポーネントを使ってるからでは(追記: teamsで使ってるのckeditorっぽい。

[tohokuaiki]

この分野は避けて通りたい派。クライアントから言われたら「いやー、FacebookですらiPhoneのSafariからマトモに入力できないですから」とか言ってしのいでかわしたい。そして Confluenceのエディタは神

[forestk]

“ブラウザ差異（FirefoxやSafariが特に）” という一文が気になった。それ以外って実質Chromeなので

[ryokdy]

contenteditableでリッチエディタやーとなるんだけど、undo/redoやcopy/paste、仮想DOMと入力された実DOMとの同期など全部自力で作らないといけないので、contenteditableはもはやキャレットを取るくらいにしか使えない

[takahashim]

QuillとTiptapを触ったけど深入りは避けたい世界でした…Tiptapがよく出来てることは分かったけどちゃんと使いこなすには一定の知識と実装力が問われそうでした

[bisque3311]

めっちゃわかる“私がtiptapでこの問題に直面したときは、とにかく既存Extensionのコードを読みつつ公式Doc読みつつ実コード読みつつ高速で学習ループを回して、トライアンドエラーの数で押し通しました。”

[gfx]

"リッチテキストエディタは普段使うライブラリより、群を抜いてコードリーディングや問題解決が難しい分、ライブラリ選定の際には、OSSとしての運営能力の高さをレビューした方が良いと思います"

[yarumato]

“HTML上で<input>でもないものを編集可能として扱うのはまあまあ罪深いことで、IMEで変換を確定した瞬間に変な挙動になることも”

[t_f_m]

"DOMなりJSONなりを同時編集して、コンフリクトしないorしても軽症で済ませながら絶えずマージしていくアルゴリズムのほうがヤバい、という話"

[renowan]

そう考えるとnotionってすごい

[nizi56454]

わかりやすい

[for-my-internet-demo]

notion先生ですら頻繁にキャレットバグって大変だ

[aktkro]

remirror（proseMirror）派だけどwysiwygはどれを使っても辛い世界なんだよなぁ

[igrep]

https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable とか参考になるべくcontenteditable使わずに済ませたいね

[poliphilus]

contenteditable 属性なんぞ知らなんだ…まあ使うことはないな。つくづく Web は HTML でよかったのかどうか考える。ここまでビジュアル重視になるなんて思わないもんなぁ。

[stealthinu]

リッチテキストエディタときどき必要になるけどその時ごとにまったく過去の知見が役に立たなくなってる

[UME]

結局、秀丸やサクラでいいですみたいになる話？

[hachi]

Trixかすりもしない

[mr_mayama]

マイグレーション含めて「あなたの頭の中にあるエディターを再現する」というのはとてつもなく難しい作業だし、こういうトリッキーな実装は、動作は開発側で決めさせてほしいよなあ。XはDraft.jsだった。

[sigwyg]

やったことないけど、Gutenbergじゃダメなん？

[sbrtnpg]

読み物としても非常に面白かったです。

[Eiichiro]

ここまでくると良い有償ライブラリ提供してくれるところあるかもな。エクセル式入力はHandsontableが解決してくれたし、これも。

[kvx]

plate触ったけどまぁつらい