allow enter key to make space around void nodes

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js

@@ -439,9 +439,40 @@ export default class Editor extends Component {
   hasBlock = type => this.state.editorState.blocks.some(node => node.type === type);
 
   handleKeyDown = (e, data, state) => {
-    if (!data.isMod) {
+    const createDefaultBlock = () => {
-      return;
+      return SlateBlock.create({
+        type: 'paragraph',
+        nodes: [SlateText.createFromString('')]
+      });
+    };
+    if (data.key === 'enter') {
+      /**
+       * If a single void block is selected, and it's a direct descendant of the
+       * document (top level), a new paragraph should be added above or below it
+       * when 'Enter' is pressed, and the current selection should move to the
+       * new paragraph.
+       *
+       * If the selected block is the first block in the document, create the
+       * new block above it. If not, create the new block below it.
+       */
+      const { document: doc, selection, anchorBlock, focusBlock } = state;
+      const focusBlockIndex = doc.nodes.indexOf(focusBlock);
+      const focusBlockIsTopLevel = focusBlockIndex > -1;
+      const focusBlockIsFirstChild = focusBlockIndex === 0;
+      const singleBlockSelected = anchorBlock === focusBlock;
+
+      if (focusBlock.isVoid && focusBlockIsTopLevel && singleBlockSelected) {
+        e.preventDefault();
+        const newBlock = createDefaultBlock();
+        const newBlockIndex = focusBlockIsFirstChild ? 0 : focusBlockIndex + 1;
+        return state.transform()
+          .insertNodeByKey(doc.key, newBlockIndex, newBlock)
+          .collapseToStartOf(newBlock)
+          .apply();
       }
+    }
+
+    if (data.isMod) {
       const marks = {
         b: 'bold',
         i: 'italic',
@@ -453,9 +484,10 @@ export default class Editor extends Component {
       const mark = marks[data.key];
 
       if (mark) {
-      state = state.transform().toggleMark(mark).apply();
+        e.preventDefault();
+        return state.transform().toggleMark(mark).apply();
+      }
     }
-    return;
   };
 
   handleMarkClick = (event, type) => {
@@ -584,7 +616,7 @@ export default class Editor extends Component {
           plugins={slatePlugins}
           onChange={editorState => this.setState({ editorState })}
           onDocumentChange={this.handleDocumentChange}
-          onKeyDown={this.onKeyDown}
+          onKeyDown={this.handleKeyDown}
           onPaste={this.handlePaste}
           ref={ref => this.ref = ref}
           spellCheck