Contentfulでリッチテキストを扱うとき改行が認識されないときにやったこと

1  renderText: text => {
2    return text.split('\n').reduce((children, textSegment, index) => {
3      return [...children, index > 0 && <br key={index} />, textSegment];
4    }, []);
5  },

公式にも書かれているこのアプローチを使うとうちの環境だとreact-syntax-highlighterとバッティングした。まだrich-text-react-rendererと上記コードブロックのライブリとの互換性がまだ保証されてないっぽい。

1p {
2  white-space: pre-wrap;
3}

以上をcssに追記して解決した。

MDN white-space 引用 pre-wrap

連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や<br>要素のあるときか、行ボックスを埋めるのに必要なときに行います。

コードはできるなら少ない方がいい。

contentful公式引用 ReactNativeなどの<br />タグが有効な構文ではない可能性があるアプリケーションで使用できるようにするためです。

GitHub issue 引用 \n is not converted to <br /> in rich-text-html-renderer #69 当然同様の問題が取り上げられていた。 このpre-warpでの解決方法はここに書かれていた。

つまりアプリケーション開発向けにリッチテキストでも改行を反映させないように作っているということらしい。

ついでにコードブロックをpタグでラップしてしまう状態はこの人のコードで解決した。 CODE SNIPPETS WITH CONTENTFUL

ちなみに<p>はdivよりもフラグメントに変えた方がいい。