draft-js Cannot read property 'getIn' of undefined ( getUpdatedSelectionState ) - reactjs

Question

I have this error with draft-js with draft-js-plugins-editor
STRANGE BEHAVIOR: it only happens, when I refocus to first line of editor after writing, when trying to set for eg. the header of first line to H1 it changes previous focused line
ERROR: Uncaught TypeError: Cannot read property 'getIn' of undefined
FULL ERROR:
Uncaught TypeError: Cannot read property 'getIn' of undefined
at getUpdatedSelectionState (getUpdatedSelectionState.js?a009439:34)
at getDraftEditorSelectionWithNodes (getDraftEditorSelectionWithNodes.js?a009439:37)
at getDraftEditorSelection (getDraftEditorSelection.js?a7f8e9b:35)
at editOnSelect (editOnSelect.js?a7f8e9b:32)
at DraftEditor.react.js?f8ee1ff:148
at HTMLUnknownElement.callCallback (react-dom.development.js?5f39724:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js?5f39724:581)
at Object.invokeGuardedCallback (react-dom.development.js?5f39724:438)
at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?5f39724:452)
at executeDispatch (react-dom.development.js?5f39724:836)
This is my component:
/* eslint-disable react/no-multi-comp */
import React, {Component} from 'react';
import sv from '../../config/styleVariables'
import Editor from 'draft-js-plugins-editor';
import {EditorState,convertToRaw} from 'draft-js'
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import {
ItalicButton,
BoldButton,
UnderlineButton,
HeadlineOneButton,
HeadlineTwoButton,
HeadlineThreeButton,
UnorderedListButton,
OrderedListButton,
BlockquoteButton,
} from 'draft-js-buttons'
export default class TextArea extends Component {
constructor(props){
super(props)
this.state = {
editorState: EditorState.createEmpty(),
}
const toolbarPlugin = createToolbarPlugin({
structure: [
BoldButton,
ItalicButton,
UnderlineButton,
HeadlineOneButton, ,
HeadlineTwoButton,
HeadlineThreeButton,
UnorderedListButton,
OrderedListButton,
// BlockquoteButton,
]
})
const { Toolbar } = toolbarPlugin;
this.Toolbar = Toolbar
this.plugins = [toolbarPlugin];
}
onChange(editorState){
this.setState({
editorState,
})
this.props.update(JSON.stringify(convertToRaw(editorState.getCurrentContent())))
}
focus(){
this.editor.focus();
}
render() {
const {Toolbar, plugins} = this
const {name} = this.props
return (
<div className="TextArea">
{/*language=SCSS*/}
<style jsx global>{`
.TextArea .headlineButtonWrapper {
display: inline-block;
}
.TextArea {
background: ${sv.white};
}
.TextArea > div>div:first-child {
display: flex;
padding: 0 0 .25em 0;
border-bottom: 1px solid ${sv.border};
}
.TextArea > div>div:first-child>div button{
background: transparent;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
width: 3em;
height: 2.5em;
font-size: .8em;
margin-right: .2em;
}
.TextArea > div>div:first-child>div button:hover {
background: ${sv.extraLight};
color: ${sv.primary};
}
.TextArea .DraftEditor-root {
padding: 0 .5em;
cursor: text;
}
.TextArea .headlineButton {
background: #fbfbfb;
color: #888;
font-size: 18px;
border: 0;
padding-top: 5px;
vertical-align: bottom;
height: 34px;
width: 36px;
}
.TextArea .headlineButton:hover,
.TextArea .headlineButton:focus {
background: #f3f3f3;
}
`}
</style>
<div onClick={this.focus.bind(this)}>
<Toolbar key={name} />
<Editor
editorState={this.state.editorState}
onChange={this.onChange.bind(this)}
plugins={plugins}
ref={(element) => {
this.editor = element
}}
/>
</div>
</div>
);
}
}
My component looks like this:

Answer 1

I meet the same problem. It looks like because call editorState.getBlockTree(anchorBlockKey).getIn(...) in getUpdatedSelectionState.js the editorState.getBlockTree(anchorBlockKey) is undefined whenever the block type is unstyled.
I have no idea how to fix it, so make a work around solution like this:
const headerOne = '<h1>Title</h1>';
const blocksFromHTML = convertFromHTML(headerOne);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap
);
this.state = {
editorState: EditorState.createWithContent(state)
}
But there will be another problem when you press enter new line will be H1 either.