A React context provider with undefined default value that exports a hook for accessing the context value

EditorProvider.ts

import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import React, { createContext, useContext, useEffect, useState } from 'react'

import { Editor } from '../Editor'

const EditorContext = createContext<EditorState | undefined>(undefined)

export const useEditorContext = () => {
  const editor = useContext(EditorContext)

  if (!editor) {
    throw new Error('Editor context is only available inside EditorProvider')
  }

  return editor
}

export const EditorProvider: React.FC<{ editor: Editor }> = ({ editor, children }) => {
  const [state, setState] = useState<EditorState>(editor.view.state)

  useEffect(() => {
    const handler = (event: Event) => {
      setState((event as CustomEvent<EditorState>).detail)
    }

    editor.addEventListener('statechange', handler)

    return () => {
      editor.removeEventListener('statechange', handler)
    }
  }, [editor])

  return (
    <EditorContext.Provider value={state}>{children}</EditorContext.Provider>
  )
}