ヘッドレスリッチテキストエディター Tiptapを用いた エディター開発の裏側

現代の Web サイトには、プレーンテキストだけでなく太字や斜体、画像の挿入などが可能な「リッチテキストエディター」を備えているサイトが多くあります。プレスリリースの配信を行う PR TIMES もその1つです。

かつてリッチテキストエディターの開発はスクラッチが主流であり、難易度の高いものでしたが、現代においては OSS ライブラリも存在し、複数の選択肢があります。PR TIMES ではヘッドレスリッチテキストエディターである Tiptap を React に組み込み、単なる文字装飾に留まらない、高度かつスムーズな編集体験を実現しています。

本トークでは、PR TIMESのエディターの歴史を交えながら、リッチテキストという複雑なデータをどのように扱うのか、その複雑さにどう立ち向かっているかなど、現場のリアルな知見をお届けします。

Transcript

1. ヘッドレスリッチテキストエディター Tiptapを用いた エディター開発の裏側
2. 自己紹介 古園　誠 / miyabin4113 株式会社PR TIMES 普段はエディターのフロントエンドをメインに開発し ています。 去年から関東圏内の温泉が湧く銭湯全制覇を目指して 活動中です。
3. 株式会社PR TIMES 会社紹介 プレスリリース配信プラットフォーム 「PR TIMES」のすべてを、自社の開発部門で内製して います。 普段、あまり皆さんの目には触れない企業のお客様向 けの機能にまだまだ開発の余地が多くあり、今回お話 しするエディターもその1つです。 中途採用も積極的に行っていますので、カジュアル面 談のご応募お待ちしています。
4. 今日お話しすること • Tiptapについて • PR TIMESのエディター変遷 • 開発で気を付けること • Tiptapを扱う際の注意点 以上の4つを中心に話していきます。
5. Tiptapについて
6. Tiptapとは • JavaScriptのヘッドレスなリッチテキストエディターライブラリ • GUIは持っておらず、JSで自由にUIを構築可能
7. Tiptapの内部データ構造 Tiptapでは文書をHTMLそのものでは なく、構造化されたDocument Model として管理する この辺りの詳しい内容はProseMirrorで 調べると理解が深まります
8. TiptapはHTMLとDocument Modelを相互変換できる そのため、 • 既存HTMLを読み込んでDocument Modelに ◦ parseHTML機能 • Document Modelから独自HTMLの出力 ◦ renderHTML機能 といった双方向のやり取りを実現している
9. parseHTMLについて HTMLをエディターで取り扱うデー タ形式にパースする機能 PR TIMESではこの機能を使用し て、1つ1つパースするターゲット を指定 右図はYouTubeの埋め込み機能の設 定で、Tiptap版と以前のもので違 うクラスがターゲットとなっている
10. renderHTMLについて エディターに書いた内容をHTML形式で出力する機能 こちらもparseHTML同様、1つ1つ既存のHTMLと同じものが出力される ように設定 こうすることでDBに保存される形式を維持しながら、Tiptapへの移行を 進めることができた
11. Tiptapを選んだ理由 • renderHTMLを使用して自由にHTMLを出力することができた ◦ これが1番大きい • IME対応 ◦ 日本語との相性が悪いエディターもあるため • 自由にUIを作成できる ◦ それまでの表現を維持することができる
12. PR TIMESのエディター変遷
13. PR TIMESのTiptapエディターに ついて PR TIMESでは2023年12月にTiptapを利用した新エディターをリリース しかし、そこに至るまでには既存資産を壊さず移行するという大きな課 題があった
14. 実はエディターが２バージョン存在 まず、2023年2月に今までのHTML と同じHTMLを出力する 「新プレスリリースエディタβ版」 をリリース さらにその年の12月にUIを刷新 し、新機能も盛り込んだ 「PR TIMES新エディター」 をリリース （なぜβ版のリリースが必要だった のかは後ほど）
15. エディター刷新の背景 Tiptap導入前のエディターは機能の追加をほとんど行えない状態で、 少し変更をするだけでも環境が壊れた とても開発を続けていける環境ではなかったのでエディターを新しく作 り直すことに しかし、大きな問題が...
16. 既存のHTML構成を変えられない
17. なぜHTML構成を変えられないのか • エディターのバックエンドはHTMLのバリデーションが存在している ◦ ただし、当時の実装はHTMLのタグや属性の順番が指定の通りで ある必要があった ◦ このタグや属性の順番が変わってしまった場合、バリデーション が壊れてしまう
18. バリデーションを改修すればいい のでは？ • それも難しい ◦ サービス開始の2007年から15年以上分のプレスリリースデータ が大量に存在 ◦ さらに、開発エンジニアも把握していないバグなどが潜んでいる 可能性がある ◦ この状態でバリデーション改修を行った際に過去のプレスリリー スデータが壊れて見られなくなる可能性もあった
19. そこで... • まずは既存の環境で作成されるHTMLと同じHTMLを作成するエディ ターの開発、つまりはフロントエンド側の改修から開始 ◦ 少しでも変更を加えると環境が壊れる状態からの脱却を目指した • そして、フロントエンドの環境を整備し既存のHTMLが壊れないこと を担保してから新しいエディターの開発に着手 • このようにかなり慎重に段取りを組んで進めた
20. 経緯をまとめると • 今のままだと新機能の開発がほとんどできないので、まずは同じ HTMLを出力するβ版を作成 • そこまでやると開発環境も整備できるので新機能の開発が可能に • これをベースにUI刷新や目当ての新機能を盛り込んだエディターをリ リース ２段階のアップデート方式を採用
21. 開発で気を付けること
22. 様々な入力への対応 エディターへの入力はいくつかのパターンが存在する • キーボードでのテキスト入力 • 他エディターからのコピー＆ペースト ◦ PasteされたHTMLを安全なデータ形式へ変換する必要がある
23. 後方互換性 機能の開発・改修を行う場合は • Tiptap移行前に作成されたHTMLデータ • Tiptap移行後で既に作成されたHTMLデータ • 機能の開発・改修によって作成されるHTMLデータ この3つを取り扱えるよう意識して設計を行う必要がある
24. 後方互換性 先に解説したデータの出力形式も重要だが、データの読み込みも重要 parseHTMLを使用して以前のHTMLデータや新しく開発した後に生成さ れたHTMLを適切に読み込んでエディターに同じ機能として取り込む必 要がある
25. HTMLを保存する以上、入力を信 用できない エディターには、テキスト入力やコピペなどのユーザー操作以外にAPIを 直接叩いた場合などさまざまな経路からHTMLが入る可能性がある そのため、想定外のタグや属性が混入すると、表示崩れやセキュリティ リスクにつながる
26. 想定外のHTMLはXSSにつながる XSSは、Webページに意図しないスクリプトが埋め込まれ、ユーザーの ブラウザ上で実行されてしまう脆弱性 例えば、次のようなHTMLが保存・表示されると危険である <img src="invalid" onerror="alert('XSS')" /> PR TIMESではどういった対策をしているのか？
27. DOMPurifyでHTMLを安全な形に DOMPurifyはユーザー入力や貼り付けによって混入した危険なHTMLを 除去するためのサニタイズライブラリ これを使うことで、HTMLから危険なタグや属性を取り除くことが可能
28. HTML保存を続けるための安全装置で もある PR TIMESでは既存データやバックエンドとの互換性のため、HTML保存 を継続中 そのため、Tiptapで扱うHTMLを安全な形に制御することが重要な点に DOMPurifyは、既存のHTML資産を活かしながら安全に運用するための 仕組みの1つ
29. （補足）データ保存の理想と現実 • 本当はDBにJSON形式で保存しておくのが1番良い ◦ HTML保存と比較すると、XSS対策やHTMLサニタイズの負担を 大きく減らせる • しかし、PR TIMES環境は昔からのプレスリリースデータを壊したく ない ◦ また、昔のデータはバグが潜んでいる可能性があり、移行しよう とするとデータが壊れる可能性があるため見送った
30. Tiptapを扱う際の注意点
31. 学習コストが重い • TiptapだけでなくProseMirrorについてもある程度理解する必要があ る • また、Tiptapの拡張機能のコードを初めて見た際に何が何のために あるのか分かりにくい • こういった事情から新卒や開発経験の浅いフロントエンドエンジニア はキャッチアップが辛い状況になりやすかった ◦ 今はAIがあるので以前よりは軽減されている
32. テストの難しさ • コンポーネントを読み込んだだけではテストができない • エディターの環境が必要であるため、PlaywrightやVitest Browser Modeを使用する必要がある つまり、どの環境で何をテストするのかが重要 参考：Tiptapエディターのテスト戦略：Playwright、Vitest Browser Mode、Editorインスタンスを用いたテスト
33. まとめ • Tiptapはエディターとして優秀な基盤 • エディターの移行はかなり慎重に行わなければならない • レガシー資産を守りながら進化させることがエンジニアリングだった
34. そして...
35. エディター開発は 実装よりも 設計やコンテキストの理解 が超重要！
36. まとめ • Tiptapは優秀なエディター開発の基盤である • エディターの移行はかなり慎重に行わなければならない • レガシー資産を守りながら進化させることがエンジニアリングの妙 • エディター開発は実装よりも設計やコンテキストの理解が超重要！