I've been trying to add a new block on return key. This is my code, it's placed in a switch case for checking the keyCode. The shift + return works by adding in a new line. But just return, it needs to start a new block in the editor.

                // SHIFT + RETURN <br/>
                if(e.shiftKey) {
                    const newEditorState = RichUtils.insertSoftNewline(this.state.editorState);
                    if (newEditorState !== this.state.editorState) {
                        this.onChange(newEditorState);
                    }
                } else {
                    const newBlock = new ContentBlock({
                        key: genKey(),
                        type: "unstyled",
                        text: ""
                    });

                    const contentState = this.state.editorState.getCurrentContent();
                    const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock);

                    EditorState.push(
                        this.state.editorState,
                        ContentState
                            .createFromBlockArray(newBlockMap.toArray(), contentState.getBlockMap())
                            .set("selectionAfter", contentState.getSelectionAfter().merge({
                                anchorKey: newBlock.getKey(),
                                anchorOffset: 0,
                                focusKey: newBlock.getKey(),
                                focusOffset: 0,
                                isBackward: false
                            })),
                        "split-block"
                    );
                }

There is no error in the console. It just doesn't do anything when the return key is pressed.

I hope someone can assist.

I've been trying to add a new block on return key. This is my code, it's placed in a switch case for checking the keyCode. The shift + return works by adding in a new line. But just return, it needs to start a new block in the editor.

                // SHIFT + RETURN <br/>
                if(e.shiftKey) {
                    const newEditorState = RichUtils.insertSoftNewline(this.state.editorState);
                    if (newEditorState !== this.state.editorState) {
                        this.onChange(newEditorState);
                    }
                } else {
                    const newBlock = new ContentBlock({
                        key: genKey(),
                        type: "unstyled",
                        text: ""
                    });

                    const contentState = this.state.editorState.getCurrentContent();
                    const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock);

                    EditorState.push(
                        this.state.editorState,
                        ContentState
                            .createFromBlockArray(newBlockMap.toArray(), contentState.getBlockMap())
                            .set("selectionAfter", contentState.getSelectionAfter().merge({
                                anchorKey: newBlock.getKey(),
                                anchorOffset: 0,
                                focusKey: newBlock.getKey(),
                                focusOffset: 0,
                                isBackward: false
                            })),
                        "split-block"
                    );
                }

There is no error in the console. It just doesn't do anything when the return key is pressed.

I hope someone can assist.

• javascript
• reactjs
• draftjs

1 Answer 1

I managed to get it working with:

                // SHIFT + RETURN <br/>
                if(e.shiftKey) {
                    const newEditorState = RichUtils.insertSoftNewline(this.state.editorState);
                    if (newEditorState !== this.state.editorState) {
                        this.onChange(newEditorState);
                    }
                } else {
                    const editorState = this.state.editorState;
                    const currentContent = editorState.getCurrentContent();
                    const selection = editorState.getSelection();
                    const textWithEntity = Modifier.splitBlock(currentContent, selection);

                    this.setState({
                        editorState: EditorState.push(editorState, textWithEntity, "split-block")
                    });
                }

Hope it helps the next person!