stash

app/components/Editor.js

@@ -4,13 +4,17 @@ import styled from 'styled-components';
 import { Text } from 'slate';
 import RichMarkdownEditor, { Placeholder } from 'rich-markdown-editor';
 import ClickablePadding from 'components/ClickablePadding';
-import schema from '../schema';
+import { uploadFile } from 'utils/uploadFile';
+import isInternalUrl from 'utils/isInternalUrl';
 
 type Props = {
   titlePlaceholder?: string,
   bodyPlaceholder?: string,
   defaultValue?: string,
-  readOnly: boolean,
+  readOnly?: boolean,
+  expandToFit?: boolean,
+  history: *,
+  ui: *,
 };
 
 class Editor extends React.Component<Props> {
@@ -34,6 +38,42 @@ class Editor extends React.Component<Props> {
     if (this.editor) this.editor.focusAtEnd();
   };
 
+  onUploadImage = async (file: File) => {
+    const result = await uploadFile(file);
+    return result.url;
+  };
+
+  onClickLink = (href: string) => {
+    // on page hash
+    if (href[0] === '#') {
+      window.location.href = href;
+      return;
+    }
+
+    if (isInternalUrl(href)) {
+      // relative
+      let navigateTo = href;
+
+      // probably absolute
+      if (href[0] !== '/') {
+        try {
+          const url = new URL(href);
+          navigateTo = url.pathname + url.hash;
+        } catch (err) {
+          navigateTo = href;
+        }
+      }
+
+      this.props.history.push(navigateTo);
+    } else {
+      window.open(href, '_blank');
+    }
+  };
+
+  onShowToast = (message: string) => {
+    this.props.ui.showToast(message, 'success');
+  };
+
   renderPlaceholder = (props: *) => {
     const { editor, node } = props;
 
@@ -52,20 +92,24 @@ class Editor extends React.Component<Props> {
   };
 
   render() {
-    const { readOnly } = this.props;
+    const { readOnly, expandToFit } = this.props;
 
     return (
       <React.Fragment>
         <StyledEditor
           ref={this.setEditorRef}
           renderPlaceholder={this.renderPlaceholder}
-          schema={schema}
+          uploadImage={this.onUploadImage}
+          onClickLink={this.onClickLink}
+          onShowToast={this.onShowToast}
           {...this.props}
         />
-        <ClickablePadding
-          onClick={!readOnly ? this.focusAtEnd : undefined}
-          grow
-        />
+        {expandToFit && (
+          <ClickablePadding
+            onClick={!readOnly ? this.focusAtEnd : undefined}
+            grow
+          />
+        )}
       </React.Fragment>
     );
   }

app/components/InputRich.js

@@ -1,29 +1,46 @@
 // @flow
 import * as React from 'react';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
-import RichMarkdownEditor from 'rich-markdown-editor';
 import { LabelText, Outline } from 'components/Input';
 
 type Props = {
   label: string,
   minHeight?: number,
   maxHeight?: number,
+  readOnly?: boolean,
+  history: *,
+  ui: *,
 };
 
-export default function InputRich({
-  label,
-  minHeight,
-  maxHeight,
-  ...rest
-}: Props) {
-  return (
-    <React.Fragment>
-      <LabelText>{label}</LabelText>
-      <StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
-        <RichMarkdownEditor {...rest} />
-      </StyledOutline>
-    </React.Fragment>
-  );
+@observer
+class InputRich extends React.Component<Props> {
+  @observable editorComponent;
+
+  componentDidMount() {
+    this.loadEditor();
+  }
+
+  loadEditor = async () => {
+    const EditorImport = await import('./Editor');
+    this.editorComponent = EditorImport.default;
+  };
+
+  render() {
+    const { label, minHeight, maxHeight, ...rest } = this.props;
+    const Editor = this.editorComponent;
+
+    return (
+      <React.Fragment>
+        <LabelText>{label}</LabelText>
+        <StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
+          {Editor && <Editor {...rest} />}
+        </StyledOutline>
+      </React.Fragment>
+    );
+  }
 }
 
 const StyledOutline = styled(Outline)`
@@ -36,3 +53,5 @@ const StyledOutline = styled(Outline)`
     display: block;
   }
 `;
+
+export default inject('ui')(withRouter(InputRich));

app/scenes/CollectionEdit.js

@@ -65,7 +65,7 @@ class CollectionEdit extends React.Component<Props> {
         <form onSubmit={this.handleSubmit}>
           <HelpText>
             You can edit a collection’s details at any time, however doing so
-            might confuse your team mates.
+            often might confuse your team mates.
           </HelpText>
           <Input
             type="text"

app/scenes/Document/Document.js

@@ -17,9 +17,7 @@ import {
   documentEditUrl,
   matchDocumentEdit,
 } from 'utils/routeHelpers';
-import { uploadFile } from 'utils/uploadFile';
 import { emojiToUrl } from 'utils/emoji';
-import isInternalUrl from 'utils/isInternalUrl';
 import type { Revision } from 'types';
 
 import Document from 'models/Document';
@@ -39,6 +37,7 @@ import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import RevisionsStore from 'stores/RevisionsStore';
+import schema from './schema';
 
 const AUTOSAVE_DELAY = 3000;
 const IS_DIRTY_DELAY = 500;
@@ -173,7 +172,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   loadEditor = async () => {
-    const EditorImport = await import('./components/Editor');
+    const EditorImport = await import('components/Editor');
     this.editorComponent = EditorImport.default;
   };
 
@@ -259,11 +258,6 @@ class DocumentScene extends React.Component<Props> {
     this.props.history.push(url);
   };
 
-  onUploadImage = async (file: File) => {
-    const result = await uploadFile(file);
-    return result.url;
-  };
-
   onSearchLink = async (term: string) => {
     const results = await this.props.documents.search(term);
 
@@ -273,37 +267,6 @@ class DocumentScene extends React.Component<Props> {
     }));
   };
 
-  onClickLink = (href: string) => {
-    // on page hash
-    if (href[0] === '#') {
-      window.location.href = href;
-      return;
-    }
-
-    if (isInternalUrl(href)) {
-      // relative
-      let navigateTo = href;
-
-      // probably absolute
-      if (href[0] !== '/') {
-        try {
-          const url = new URL(href);
-          navigateTo = url.pathname + url.hash;
-        } catch (err) {
-          navigateTo = href;
-        }
-      }
-
-      this.props.history.push(navigateTo);
-    } else {
-      window.open(href, '_blank');
-    }
-  };
-
-  onShowToast = (message: string) => {
-    this.props.ui.showToast(message, 'success');
-  };
-
   render() {
     const { location, match } = this.props;
     const Editor = this.editorComponent;
@@ -386,17 +349,18 @@ class DocumentScene extends React.Component<Props> {
                 bodyPlaceholder="…the rest is your canvas"
                 defaultValue={revision ? revision.text : document.text}
                 pretitle={document.emoji}
-                uploadImage={this.onUploadImage}
                 onImageUploadStart={this.onImageUploadStart}
                 onImageUploadStop={this.onImageUploadStop}
                 onSearchLink={this.onSearchLink}
-                onClickLink={this.onClickLink}
                 onChange={this.onChange}
                 onSave={this.onSave}
                 onCancel={this.onDiscard}
-                onShowToast={this.onShowToast}
                 readOnly={!this.isEditing}
                 toc={!revision}
+                history={this.props.history}
+                ui={this.props.ui}
+                schema={schema}
+                expandToFit
               />
             </MaxWidth>
           </Container>

server/models/Team.js

@@ -109,7 +109,7 @@ Team.prototype.provisionSubdomain = async function(subdomain) {
 Team.prototype.provisionFirstCollection = async function(userId) {
   return await Collection.create({
     name: 'General',
-    description: 'Your first Collection',
+    description: '',
     type: 'atlas',
     teamId: this.id,
     creatorId: userId,