Merge pull request #620 from outline/paragraph-handling

Improved paragraph behavior

app/components/Editor/Editor.js

@@ -280,7 +280,7 @@ const StyledEditor = styled(Editor)`
 
   ul,
   ol {
-    margin: 1em 0.1em;
+    margin: 0 0.1em;
     padding-left: 1em;
 
     ul,
@@ -291,8 +291,7 @@ const StyledEditor = styled(Editor)`
 
   p {
     position: relative;
-    margin-top: 1.2em;
-    margin-bottom: 1.2em;
+    margin: 0;
   }
 
   a:hover {
@@ -321,7 +320,7 @@ const StyledEditor = styled(Editor)`
 
   blockquote {
     border-left: 3px solid #efefef;
-    margin: 1.2em 0;
+    margin: 0;
     padding-left: 10px;
     font-style: italic;
   }

app/components/Editor/components/BlockInsert.js

@@ -71,7 +71,11 @@ export default class BlockInsert extends Component {
 
       // do not show block menu on title heading or editor
       const firstNode = this.props.editor.value.document.nodes.first();
-      if (result.node === firstNode || result.node.type === 'block-toolbar') {
+      if (
+        result.node === firstNode ||
+        result.node.type === 'block-toolbar' ||
+        !!result.node.text.trim()
+      ) {
         this.left = -1000;
       } else {
         this.left = Math.round(result.bounds.left - 20);
@@ -107,15 +111,13 @@ export default class BlockInsert extends Component {
       // if we're on an empty paragraph then just replace it with the block
       // toolbar. Otherwise insert the toolbar as an extra Node.
       if (
-        !this.closestRootNode.text &&
+        !this.closestRootNode.text.trim() &&
         this.closestRootNode.type === 'paragraph'
       ) {
         change.setNodeByKey(this.closestRootNode.key, {
           type: 'block-toolbar',
           isVoid: true,
         });
-      } else {
-        change.insertBlock({ type: 'block-toolbar', isVoid: true });
       }
     });
   };

app/components/Editor/components/Toolbar/BlockToolbar.js

@@ -61,7 +61,11 @@ class BlockToolbar extends Component {
     ev.stopPropagation();
 
     this.props.editor.change(change =>
-      change.removeNodeByKey(this.props.node.key)
+      change.setNodeByKey(this.props.node.key, {
+        type: 'paragraph',
+        text: '',
+        isVoid: false,
+      })
     );
   }