reactjs - Styling not being applied to contentBlock in Draft.Js

Question

I am attempting to change block type of the content block. The way I do this is by copying Notions UX and have a menu open when the user presses "/". From there they can select a option in the list i.e H1 Heading.

Using an "OnMouseDown" function, it triggers a parent function which is this:

    function changeBlockType(type: string) {
        const newEditorState = RichUtils.toggleBlockType(editorState, type);
        
        if (newEditorState) {
            setEditorState(newEditorState);
        }
    }

I am using functional components, so this changes the editorState.

When I console.log the current content block and inspect, I can find that the block type has been changed (type is now "H1 Heading"):

0: Array [ "key", "fkj5e" ]
????
1: Array [ "text", "/" ]
????
2: Array [ "type", "H1 Heading" ]
????
3: Array [ "characterList", {…} ]

But no actual styling is applied on the editor. The text styling remains the same.

question from:https://stackoverflow.com/questions/65916424/styling-not-being-applied-to-contentblock-in-draft-js

Answer 1

Waitting for answers