Editor is uneditable and options appear vertically

Question

I am trying to use draft js to present a wysiwyg editor.

When I load the component, I am unable to edit anything and the options are coming up vertically.
Expecting it to appear horizontally. What am I doing wrong?

This is how it looks currently.

Implementation.

import React from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

import dynamic from 'next/dynamic'
import { EditorProps } from 'react-draft-wysiwyg'

const TextEditor = () => {

  // getting window undefined error thus importing this dynamically
  const Editor = dynamic<EditorProps>(
    () => import('react-draft-wysiwyg').then((mod) => mod.Editor),
    { ssr: false }
  )

  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="wrapper"
        editorClassName="editor"
        onEditorStateChange={() => setEditorState(editorState)}
      />
      <textarea
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />
    </div>
  );
}

export default TextEditor

Answer 1

One thing is wrong for sure, you wrote:

onEditorStateChange={() => setEditorState(editorState)}

It should be:

onEditorStateChange={(newEditorState) => setEditorState(newEditorState)}
// or shorter form:
onEditorStateChange={setEditorState}

Now regarding the style, two thing to look into.

1. double check that you have included the css somewhere, like import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; but check against your bundler config, not sure about the path on your machine.
2. It looks like you’re trying to customize the style with wrapperClassName="wrapper" editorClassName="editor". Try remove them for now and see if them interfere. I suspect this is part of the cause.