<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="editor"></div>
    <script>
      // HACK to avoid draft-js errors when changing content
      window.setImmediate = (callback = () => {}) => {
        callback()
      }
    </script>
    <script type="module">
      import React from 'https://cdn.jsdelivr.net/npm/react@18/+esm'
      import ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom@18/+esm'
      import {Editor, EditorState} from 'https://cdn.jsdelivr.net/npm/draft-js@0/+esm'

      class MyEditor extends React.Component {
        constructor () {
          super()
          this.state = {editorState: EditorState.createEmpty()}
          this.onChange = (editorState) => {
            try {
              this.setState({editorState})
            } catch (err) {
              console.log(err)
            }
          }
        }
        render() {
          return React.createElement(Editor, {
            editorState: this.state.editorState,
            onChange: this.onChange,
          })
        }
      }

      const root = ReactDOM.createRoot(document.getElementById('editor'))
      root.render(React.createElement(MyEditor))
    </script>
  </body>
</html>
