Dynamic loading for Editor

2018-01-03 20:08:43 -08:00
parent c504bfdc83
commit 2fd5fc2dff
5 changed files with 91 additions and 72 deletions
--- a/.babelrc
+++ b/.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"
+      ]
    }
  }
-}
+}
--- a/app/components/Editor/Editor.js
+++ b/app/components/Editor/Editor.js
@ -24,12 +24,12 @@ import styled from 'styled-components';
 type Props = {
  text: string,
  onChange: Change => *,
-  onSave: (redirect?: boolean) => *,
-  onCancel: () => void,
-  onImageUploadStart: () => void,
-  onImageUploadStop: () => void,
-  emoji?: string,
-  readOnly: boolean,
+    onSave: (redirect?: boolean) => *,
+      onCancel: () => void,
+        onImageUploadStart: () => void,
+          onImageUploadStop: () => void,
+            emoji ?: string,
+            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;
--- a/app/scenes/Document/Document.js
+++ b/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>
-              {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>
+              <Flex justify="center" auto>
                {this.isEditing && (
-                  <Action>
-                    <a onClick={this.onDiscard}>Discard</a>
-                  </Action>
+                  <Prompt
+                    when={document.hasPendingChanges}
+                    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 && <Separator />}
-                <Action>
-                  {!this.isEditing && (
-                    <a onClick={this.onClickNew}>
-                      <NewDocumentIcon />
-                    </a>
+                  {this.isEditing && (
+                    <Action>
+                      <a onClick={this.onDiscard}>Discard</a>
+                    </Action>
                  )}
-                </Action>
-              </Actions>
-            </Flex>
-          )}
+                  {!this.isEditing && (
+                    <Action>
+                      <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;
 `;

--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/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"