From cfc9e6fb6b63a001b36820b1d649a713f722d645 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 1 Oct 2017 10:58:20 -0700
Subject: [PATCH] Dont show caption placeholder in reading mode. Make it easier
 to escape image selected state

---
 .../components/Editor/components/Image.js     | 21 +++++++++++--------
 .../Editor/plugins/MarkdownShortcuts.js       | 14 ++++++++++++-
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js
index 978d887be..af1c5de44 100644
--- a/frontend/components/Editor/components/Image.js
+++ b/frontend/components/Editor/components/Image.js
@@ -30,6 +30,7 @@ class Image extends Component {
     const caption = node.data.get('alt');
     const src = node.data.get('src');
     const active = state.isFocused && state.selection.hasEdgeIn(node);
+    const showCaption = !readOnly || caption;
 
     return (
       <CenteredImage>
@@ -40,15 +41,17 @@ class Image extends Component {
           active={active}
           loading={loading}
         />
-        <Caption
-          type="text"
-          placeholder="Write a caption"
-          onChange={this.handleChange}
-          onClick={this.handleClick}
-          defaultValue={caption}
-          contentEditable={false}
-          disabled={readOnly}
-        />
+        {showCaption &&
+          <Caption
+            type="text"
+            placeholder="Write a caption"
+            onChange={this.handleChange}
+            onClick={this.handleClick}
+            defaultValue={caption}
+            contentEditable={false}
+            disabled={readOnly}
+            tabIndex={-1}
+          />}
       </CenteredImage>
     );
   }
diff --git a/frontend/components/Editor/plugins/MarkdownShortcuts.js b/frontend/components/Editor/plugins/MarkdownShortcuts.js
index b63fec754..0dd924156 100644
--- a/frontend/components/Editor/plugins/MarkdownShortcuts.js
+++ b/frontend/components/Editor/plugins/MarkdownShortcuts.js
@@ -215,6 +215,19 @@ export default function MarkdownShortcuts() {
         return this.onBackspace(ev, state);
       if (endOffset !== startBlock.length) return;
 
+      // Hitting enter while an image is selected should jump caret below and
+      // insert a new paragraph
+      if (startBlock.type === 'image') {
+        ev.preventDefault();
+        return state
+          .transform()
+          .collapseToEnd()
+          .insertBlock('paragraph')
+          .apply();
+      }
+
+      // Hitting enter in a heading or blockquote will split the node at that
+      // point and make the new node a paragraph
       if (
         startBlock.type !== 'heading1' &&
         startBlock.type !== 'heading2' &&
@@ -228,7 +241,6 @@ export default function MarkdownShortcuts() {
       }
 
       ev.preventDefault();
-
       return state.transform().splitBlock().setBlock('paragraph').apply();
     },