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,
+      })
     );
   }
 

package.json

@@ -171,7 +171,7 @@
     "slate-collapse-on-escape": "^0.6.0",
     "slate-edit-code": "^0.14.0",
     "slate-edit-list": "^0.11.2",
-    "slate-md-serializer": "^2.0.0",
+    "slate-md-serializer": "3.0.0",
     "slate-paste-linkify": "^0.5.0",
     "slate-plain-serializer": "0.5.4",
     "slate-prism": "^0.5.0",

server/migrations/20180324214403-serializer-upgrade.js

@@ -0,0 +1,26 @@
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    // upgrade to slate-md-serializer 3.0 means that newlines saved in Markdown are now
+    // accurately reflected in the editor. To prevent a change in appearance in current docs
+    // we need to collapse existing multiple newlines in the db.
+    const [documents, metaData] = await queryInterface.sequelize.query(`SELECT * FROM documents`);
+    for (const document of documents) {
+      const id = document.id;
+      const fixedText = document.text.replace(/\n{2,}/gi, "\n\n");
+      if (fixedText === document.text) continue;
+
+      // raw query to avoid hooks
+      await queryInterface.sequelize.query(`
+        update documents
+        set "text" = :fixedText
+        where id = :id
+      `, { replacements: { fixedText, id } })
+    }
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    // cannot be reversed
+  }
+};
+
+

yarn.lock

@@ -8846,9 +8846,9 @@ slate-edit-list@^0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/slate-edit-list/-/slate-edit-list-0.11.2.tgz#c67b961d98435f9f7747d20b870cbc51d25af7a8"
 
-slate-md-serializer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slate-md-serializer/-/slate-md-serializer-2.0.0.tgz#fe143a44fef333d190055810a9fba9509928ee14"
+slate-md-serializer@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slate-md-serializer/-/slate-md-serializer-3.0.0.tgz#ed46213f037550b555f785a7411555a1688ceff9"
 
 slate-paste-linkify@^0.5.0:
   version "0.5.0"