draft.js with NextJS SSRを使うときに 初っ端編

はじめに

draft.jsをNextJSと一緒にちょっとつかってみよう！と思ったらいきなり躓いたので、書いてみました。
諸々のバージョンは
"draft-js": "0.11.7",
"next": "10.0.6",
"react": "16.12.0",
"react-dom": "16.12.0"
です。（2021/02/13時点であまり指定をせずcreate-next-app & yarn addした結果です）。

参考文章

https://github.com/vercel/next.js/issues/1722
https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/universal

なにに躓いた？

draft.jsを試しにnextJSのプロジェクトに導入してyarn run devしたところで

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) "true" data-editor="7qif3" data-offset-k
 (server) "true" data-editor="rgtv" data-offset-ke

こんなwarningが。
さらに文章を入力すると

Cannot read property 'getIn' of undefined

というエラーが出る状態に。

対策

git hubのissueの議論を読むに

• EditorにeditorKeyを設定する
• componentDidMount後にEditorを描画する

の二つが対策のようでした。

私の場合は一つ目は効果がなく、二つ目の方法でwarning及びエラーがでなくなりました。
こんな感じのコードです。
なんとなくeditorKeyも設定していますが、消しても特にwarningとエラーには影響ありませんでした。

import React, { useEffect, useState } from 'react'
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css'

const DraftJSEditor = () => {
  const [editorEnable, setEditorEnable] = useState(false)
  const [editorState, setEditorState] = useState(() => 
    EditorState.createEmpty(),
  );

  useEffect(() => {
    setEditorEnable(true)
  }, [])

  return (
    <>
      {editorEnable && (
        <Editor
          placeholder="Write something!"
          editorKey="test-key"
          editorState={editorState}
          onChange={setEditorState}
        />
      )}
    </>
  );
}

export default DraftJSEditor

おわりに

メジャーなのはこれかな、ということでDraftJS触ってみていますが、
reactで使えるおススメのリッチテキストエディタがあれば是非教えてください。
ツッコミ等も是非よろしくおねがいします。
もう少し触ってみるつもりなのでまたアップデートするかもしれません。