6月からreactを用いたサービスを運営する会社にてインターンを始めたので、ログを残しておきます。

react-quillを使った空行が反映されない

react-quillを使って、htmlをデータベースに保存していたが空行が反映されないので原因を究明してみた。

1.考えた経緯

以下のように思考した。

【正常な箇所】

sample.html

<p><br></p>

【異常な箇所】

sample.html

<p><span style="color: rgb(0, 0, 0); background-color: transparent;"></span></p>

考えられる原因を色々と試してみる。

react-quill blank lineで検索
-> それらしい記事は見当たらない

-> 実際の症状を再現しようと試みるも、データベースには正常に保存されているため症状の再現が不可能。

-> 原因がわかった

空行を入れる際に空行の先頭にスペースを入れると

<p><span style="color: rgb(0, 0, 0); background-color: transparent;"></span></p>

このようになって保存されてしまうため。
スペースの分が認識されずにspanタグが入れられてしまうため保存する際の見た目では、空行が入るが出力すると空行が入らない。

結局不具合が多いので、
Draft.js
を用いることになりました。