microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

概要

microCMS ではブログなどの記事データをリッチエディタで入稿することが可能です。ただ、APIではそれらが生HTMLで返ってきます。

dangerouslySetInnerHTML に渡せばレンダリングされますが、以下のようなケースもあると思います。

• Chakra UI などの定義されているコンポーネントを利用したい
• class指定してグローバルCSSを書きたくない
• XSSの危険性があるからdangerouslySetInnerHTMLを利用したくない

今回はこれらを解決するhtml-react-parserを利用していきます。サンプルコードはこちら。microCMSの取得処理は省略しています。

実行環境

サンプルとして、Next.js と Chakra UI を利用します。

html-react-parserとは

html-react-parser はReactで生HTMLを自由に加工することが可能になります。例としては、以下のように生HTMLをReactのコンポーネントに変換できます。

1parse('<p id="replace">text</p>', {
2  replace: domNode => {
3    if (domNode.attribs && domNode.attribs.id === 'replace') {
4      return <Text>replaced</Text>;
5    }
6  }
7});
8

microCMSのリッチエディタ（生HTML）に対応

それでは、microCMSのリッチエディタ（生HTML）に対応していきます。

インストール

公式を参考にインストールしてください！

リッチエディタ（生HTML）をコンポーネントにパース

コンポーネントを以下のように定義し、parseの処理を追加します。

1export const Markdown = (): JSX.Element => {
2  return (
3    <Box >
4      {parse(source, options)}
5    </Box>
6  );
7};
8

次にparse のoptionsについて説明します。optionsには、replace と domToReactを利用します。replaceはある要素をコンポーネントへ置き換えることができます。domToReactはその要素の子要素も再起的にコンポーネントへ置き換えることができます。

サンプルでh1だと、下記でコンポーネントに変換が可能です。こんな感じで良しなに変換内容の定義ができます。以上です。

1const options: HTMLReactParserOptions = {
2  replace: (domNode) => {
3    if (domNode instanceof Element && domNode.type === 'tag') {
4      const props = attributesToProps(domNode.attribs);
5
6      if (domNode.attribs && domNode.name === 'h1') {
7        return (
8          <Text as='h1' {...props}>
9            {domToReact(domNode.children, options)}
10          </Text>
11        );
12      }
13     ...
14    }
15  },
16};
17

まとめ

microCMSのリッチエディタ（生HTML）をコンポーネントに変換する方法をご紹介しました。生HTMLを自由に加工出来ると拡張性が高くなるので良いですね。（このブログも対応したい）