Merge pull request #807 from outline/collection-descriptions

Collection descriptions

app/components/Actions/index.js

@@ -1,4 +0,0 @@
-// @flow
-import Actions from './Actions';
-export { Action, Separator } from './Actions';
-export default Actions;

app/components/Alert/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Alert from './Alert';
-export default Alert;

app/components/Button/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Button from './Button';
-export default Button;

app/components/CenteredContent/index.js

@@ -1,3 +0,0 @@
-// @flow
-import CenteredContent from './CenteredContent';
-export default CenteredContent;

app/components/Collaborators/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Collaborators from './Collaborators';
-export default Collaborators;

app/components/ColorPicker/index.js

@@ -1,3 +0,0 @@
-// @flow
-import ColorPicker from './ColorPicker';
-export default ColorPicker;

app/components/CopyToClipboard/index.js

@@ -1,3 +0,0 @@
-// @flow
-import CopyToClipboard from './CopyToClipboard';
-export default CopyToClipboard;

app/components/Divider/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Divider from './Divider';
-export default Divider;

app/components/DropToImport/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DropToImport from './DropToImport';
-export default DropToImport;

app/components/Editor.js

@@ -0,0 +1,65 @@
+// @flow
+import * as React from 'react';
+import RichMarkdownEditor from 'rich-markdown-editor';
+import { uploadFile } from 'utils/uploadFile';
+import isInternalUrl from 'utils/isInternalUrl';
+
+type Props = {
+  titlePlaceholder?: string,
+  bodyPlaceholder?: string,
+  defaultValue?: string,
+  readOnly?: boolean,
+  history: *,
+  ui: *,
+};
+
+class Editor extends React.Component<Props> {
+  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');
+  };
+
+  render() {
+    return (
+      <RichMarkdownEditor
+        uploadImage={this.onUploadImage}
+        onClickLink={this.onClickLink}
+        onShowToast={this.onShowToast}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default Editor;

app/components/Empty/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Empty from './Empty';
-export default Empty;

app/components/Fade/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Fade from './Fade';
-export default Fade;

app/components/HelpText/index.js

@@ -1,3 +0,0 @@
-// @flow
-import HelpText from './HelpText';
-export default HelpText;

app/components/Highlight/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Highlight from './Highlight';
-export default Highlight;

app/components/Input.js

@@ -31,6 +31,8 @@ const RealInput = styled.input`
 
 const Wrapper = styled.div`
   max-width: ${props => (props.short ? '350px' : '100%')};
+  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')};
 `;
 
 export const Outline = styled(Flex)`

app/components/Input/index.js

@@ -1,4 +0,0 @@
-// @flow
-import Input, { LabelText, Outline } from './Input';
-export default Input;
-export { LabelText, Outline };

app/components/InputRich.js

@@ -0,0 +1,66 @@
+// @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 Input, { LabelText, Outline } from 'components/Input';
+
+type Props = {
+  label: string,
+  minHeight?: number,
+  maxHeight?: number,
+  readOnly?: boolean,
+  history: *,
+  ui: *,
+};
+
+@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>
+        {Editor ? (
+          <StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
+            <Editor {...rest} />
+          </StyledOutline>
+        ) : (
+          <Input
+            maxHeight={maxHeight}
+            minHeight={minHeight}
+            placeholder="Loading…"
+            disabled
+          />
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+const StyledOutline = styled(Outline)`
+  padding: 8px 12px;
+  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')};
+  overflow: scroll;
+
+  > * {
+    display: block;
+  }
+`;
+
+export default inject('ui')(withRouter(InputRich));

app/components/Key/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Key from './key';
-export default Key;

app/components/Labeled/index.js

@@ -1,4 +0,0 @@
-// @flow
-import Labeled, { Label } from './Labeled';
-export default Labeled;
-export { Label };

app/components/Layout/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Layout from './Layout';
-export default Layout;

app/components/Modal/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Modal from './Modal';
-export default Modal;

app/components/Modals/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Modals from './Modals';
-export default Modals;

app/components/PageTitle/index.js

@@ -1,3 +0,0 @@
-// @flow
-import PageTitle from './PageTitle';
-export default PageTitle;

app/components/Popover/index.js

@@ -1,4 +0,0 @@
-// @flow
-import Popover from './Popover';
-export { Preset } from './Popover';
-export default Popover;

app/components/RouteSidebarHidden/index.js

@@ -1,3 +0,0 @@
-// @flow
-import RouteSidebarHidden from './RouteSidebarHidden';
-export default RouteSidebarHidden;

app/components/Scrollable/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Scrollable from './Scrollable';
-export default Scrollable;

app/components/Subheading/Subheading.js

@@ -1,15 +0,0 @@
-// @flow
-import styled from 'styled-components';
-
-const Subheading = styled.h3`
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: #9fa6ab;
-  letter-spacing: 0.04em;
-  border-bottom: 1px solid #ddd;
-  padding-bottom: 10px;
-  margin-top: 30px;
-`;
-
-export default Subheading;

app/components/Subheading/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Subheading from './Subheading';
-export default Subheading;

app/models/Collection.js

@@ -12,10 +12,9 @@ import type { NavigationNode } from 'types';
 class Collection extends BaseModel {
   isSaving: boolean = false;
   ui: UiStore;
-  data: Object;
 
   createdAt: string;
-  description: ?string;
+  description: string;
   id: string;
   name: string;
   color: string;
@@ -24,15 +23,6 @@ class Collection extends BaseModel {
   updatedAt: string;
   url: string;
 
-  /* Computed */
-
-  @computed
-  get entryUrl(): string {
-    return this.type === 'atlas' && this.documents.length > 0
-      ? this.documents[0].url
-      : this.url;
-  }
-
   @computed
   get isEmpty(): boolean {
     return this.documents.length === 0;
@@ -66,8 +56,6 @@ class Collection extends BaseModel {
     travelDocuments(this.documents);
   }
 
-  /* Actions */
-
   @action
   fetch = async () => {
     try {
@@ -138,7 +126,6 @@ class Collection extends BaseModel {
 
   @action
   updateData(data: Object = {}) {
-    this.data = data;
     extendObservable(this, data);
   }
 

app/scenes/Collection.js

@@ -5,6 +5,7 @@ import { observer, inject } from 'mobx-react';
 import { withRouter, Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { CollectionIcon, NewDocumentIcon, PinIcon } from 'outline-icons';
+import RichMarkdownEditor from 'rich-markdown-editor';
 
 import { newDocumentUrl } from 'utils/routeHelpers';
 import CollectionsStore from 'stores/CollectionsStore';
@@ -157,6 +158,13 @@ class CollectionScene extends React.Component<Props> {
               />{' '}
               {this.collection.name}
             </Heading>
+            {this.collection.description && (
+              <RichMarkdownEditor
+                key={this.collection.description}
+                defaultValue={this.collection.description}
+                readOnly
+              />
+            )}
 
             {hasPinnedDocuments && (
               <React.Fragment>

app/scenes/CollectionEdit.js

@@ -3,8 +3,9 @@ import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
-import Button from 'components/Button';
 import Input from 'components/Input';
+import InputRich from 'components/InputRich';
+import Button from 'components/Button';
 import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
 import ColorPicker from 'components/ColorPicker';
@@ -19,18 +20,24 @@ type Props = {
 @observer
 class CollectionEdit extends React.Component<Props> {
   @observable name: string;
+  @observable description: string = '';
   @observable color: string = '';
   @observable isSaving: boolean;
 
   componentWillMount() {
     this.name = this.props.collection.name;
+    this.description = this.props.collection.description;
   }
 
   handleSubmit = async (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
     this.isSaving = true;
 
-    this.props.collection.updateData({ name: this.name, color: this.color });
+    this.props.collection.updateData({
+      name: this.name,
+      description: this.description,
+      color: this.color,
+    });
     const success = await this.props.collection.save();
 
     if (success) {
@@ -40,6 +47,10 @@ class CollectionEdit extends React.Component<Props> {
     this.isSaving = false;
   };
 
+  handleDescriptionChange = getValue => {
+    this.description = getValue();
+  };
+
   handleNameChange = (ev: SyntheticInputEvent<*>) => {
     this.name = ev.target.value;
   };
@@ -53,8 +64,8 @@ class CollectionEdit extends React.Component<Props> {
       <Flex column>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
-            You can edit a collection’s name at any time, however doing so might
-            confuse your team mates.
+            You can edit a collection’s details at any time, however doing so
+            often might confuse your team mates.
           </HelpText>
           <Input
             type="text"
@@ -64,6 +75,14 @@ class CollectionEdit extends React.Component<Props> {
             required
             autoFocus
           />
+          <InputRich
+            label="Description"
+            onChange={this.handleDescriptionChange}
+            defaultValue={this.description || ''}
+            placeholder="More details about this collection…"
+            minHeight={68}
+            maxHeight={200}
+          />
           <ColorPicker
             onSelect={this.handleColor}
             value={this.props.collection.color}

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;
@@ -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,17 @@ 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}
               />
             </MaxWidth>
           </Container>

app/scenes/Document/components/Editor.js

@@ -1,45 +1,19 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { Block, Change, Node, Mark, Text } from 'slate';
-import RichMarkdownEditor, { Placeholder, schema } from 'rich-markdown-editor';
+import { Text } from 'slate';
+import { Placeholder } from 'rich-markdown-editor';
+import Editor from 'components/Editor';
 import ClickablePadding from 'components/ClickablePadding';
 
 type Props = {
   titlePlaceholder?: string,
   bodyPlaceholder?: string,
   defaultValue?: string,
-  readOnly: boolean,
+  readOnly?: boolean,
 };
 
-// add rules to the schema to ensure the first node is a heading
-schema.document.nodes.unshift({ types: ['heading1'], min: 1, max: 1 });
-schema.document.normalize = (
-  change: Change,
-  reason: string,
-  {
-    node,
-    child,
-    mark,
-    index,
-  }: { node: Node, mark?: Mark, child: Node, index: number }
-) => {
-  switch (reason) {
-    case 'child_type_invalid': {
-      return change.setNodeByKey(
-        child.key,
-        index === 0 ? 'heading1' : 'paragraph'
-      );
-    }
-    case 'child_required': {
-      const block = Block.create(index === 0 ? 'heading1' : 'paragraph');
-      return change.insertNodeByKey(node.key, index, block);
-    }
-    default:
-  }
-};
-
-class Editor extends React.Component<Props> {
+class DocumentEditor extends React.Component<Props> {
   editor: *;
 
   componentDidMount() {
@@ -48,10 +22,6 @@ class Editor extends React.Component<Props> {
     }
   }
 
-  setEditorRef = (ref: RichMarkdownEditor) => {
-    this.editor = ref;
-  };
-
   focusAtStart = () => {
     if (this.editor) this.editor.focusAtStart();
   };
@@ -83,9 +53,8 @@ class Editor extends React.Component<Props> {
     return (
       <React.Fragment>
         <StyledEditor
-          ref={this.setEditorRef}
+          ref={ref => (this.editor = ref)}
           renderPlaceholder={this.renderPlaceholder}
-          schema={schema}
           {...this.props}
         />
         <ClickablePadding
@@ -98,7 +67,7 @@ class Editor extends React.Component<Props> {
 }
 
 // additional styles account for placeholder nodes not always re-rendering
-const StyledEditor = styled(RichMarkdownEditor)`
+const StyledEditor = styled(Editor)`
   display: flex;
   flex: 0;
 
@@ -119,4 +88,4 @@ const StyledEditor = styled(RichMarkdownEditor)`
   }
 `;
 
-export default Editor;
+export default DocumentEditor;

app/scenes/Document/schema.js

@@ -0,0 +1,35 @@
+// @flow
+import { cloneDeep } from 'lodash';
+import { Block, Change, Node, Mark } from 'slate';
+import { schema as originalSchema } from 'rich-markdown-editor';
+
+const schema = cloneDeep(originalSchema);
+
+// add rules to the schema to ensure the first node is a heading
+schema.document.nodes.unshift({ types: ['heading1'], min: 1, max: 1 });
+schema.document.normalize = (
+  change: Change,
+  reason: string,
+  {
+    node,
+    child,
+    mark,
+    index,
+  }: { node: Node, mark?: Mark, child: Node, index: number }
+) => {
+  switch (reason) {
+    case 'child_type_invalid': {
+      return change.setNodeByKey(
+        child.key,
+        index === 0 ? 'heading1' : 'paragraph'
+      );
+    }
+    case 'child_required': {
+      const block = Block.create(index === 0 ? 'heading1' : 'paragraph');
+      return change.insertNodeByKey(node.key, index, block);
+    }
+    default:
+  }
+};
+
+export default schema;

app/utils/isInternalUrl.js

@@ -1,12 +1,19 @@
 // @flow
+import parseDomain from 'parse-domain';
+
 export default function isInternalUrl(href: string) {
   if (href[0] === '/') return true;
 
-  try {
-    const outline = new URL(BASE_URL);
-    const parsed = new URL(href);
-    return parsed.hostname === outline.hostname;
-  } catch (err) {
-    return false;
+  const outline = parseDomain(BASE_URL);
+  const parsed = parseDomain(href);
+  if (
+    parsed &&
+    outline &&
+    parsed.domain === outline.domain &&
+    parsed.tld === outline.tld
+  ) {
+    return true;
   }
+
+  return false;
 }

package.json

@@ -161,7 +161,7 @@
     "react-waypoint": "^7.3.1",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
-    "rich-markdown-editor": "^6.0.2",
+    "rich-markdown-editor": "^6.0.3",
     "safestart": "1.1.0",
     "sequelize": "4.28.6",
     "sequelize-cli": "^2.7.0",

server/api/collections.js

@@ -77,7 +77,7 @@ router.post('collections.exportAll', auth(), async ctx => {
 });
 
 router.post('collections.update', auth(), async ctx => {
-  const { id, name, color } = ctx.body;
+  const { id, name, description, color } = ctx.body;
   ctx.assertPresent(name, 'name is required');
   if (color)
     ctx.assertHexColor(color, 'Invalid hex value (please use format #FFFFFF)');
@@ -86,6 +86,7 @@ router.post('collections.update', auth(), async ctx => {
   authorize(ctx.state.user, 'update', collection);
 
   collection.name = name;
+  collection.description = description;
   collection.color = color;
   await collection.save();
 

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,

yarn.lock

@@ -8985,9 +8985,9 @@ retry-axios@0.3.2, retry-axios@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/retry-axios/-/retry-axios-0.3.2.tgz#5757c80f585b4cc4c4986aa2ffd47a60c6d35e13"
 
-rich-markdown-editor@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-6.0.2.tgz#580a86eba738a258e16bcbfef383adca781bbdba"
+rich-markdown-editor@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-6.0.3.tgz#8000cc6c97c376845471bfb4e7897fab38afab9c"
   dependencies:
     "@tommoor/slate-drop-or-paste-images" "^0.8.1"
     babel-plugin-transform-async-to-generator "^6.24.1"