Merge pull request #57 from withspectrum/exit-this-way-pleasee

Add empty unstyled block after new code block

Author: mxstbr

src/modifiers/__test__/handleNewCodeBlock-test.js

@@ -2,6 +2,16 @@ import sinon from "sinon";
 import Draft, { EditorState, SelectionState } from "draft-js";
 import handleNewCodeBlock from "../handleNewCodeBlock";
 
+const removeBlockKeys = rawContentState => {
+  return {
+    ...rawContentState,
+    blocks: rawContentState.blocks.map(block => {
+      delete block.key;
+      return block;
+    }),
+  };
+};
+
 describe("handleNewCodeBlock", () => {
   describe("in unstyled block with three backquotes", () => {
     const testNewCodeBlock = (text, data) => () => {
@@ -23,14 +33,21 @@ describe("handleNewCodeBlock", () => {
         entityMap: {},
         blocks: [
           {
-            key: "item1",
             text: "",
             type: "code-block",
             depth: 0,
             inlineStyleRanges: [],
             entityRanges: [],
             data,
           },
+          {
+            text: "",
+            type: "unstyled",
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+            depth: 0,
+          },
         ],
       };
       const contentState = Draft.convertFromRaw(beforeRawContentState);
@@ -49,9 +66,11 @@ describe("handleNewCodeBlock", () => {
       it("creates new code block", () => {
         const newEditorState = handleNewCodeBlock(editorState);
         expect(newEditorState).not.toEqual(editorState);
-        expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
-          afterRawContentState
-        );
+        expect(
+          removeBlockKeys(
+            Draft.convertToRaw(newEditorState.getCurrentContent())
+          )
+        ).toEqual(removeBlockKeys(afterRawContentState));
       });
     };
 

src/modifiers/handleNewCodeBlock.js

@@ -1,5 +1,6 @@
 import changeCurrentBlockType from "./changeCurrentBlockType";
 import insertEmptyBlock from "./insertEmptyBlock";
+import splitBlockAndChange from './splitBlockAndChange';
 import { CODE_BLOCK_REGEX } from "../constants";
 
 const handleNewCodeBlock = editorState => {
@@ -19,7 +20,8 @@ const handleNewCodeBlock = editorState => {
     if (language) {
       data.language = language;
     }
-    return changeCurrentBlockType(editorState, "code-block", "", data);
+    const editorStateWithCodeBlock = changeCurrentBlockType(editorState, "code-block", "", data);
+    return splitBlockAndChange(editorStateWithCodeBlock, undefined, undefined, false)
   }
   const type = currentBlock.getType();
   if (type === "code-block" && isLast) {

src/modifiers/splitBlockAndChange.js

@@ -3,20 +3,21 @@ import { EditorState, Modifier } from "draft-js";
 const splitBlockAndChange = (
   editorState,
   type = "unstyled",
-  blockMetadata = {}
+  blockMetadata = {},
+  selectNewBlock = true
 ) => {
   let currentContent = editorState.getCurrentContent();
-  let selection = editorState.getSelection();
-  currentContent = Modifier.splitBlock(currentContent, selection);
-  selection = currentContent.getSelectionAfter();
+  const currentSelection = editorState.getSelection();
+  currentContent = Modifier.splitBlock(currentContent, currentSelection);
+  const selection = currentContent.getSelectionAfter();
   const key = selection.getStartKey();
   const blockMap = currentContent.getBlockMap();
   const block = blockMap.get(key);
   const data = block.getData().merge(blockMetadata);
   const newBlock = block.merge({ type, data });
   const newContentState = currentContent.merge({
     blockMap: blockMap.set(key, newBlock),
-    selectionAfter: selection,
+    selectionAfter: selectNewBlock ? selection : currentSelection,
   });
 
   return EditorState.push(editorState, newContentState, "split-block");