Dynamic loading for Editor

.babelrc

@@ -1,5 +1,8 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "react",
+    "env"
+  ],
   "plugins": [
     "lodash",
     "styled-components",
@@ -7,11 +10,14 @@
     "transform-es2015-destructuring",
     "transform-object-rest-spread",
     "transform-regenerator",
-    "transform-class-properties"
+    "transform-class-properties",
+    "syntax-dynamic-import"
   ],
   "env": {
     "development": {
-      "presets": ["react-hmre"]
+      "presets": [
+        "react-hmre"
+      ]
     }
   }
-}
+}

app/components/Editor/Editor.js

@@ -24,12 +24,12 @@ import styled from 'styled-components';
 type Props = {
   text: string,
   onChange: Change => *,
-  onSave: (redirect?: boolean) => *,
+    onSave: (redirect?: boolean) => *,
-  onCancel: () => void,
+      onCancel: () => void,
-  onImageUploadStart: () => void,
+        onImageUploadStart: () => void,
-  onImageUploadStop: () => void,
+          onImageUploadStop: () => void,
-  emoji?: string,
+            emoji ?: string,
-  readOnly: boolean,
+            readOnly: boolean,
 };
 
 @observer
@@ -216,13 +216,13 @@ class MarkdownEditor extends Component {
   };
 }
 
-const MaxWidth = styled(Flex)`
+const MaxWidth = styled(Flex) `
   margin: 0 60px;
   max-width: 46em;
   height: 100%;
 `;
 
-const Header = styled(Flex)`
+const Header = styled(Flex) `
   height: 60px;
   flex-shrink: 0;
   align-items: flex-end;
@@ -233,7 +233,7 @@ const Header = styled(Flex)`
   }
 `;
 
-const StyledEditor = styled(Editor)`
+const StyledEditor = styled(Editor) `
   font-weight: 400;
   font-size: 1em;
   line-height: 1.7em;

app/scenes/Document/Document.js

@@ -25,8 +25,8 @@ import DocumentsStore from 'stores/DocumentsStore';
 import CollectionsStore from 'stores/CollectionsStore';
 import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
+import type EditorType from 'components/Editor';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
-import Editor from 'components/Editor';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -56,6 +56,7 @@ class DocumentScene extends Component {
   props: Props;
   savedTimeout: number;
 
+  @observable editorComponent;
   @observable editCache: ?string;
   @observable newDocument: ?Document;
   @observable isLoading = false;
@@ -65,6 +66,7 @@ class DocumentScene extends Component {
 
   componentDidMount() {
     this.loadDocument(this.props);
+    this.loadEditor();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -128,6 +130,11 @@ class DocumentScene extends Component {
     }
   };
 
+  loadEditor = async () => {
+    const EditorImport = await import('components/Editor');
+    this.editorComponent = EditorImport.default;
+  };
+
   get isEditing() {
     return (
       this.props.match.path === matchDocumentEdit || this.props.newDocument
@@ -208,6 +215,7 @@ class DocumentScene extends Component {
   }
 
   render() {
+    const Editor = this.editorComponent;
     const isNew = this.props.newDocument;
     const isMoving = this.props.match.path === matchDocumentMove;
     const document = this.document;
@@ -225,82 +233,82 @@ class DocumentScene extends Component {
           {isMoving && document && <DocumentMove document={document} />}
           {titleText && <PageTitle title={titleText} />}
           {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-          {!document ? (
+          {!document || !Editor ? (
             <CenteredContent>
               <LoadingState />
             </CenteredContent>
           ) : (
-            <Flex justify="center" auto>
+              <Flex justify="center" auto>
-              {this.isEditing && (
-                <Prompt
-                  when={document.hasPendingChanges}
-                  message={DISCARD_CHANGES}
-                />
-              )}
-              <Editor
-                text={document.text}
-                emoji={document.emoji}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onDiscard}
-                readOnly={!this.isEditing}
-              />
-              <Actions
-                align="center"
-                justify="flex-end"
-                readOnly={!this.isEditing}
-              >
-                {!isNew &&
-                  !this.isEditing && <Collaborators document={document} />}
-                <Action>
-                  {this.isEditing ? (
-                    <SaveAction
-                      isSaving={this.isSaving}
-                      onClick={this.onSave.bind(this, true)}
-                      disabled={
-                        !(this.document && this.document.allowSave) ||
-                        this.isSaving
-                      }
-                      isNew={!!isNew}
-                    />
-                  ) : (
-                    <a onClick={this.onClickEdit}>Edit</a>
-                  )}
-                </Action>
                 {this.isEditing && (
-                  <Action>
+                  <Prompt
-                    <a onClick={this.onDiscard}>Discard</a>
+                    when={document.hasPendingChanges}
-                  </Action>
+                    message={DISCARD_CHANGES}
+                  />
                 )}
-                {!this.isEditing && (
+                <Editor
+                  text={document.text}
+                  emoji={document.emoji}
+                  onImageUploadStart={this.onImageUploadStart}
+                  onImageUploadStop={this.onImageUploadStop}
+                  onChange={this.onChange}
+                  onSave={this.onSave}
+                  onCancel={this.onDiscard}
+                  readOnly={!this.isEditing}
+                />
+                <Actions
+                  align="center"
+                  justify="flex-end"
+                  readOnly={!this.isEditing}
+                >
+                  {!isNew &&
+                    !this.isEditing && <Collaborators document={document} />}
                   <Action>
-                    <DocumentMenu document={document} />
+                    {this.isEditing ? (
+                      <SaveAction
+                        isSaving={this.isSaving}
+                        onClick={this.onSave.bind(this, true)}
+                        disabled={
+                          !(this.document && this.document.allowSave) ||
+                          this.isSaving
+                        }
+                        isNew={!!isNew}
+                      />
+                    ) : (
+                        <a onClick={this.onClickEdit}>Edit</a>
+                      )}
                   </Action>
-                )}
+                  {this.isEditing && (
-                {!this.isEditing && <Separator />}
+                    <Action>
-                <Action>
+                      <a onClick={this.onDiscard}>Discard</a>
-                  {!this.isEditing && (
+                    </Action>
-                    <a onClick={this.onClickNew}>
-                      <NewDocumentIcon />
-                    </a>
                   )}
-                </Action>
+                  {!this.isEditing && (
-              </Actions>
+                    <Action>
-            </Flex>
+                      <DocumentMenu document={document} />
-          )}
+                    </Action>
+                  )}
+                  {!this.isEditing && <Separator />}
+                  <Action>
+                    {!this.isEditing && (
+                      <a onClick={this.onClickNew}>
+                        <NewDocumentIcon />
+                      </a>
+                    )}
+                  </Action>
+                </Actions>
+              </Flex>
+            )}
         </ErrorBoundary>
       </Container>
     );
   }
 }
 
-const Container = styled(Flex)`
+const Container = styled(Flex) `
   position: relative;
 `;
 
-const LoadingState = styled(LoadingPlaceholder)`
+const LoadingState = styled(LoadingPlaceholder) `
   margin: 90px 0;
 `;
 

package.json

@@ -68,6 +68,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-styled-components": "^1.1.7",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",

yarn.lock

@@ -697,6 +697,10 @@ babel-plugin-syntax-decorators@^6.1.18:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
 
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"