エディタライブラリの変更について
こんにちは！
テイラーワークス プロダクトチームの谷本です。
前回に引き続き、自社プロダクトで使用しているWYSIWYGエディタのライブラリを変更した際の話をまとめていきます。
本記事は連載構成になっております。
本連載の構成
#1：概要
#2：エディタライブラリ比較、選定
#3：エディタコンポーネント実装（UIカスタマイズと機能拡張）
#4：旧エディタとの互換性対応、まとめ ←本記事です📝
エディタ変更対応まとめもいよいよラスト...
最終回の本記事では、旧エディタ（Quill）と新エディタ（MantineのRichTextEditorカスタマイズ）の互換性対応についてまとめていきます！
なぜ互換性対応が必要？
新旧エディタ間で装飾機能やコンテンツデータの内容が異なるため。
具体的には、下記理由から新旧エディタ間に互換性はないと判断しました。
- 新エディタは旧エディタより装飾機能を減らしている（※）
- 独自実装であるOGPリンクのHTMLタグの構成が若干異なる
- HTMLタグのスタイリングについて、旧エディタはライブラリが自動的にクラスを付与するのに対し、新エディタはデフォルトではスタイルがつかない
※装飾機能については、変更対応前にPdMチームと相談して旧エディタより機能を減らしシンプルに使いやすいエディタを目指す方向としました
互換性対応
エディタ作成コンテンツ表示側の対応：エディタ種別によるCSSの分岐
新旧エディタともにコンテンツデータをHTMLで取得後、文字列として保存し、クライアント側でエディタに応じたCSSを適用したHTMLを組み立てて表示しています。
コンテンツデータをAPIで取得する際にエディタ情報をもらい、エディタ情報によってBox要素にあてるCSSを分けました。
コンテンツ作成側の対応：コンテンツ作成前のエディタ選択画面の設置
新旧エディタは互換性がなく、コンテンツ編集中にエディタを切り替えることが難しいため、コンテンツ新規作成及び編集時には新旧エディタどちらか決まった状態である必要がありました。
それに伴い、下記の対応を行いました。
1.コンテンツ新規作成画面に入る前のエディタ選択
新規作成画面に入る前にエディタを選択するポップアップを表示しました。
2.コンテンツ編集画面はエディタ情報によってエディタコンポーネント出し分け
表示側と同様、編集画面ではデータ取得APIでエディタ情報をもらい、旧エディタで作成されたコンテンツは旧エディタコンポーネント表示、新エディタで作成されたコンテンツは新エディタコンポーネント表示としました。
社内検証
互換性対応も終わり、実装がすべて完了した段階で社内検証を行いました。（この時点でリリース予定3週間前！！）
１週間ほど社内でエディタ機能を使ってもらい、フィードバックをもらいました。
事前の動作確認では確認しきれなかった不具合や、もっとここを改善してほしい！という意見が出てありがたかったです🥺
ついに...リリース🥺
社内検証期間も終え、最後の調整が完了したら...
ついに、リリースです！！！！
意気揚々とリリース作業開始！
.......と思ったら
あ、あれ？Actionsがエラーになるぞ...（ざわざわ）
なんと、リリースのタイミングでGitHub Actionsの障害が...
リリース作業中断し、巡り巡って心が無になった状態で1時間待ち、ようやくリリース作業に入ることができました！！
そして...、ついにリリース完了！
完了報告に、お祝いリアクションもいっぱい🎉
エディタ変更対応を終えて
リリースは2023年4月末。
2022年秋頃から旧エディタの不具合報告が多くあがるようになり、始まった今回のエディタ変更対応。
実際にライブラリ変更対応に入りだしたのが2月頃なので、約3ヶ月以上かけての対応でした。
な、長かった..........😭
実は、エディタ変更対応と併せて管理画面のマイクロサービス化（フロントエンドリポジトリの分離及びライブラリアップデート対応）も進めており、リリースを終えた際は（GitHub不調のトラベルもあいまって）放心状態に..。
チームメンバーからの、「リリースしたね！！！！お疲れさまでした🥺」の声掛けが、とっってもあたたかくて、嬉しかったです。
フロントエンドエンジニアとして3年目の私ですが、ここまで大掛かりなライブラリ変更対応を行ったのは初めてでした！
エディタ変更対応中は本開発とは別で開発進めていたため、独自機能実装でハマったときなどはとてもツラかったですが、ライブラリ選定から新ライブラリでのコンポーネント実装や機能拡張まで担当できたことは、とても良い経験となりました。
そんな私が所属するテイラーワークスでは、エンジニア採用強化中です！
フロントエンドに限らず、バックエンド・インフラ・デザイナーなど全領域で絶賛募集中です。
▼ 少しでも興味をお持ちいただけましたら、採用ページもチェックしてみてください ▼
Discussion