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.