strapi gatsbyjsのリッチエディタにediterjsを導入する

導入

今回はstrapiのリッチエディターをediterjsにして、その内容をgatsbyに反映しようと思います。ネットで調べても誰もそんなことしてる人見つけれなかったのでめちゃくちゃ苦労しました。

strapiとgatsubyでブログを作る

yarn create strapi-starter gatsby-blog gatsby-blog

詳しくは以下のリンクに掲載されています！

GatsbyjsとStrapi を使用して静的なブログを作成する

editerjsを導入

strapiのbackendディレクトリに移動して、 src/plugins フォルダーに移動し (存在しない場合は作成します)、プロジェクトをクローンします。

git clone https://github.com/melishev/strapi-plugin-react-editorjs.git

cd strapi-plugin-react-editorjs

次のコードをメインのStrapi ./config/plugins.js ファイルに追加します（ファイルが存在しない場合は作成します）。

module.exports = ({ env }) => ({
  // ...
  'editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-react-editorjs'
  },
  // ...
})

yarn build

ソース https://www.npmjs.com/package/strapi-plugin-react-editorjs

設定の変更

strapiで画像投稿機能があるので、editerjsでは一旦オフにします gatsbyimageに対応するにはgraphqlとか立ちはだかる壁が多すぎた。

元々のソースから、画像機能をオフにするには、requiredToolsとcustomImageToolの二つを設定している箇所から消しました。

[backend/src/plugins/strapi-plugin-react-editorjs/admin/src/components/editorjs/index.js]

-          tools={{...requiredTools, ...customTools, ...customImageTool}}
+          tools={{...customTools}}

ビルドも忘れずに行います

yarn build

graphqlの変更

editorjsでstrapiから送られてきたデータを編集するにはまずqraphqlでクエリを送ります 今回はリッチエディターのコンポーネントをそのままediterjs用に変更していきます。 元々のchildMarkdownRemark htmlはpタグを追加したり色々変更作業が行われていたので変更していきました。

[frontend/src/components/blocks-renderer.js]

fragment Blocks on STRAPI__COMPONENT_SHARED_MEDIASTRAPI__COMPONENT_SHARED_QUOTESTRAPI__COMPONENT_SHARED_RICH_TEXTSTRAPI__COMPONENT_SHARED_SLIDERUnion {
    __typename
    ... on STRAPI__COMPONENT_SHARED_RICH_TEXT {
       richTextBody: body {
        __typename
        data {
          id
          childMarkdownRemark {
            html
          }
        }
      }
    }

ここのリッチテキストの部分に以下の内容を追記します

     body {
        data {
          body
        }
      }

全体的には以下のようになります

fragment Blocks on STRAPI__COMPONENT_SHARED_MEDIASTRAPI__COMPONENT_SHARED_QUOTESTRAPI__COMPONENT_SHARED_RICH_TEXTSTRAPI__COMPONENT_SHARED_SLIDERUnion {
    __typename
    ... on STRAPI__COMPONENT_SHARED_RICH_TEXT {
      body {
        data {
          body
        }
      }
      richTextBody: body {
        __typename
        data {
          id
          childMarkdownRemark {
            html
          }
        }
      }
    }

gatsby プラグインの追加

editerjsで送られてきたjsonをhtmlに変換しないとgatsubyでは表示されません。 editorjs-react-rendererというプラグインがカスタマイズが容易でしたので、これを使います。

https://github.com/dev-juju/EditorJS-React-Renderer

frontend/src/components/block-rich-text.jsを編集します

import React from "react"
import Output from "editorjs-react-renderer"

const BlockRichText = ({ data }) => {
  var rich_body = data.body.data.body
  rich_body = JSON.parse(rich_body);
  const CustomCodeRenderer = ({ data, style, classNames, config }) => {
    return (
      <pre>
        <code>{data.code}</code>
      </pre>
    )
  };
  const CustomQuoteRenderer = ({ data, style, classNames, config }) => {
    console.log(data)
    return (
      <blockquote className="container max-w-xl border-l-4 border-neutral-700 py-2 pl-6 text-neutral-700">
        <p className="text-5xl font-medium italic">{data.text}</p>
        <cite className="mt-4 block font-bold uppercase not-italic">
          {data.caption}
        </cite>
      </blockquote>
    )
  };
  // Pass your custom renderers to Output
  const renderers = {
    code: CustomCodeRenderer,
    quote: CustomQuoteRenderer
  };


  return (
    <div className="prose mx-auto py-8">
      <Output renderers={renderers} data={rich_body} />
    </div>
  )
}

export default BlockRichText

以上で完成です。

まとめ

めちゃくちゃ苦労しました。

• editerjsとstrapiのドキュメントが少ない
• strapiとgraphqlの変更方法のドキュメントが少ない
• 静的サイトジェネレーター用にドキュメントがない