Draft.js headers do not get rendered properly

Question

I have a next.js environment with tailwind installed and a simple draft.js Text Editor. In my Toolbar Component I toggle inline style and block styles. Everything works fine except for the fact that when I set the block type to header-one, header-two etc. nothing renders. I logged the editor state and the block type is correctly set to the block but nothing happens. The crazy thing is, that it works with unordered-list-item and ordered-list-item.

For simplicity sake I added a Test-Button which should work but it does not. Any help which leads me on the right track is greatly appreciated!

export default function TextEditor({data}) {
    const [blockData, setBlockData] = React.useState(data)  
    const rawContent = data.textBlockText
    const [editorState, setEditorState] = React.useState(
        () => rawContent? EditorState.createWithContent(convertFromRaw(JSON.parse(rawContent))) :  EditorState.createEmpty(),
    );

    const handleFormatChange = (event) =>{
        setEditorState(RichUtils.toggleBlockType(editorState, "header-one"))
    }

    return (
        <div className="h-full">
            <div className="w-full py-4 flex flex-row px-8">
                <Toolbar editorState={ editorState } setEditorState={ setEditorState } />
            </div>

            <div className="w-full p-4 border-gray-500 border-2 mt-10 lg:w-1/2 lg:mx-auto">
                <Editor
                    editorState = {editorState}
                    onChange = {setEditorState}
                />
            </div>
            <button onClick={e => handleFormatChange ("header-one")}>Test Button</button>
        </div>
    )
}

Answer 1

Check that h1, h2, etc styles are not being overwritten.

For example, Tailwind CSS makes all h1, h2, etc styles the same and you have to add something like this in your globals.css file:

@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: revert;
    font-weight: revert;
  }
}