Draft-js: Problem with SSR frameworks (e.g. Gatsby)

[MunifTanjim]

Do you want to request a feature or report a bug?

:bug: BUG

What is the current behavior?

Draft.js produces errors with frameworks that do SSR (e.g. Gatsby)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

Test Repository:

• Gatsby: https://github.com/MunifTanjim/draft-js-tests/tree/gatsby

Reproduction Steps:

• Clone the test repository: https://github.com/MunifTanjim/draft-js-tests
• Checkout gatsby branch
• Install dependencies: yarn
• Build: yarn build
• Serve: yarn serve
• Visit the site and try to write something on the editor.
• Errors will be logged on console.

What is the expected behavior?

Everything should work alright? :sweat_smile:

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Draft.js version: 0.11.0-beta3

Additional Information

https://github.com/gatsbyjs/gatsby/issues/15380#issuecomment-508484676

Live Demo

• Gatsby: https://gatsby--draft-js-tests.netlify.com/

[MunifTanjim]

Workaround One: (https://github.com/zeit/next.js/issues/1722#issuecomment-296451797)

import { Editor, EditorState } from "draft-js"
import "draft-js/dist/Draft.css"
import React, { useCallback, useEffect, useRef, useState } from "react"

function DraftEditor() {
  const editor = useRef(null)
  const [editorState, setEditorState] = useState(EditorState.createEmpty())
  const [mounted, setMounted] = useState(false)

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

  const onChange = useCallback(editorState => {
    setEditorState(editorState)
  }, [])

  const focus = useCallback(() => {
    if (editor.current) editor.current.focus()
  }, [])

  return mounted ? (
    <Editor
      ref={editor}
      editorState={editorState}
      onChange={onChange}
    />
  ) : null
}

export default DraftEditor

[MunifTanjim]

Workaround Two: (https://github.com/zeit/next.js/issues/1722#issuecomment-354601779)

import { Editor, EditorState, convertFromRaw } from "draft-js"
import "draft-js/dist/Draft.css"
import React, { useCallback, useRef, useState } from "react"

function DraftEditor() {
  const editor = useRef(null)
  const [editorState, setEditorState] = useState(
    EditorState.createWithContent(emptyContentState)
  )

  const onChange = useCallback(editorState => {
    setEditorState(editorState)
  }, [])

  const focus = useCallback(() => {
    if (editor.current) editor.current.focus()
  }, [])

  return (
    <Editor
      ref={editor}
      editorState={editorState}
      onChange={onChange}
    />
  )
}

const emptyContentState = convertFromRaw({
  entityMap: {},
  blocks: [
    {
      text: '',
      key: 'foo',
      type: 'unstyled',
      entityRanges: []
    }
  ]
})

export default DraftEditor

From: https://github.com/facebook/draft-js/blob/642aa119af114e8db590fe76cd2f2b84e118471c/examples/draft-0-10-0/universal/editor.js