Upgrade styled-components

Restore async editor loading

app/scenes/Document/Document.js

@@ -2,12 +2,12 @@
 import * as React from 'react';
 import get from 'lodash/get';
 import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import keydown from 'react-keydown';
-import Editor from 'rich-markdown-editor';
 import Flex from 'shared/components/Flex';
 import {
   collectionUrl,
@@ -129,8 +129,8 @@ class DocumentScene extends React.Component {
   };
 
   loadEditor = async () => {
-    // const EditorImport = await import('rich-markdown-editor');
-    // this.editorComponent = EditorImport.default;
+    const EditorImport = await import('rich-markdown-editor');
+    this.editorComponent = EditorImport.default;
   };
 
   get isEditing() {
@@ -206,7 +206,7 @@ class DocumentScene extends React.Component {
   }
 
   render() {
-    // const Editor = this.editorComponent;
+    const Editor = this.editorComponent;
     const isMoving = this.props.match.path === matchDocumentMove;
     const document = this.document;
     const titleText =
@@ -234,16 +234,20 @@ class DocumentScene extends React.Component {
                 message={DISCARD_CHANGES}
               />
             )}
-            <Editor
-              defaultValue={document.text}
-              pretitle={document.emoji}
-              onImageUploadStart={this.onImageUploadStart}
-              onImageUploadStop={this.onImageUploadStop}
-              onChange={this.onChange}
-              onSave={this.onSave}
-              onCancel={this.onDiscard}
-              readOnly={!this.isEditing}
-            />
+            <MaxWidth column auto>
+              <Editor
+                titlePlaceholder="Start with a title…"
+                bodyPlaceholder="…the rest is your canvas"
+                defaultValue={document.text}
+                pretitle={document.emoji}
+                onImageUploadStart={this.onImageUploadStart}
+                onImageUploadStop={this.onImageUploadStop}
+                onChange={this.onChange}
+                onSave={this.onSave}
+                onCancel={this.onDiscard}
+                readOnly={!this.isEditing}
+              />
+            </MaxWidth>
             {document && (
               <Actions
                 document={document}
@@ -264,6 +268,18 @@ class DocumentScene extends React.Component {
   }
 }
 
+const MaxWidth = styled(Flex)`
+  padding: 0 20px;
+  max-width: 100vw;
+  height: 100%;
+
+  ${breakpoint('tablet')`	
+    padding: 0;
+    margin: 60px;
+    max-width: 46em;
+  `};
+`;
+
 const Container = styled(Flex)`
   position: relative;
 `;

package.json

@@ -163,7 +163,7 @@
     "react-waypoint": "^7.3.1",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
-    "rich-markdown-editor": "^0.1.1",
+    "rich-markdown-editor": "^0.2.1",
     "rimraf": "^2.5.4",
     "safestart": "1.1.0",
     "sequelize": "4.28.6",
@@ -183,7 +183,7 @@
     "string-hash": "^1.1.0",
     "string-replace-to-array": "^1.0.3",
     "style-loader": "^0.18.2",
-    "styled-components": "^2.2.3",
+    "styled-components": "^3.2.3",
     "styled-components-breakpoint": "^1.0.1",
     "styled-components-grid": "^1.0.0-preview.15",
     "styled-normalize": "^2.2.1",

yarn.lock

@@ -4764,10 +4764,6 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-
 is-generator-function@^1.0.3:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.6.tgz#9e71653cd15fff341c79c4151460a131d31e9fc4"
@@ -8563,9 +8559,9 @@ retry-as-promised@^2.3.1:
     bluebird "^3.4.6"
     debug "^2.6.9"
 
-rich-markdown-editor@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-0.1.1.tgz#b35ab6d8a844da743c8146c47bcce2bac1d6617b"
+rich-markdown-editor@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-0.2.1.tgz#e9b0330ebe2df40b152ada46038f5d1d7142fedd"
   dependencies:
     "@tommoor/slate-drop-or-paste-images" "^0.8.1"
     boundless-arrow-key-navigation "^1.1.0"
@@ -9345,20 +9341,6 @@ styled-components-grid@^1.0.0-preview.15:
     react-create-component-from-tag-prop "^1.2.1"
     styled-components-breakpoint "^1.0.1"
 
-styled-components@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c"
-  dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.9"
-    hoist-non-react-statics "^1.2.0"
-    is-function "^1.0.1"
-    is-plain-object "^2.0.1"
-    prop-types "^15.5.4"
-    stylis "3.x"
-    supports-color "^3.2.3"
-
 styled-components@^3.2.3:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.2.6.tgz#99e6e75a746bdedd295a17e03dd1493055a1cc3b"
@@ -9382,10 +9364,6 @@ stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
 
-stylis@3.x:
-  version "3.4.1"
-  resolved "https://registry.npmjs.org/stylis/-/stylis-3.4.1.tgz#46896ff4c51fbb58e44815eae5e0b2180a1f1fcb"
-
 stylis@^3.2.1:
   version "3.2.15"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.15.tgz#1800f829fdf3cf0d647ae6cdb5fb70a1fd81c3e2"