refactor

* perf: Split only initial vendors

.babelrc

@@ -1,17 +1,29 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-flow",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "2",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
   "plugins": [
     "lodash",
     "styled-components",
-    "transform-decorators-legacy",
-    "transform-es2015-destructuring",
-    "transform-object-rest-spread",
-    "transform-regenerator",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
     "transform-class-properties"
-  ],
-  "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    }
-  }
-}
+  ]
+}

.circleci/config.yml

@@ -0,0 +1,43 @@
+version: 2
+jobs:
+  build:
+    working_directory: ~/outline
+    docker:
+      - image: circleci/node:12
+      - image: circleci/redis:latest
+      - image: circleci/postgres:9.6.5-alpine-ram
+    environment:
+      NODE_ENV: test
+      SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+      DATABASE_URL_TEST: postgres://root@localhost:5432/circle_test
+      DATABASE_URL: postgres://root@localhost:5432/circle_test
+      URL: http://localhost:3000
+      SMTP_FROM_EMAIL: hello@example.com
+      AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
+      AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: install-deps
+          command: yarn install --pure-lockfile
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: migrate
+          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
+      - run:
+          name: lint
+          command: yarn lint
+      - run:
+          name: flow
+          command: yarn flow check --max-workers 4
+      - run:
+          name: test
+          command: yarn test
+      - run:
+          name: build
+          command: yarn build

.circleci/run-build-locally.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+curl --user ${CIRCLE_TOKEN}: \
+    --request POST \
+    --form revision=<ENTER COMMIT SHA HERE>\
+    --form config=@config.yml \
+    --form notify=false \
+        https://circleci.com/api/v1.1/project/github/outline/outline/tree/master

.env.sample

@@ -1,22 +1,61 @@
-# Copy this file to .env, remove this comment and change the keys
+# Copy this file to .env, remove this comment and change the keys. For development
+# with docker this should mostly work out of the box other than setting the Slack
+# keys (for auth) and the SECRET_KEY.
 #
 # Please use `openssl rand -hex 32` to create SECRET_KEY
+SECRET_KEY=generate_a_new_key
+UTILS_SECRET=generate_a_new_key
+
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+REDIS_URL=redis://localhost:6479
 
-DATABASE_URL=postgres://user:pass@example.com:5432/outline
-DATABASE_URL_TEST=postgres://user:pass@example.com:5432/outline-test
-SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-PORT=3000
-REDIS_URL=redis://localhost:6379
-SLACK_KEY=71315967491.XXXXXXXXXX
-SLACK_SECRET=d2dc414f9953226bad0a356c794XXXXX
 URL=http://localhost:3000
-DEPLOYMENT=hosted
-ENABLE_UPDATES=true
-GOOGLE_ANALYTICS_ID=
+PORT=3000
 
+# enforce (auto redirect to) https in production, (optional) default is true.
+# set to false if  your SSL is terminated at a loadbalancer, for example
+FORCE_HTTPS=true
+
+ENABLE_UPDATES=true
+DEBUG=cache,presenters,events
+
+# Third party signin credentials (at least one is required)
+SLACK_KEY=get_a_key_from_slack
+SLACK_SECRET=get_the_secret_of_above_key
+
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# Comma separated list of domains to be allowed (optional)
+# If not set, all Google apps domains are allowed by default
+GOOGLE_ALLOWED_DOMAINS=
+
+# Third party credentials (optional)
+SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
+SLACK_APP_ID=A0XXXXXXX
+SLACK_MESSAGE_ACTIONS=true
+GOOGLE_ANALYTICS_ID=
+SENTRY_DSN=
+
+# AWS credentials (optional in development)
+AWS_ACCESS_KEY_ID=get_a_key_from_aws
+AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
+AWS_REGION=xx-xxxx-x
+AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
+AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
+AWS_S3_UPLOAD_MAX_SIZE=26214400
+# uploaded s3 objects permission level, default is private
+# set to "public-read" to allow public access
+AWS_S3_ACL=private
+
+# Emails configuration (optional)
 SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
-SMTP_REPLY_EMAIL=
+SMTP_REPLY_EMAIL=
+
+# Custom logo that displays on the authentication screen, scaled to height: 60px
+# TEAM_LOGO=https://example.com/images/logo.png

.eslintrc

@@ -6,23 +6,54 @@
     "plugin:import/warnings",
     "plugin:flowtype/recommended"
   ],
-  "plugins": ["prettier", "flowtype"],
+  "plugins": [
+    "prettier",
+    "flowtype"
+  ],
   "rules": {
     "eqeqeq": 2,
     "no-unused-vars": 2,
-    // // Bring back after we remove CSS Modules 100%
-    // "import/order": "warn",
-    // Prettier automatically uses the least amount of parens possible, so this
-    // does more harm than good.
     "no-mixed-operators": "off",
-    // Temporary fix for a failing import lint
-    "import/no-unresolved": [
+    "import/order": [
       "error",
       {
-        "ignore": ["slate-drop-or-paste-images"]
+        "alphabetize": {
+          "order": "asc"
+        },
+        "pathGroups": [
+          {
+            "pattern": "shared/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "stores",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "stores/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "models/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "scenes/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "components/**",
+            "group": "external",
+            "position": "after"
+          }
+        ]
       }
     ],
-    // Flow
     "flowtype/require-valid-file-annotation": [
       2,
       "always",
@@ -30,20 +61,36 @@
         "annotationStyle": "line"
       }
     ],
-    "flowtype/space-after-type-colon": [2, "always"],
-    "flowtype/space-before-type-colon": [2, "never"],
-    // Enforce that code is formatted with prettier.
+    "flowtype/space-after-type-colon": [
+      2,
+      "always"
+    ],
+    "flowtype/space-before-type-colon": [
+      2,
+      "never"
+    ],
     "prettier/prettier": [
       "error",
       {
         "printWidth": 80,
-        "trailingComma": "es5",
-        "singleQuote": true
+        "trailingComma": "es5"
       }
     ]
   },
   "settings": {
-    "import/resolver": "webpack",
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "paths": [
+          "app",
+          "."
+        ]
+      }
+    },
     "flowtype": {
       "onlyFilesWithFlowAnnotation": false
     }
@@ -52,13 +99,6 @@
     "jest": true
   },
   "globals": {
-    "__DEV__": true,
-    "SLACK_KEY": true,
-    "SLACK_REDIRECT_URI": true,
-    "DEPLOYMENT": true,
-    "BASE_URL": true,
-    "BUGSNAG_KEY": true,
-    "afterAll": true,
-    "Bugsnag": true
+    "EDITOR_VERSION": true
   }
-}
+}

.flowconfig

@@ -4,11 +4,14 @@
 .*/shared/.*
 
 [ignore]
+.*/node_modules/tiny-cookie/flow/.*
 .*/node_modules/styled-components/.*
 .*/node_modules/polished/.*
+.*/node_modules/mobx/.*.flow
 .*/node_modules/react-side-effect/.*
 .*/node_modules/fbjs/.*
 .*/node_modules/config-chain/.*
+.*/server/scripts/.*
 *.test.js
 
 [libs]
@@ -19,19 +22,16 @@ emoji=true
 module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=app
 
-module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object'
 module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
 module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
 
 module.file_ext=.js
-module.file_ext=.scss
 module.file_ext=.md
 module.file_ext=.json
 
 esproposal.decorators=ignore
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
-unsafe.enable_getters_and_setters=true
 
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

.githooks/pre-commit/flow.sh

@@ -1 +0,0 @@
-yarn lint:flow

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots or videos to help explain your problem.
+
+**Outline (please complete the following information):**
+- Install: [getoutline.com or self hosted]
+- Version: [commit sha if self hosted]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Mobile (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Feature request
+    url: https://github.com/outline/outline/discussions/new
+    about: Request a feature to be added to the project
+  - name: Self hosting questions
+    url: https://github.com/outline/outline/discussions/new
+    about: Ask questions and discuss running Outline with community members

.github/config.yml

@@ -0,0 +1,32 @@
+# Configuration for request-info - https://github.com/behaviorbot/request-info
+
+# Comment to reply with
+requestInfoReplyComment: >
+  Hey there! It looks like you didn't provide much information here. Please
+  consider adding more details about the issue / pr or it will be automatically
+  closed. Thanks for helping us maintain the project!
+
+# default titles to check against for lack of descriptiveness
+requestInfoDefaultTitles:
+  - update readme.md
+  - updates
+  - fix
+  - fixes
+
+requestInfoLabelToAdd: more information needed
+
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening your first pull request in the Outline project 🎉🙌! One of the core
+  team members will take a look and get back to you soon with approval or requested
+  changes.
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  A big thanks on merging your first pull request into Outline!
+  ![awesome](https://media.giphy.com/media/fDzM81OYrNjJC/giphy.gif)

.github/no-response.yml

@@ -0,0 +1,13 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+# Number of days of inactivity before an Issue is closed for lack of response
+daysUntilClose: 14
+
+# Label requiring a response
+responseRequiredLabel: more information needed
+
+# Comment to post when closing an Issue for lack of response. Set to `false` to disable
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to the request for more information. With only the details that are currently
+  in the issue, we don't have enough information to take action.

.github/stale.yml

@@ -0,0 +1,21 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - security
+
+# Label to use when marking an issue as stale
+staleLabel: stale
+
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  Hey! The issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed soon if no further activity occurs. Please
+  reply here if you wish for the issue to be kept open.
+
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.gitignore

@@ -1,5 +1,9 @@
 dist
 node_modules/*
+server/scripts
 .env
+.log
 npm-debug.log
+stats.json
 .DS_Store
+fakes3/*

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "javascript.validate.enable": false,
+  "typescript.validate.enable": false,
+  "editor.formatOnSave": true,
+  "typescript.format.enable": false
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@getoutline.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:12-alpine
+
+ENV PATH /opt/outline/node_modules/.bin:/opt/node_modules/.bin:$PATH
+ENV NODE_PATH /opt/outline/node_modules:/opt/node_modules
+ENV APP_PATH /opt/outline
+RUN mkdir -p $APP_PATH
+
+WORKDIR $APP_PATH
+COPY . $APP_PATH
+
+RUN yarn install --pure-lockfile
+RUN yarn build
+RUN cp -r /opt/outline/node_modules /opt/node_modules
+
+CMD yarn start
+
+EXPOSE 3000

LICENSE

@@ -1,19 +1,103 @@
-Copyright (c) 2017 Outline (https://www.getoutline.com/) and individual contributors.
-All rights reserved.
+Business Source License 1.1
 
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Parameters
 
-    1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Licensor:             General Outline, Inc.
+Licensed Work:        Outline 0.46.0
+                      The Licensed Work is (c) 2020 General Outline, Inc.
+Additional Use Grant: You may make use of the Licensed Work, provided that
+                      you may not use the Licensed Work for a Document
+                      Service.
 
-    2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the
-       documentation and/or other materials provided with the distribution.
+                      A “Document Service” is a commercial offering that
+                      allows third parties (other than your employees and
+                      contractors) to access the functionality of the
+                      Licensed Work by creating teams and documents
+                      controlled by such third parties.
 
-    3. Neither the name of the Outline nor the names of its contributors may be used to endorse or promote products derived from this software 
-       without specific prior written permission.
+Change Date:          2023-08-12
 
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
-CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
-PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
-WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
-ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Change License:       Apache License, Version 2.0
+
+For information about alternative licensing arrangements for the Software,
+please visit: https://www.getoutline.com
+
+Notice
+
+The Business Source License (this document, or the “License”) is not an Open
+Source license. However, the Licensed Work will eventually be made available
+under an Open Source License, as stated in this License.
+
+License text copyright (c) 2017 MariaDB Corporation Ab, All Rights Reserved.
+“Business Source License” is a trademark of MariaDB Corporation Ab.
+
+-----------------------------------------------------------------------------
+
+Business Source License 1.1
+
+Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, above, permitting limited
+production use.
+
+Effective on the Change Date, or the fourth anniversary of the first publicly
+available distribution of a specific version of the Licensed Work under this
+License, whichever comes first, the Licensor hereby grants you rights under
+the terms of the Change License, and the rights granted in the paragraph
+above terminate.
+
+If your use of the Licensed Work does not comply with the requirements
+currently in effect as described in this License, you must purchase a
+commercial license from the Licensor, its affiliated entities, or authorized
+resellers, or you must refrain from using the Licensed Work.
+
+All copies of the original and modified Licensed Work, and derivative works
+of the Licensed Work, are subject to this License. This License applies
+separately for each version of the Licensed Work and the Change Date may vary
+for each version of the Licensed Work released by Licensor.
+
+You must conspicuously display this License on each original or modified copy
+of the Licensed Work. If you receive the Licensed Work in original or
+modified form from a third party, the terms and conditions set forth in this
+License apply to your use of that work.
+
+Any use of the Licensed Work in violation of this License will automatically
+terminate your rights under this License for the current and all other
+versions of the Licensed Work.
+
+This License does not grant you any right in any trademark or logo of
+Licensor or its affiliates (provided that you may use a trademark or logo of
+Licensor as expressly required by this License).
+
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
+AN “AS IS” BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
+EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
+TITLE.
+
+MariaDB hereby grants you permission to use this License’s text to license
+your works, and to refer to it using the trademark “Business Source License”,
+as long as you comply with the Covenants of Licensor below.
+
+Covenants of Licensor
+
+In consideration of the right to use this License’s text and the “Business
+Source License” name and trademark, Licensor covenants to MariaDB, and to all
+other recipients of the licensed work to be provided by Licensor:
+
+1. To specify as the Change License the GPL Version 2.0 or any later version,
+   or a license that is compatible with GPL Version 2.0 or a later version,
+   where “compatible” means that software provided under the Change License can
+   be included in a program with software provided under GPL Version 2.0 or a
+   later version. Licensor may specify additional Change Licenses without
+   limitation.
+
+2. To either: (a) specify an additional grant of rights to use that does not
+   impose any additional restriction on the right granted in this License, as
+   the Additional Use Grant; or (b) insert the text “None”.
+
+3. To specify a Change Date.
+
+4. Not to modify this License in any other way.

Makefile

@@ -0,0 +1,22 @@
+up:
+	docker-compose up -d redis postgres s3
+	yarn install --pure-lockfile
+	yarn sequelize db:migrate
+	yarn dev
+
+build:
+	docker-compose build --pull outline
+
+test:
+	docker-compose up -d redis postgres s3
+	yarn test
+
+watch:
+	docker-compose up -d redis postgres s3
+	yarn test:watch
+
+destroy:
+	docker-compose stop
+	docker-compose rm -f
+
+.PHONY: up build destroy test watch # let's go to reserve rules names

README.md

@@ -1,46 +1,89 @@
-# Outline
 
-![](https://circleci.com/gh/outline/outline.svg?style=shield&circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a)
-[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/outline)
 
-An open, extensible, knowledge base for your team built using React and Node.js. Try Outline out using our hosted version at [www.getoutline.com](https://www.getoutline.com) or read on to learn about installing on your own infrastructure.
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
+</p>
+<p align="center">
+  <i>An open, extensible, wiki for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
+  <br/>
+  <img src="https://user-images.githubusercontent.com/380914/78513257-153ae080-775f-11ea-9b49-1e1939451a3e.png" alt="Outline" width="800" />
+</p>
+<p align="center">
+  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a>
+  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg"></a>
+</p>
+
+This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).
+
+If you'd like to run your own copy of Outline or contribute to development then this is the place for you.
 
 ## Installation
 
-Outline requires following dependencies to work:
+Outline requires the following dependencies:
 
+- Node.js >= 12
 - Postgres >=9.5
-- Redis
-- S3 bucket configured to support CORS uploads
-- Slack developer application
+- Redis >= 4
+- AWS S3 storage bucket for media and other attachments
+- Slack or Google developer application for authentication
 
-To install and run the application:
 
- 1. Install dependencies with `yarn`
- 1. Register a Slack app at https://api.slack.com/apps
- 1. Copy the file `.env.sample` to `.env` and fill out the keys
- 1. Run DB migrations `yarn sequelize db:migrate`
- 
- To run Outline in development mode with server and frontend code reloading:
+### Development
 
-```shell
-yarn dev
-```
+In development you can quickly get an environment running using Docker by following these steps:
 
-To run Outline in production mode:
+1. Install these dependencies if you don't already have them
+  1. [Docker for Desktop](https://www.docker.com)
+  1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+  1. [Yarn](https://yarnpkg.com)
+1. Clone this repo
+1. Register a Slack app at https://api.slack.com/apps
+1. Copy the file `.env.sample` to `.env`
+1. Fill out the following fields:
+    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
+    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
+    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
+1. Configure your Slack app's Oauth & Permissions settings 
+    1. Add `http://localhost:3000/auth/slack.callback` as an Oauth redirect URL
+    1. Ensure that the bot token scope contains at least `users:read`
+1. Run `make up`. This will download dependencies, build and launch a development version of Outline
+
+
+### Production
+
+For a self-hosted production installation there is more flexibility, but these are the suggested steps:
+
+1. Clone this repo and install dependencies with `yarn` or `npm install`
+
+   > Requires [Node.js](https://nodejs.org/) and [yarn](https://yarnpkg.com) installed
+
+1. Build the web app with `yarn build:webpack` or `npm run build:webpack`
+1. Using the `.env.sample` as a reference, set the required variables in your production environment. The following are required as a minimum:
+    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
+    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
+    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
+    1. `DATABASE_URL` (run your own local copy of Postgres, or use a cloud service)
+    1. `REDIS_URL`  (run your own local copy of Redis, or use a cloud service)
+    1. `URL` (the public facing URL of your installation)
+    1. `AWS_` (all of the keys beginning with AWS)
+1. Migrate database schema with `yarn sequelize:migrate` or `npm run sequelize:migrate `
+1. Start the service with any daemon tools you prefer. Take PM2 for example, `NODE_ENV=production pm2 start index.js --name outline `
+1. Visit http://you_server_ip:3000 and you should be able to see Outline page
+
+   > Port number can be changed in the `.env` file
+
+1. (Optional) You can add an `nginx` reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
 
-```shell
-yarn start
-```
 
 ## Development
 
 ### Server
 
-To enable debugging statements, set the following env vars:
+Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
 ```
-DEBUG=sql,cache,presenters
+DEBUG=sql,cache,presenters,events,logistics,emails,mailer
 ```
 
 ## Migrations
@@ -48,7 +91,7 @@ DEBUG=sql,cache,presenters
 Sequelize is used to create and run migrations, for example:
 
 ```
-yarn sequelize migration:create
+yarn sequelize migration:generate --name my-migration
 yarn sequelize db:migrate
 ```
 
@@ -58,7 +101,67 @@ Or to run migrations on test database:
 yarn sequelize db:migrate --env test
 ```
 
+## Structure
+
+Outline is composed of separate backend and frontend application which are both driven by the same Node process. As both are written in Javascript, they share some code but are mostly separate. We utilize the latest language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier and ESLint are enforced by CI.
+
+### Frontend
+
+Outline's frontend is a React application compiled with [Webpack](https://webpack.js.org/). It uses [Mobx](https://mobx.js.org/) for state management and [Styled Components](https://www.styled-components.com/) for component styles. Unless global, state logic and styles are always co-located with React components together with their subcomponents to make the component tree easier to manage.
+
+The editor itself is built on [Prosemirror](https://github.com/prosemirror) and hosted in a separate repository to encourage reuse: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor)
+
+- `app/` - Frontend React application
+- `app/scenes` - Full page views
+- `app/components` - Reusable React components
+- `app/stores` - Global state stores
+- `app/models` - State models
+- `app/types` - Flow types for non-models
+
+### Backend
+
+Backend is driven by [Koa](http://koajs.com/) (API, web server), [Sequelize](http://docs.sequelizejs.com/) (database) and React for public pages and emails.
+
+- `server/api` - API endpoints
+- `server/commands` - Domain logic, currently being refactored from /models
+- `server/emails`  - React rendered email templates
+- `server/models` - Database models
+- `server/policies` - Authorization logic
+- `server/presenters` - API responses for database models
+- `server/test` - Test helps and support
+- `server/utils` - Utility methods
+- `shared` - Code shared between frontend and backend applications
+
+## Tests
+
+We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.
+
+To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.js` extension next to the tested code.
+
+```shell
+# To run all tests
+yarn test
+
+# To run backend tests
+yarn test:server
+
+# To run frontend tests
+yarn test:app
+```
+
+## Contributing
+
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
+
+However, before working on a pull request please let the core team know by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues), and we'd also love to hear from you in the [Discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written and will hopefully help to get your contributions integrated faster!
+
+If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
+
+* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+* Performance improvements, both on server and frontend
+* Developer happiness and documentation
+* Bugs and other issues listed on GitHub
 
 ## License
 
-Outline is [BSD licensed](/blob/master/LICENSE).
+Outline is [BSL 1.1 licensed](https://github.com/outline/outline/blob/master/LICENSE).

SECURITY.md

@@ -0,0 +1,11 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+The Outline team takes security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, email [hello@getoutline.com](mailto:hello@getoutline.com) and include the word "SECURITY" in the subject line.
+
+The Outline team will send a response indicating the next steps in handling your report. After the initial reply to your report you will be kept informed of the progress towards a fix and full announcement.
+
+Report security bugs in third-party dependencies to the person or team maintaining the module. You can also report a vulnerability through the [Node Security Project](https://nodesecurity.io/report).

__mocks__/styleMock.js

@@ -1,2 +0,0 @@
-import idObj from 'identity-obj-proxy';
-export default idObj;

app.json

@@ -0,0 +1,142 @@
+{
+  "name": "Outline",
+  "description": "Open source wiki and knowledge base for growing teams",
+  "website": "https://www.getoutline.com/",
+  "repository": "https://github.com/outline/outline",
+  "keywords": [
+    "wiki",
+    "team",
+    "node",
+    "markdown",
+    "slack"
+  ],
+  "success_url": "/",
+  "formation": {
+    "web": {
+      "quantity": 1,
+      "size": "Hobby"
+    }
+  },
+  "image": "heroku/node",
+  "addons": [
+    {
+      "plan": "heroku-redis"
+    },
+    {
+      "plan": "heroku-postgresql"
+    }
+  ],
+  "scripts": {
+    "postdeploy": "yarn sequelize db:migrate"
+  },
+  "env": {
+    "SECRET_KEY": {
+      "description": "A secret key",
+      "generator": "secret",
+      "required": true
+    },
+    "ENABLE_UPDATES": {
+      "value": "true",
+      "required": true
+    },
+    "URL": {
+      "description": "https://{your app name}.herokuapp.com",
+      "required": true
+    },
+    "GOOGLE_CLIENT_ID": {
+      "description": "See https://developers.google.com/identity/protocols/OAuth2 to create a new Google OAuth client. You must configure at least one of Slack or Google to control login.",
+      "required": false
+    },
+    "GOOGLE_CLIENT_SECRET": {
+      "description": "",
+      "required": false
+    },
+    "GOOGLE_ALLOWED_DOMAINS": {
+      "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
+      "required": false
+    },
+    "SLACK_KEY": {
+      "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
+      "required": false
+    },
+    "SLACK_SECRET": {
+      "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
+      "required": false
+    },
+    "SLACK_VERIFICATION_TOKEN": {
+      "description": "Your Slack verification token - PLxk6OlXXXXXVj3YYYY",
+      "required": false
+    },
+    "SLACK_APP_ID": {
+      "description": "A0XXXXXXXXX",
+      "required": false
+    },
+    "AWS_ACCESS_KEY_ID": {
+      "description": "Needed to save file uploads. Optional for development / testing",
+      "required": false
+    },
+    "AWS_SECRET_ACCESS_KEY": {
+      "description": "",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_BUCKET_NAME": {
+      "description": "yourbucket.example.com",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_BUCKET_URL": {
+      "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
+    "AWS_REGION": {
+      "value": "us-east-1",
+      "description": "Region in which the above S3 bucket exists",
+      "required": false
+    },
+    "AWS_S3_ACL": {
+      "value": "private",
+      "description": "S3 canned ACL for document attachments",
+      "required": false
+    },
+    "SMTP_HOST": {
+      "description": "smtp.example.com (optional)",
+      "required": false
+    },
+    "SMTP_PORT": {
+      "description": "1234 (optional)",
+      "required": false
+    },
+    "SMTP_USERNAME": {
+      "description": "me@example.com (optional)",
+      "required": false
+    },
+    "SMTP_PASSWORD": {
+      "description": "(optional)",
+      "required": false
+    },
+    "SMTP_FROM_EMAIL": {
+      "description": "wiki@example.com (optional)",
+      "required": false
+    },
+    "SMTP_REPLY_EMAIL": {
+      "description": "wikireply@example.com (optional)",
+      "required": false
+    },
+    "GOOGLE_ANALYTICS_ID": {
+      "description": "UA-xxxx (optional)",
+      "required": false
+    },
+    "SENTRY_DSN": {
+      "description": "An API key for Sentry if you wish to collect error reporting (optional)",
+      "required": false
+    },
+    "TEAM_LOGO": {
+      "description": "A logo that will be displayed on the signed out home page",
+      "required": false
+    }
+  }
+}

app/components/Actions.js

@@ -0,0 +1,53 @@
+// @flow
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Flex from "components/Flex";
+
+export const Action = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  padding: 0 0 0 12px;
+  height: 32px;
+  font-size: 15px;
+  flex-shrink: 0;
+
+  a {
+    color: ${(props) => props.theme.text};
+    height: 24px;
+  }
+
+  &:empty {
+    display: none;
+  }
+`;
+
+export const Separator = styled.div`
+  flex-shrink: 0;
+  margin-left: 12px;
+  width: 1px;
+  height: 28px;
+  background: ${(props) => props.theme.divider};
+`;
+
+const Actions = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  border-radius: 3px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  padding: 12px;
+  -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    left: auto;
+    padding: 24px;
+  `};
+`;
+
+export default Actions;

app/components/Alert/Alert.js

@@ -1,38 +0,0 @@
-// @flow
-import React from 'react';
-import { observer } from 'mobx-react';
-import Flex from 'shared/components/Flex';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-
-type Props = {
-  children: React.Element<*>,
-  type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
-};
-
-@observer
-class Alert extends React.Component {
-  props: Props;
-  defaultProps = {
-    type: 'info',
-  };
-
-  render() {
-    return (
-      <Container align="center" justify="center" type={this.props.type}>
-        {this.props.children}
-      </Container>
-    );
-  }
-}
-
-const Container = styled(Flex)`
-  height: $headerHeight;
-  color: #ffffff;
-  font-size: 14px;
-  line-height: 1;
-
-  background-color: ${({ type }) => color[type]};
-`;
-
-export default Alert;

app/components/Alert/index.js

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

app/components/Analytics.js

@@ -0,0 +1,40 @@
+// @flow
+/* global ga */
+import * as React from "react";
+import env from "env";
+
+type Props = {
+  children?: React.Node,
+};
+
+export default class Analytics extends React.Component<Props> {
+  componentDidMount() {
+    if (!env.GOOGLE_ANALYTICS_ID) return;
+
+    // standard Google Analytics script
+    window.ga =
+      window.ga ||
+      function () {
+        // $FlowIssue
+        (ga.q = ga.q || []).push(arguments);
+      };
+
+    // $FlowIssue
+    ga.l = +new Date();
+    ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
+    ga("set", { dimension1: "true" });
+    ga("send", "pageview");
+
+    const script = document.createElement("script");
+    script.src = "https://www.google-analytics.com/analytics.js";
+    script.async = true;
+
+    if (document.body) {
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}

app/components/Authenticated.js

@@ -0,0 +1,43 @@
+// @flow
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import { Redirect } from "react-router-dom";
+import { isCustomSubdomain } from "shared/utils/domains";
+import AuthStore from "stores/AuthStore";
+import LoadingIndicator from "components/LoadingIndicator";
+import env from "env";
+
+type Props = {
+  auth: AuthStore,
+  children?: React.Node,
+};
+
+const Authenticated = observer(({ auth, children }: Props) => {
+  if (auth.authenticated) {
+    const { user, team } = auth;
+    const { hostname } = window.location;
+
+    if (!team || !user) {
+      return <LoadingIndicator />;
+    }
+
+    // If we're authenticated but viewing a subdomain that doesn't match the
+    // currently authenticated team then kick the user to the teams subdomain.
+    if (
+      env.SUBDOMAINS_ENABLED &&
+      team.subdomain &&
+      isCustomSubdomain(hostname) &&
+      !hostname.startsWith(`${team.subdomain}.`)
+    ) {
+      window.location.href = `${team.url}${window.location.pathname}`;
+      return <LoadingIndicator />;
+    }
+
+    return children;
+  }
+
+  auth.logout(true);
+  return <Redirect to="/" />;
+});
+
+export default inject("auth")(Authenticated);

app/components/Avatar/Avatar.js

@@ -1,35 +1,66 @@
 // @flow
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { color } from 'shared/styles/constants';
-import placeholder from './placeholder.png';
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import placeholder from "./placeholder.png";
+
+type Props = {
+  src: string,
+  size: number,
+  icon?: React.Node,
+};
 
 @observer
-class Avatar extends Component {
+class Avatar extends React.Component<Props> {
   @observable error: boolean;
 
+  static defaultProps = {
+    size: 24,
+  };
+
   handleError = () => {
     this.error = true;
   };
 
   render() {
+    const { src, icon, ...rest } = this.props;
+
     return (
-      <CircleImg
-        {...this.props}
-        onError={this.handleError}
-        src={this.error ? placeholder : this.props.src}
-      />
+      <AvatarWrapper>
+        <CircleImg
+          onError={this.handleError}
+          src={this.error ? placeholder : src}
+          {...rest}
+        />
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+      </AvatarWrapper>
     );
   }
 }
 
+const AvatarWrapper = styled.div`
+  position: relative;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  background: ${(props) => props.theme.primary};
+  border: 2px solid ${(props) => props.theme.background};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+`;
+
 const CircleImg = styled.img`
-  width: 24px;
-  height: 24px;
+  display: block;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid ${color.white};
+  border: 2px solid ${(props) => props.theme.background};
   flex-shrink: 0;
 `;
 

app/components/Avatar/AvatarWithPresence.js

@@ -0,0 +1,86 @@
+// @flow
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { EditIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import User from "models/User";
+import UserProfile from "scenes/UserProfile";
+import Avatar from "components/Avatar";
+import Tooltip from "components/Tooltip";
+
+type Props = {
+  user: User,
+  isPresent: boolean,
+  isEditing: boolean,
+  isCurrentUser: boolean,
+  lastViewedAt: string,
+};
+
+@observer
+class AvatarWithPresence extends React.Component<Props> {
+  @observable isOpen: boolean = false;
+
+  handleOpenProfile = () => {
+    this.isOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.isOpen = false;
+  };
+
+  render() {
+    const {
+      user,
+      lastViewedAt,
+      isPresent,
+      isEditing,
+      isCurrentUser,
+    } = this.props;
+
+    return (
+      <>
+        <Tooltip
+          tooltip={
+            <Centered>
+              <strong>{user.name}</strong> {isCurrentUser && "(You)"}
+              <br />
+              {isPresent
+                ? isEditing
+                  ? "currently editing"
+                  : "currently viewing"
+                : `viewed ${distanceInWordsToNow(new Date(lastViewedAt))} ago`}
+            </Centered>
+          }
+          placement="bottom"
+        >
+          <AvatarWrapper isPresent={isPresent}>
+            <Avatar
+              src={user.avatarUrl}
+              onClick={this.handleOpenProfile}
+              size={32}
+              icon={isEditing ? <EditIcon size={16} color="#FFF" /> : undefined}
+            />
+          </AvatarWrapper>
+        </Tooltip>
+        <UserProfile
+          user={user}
+          isOpen={this.isOpen}
+          onRequestClose={this.handleCloseProfile}
+        />
+      </>
+    );
+  }
+}
+
+const Centered = styled.div`
+  text-align: center;
+`;
+
+const AvatarWrapper = styled.div`
+  opacity: ${(props) => (props.isPresent ? 1 : 0.5)};
+  transition: opacity 250ms ease-in-out;
+`;
+
+export default AvatarWithPresence;

app/components/Avatar/index.js

@@ -1,3 +1,6 @@
 // @flow
-import Avatar from './Avatar';
+import Avatar from "./Avatar";
+import AvatarWithPresence from "./AvatarWithPresence";
+
+export { AvatarWithPresence };
 export default Avatar;

app/components/Badge.js

@@ -0,0 +1,17 @@
+// @flow
+import styled from "styled-components";
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ primary, theme }) =>
+    primary ? theme.primary : theme.textTertiary};
+  color: ${({ primary, theme }) => (primary ? theme.white : theme.background)};
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  user-select: none;
+`;
+
+export default Badge;

app/components/Branding.js

@@ -0,0 +1,43 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import OutlineLogo from "./OutlineLogo";
+import env from "env";
+
+type Props = {
+  href?: string,
+};
+
+function Branding({ href = env.URL }: Props) {
+  return (
+    <Link href={href}>
+      <OutlineLogo size={16} />
+      &nbsp;Outline
+    </Link>
+  );
+}
+
+const Link = styled.a`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
+  border-top-right-radius: 2px;
+  color: ${(props) => props.theme.text};
+  display: flex;
+  align-items: center;
+  padding: 16px;
+
+  svg {
+    fill: ${(props) => props.theme.text};
+  }
+
+  &:hover {
+    background: ${(props) => props.theme.sidebarBackground};
+  }
+`;
+
+export default Branding;

app/components/Breadcrumb.js

@@ -0,0 +1,162 @@
+// @flow
+import { observer, inject } from "mobx-react";
+import {
+  PadlockIcon,
+  GoToIcon,
+  MoreIcon,
+  ShapesIcon,
+  EditIcon,
+} from "outline-icons";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+
+import CollectionsStore from "stores/CollectionsStore";
+import Document from "models/Document";
+import CollectionIcon from "components/CollectionIcon";
+import Flex from "components/Flex";
+import BreadcrumbMenu from "./BreadcrumbMenu";
+import { collectionUrl } from "utils/routeHelpers";
+
+type Props = {
+  document: Document,
+  collections: CollectionsStore,
+  onlyText: boolean,
+};
+
+const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
+  const collection = collections.get(document.collectionId);
+  if (!collection) return <div />;
+
+  const path = collection.pathToDocument(document).slice(0, -1);
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection.private && (
+          <>
+            <SmallPadlockIcon color="currentColor" size={16} />{" "}
+          </>
+        )}
+        {collection.name}
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  const isTemplate = document.isTemplate;
+  const isDraft = !document.publishedAt && !isTemplate;
+  const isNestedDocument = path.length > 1;
+  const lastPath = path.length ? path[path.length - 1] : undefined;
+  const menuPath = isNestedDocument ? path.slice(0, -1) : [];
+
+  return (
+    <Wrapper justify="flex-start" align="center">
+      {isTemplate && (
+        <>
+          <CollectionName to="/templates">
+            <ShapesIcon color="currentColor" />
+            &nbsp;
+            <span>Templates</span>
+          </CollectionName>
+          <Slash />
+        </>
+      )}
+      {isDraft && (
+        <>
+          <CollectionName to="/drafts">
+            <EditIcon color="currentColor" />
+            &nbsp;
+            <span>Drafts</span>
+          </CollectionName>
+          <Slash />
+        </>
+      )}
+      <CollectionName to={collectionUrl(collection.id)}>
+        <CollectionIcon collection={collection} expanded />
+        &nbsp;
+        <span>{collection.name}</span>
+      </CollectionName>
+      {isNestedDocument && (
+        <>
+          <Slash /> <BreadcrumbMenu label={<Overflow />} path={menuPath} />
+        </>
+      )}
+      {lastPath && (
+        <>
+          <Slash />{" "}
+          <Crumb to={lastPath.url} title={lastPath.title}>
+            {lastPath.title}
+          </Crumb>
+        </>
+      )}
+    </Wrapper>
+  );
+});
+
+const Wrapper = styled(Flex)`
+  display: none;
+
+  ${breakpoint("tablet")`	
+    display: flex;
+  `};
+`;
+
+const SmallPadlockIcon = styled(PadlockIcon)`
+  display: inline-block;
+  vertical-align: sub;
+`;
+
+const SmallSlash = styled(GoToIcon)`
+  width: 15px;
+  height: 10px;
+  flex-shrink: 0;
+  opacity: 0.25;
+`;
+
+export const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  fill: ${(props) => props.theme.divider};
+`;
+
+const Overflow = styled(MoreIcon)`
+  flex-shrink: 0;
+  opacity: 0.25;
+  transition: opacity 100ms ease-in-out;
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
+`;
+
+const Crumb = styled(Link)`
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const CollectionName = styled(Link)`
+  display: flex;
+  flex-shrink: 0;
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export default inject("collections")(Breadcrumb);

app/components/BreadcrumbMenu.js

@@ -0,0 +1,25 @@
+// @flow
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
+
+type Props = {
+  label: React.Node,
+  path: Array<any>,
+};
+
+export default class BreadcrumbMenu extends React.Component<Props> {
+  render() {
+    const { path } = this.props;
+
+    return (
+      <DropdownMenu label={this.props.label} position="center">
+        {path.map((item) => (
+          <DropdownMenuItem as={Link} to={item.url} key={item.id}>
+            {item.title}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenu>
+    );
+  }
+}

app/components/Button.js

@@ -0,0 +1,160 @@
+// @flow
+import { ExpandedIcon } from "outline-icons";
+import { darken, lighten } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+
+const RealButton = styled.button`
+  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  text-decoration: none;
+  flex-shrink: 0;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+
+  svg {
+    fill: ${(props) => props.iconColor || props.theme.buttonText};
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:hover {
+    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
+  }
+
+  &:focus {
+    transition-duration: 0.05s;
+    box-shadow: ${(props) => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+      0px 3px;
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: ${(props) => props.theme.white50};
+  }
+
+  ${(props) =>
+    props.neutral &&
+    `
+    background: ${props.theme.buttonNeutralBackground};
+    color: ${props.theme.buttonNeutralText};
+    box-shadow: ${
+      props.borderOnHover ? "none" : "rgba(0, 0, 0, 0.07) 0px 1px 2px"
+    };
+    border: 1px solid ${
+      props.borderOnHover ? "transparent" : props.theme.buttonNeutralBorder
+    };
+
+    svg {
+      fill: ${props.iconColor || props.theme.buttonNeutralText};
+    }
+
+    &:hover {
+      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
+      border: 1px solid ${props.theme.buttonNeutralBorder};
+    }
+
+    &:focus {
+      transition-duration: 0.05s;
+      border: 1px solid ${lighten(0.4, props.theme.buttonBackground)};
+      box-shadow: ${lighten(0.4, props.theme.buttonBackground)} 0px 0px
+        0px 2px;
+    }
+
+    &:disabled {
+      color: ${props.theme.textTertiary};
+    }
+  `} ${(props) =>
+    props.danger &&
+    `
+      background: ${props.theme.danger};
+      color: ${props.theme.white};
+
+    &:hover {
+      background: ${darken(0.05, props.theme.danger)};
+    }
+
+    &:focus {
+      transition-duration: 0.05s;
+      box-shadow: ${lighten(0.4, props.theme.danger)} 0px 0px
+        0px 3px;
+    }
+  `};
+`;
+
+const Label = styled.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  ${(props) => props.hasIcon && "padding-left: 4px;"};
+`;
+
+export const Inner = styled.span`
+  display: flex;
+  padding: 0 8px;
+  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
+  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
+  justify-content: center;
+  align-items: center;
+  min-height: 30px;
+
+  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
+`;
+
+export type Props = {
+  type?: string,
+  value?: string,
+  icon?: React.Node,
+  iconColor?: string,
+  className?: string,
+  children?: React.Node,
+  innerRef?: React.ElementRef<any>,
+  disclosure?: boolean,
+  fullwidth?: boolean,
+  borderOnHover?: boolean,
+};
+
+function Button({
+  type = "text",
+  icon,
+  children,
+  value,
+  disclosure,
+  innerRef,
+  ...rest
+}: Props) {
+  const hasText = children !== undefined || value !== undefined;
+  const hasIcon = icon !== undefined;
+
+  return (
+    <RealButton type={type} ref={innerRef} {...rest}>
+      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+        {hasIcon && icon}
+        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+        {disclosure && <ExpandedIcon />}
+      </Inner>
+    </RealButton>
+  );
+}
+
+export default React.forwardRef<Props, typeof Button>((props, ref) => (
+  <Button {...props} innerRef={ref} />
+));

app/components/Button/Button.js

@@ -1,112 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import { darken, lighten } from 'polished';
-
-const RealButton = styled.button`
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: ${color.primary};
-  color: ${color.white};
-  border-radius: 4px;
-  font-size: 15px;
-  height: 36px;
-  text-decoration: none;
-  flex-shrink: 0;
-  outline: none;
-  cursor: pointer;
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-  &:hover {
-    background: ${darken(0.05, color.primary)};
-  }
-
-  svg {
-    position: relative;
-    top: 0.05em;
-  }
-
-  ${props =>
-    props.light &&
-    `
-    color: ${color.text};
-    background: ${lighten(0.08, color.slateLight)};
-
-    &:hover {
-      background: ${color.slateLight};
-    }
-  `} ${props =>
-      props.neutral &&
-      `
-    background: ${color.slate};
-
-    &:hover {
-      background: ${darken(0.05, color.slate)};
-    }
-  `} ${props =>
-      props.danger &&
-      `
-    background: ${color.danger};
-
-    &:hover {
-      background: ${darken(0.05, color.danger)};
-    }
-  `} &:disabled {
-    background: ${color.slateLight};
-    cursor: default;
-  }
-`;
-
-const Label = styled.span`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  ${props => props.hasIcon && 'padding-left: 2px;'};
-`;
-
-const Inner = styled.span`
-  padding: 0 12px;
-  display: flex;
-  line-height: 28px;
-  justify-content: center;
-  align-items: center;
-
-  ${props =>
-    props.hasIcon &&
-    (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')};
-`;
-
-export type Props = {
-  type?: string,
-  value?: string,
-  icon?: React$Element<any>,
-  className?: string,
-  children?: React$Element<any>,
-};
-
-export default function Button({
-  type = 'text',
-  icon,
-  children,
-  value,
-  ...rest
-}: Props) {
-  const hasText = children !== undefined || value !== undefined;
-  const hasIcon = icon !== undefined;
-
-  return (
-    <RealButton {...rest}>
-      <Inner hasIcon={hasIcon}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-      </Inner>
-    </RealButton>
-  );
-}

app/components/Button/index.js

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

app/components/ButtonLarge.js

@@ -0,0 +1,13 @@
+// @flow
+import styled from "styled-components";
+import Button, { Inner } from "./Button";
+
+const ButtonLarge = styled(Button)`
+  height: 40px;
+
+  ${Inner} {
+    padding: 4px 16px;
+  }
+`;
+
+export default ButtonLarge;

app/components/CenteredContent.js

@@ -1,18 +1,24 @@
 // @flow
-import React from 'react';
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 
 type Props = {
-  children?: React.Element<any>,
+  children?: React.Node,
 };
 
 const Container = styled.div`
   width: 100%;
-  margin: 60px;
+  max-width: 100vw;
+  padding: 60px 20px;
+
+  ${breakpoint("tablet")`
+    padding: 60px;
+  `};
 `;
 
 const Content = styled.div`
-  max-width: 50em;
+  max-width: 46em;
   margin: 0 auto;
 `;
 

app/components/CenteredContent/index.js

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

app/components/Checkbox.js

@@ -0,0 +1,61 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import HelpText from "components/HelpText";
+import VisuallyHidden from "components/VisuallyHidden";
+
+export type Props = {
+  checked?: boolean,
+  label?: string,
+  labelHidden?: boolean,
+  className?: string,
+  note?: string,
+  short?: boolean,
+  small?: boolean,
+};
+
+const LabelText = styled.span`
+  font-weight: 500;
+  margin-left: ${(props) => (props.small ? "6px" : "10px")};
+  ${(props) => (props.small ? `color: ${props.theme.textSecondary}` : "")};
+`;
+
+const Wrapper = styled.div`
+  padding-bottom: 8px;
+  ${(props) => (props.small ? "font-size: 14px" : "")};
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+
+export default function Checkbox({
+  label,
+  labelHidden,
+  note,
+  className,
+  small,
+  short,
+  ...rest
+}: Props) {
+  const wrappedLabel = <LabelText small={small}>{label}</LabelText>;
+
+  return (
+    <>
+      <Wrapper small={small}>
+        <Label>
+          <input type="checkbox" {...rest} />
+          {label &&
+            (labelHidden ? (
+              <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            ) : (
+              wrappedLabel
+            ))}
+        </Label>
+        {note && <HelpText small>{note}</HelpText>}
+      </Wrapper>
+    </>
+  );
+}

app/components/ClickablePadding.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from "styled-components";
+
+const ClickablePadding = styled.div`
+  min-height: 10em;
+  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
+  ${({ grow }) => grow && `flex-grow: 100;`};
+`;
+
+export default ClickablePadding;

app/components/Collaborators.js

@@ -0,0 +1,76 @@
+// @flow
+import { sortBy, keyBy } from "lodash";
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import { MAX_AVATAR_DISPLAY } from "shared/constants";
+
+import DocumentPresenceStore from "stores/DocumentPresenceStore";
+import ViewsStore from "stores/ViewsStore";
+import Document from "models/Document";
+import { AvatarWithPresence } from "components/Avatar";
+import Facepile from "components/Facepile";
+
+type Props = {
+  views: ViewsStore,
+  presence: DocumentPresenceStore,
+  document: Document,
+  currentUserId: string,
+};
+
+@observer
+class Collaborators extends React.Component<Props> {
+  componentDidMount() {
+    this.props.views.fetchPage({ documentId: this.props.document.id });
+  }
+
+  render() {
+    const { document, presence, views, currentUserId } = this.props;
+    let documentPresence = presence.get(document.id);
+    documentPresence = documentPresence
+      ? Array.from(documentPresence.values())
+      : [];
+
+    const documentViews = views.inDocument(document.id);
+
+    const presentIds = documentPresence.map((p) => p.userId);
+    const editingIds = documentPresence
+      .filter((p) => p.isEditing)
+      .map((p) => p.userId);
+
+    // ensure currently present via websocket are always ordered first
+    const mostRecentViewers = sortBy(
+      documentViews.slice(0, MAX_AVATAR_DISPLAY),
+      (view) => {
+        return presentIds.includes(view.user.id);
+      }
+    );
+
+    const viewersKeyedByUserId = keyBy(mostRecentViewers, (v) => v.user.id);
+    const overflow = documentViews.length - mostRecentViewers.length;
+
+    return (
+      <Facepile
+        users={mostRecentViewers.map((v) => v.user)}
+        overflow={overflow}
+        renderAvatar={(user) => {
+          const isPresent = presentIds.includes(user.id);
+          const isEditing = editingIds.includes(user.id);
+          const { lastViewedAt } = viewersKeyedByUserId[user.id];
+
+          return (
+            <AvatarWithPresence
+              key={user.id}
+              user={user}
+              lastViewedAt={lastViewedAt}
+              isPresent={isPresent}
+              isEditing={isEditing}
+              isCurrentUser={currentUserId === user.id}
+            />
+          );
+        }}
+      />
+    );
+  }
+}
+
+export default inject("views", "presence")(Collaborators);

app/components/Collaborators/Collaborators.js

@@ -1,61 +0,0 @@
-// @flow
-import React from 'react';
-import moment from 'moment';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import Avatar from 'components/Avatar';
-import Tooltip from 'components/Tooltip';
-import Document from 'models/Document';
-
-type Props = { document: Document };
-
-const Collaborators = ({ document }: Props) => {
-  const {
-    createdAt,
-    updatedAt,
-    createdBy,
-    updatedBy,
-    collaborators,
-  } = document;
-  let tooltip;
-
-  if (createdAt === updatedAt) {
-    tooltip = `${createdBy.name} published ${moment(createdAt).fromNow()}`;
-  } else {
-    tooltip = `${updatedBy.name} modified ${moment(updatedAt).fromNow()}`;
-  }
-
-  return (
-    <Avatars>
-      <StyledTooltip tooltip={tooltip} placement="bottom">
-        {collaborators.map(user => (
-          <AvatarWrapper>
-            <Avatar key={user.id} src={user.avatarUrl} />
-          </AvatarWrapper>
-        ))}
-      </StyledTooltip>
-    </Avatars>
-  );
-};
-
-const StyledTooltip = styled(Tooltip)`
-  display: flex;
-  flex-direction: row-reverse;
-`;
-
-const AvatarWrapper = styled.div`
-  width: 24px;
-  height: 24px;
-  margin-right: -10px;
-
-  &:first-child {
-    margin-right: 0;
-  }
-`;
-
-const Avatars = styled(Flex)`
-  align-items: center;
-  flex-direction: row-reverse;
-`;
-
-export default Collaborators;

app/components/Collaborators/index.js

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

app/components/CollectionIcon.js

@@ -0,0 +1,45 @@
+// @flow
+import { inject, observer } from "mobx-react";
+import { PrivateCollectionIcon, CollectionIcon } from "outline-icons";
+import { getLuminance } from "polished";
+import * as React from "react";
+import UiStore from "stores/UiStore";
+import Collection from "models/Collection";
+import { icons } from "components/IconPicker";
+
+type Props = {
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
+  ui: UiStore,
+};
+
+function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
+  // If the chosen icon color is very dark then we invert it in dark mode
+  // otherwise it will be impossible to see against the dark background.
+  const color =
+    ui.resolvedTheme === "dark"
+      ? getLuminance(collection.color) > 0.12
+        ? collection.color
+        : "currentColor"
+      : collection.color;
+
+  if (collection.icon && collection.icon !== "collection") {
+    try {
+      const Component = icons[collection.icon].component;
+      return <Component color={color} size={size} />;
+    } catch (error) {
+      console.warn("Failed to render custom icon " + collection.icon);
+    }
+  }
+
+  if (collection.private) {
+    return (
+      <PrivateCollectionIcon color={color} expanded={expanded} size={size} />
+    );
+  }
+
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+}
+
+export default inject("ui")(observer(ResolvedCollectionIcon));

app/components/ColorPicker/ColorPicker.js

@@ -1,187 +0,0 @@
-// @flow
-import React from 'react';
-import { observable, computed, action } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import { LabelText, Outline } from 'components/Input';
-import { color, fonts, fontWeight } from 'shared/styles/constants';
-import { validateColorHex } from 'shared/utils/color';
-
-const colors = [
-  '#4E5C6E',
-  '#19B7FF',
-  '#7F6BFF',
-  '#FC7419',
-  '#FC2D2D',
-  '#FFE100',
-  '#14CF9F',
-  '#EE84F0',
-  '#2F362F',
-];
-
-type Props = {
-  onSelect: (color: string) => void,
-  value?: string,
-};
-
-@observer
-class ColorPicker extends React.Component {
-  props: Props;
-
-  @observable selectedColor: string = colors[0];
-  @observable customColorValue: string = '';
-  @observable customColorSelected: boolean;
-
-  componentWillMount() {
-    const { value } = this.props;
-    if (value && colors.includes(value)) {
-      this.selectedColor = value;
-    } else if (value) {
-      this.customColorSelected = true;
-      this.customColorValue = value.replace('#', '');
-    }
-  }
-
-  componentDidMount() {
-    this.fireCallback();
-  }
-
-  fireCallback = () => {
-    this.props.onSelect(
-      this.customColorSelected ? this.customColor : this.selectedColor
-    );
-  };
-
-  @computed
-  get customColor(): string {
-    return this.customColorValue &&
-      validateColorHex(`#${this.customColorValue}`)
-      ? `#${this.customColorValue}`
-      : colors[0];
-  }
-
-  @action
-  setColor = (color: string) => {
-    this.selectedColor = color;
-    this.customColorSelected = false;
-    this.fireCallback();
-  };
-
-  @action
-  focusOnCustomColor = (event: SyntheticEvent) => {
-    this.selectedColor = '';
-    this.customColorSelected = true;
-    this.fireCallback();
-  };
-
-  @action
-  setCustomColor = (event: SyntheticEvent) => {
-    let target = event.target;
-    if (target instanceof HTMLInputElement) {
-      const color = target.value;
-      this.customColorValue = color.replace('#', '');
-      this.fireCallback();
-    }
-  };
-
-  render() {
-    return (
-      <Flex column>
-        <LabelText>Color</LabelText>
-        <StyledOutline justify="space-between">
-          <Flex>
-            {colors.map(color => (
-              <Swatch
-                key={color}
-                color={color}
-                active={
-                  color === this.selectedColor && !this.customColorSelected
-                }
-                onClick={() => this.setColor(color)}
-              />
-            ))}
-          </Flex>
-          <Flex justify="flex-end">
-            <strong>Custom color:</strong>
-            <HexHash>#</HexHash>
-            <CustomColorInput
-              placeholder="FFFFFF"
-              onFocus={this.focusOnCustomColor}
-              onChange={this.setCustomColor}
-              value={this.customColorValue}
-              maxLength={6}
-            />
-            <Swatch
-              color={this.customColor}
-              active={this.customColorSelected}
-            />
-          </Flex>
-        </StyledOutline>
-      </Flex>
-    );
-  }
-}
-
-type SwatchProps = {
-  onClick?: () => void,
-  color?: string,
-  active?: boolean,
-};
-
-const Swatch = ({ onClick, ...props }: SwatchProps) => (
-  <SwatchOutset onClick={onClick} {...props}>
-    <SwatchInset {...props} />
-  </SwatchOutset>
-);
-
-const SwatchOutset = styled(Flex)`
-  width: 24px;
-  height: 24px;
-  margin-right: 5px;
-  border: 2px solid ${({ active, color }) => (active ? color : 'transparent')};
-  border-radius: 2px;
-  background: ${({ color }) => color};
-  ${({ onClick }) => onClick && `cursor: pointer;`} &:last-child {
-    margin-right: 0;
-  }
-`;
-
-const SwatchInset = styled(Flex)`
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${({ active, color }) => (active ? 'white' : 'transparent')};
-  border-radius: 2px;
-  background: ${({ color }) => color};
-`;
-
-const StyledOutline = styled(Outline)`
-  padding: 5px;
-`;
-
-const HexHash = styled.div`
-  margin-left: 12px;
-  padding-bottom: 0;
-  font-weight: ${fontWeight.medium};
-  user-select: none;
-`;
-
-const CustomColorInput = styled.input`
-  border: 0;
-  flex: 1;
-  width: 65px;
-  margin-right: 12px;
-  padding-bottom: 0;
-  outline: none;
-  background: none;
-  font-family: ${fonts.monospace};
-  font-weight: ${fontWeight.medium};
-
-  &::placeholder {
-    color: ${color.slate};
-    font-family: ${fonts.monospace};
-    font-weight: ${fontWeight.medium};
-  }
-`;
-
-export default ColorPicker;

app/components/ColorPicker/index.js

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

app/components/CopyToClipboard.js

@@ -1,27 +1,25 @@
 // @flow
-import React, { PureComponent } from 'react';
-import copy from 'copy-to-clipboard';
+import copy from "copy-to-clipboard";
+import * as React from "react";
 
 type Props = {
   text: string,
-  children?: React.Element<any>,
+  children?: React.Node,
   onClick?: () => void,
   onCopy: () => void,
 };
 
-class CopyToClipboard extends PureComponent {
-  props: Props;
-
-  onClick = (ev: SyntheticEvent) => {
+class CopyToClipboard extends React.PureComponent<Props> {
+  onClick = (ev: SyntheticEvent<>) => {
     const { text, onCopy, children } = this.props;
     const elem = React.Children.only(children);
     copy(text, {
-      debug: __DEV__,
+      debug: process.env.NODE_ENV !== "production",
     });
 
     if (onCopy) onCopy();
 
-    if (elem && elem.props && typeof elem.props.onClick === 'function') {
+    if (elem && elem.props && typeof elem.props.onClick === "function") {
       elem.props.onClick(ev);
     }
   };

app/components/CopyToClipboard/index.js

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

app/components/DelayedMount.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  delay?: number,
+  children: React.Node,
+};
+
+export default function DelayedMount({ delay = 250, children }: Props) {
+  const [isShowing, setShowing] = React.useState(false);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setShowing(true), delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  if (!isShowing) {
+    return null;
+  }
+
+  return children;
+}

app/components/Divider/Divider.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-
-const Divider = () => {
-  return (
-    <Flex auto justify="center">
-      <Content />
-    </Flex>
-  );
-};
-
-const Content = styled.span`
-  display: flex;
-  width: 50%;
-  margin: 20px 0;
-  border-bottom: 1px solid #eee;
-`;
-
-export default Divider;

app/components/Divider/index.js

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

app/components/DocumentHistory/DocumentHistory.js

@@ -0,0 +1,149 @@
+// @flow
+import ArrowKeyNavigation from "boundless-arrow-key-navigation";
+import { observable, action } from "mobx";
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import { type RouterHistory, type Match } from "react-router-dom";
+import { Waypoint } from "react-waypoint";
+import styled from "styled-components";
+
+import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
+import DocumentsStore from "stores/DocumentsStore";
+import RevisionsStore from "stores/RevisionsStore";
+
+import Flex from "components/Flex";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
+import Revision from "./components/Revision";
+import { documentHistoryUrl } from "utils/routeHelpers";
+
+type Props = {
+  match: Match,
+  documents: DocumentsStore,
+  revisions: RevisionsStore,
+  history: RouterHistory,
+};
+
+@observer
+class DocumentHistory extends React.Component<Props> {
+  @observable isLoaded: boolean = false;
+  @observable isFetching: boolean = false;
+  @observable offset: number = 0;
+  @observable allowLoadMore: boolean = true;
+
+  async componentDidMount() {
+    await this.loadMoreResults();
+    this.selectFirstRevision();
+  }
+
+  fetchResults = async () => {
+    this.isFetching = true;
+
+    const limit = DEFAULT_PAGINATION_LIMIT;
+    const results = await this.props.revisions.fetchPage({
+      limit,
+      offset: this.offset,
+      documentId: this.props.match.params.documentSlug,
+    });
+
+    if (
+      results &&
+      (results.length === 0 || results.length < DEFAULT_PAGINATION_LIMIT)
+    ) {
+      this.allowLoadMore = false;
+    } else {
+      this.offset += DEFAULT_PAGINATION_LIMIT;
+    }
+
+    this.isLoaded = true;
+    this.isFetching = false;
+  };
+
+  selectFirstRevision = () => {
+    if (this.revisions.length) {
+      const document = this.props.documents.getByUrl(
+        this.props.match.params.documentSlug
+      );
+      if (!document) return;
+
+      this.props.history.replace(
+        documentHistoryUrl(document, this.revisions[0].id)
+      );
+    }
+  };
+
+  @action
+  loadMoreResults = async () => {
+    // Don't paginate if there aren't more results or we’re in the middle of fetching
+    if (!this.allowLoadMore || this.isFetching) return;
+    await this.fetchResults();
+  };
+
+  get revisions() {
+    const document = this.props.documents.getByUrl(
+      this.props.match.params.documentSlug
+    );
+    if (!document) return [];
+    return this.props.revisions.getDocumentRevisions(document.id);
+  }
+
+  render() {
+    const document = this.props.documents.getByUrl(
+      this.props.match.params.documentSlug
+    );
+    const showLoading = (!this.isLoaded && this.isFetching) || !document;
+
+    return (
+      <Sidebar>
+        <Wrapper column>
+          {showLoading ? (
+            <Loading>
+              <ListPlaceholder count={5} />
+            </Loading>
+          ) : (
+            <ArrowKeyNavigation
+              mode={ArrowKeyNavigation.mode.VERTICAL}
+              defaultActiveChildIndex={0}
+            >
+              {this.revisions.map((revision, index) => (
+                <Revision
+                  key={revision.id}
+                  revision={revision}
+                  document={document}
+                  showMenu={index !== 0}
+                  selected={this.props.match.params.revisionId === revision.id}
+                />
+              ))}
+            </ArrowKeyNavigation>
+          )}
+          {this.allowLoadMore && (
+            <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
+          )}
+        </Wrapper>
+      </Sidebar>
+    );
+  }
+}
+
+const Loading = styled.div`
+  margin: 0 16px;
+`;
+
+const Wrapper = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  min-width: ${(props) => props.theme.sidebarWidth};
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: none;
+`;
+
+const Sidebar = styled(Flex)`
+  background: ${(props) => props.theme.background};
+  min-width: ${(props) => props.theme.sidebarWidth};
+  border-left: 1px solid ${(props) => props.theme.divider};
+  z-index: 1;
+`;
+
+export default inject("documents", "revisions")(DocumentHistory);

app/components/DocumentHistory/components/Revision.js

@@ -0,0 +1,89 @@
+// @flow
+import format from "date-fns/format";
+import { MoreIcon } from "outline-icons";
+import * as React from "react";
+import { NavLink } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+
+import Document from "models/Document";
+import Revision from "models/Revision";
+import Avatar from "components/Avatar";
+import Flex from "components/Flex";
+import Time from "components/Time";
+import RevisionMenu from "menus/RevisionMenu";
+
+import { documentHistoryUrl } from "utils/routeHelpers";
+
+type Props = {
+  theme: Object,
+  showMenu: boolean,
+  selected: boolean,
+  document: Document,
+  revision: Revision,
+};
+
+class RevisionListItem extends React.Component<Props> {
+  render() {
+    const { revision, document, showMenu, selected, theme } = this.props;
+
+    return (
+      <StyledNavLink
+        to={documentHistoryUrl(document, revision.id)}
+        activeStyle={{ background: theme.primary, color: theme.white }}
+      >
+        <Author>
+          <StyledAvatar src={revision.createdBy.avatarUrl} />{" "}
+          {revision.createdBy.name}
+        </Author>
+        <Meta>
+          <Time dateTime={revision.createdAt}>
+            {format(revision.createdAt, "MMMM Do, YYYY h:mm a")}
+          </Time>
+        </Meta>
+        {showMenu && (
+          <StyledRevisionMenu
+            document={document}
+            revision={revision}
+            label={
+              <MoreIcon color={selected ? theme.white : theme.textTertiary} />
+            }
+          />
+        )}
+      </StyledNavLink>
+    );
+  }
+}
+
+const StyledAvatar = styled(Avatar)`
+  border-color: transparent;
+  margin-right: 4px;
+`;
+
+const StyledRevisionMenu = styled(RevisionMenu)`
+  position: absolute;
+  right: 16px;
+  top: 20px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  color: ${(props) => props.theme.text};
+  display: block;
+  padding: 8px 16px;
+  font-size: 15px;
+  position: relative;
+`;
+
+const Author = styled(Flex)`
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+`;
+
+const Meta = styled.p`
+  font-size: 14px;
+  opacity: 0.75;
+  margin: 0 0 2px;
+  padding: 0;
+`;
+
+export default withTheme(RevisionListItem);

app/components/DocumentHistory/index.js

@@ -0,0 +1,3 @@
+// @flow
+import DocumentHistory from "./DocumentHistory";
+export default DocumentHistory;

app/components/DocumentList.js

@@ -0,0 +1,25 @@
+// @flow
+import ArrowKeyNavigation from "boundless-arrow-key-navigation";
+import * as React from "react";
+import Document from "models/Document";
+import DocumentPreview from "components/DocumentPreview";
+
+type Props = {
+  documents: Document[],
+  limit?: number,
+};
+
+export default function DocumentList({ limit, documents, ...rest }: Props) {
+  const items = limit ? documents.splice(0, limit) : documents;
+
+  return (
+    <ArrowKeyNavigation
+      mode={ArrowKeyNavigation.mode.VERTICAL}
+      defaultActiveChildIndex={0}
+    >
+      {items.map((document) => (
+        <DocumentPreview key={document.id} document={document} {...rest} />
+      ))}
+    </ArrowKeyNavigation>
+  );
+}

app/components/DocumentList/DocumentList.js

@@ -1,27 +0,0 @@
-// @flow
-import React from 'react';
-import Document from 'models/Document';
-import DocumentPreview from 'components/DocumentPreview';
-import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
-
-class DocumentList extends React.Component {
-  props: {
-    documents: Array<Document>,
-  };
-
-  render() {
-    return (
-      <ArrowKeyNavigation
-        mode={ArrowKeyNavigation.mode.VERTICAL}
-        defaultActiveChildIndex={0}
-      >
-        {this.props.documents &&
-          this.props.documents.map(document => (
-            <DocumentPreview key={document.id} document={document} />
-          ))}
-      </ArrowKeyNavigation>
-    );
-  }
-}
-
-export default DocumentList;

app/components/DocumentList/index.js

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

app/components/DocumentMeta.js

@@ -0,0 +1,123 @@
+// @flow
+import { inject, observer } from "mobx-react";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import AuthStore from "stores/AuthStore";
+import CollectionsStore from "stores/CollectionsStore";
+import Document from "models/Document";
+import Breadcrumb from "components/Breadcrumb";
+import Flex from "components/Flex";
+import Time from "components/Time";
+
+const Container = styled(Flex)`
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const Modified = styled.span`
+  color: ${(props) =>
+    props.highlight ? props.theme.text : props.theme.textTertiary};
+  font-weight: ${(props) => (props.highlight ? "600" : "400")};
+`;
+
+type Props = {
+  collections: CollectionsStore,
+  auth: AuthStore,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  document: Document,
+  children: React.Node,
+  to?: string,
+};
+
+function DocumentMeta({
+  auth,
+  collections,
+  showPublished,
+  showCollection,
+  document,
+  children,
+  to,
+  ...rest
+}: Props) {
+  const {
+    modifiedSinceViewed,
+    updatedAt,
+    updatedBy,
+    createdAt,
+    publishedAt,
+    archivedAt,
+    deletedAt,
+    isDraft,
+  } = document;
+
+  // Prevent meta information from displaying if updatedBy is not available.
+  // Currently the situation where this is true is rendering share links.
+  if (!updatedBy) {
+    return null;
+  }
+
+  let content;
+
+  if (deletedAt) {
+    content = (
+      <span>
+        deleted <Time dateTime={deletedAt} /> ago
+      </span>
+    );
+  } else if (archivedAt) {
+    content = (
+      <span>
+        archived <Time dateTime={archivedAt} /> ago
+      </span>
+    );
+  } else if (createdAt === updatedAt) {
+    content = (
+      <span>
+        created <Time dateTime={updatedAt} /> ago
+      </span>
+    );
+  } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
+    content = (
+      <span>
+        published <Time dateTime={publishedAt} /> ago
+      </span>
+    );
+  } else if (isDraft) {
+    content = (
+      <span>
+        saved <Time dateTime={updatedAt} /> ago
+      </span>
+    );
+  } else {
+    content = (
+      <Modified highlight={modifiedSinceViewed}>
+        updated <Time dateTime={updatedAt} /> ago
+      </Modified>
+    );
+  }
+
+  const collection = collections.get(document.collectionId);
+  const updatedByMe = auth.user && auth.user.id === updatedBy.id;
+
+  return (
+    <Container align="center" {...rest}>
+      {updatedByMe ? "You" : updatedBy.name}&nbsp;
+      {to ? <Link to={to}>{content}</Link> : content}
+      {showCollection && collection && (
+        <span>
+          &nbsp;in&nbsp;
+          <strong>
+            <Breadcrumb document={document} onlyText />
+          </strong>
+        </span>
+      )}
+      {children}
+    </Container>
+  );
+}
+
+export default inject("collections", "auth")(observer(DocumentMeta));

app/components/DocumentMetaWithViews.js

@@ -0,0 +1,48 @@
+// @flow
+import { inject } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import ViewsStore from "stores/ViewsStore";
+import Document from "models/Document";
+import DocumentMeta from "components/DocumentMeta";
+
+type Props = {|
+  views: ViewsStore,
+  document: Document,
+  isDraft: boolean,
+  to?: string,
+|};
+
+function DocumentMetaWithViews({ views, to, isDraft, document }: Props) {
+  const totalViews = views.countForDocument(document.id);
+
+  return (
+    <Meta document={document} to={to}>
+      {totalViews && !isDraft ? (
+        <>
+          &nbsp;&middot; Viewed{" "}
+          {totalViews === 1 ? "once" : `${totalViews} times`}
+        </>
+      ) : null}
+    </Meta>
+  );
+}
+
+const Meta = styled(DocumentMeta)`
+  margin: -12px 0 2em 0;
+  font-size: 14px;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default inject("views")(DocumentMetaWithViews);

app/components/DocumentPreview/DocumentPreview.js

@@ -1,27 +1,150 @@
 // @flow
-import React, { Component } from 'react';
-import { observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import Document from 'models/Document';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import StarredIcon from 'components/Icon/StarredIcon';
-import PublishingInfo from './components/PublishingInfo';
+import { observer } from "mobx-react";
+import { StarredIcon, PlusIcon } from "outline-icons";
+import * as React from "react";
+import { Link, withRouter, type RouterHistory } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+import Document from "models/Document";
+import Badge from "components/Badge";
+import Button from "components/Button";
+import DocumentMeta from "components/DocumentMeta";
+import Flex from "components/Flex";
+import Highlight from "components/Highlight";
+import Tooltip from "components/Tooltip";
+import DocumentMenu from "menus/DocumentMenu";
+import { newDocumentUrl } from "utils/routeHelpers";
 
 type Props = {
+  history: RouterHistory,
   document: Document,
   highlight?: ?string,
+  context?: ?string,
   showCollection?: boolean,
-  innerRef?: Function,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
 };
 
-const StyledStar = styled(({ solid, ...props }) => (
-  <StarredIcon color={solid ? color.black : color.text} {...props} />
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+@observer
+class DocumentPreview extends React.Component<Props> {
+  handleStar = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.star();
+  };
+
+  handleUnstar = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.unstar();
+  };
+
+  replaceResultMarks = (tag: string) => {
+    // don't use SEARCH_RESULT_REGEX here as it causes
+    // an infinite loop to trigger a regex inside it's own callback
+    return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+  };
+
+  handleNewFromTemplate = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { document } = this.props;
+
+    this.props.history.push(
+      newDocumentUrl(document.collectionId, {
+        templateId: document.id,
+      })
+    );
+  };
+
+  render() {
+    const {
+      document,
+      showCollection,
+      showPublished,
+      showPin,
+      showDraft = true,
+      showTemplate,
+      highlight,
+      context,
+    } = this.props;
+
+    const queryIsInTitle =
+      !!highlight &&
+      !!document.title.toLowerCase().includes(highlight.toLowerCase());
+
+    return (
+      <DocumentLink
+        to={{
+          pathname: document.url,
+          state: { title: document.titleWithDefault },
+        }}
+      >
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
+          {!document.isDraft &&
+            !document.isArchived &&
+            !document.isTemplate && (
+              <Actions>
+                {document.isStarred ? (
+                  <StyledStar onClick={this.handleUnstar} solid />
+                ) : (
+                  <StyledStar onClick={this.handleStar} />
+                )}
+              </Actions>
+            )}
+          {document.isDraft && showDraft && (
+            <Tooltip tooltip="Only visible to you" delay={500} placement="top">
+              <Badge>Draft</Badge>
+            </Tooltip>
+          )}
+          {document.isTemplate && showTemplate && (
+            <Badge primary>Template</Badge>
+          )}
+          <SecondaryActions>
+            {document.isTemplate &&
+              !document.isArchived &&
+              !document.isDeleted && (
+                <Button
+                  onClick={this.handleNewFromTemplate}
+                  icon={<PlusIcon />}
+                  neutral
+                >
+                  New doc
+                </Button>
+              )}
+            &nbsp;
+            <DocumentMenu document={document} showPin={showPin} />
+          </SecondaryActions>
+        </Heading>
+
+        {!queryIsInTitle && (
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={this.replaceResultMarks}
+          />
+        )}
+        <DocumentMeta
+          document={document}
+          showCollection={showCollection}
+          showPublished={showPublished}
+        />
+      </DocumentLink>
+    );
+  }
+}
+
+const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
+  <StarredIcon color={theme.text} {...props} />
 ))`
-  position: absolute;
-  opacity: ${props => (props.solid ? '1 !important' : 0)};
+  flex-shrink: 0;
+  opacity: ${(props) => (props.solid ? "1 !important" : 0)};
   transition: all 100ms ease-in-out;
-  margin-left: 2px;
 
   &:hover {
     transform: scale(1.1);
@@ -29,25 +152,41 @@ const StyledStar = styled(({ solid, ...props }) => (
   &:active {
     transform: scale(0.95);
   }
+`);
+
+const SecondaryActions = styled(Flex)`
+  align-items: center;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
 `;
 
 const DocumentLink = styled(Link)`
   display: block;
-  margin: 0 -16px;
-  padding: 10px 16px;
+  margin: 10px -8px;
+  padding: 6px 8px;
   border-radius: 8px;
-  border: 2px solid transparent;
   max-height: 50vh;
   min-width: 100%;
+  max-width: calc(100vw - 40px);
   overflow: hidden;
+  position: relative;
+
+  ${SecondaryActions} {
+    opacity: 0;
+  }
 
   &:hover,
   &:active,
   &:focus {
-    background: ${color.smokeLight};
-    border: 2px solid ${color.smoke};
+    background: ${(props) => props.theme.listItemHoverBackground};
     outline: none;
 
+    ${SecondaryActions} {
+      opacity: 1;
+    }
+
     ${StyledStar} {
       opacity: 0.5;
 
@@ -56,57 +195,38 @@ const DocumentLink = styled(Link)`
       }
     }
   }
-
-  &:focus {
-    border: 2px solid ${color.slateDark};
-  }
-
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0.25em;
-  }
 `;
 
-@observer
-class DocumentPreview extends Component {
-  props: Props;
+const Heading = styled.h3`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${(props) => props.theme.text};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+`;
 
-  star = (ev: SyntheticEvent) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.document.star();
-  };
+const Actions = styled(Flex)`
+  margin-left: 4px;
+  align-items: center;
+`;
 
-  unstar = (ev: SyntheticEvent) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.document.unstar();
-  };
+const Title = styled(Highlight)`
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
 
-  render() {
-    const { document, showCollection, innerRef, ...rest } = this.props;
+const ResultContext = styled(Highlight)`
+  display: block;
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 14px;
+  margin-top: -0.25em;
+  margin-bottom: 0.25em;
+`;
 
-    return (
-      <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
-        <h3>
-          {document.title}
-          {document.starred ? (
-            <a onClick={this.unstar}>
-              <StyledStar solid />
-            </a>
-          ) : (
-            <a onClick={this.star}>
-              <StyledStar />
-            </a>
-          )}
-        </h3>
-        <PublishingInfo
-          document={document}
-          collection={showCollection ? document.collection : undefined}
-        />
-      </DocumentLink>
-    );
-  }
-}
-
-export default DocumentPreview;
+export default withRouter(DocumentPreview);

app/components/DocumentPreview/components/PublishingInfo.js

@@ -1,62 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import moment from 'moment';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import Collection from 'models/Collection';
-import Document from 'models/Document';
-import Flex from 'shared/components/Flex';
-
-const Container = styled(Flex)`
-  color: ${color.slate};
-  font-size: 13px;
-`;
-
-const Modified = styled.span`
-  color: ${props => (props.highlight ? color.slateDark : color.slate)};
-  font-weight: ${props => (props.highlight ? '600' : '400')};
-`;
-
-class PublishingInfo extends Component {
-  props: {
-    collection?: Collection,
-    document: Document,
-    views?: number,
-  };
-
-  render() {
-    const { collection, document } = this.props;
-    const {
-      modifiedSinceViewed,
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-    } = document;
-
-    return (
-      <Container align="center">
-        {createdAt === updatedAt ? (
-          <span>
-            {createdBy.name} published {moment(createdAt).fromNow()}
-          </span>
-        ) : (
-          <span>
-            {updatedBy.name}
-            <Modified highlight={modifiedSinceViewed}>
-              {' '}
-              modified {moment(updatedAt).fromNow()}
-            </Modified>
-          </span>
-        )}
-        {collection && (
-          <span>
-            &nbsp;in <strong>{collection.name}</strong>
-          </span>
-        )}
-      </Container>
-    );
-  }
-}
-
-export default PublishingInfo;

app/components/DocumentPreview/index.js

@@ -1,3 +1,3 @@
 // @flow
-import DocumentPreview from './DocumentPreview';
+import DocumentPreview from "./DocumentPreview";
 export default DocumentPreview;

app/components/DocumentViews/DocumentViewersStore.js

@@ -1,42 +0,0 @@
-// @flow
-import { observable, action } from 'mobx';
-import invariant from 'invariant';
-import { client } from 'utils/ApiClient';
-import type { User } from 'types';
-
-type View = {
-  user: User,
-  count: number,
-};
-
-class DocumentViewersStore {
-  documentId: string;
-  @observable viewers: Array<View>;
-  @observable isFetching: boolean;
-
-  @action
-  fetchViewers = async () => {
-    this.isFetching = true;
-
-    try {
-      const res = await client.post(
-        '/views.list',
-        {
-          id: this.documentId,
-        },
-        { cache: true }
-      );
-      invariant(res && res.data, 'Data should be available');
-      this.viewers = res.data.users;
-    } catch (e) {
-      console.error('Something went wrong');
-    }
-    this.isFetching = false;
-  };
-
-  constructor(documentId: string) {
-    this.documentId = documentId;
-  }
-}
-
-export default DocumentViewersStore;

app/components/DocumentViews/DocumentViews.js

@@ -1,72 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import Popover from 'components/Popover';
-import styled from 'styled-components';
-import DocumentViewers from './components/DocumentViewers';
-import DocumentViewersStore from './DocumentViewersStore';
-import Flex from 'shared/components/Flex';
-
-const Container = styled(Flex)`
-  font-size: 13px;
-  user-select: none;
-
-  a {
-    color: #ccc;
-
-    &:hover {
-      color: #aaa;
-    }
-  }
-`;
-
-type Props = {
-  documentId: string,
-  count: number,
-};
-
-@observer
-class DocumentViews extends Component {
-  @observable opened: boolean = false;
-  anchor: HTMLElement;
-  store: DocumentViewersStore;
-  props: Props;
-
-  constructor(props: Props) {
-    super(props);
-    this.store = new DocumentViewersStore(props.documentId);
-  }
-
-  openPopover = () => {
-    this.opened = true;
-  };
-
-  closePopover = () => {
-    this.opened = false;
-  };
-
-  setRef = (ref: HTMLElement) => {
-    this.anchor = ref;
-  };
-
-  render() {
-    return (
-      <Container align="center">
-        <a ref={this.setRef} onClick={this.openPopover}>
-          Viewed {this.props.count} {this.props.count === 1 ? 'time' : 'times'}
-        </a>
-        {this.opened && (
-          <Popover anchor={this.anchor} onClose={this.closePopover}>
-            <DocumentViewers
-              onMount={this.store.fetchViewers}
-              viewers={this.store.viewers}
-            />
-          </Popover>
-        )}
-      </Container>
-    );
-  }
-}
-
-export default DocumentViews;

app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js

@@ -1,54 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import Flex from 'shared/components/Flex';
-import styled from 'styled-components';
-import map from 'lodash/map';
-import Avatar from 'components/Avatar';
-import Scrollable from 'components/Scrollable';
-
-type Props = {
-  viewers: Array<Object>,
-  onMount: Function,
-};
-
-const List = styled.ul`
-  list-style: none;
-  font-size: 13px;
-  margin: -4px 0;
-  padding: 0;
-
-  li {
-    padding: 4px 0;
-  }
-`;
-
-const UserName = styled.span`
-  padding-left: 8px;
-`;
-
-class DocumentViewers extends Component {
-  props: Props;
-
-  componentDidMount() {
-    this.props.onMount();
-  }
-
-  render() {
-    return (
-      <Scrollable>
-        <List>
-          {map(this.props.viewers, view => (
-            <li key={view.user.id}>
-              <Flex align="center">
-                <Avatar src={view.user.avatarUrl} />{' '}
-                <UserName>{view.user.name}</UserName>
-              </Flex>
-            </li>
-          ))}
-        </List>
-      </Scrollable>
-    );
-  }
-}
-
-export default DocumentViewers;

app/components/DocumentViews/components/DocumentViewers/index.js

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

app/components/DocumentViews/index.js

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

app/components/DropToImport.js

@@ -0,0 +1,113 @@
+// @flow
+import invariant from "invariant";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import Dropzone from "react-dropzone";
+import { withRouter, type RouterHistory, type Match } from "react-router-dom";
+import { createGlobalStyle } from "styled-components";
+import DocumentsStore from "stores/DocumentsStore";
+import LoadingIndicator from "components/LoadingIndicator";
+import importFile from "utils/importFile";
+
+const EMPTY_OBJECT = {};
+let importingLock = false;
+
+type Props = {
+  children: React.Node,
+  collectionId: string,
+  documentId?: string,
+  activeClassName?: string,
+  rejectClassName?: string,
+  documents: DocumentsStore,
+  disabled: boolean,
+  location: Object,
+  match: Match,
+  history: RouterHistory,
+  staticContext: Object,
+};
+
+export const GlobalStyles = createGlobalStyle`
+  .activeDropZone {
+    border-radius: 4px;
+    background: ${(props) => props.theme.slateDark};
+    svg { fill: ${(props) => props.theme.white}; }
+  }
+
+  .activeDropZone a {
+    color: ${(props) => props.theme.white} !important;
+  }
+`;
+
+@observer
+class DropToImport extends React.Component<Props> {
+  @observable isImporting: boolean = false;
+
+  onDropAccepted = async (files = []) => {
+    if (importingLock) return;
+
+    this.isImporting = true;
+    importingLock = true;
+
+    try {
+      let collectionId = this.props.collectionId;
+      const documentId = this.props.documentId;
+      const redirect = files.length === 1;
+
+      if (documentId && !collectionId) {
+        const document = await this.props.documents.fetch(documentId);
+        invariant(document, "Document not available");
+        collectionId = document.collectionId;
+      }
+
+      for (const file of files) {
+        const doc = await importFile({
+          documents: this.props.documents,
+          file,
+          documentId,
+          collectionId,
+        });
+
+        if (redirect) {
+          this.props.history.push(doc.url);
+        }
+      }
+    } finally {
+      this.isImporting = false;
+      importingLock = false;
+    }
+  };
+
+  render() {
+    const {
+      documentId,
+      collectionId,
+      documents,
+      disabled,
+      location,
+      match,
+      history,
+      staticContext,
+      ...rest
+    } = this.props;
+
+    if (this.props.disabled) return this.props.children;
+
+    return (
+      <Dropzone
+        accept="text/markdown, text/plain"
+        onDropAccepted={this.onDropAccepted}
+        style={EMPTY_OBJECT}
+        disableClick
+        disablePreview
+        multiple
+        {...rest}
+      >
+        {this.isImporting && <LoadingIndicator />}
+        {this.props.children}
+      </Dropzone>
+    );
+  }
+}
+
+export default inject("documents")(withRouter(DropToImport));

app/components/DropToImport/DropToImport.js

@@ -1,123 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { injectGlobal } from 'styled-components';
-import { color } from 'shared/styles/constants';
-import invariant from 'invariant';
-import _ from 'lodash';
-import Dropzone from 'react-dropzone';
-import Document from 'models/Document';
-import DocumentsStore from 'stores/DocumentsStore';
-import LoadingIndicator from 'components/LoadingIndicator';
-
-type Props = {
-  children?: React$Element<any>,
-  collectionId: string,
-  documentId?: string,
-  activeClassName?: string,
-  rejectClassName?: string,
-  documents: DocumentsStore,
-  disabled: boolean,
-  dropzoneRef: Function,
-  history: Object,
-};
-
-// eslint-disable-next-line
-injectGlobal`
-  .activeDropZone {
-    background: ${color.slateDark};
-    svg { fill: ${color.white}; }
-  }
-
-  .activeDropZone a {
-    color: ${color.white} !important;
-  }
-`;
-
-@observer
-class DropToImport extends Component {
-  @observable isImporting: boolean = false;
-  props: Props;
-
-  importFile = async ({ file, documentId, collectionId, redirect }) => {
-    const reader = new FileReader();
-
-    reader.onload = async ev => {
-      const text = ev.target.result;
-      let data = {
-        parentDocument: undefined,
-        collection: { id: collectionId },
-        text,
-      };
-
-      if (documentId) data.parentDocument = documentId;
-
-      let document = new Document(data);
-      document = await document.save();
-      this.props.documents.add(document);
-
-      if (redirect && this.props.history) {
-        this.props.history.push(document.url);
-      }
-    };
-    reader.readAsText(file);
-  };
-
-  onDropAccepted = async (files = []) => {
-    this.isImporting = true;
-
-    try {
-      let collectionId = this.props.collectionId;
-      const documentId = this.props.documentId;
-      const redirect = files.length === 1;
-
-      if (documentId && !collectionId) {
-        const document = await this.props.documents.fetch(documentId);
-        invariant(document, 'Document not available');
-        collectionId = document.collection.id;
-      }
-
-      for (const file of files) {
-        await this.importFile({ file, documentId, collectionId, redirect });
-      }
-    } catch (err) {
-      // TODO: show error alert.
-    } finally {
-      this.isImporting = false;
-    }
-  };
-
-  render() {
-    const props = _.omit(
-      this.props,
-      'history',
-      'documentId',
-      'collectionId',
-      'documents',
-      'disabled',
-      'dropzoneRef',
-      'menuOpen'
-    );
-
-    if (this.props.disabled) return this.props.children;
-
-    return (
-      <Dropzone
-        accept="text/markdown, text/plain"
-        onDropAccepted={this.onDropAccepted}
-        style={{}}
-        disableClick
-        disablePreview
-        multiple
-        ref={this.props.dropzoneRef}
-        {...props}
-      >
-        {this.isImporting && <LoadingIndicator />}
-        {this.props.children}
-      </Dropzone>
-    );
-  }
-}
-
-export default inject('documents')(DropToImport);

app/components/DropToImport/index.js

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

app/components/DropdownMenu/DropdownMenu.js

@@ -1,72 +1,227 @@
 // @flow
-import React, { Component } from 'react';
-import invariant from 'invariant';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import { PortalWithState } from 'react-portal';
-import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
-import { fadeAndScaleIn } from 'shared/styles/animations';
+import invariant from "invariant";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { MoreIcon } from "outline-icons";
+import { rgba } from "polished";
+import * as React from "react";
+import { PortalWithState } from "react-portal";
+import styled from "styled-components";
+import { fadeAndScaleIn } from "shared/styles/animations";
+import Flex from "components/Flex";
+import NudeButton from "components/NudeButton";
+
+let previousClosePortal;
+let counter = 0;
+
+type Children =
+  | React.Node
+  | ((options: { closePortal: () => void }) => React.Node);
 
 type Props = {
-  label: React.Element<*>,
+  label?: React.Node,
   onOpen?: () => void,
   onClose?: () => void,
-  children?: React.Element<*>,
+  children?: Children,
+  className?: string,
+  hover?: boolean,
   style?: Object,
+  position?: "left" | "right" | "center",
 };
 
 @observer
-class DropdownMenu extends Component {
-  props: Props;
-  @observable top: number;
-  @observable left: number;
-  @observable right: number;
+class DropdownMenu extends React.Component<Props> {
+  id: string = `menu${counter++}`;
+  closeTimeout: TimeoutID;
 
-  handleOpen = (openPortal: SyntheticEvent => void) => {
-    return (ev: SyntheticMouseEvent) => {
+  @observable top: ?number;
+  @observable bottom: ?number;
+  @observable right: ?number;
+  @observable left: ?number;
+  @observable position: "left" | "right" | "center";
+  @observable fixed: ?boolean;
+  @observable bodyRect: ClientRect;
+  @observable labelRect: ClientRect;
+  @observable dropdownRef: { current: null | HTMLElement } = React.createRef();
+  @observable menuRef: { current: null | HTMLElement } = React.createRef();
+
+  handleOpen = (
+    openPortal: (SyntheticEvent<>) => void,
+    closePortal: () => void
+  ) => {
+    return (ev: SyntheticMouseEvent<HTMLElement>) => {
       ev.preventDefault();
-      ev.stopPropagation();
       const currentTarget = ev.currentTarget;
-      invariant(document.body, 'why you not here');
+      invariant(document.body, "why you not here");
 
       if (currentTarget instanceof HTMLDivElement) {
-        const bodyRect = document.body.getBoundingClientRect();
-        const targetRect = currentTarget.getBoundingClientRect();
-        this.top = targetRect.bottom - bodyRect.top;
-        this.right = bodyRect.width - targetRect.left - targetRect.width;
+        this.bodyRect = document.body.getBoundingClientRect();
+        this.labelRect = currentTarget.getBoundingClientRect();
+        this.top = this.labelRect.bottom - this.bodyRect.top;
+        this.bottom = undefined;
+        this.position = this.props.position || "left";
+
+        if (currentTarget.parentElement) {
+          const triggerParentStyle = getComputedStyle(
+            currentTarget.parentElement
+          );
+
+          if (triggerParentStyle.position === "static") {
+            this.fixed = true;
+            this.top = this.labelRect.bottom;
+          }
+        }
+
+        this.initPosition();
+
+        // attempt to keep only one flyout menu open at once
+        if (previousClosePortal && !this.props.hover) {
+          previousClosePortal();
+        }
+        previousClosePortal = closePortal;
         openPortal(ev);
       }
     };
   };
 
+  initPosition() {
+    if (this.position === "left") {
+      this.right =
+        this.bodyRect.width - this.labelRect.left - this.labelRect.width;
+    } else if (this.position === "center") {
+      this.left = this.labelRect.left + this.labelRect.width / 2;
+    } else {
+      this.left = this.labelRect.left;
+    }
+  }
+
+  onOpen = () => {
+    if (typeof this.props.onOpen === "function") {
+      this.props.onOpen();
+    }
+    this.fitOnTheScreen();
+  };
+
+  fitOnTheScreen() {
+    if (!this.dropdownRef || !this.dropdownRef.current) return;
+    const el = this.dropdownRef.current;
+
+    const sticksOutPastBottomEdge =
+      el.clientHeight + this.top > window.innerHeight;
+    if (sticksOutPastBottomEdge) {
+      this.top = undefined;
+      this.bottom = this.fixed ? 0 : -1 * window.pageYOffset;
+    } else {
+      this.bottom = undefined;
+    }
+
+    if (this.position === "left" || this.position === "right") {
+      const totalWidth =
+        Math.sign(this.position === "left" ? -1 : 1) * el.offsetLeft +
+        el.scrollWidth;
+      const isVisible = totalWidth < window.innerWidth;
+
+      if (!isVisible) {
+        if (this.position === "right") {
+          this.position = "left";
+          this.left = undefined;
+        } else if (this.position === "left") {
+          this.position = "right";
+          this.right = undefined;
+        }
+      }
+    }
+
+    this.initPosition();
+    this.forceUpdate();
+  }
+
+  closeAfterTimeout = (closePortal: () => void) => () => {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+    }
+    this.closeTimeout = setTimeout(closePortal, 500);
+  };
+
+  clearCloseTimeout = () => {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+    }
+  };
+
   render() {
+    const { className, hover, label, children } = this.props;
+
     return (
-      <div>
+      <div className={className}>
         <PortalWithState
-          onOpen={this.props.onOpen}
+          onOpen={this.onOpen}
           onClose={this.props.onClose}
-          closeOnEsc
           closeOnOutsideClick
+          closeOnEsc
         >
-          {({ closePortal, openPortal, portal }) => [
-            <Label onClick={this.handleOpen(openPortal)} key="label">
-              {this.props.label}
-            </Label>,
-            portal(
-              <Menu
-                key="menu"
-                onClick={closePortal}
-                style={this.props.style}
-                left={this.left}
-                top={this.top}
-                right={this.right}
+          {({ closePortal, openPortal, isOpen, portal }) => (
+            <>
+              <Label
+                onMouseMove={hover ? this.clearCloseTimeout : undefined}
+                onMouseOut={
+                  hover ? this.closeAfterTimeout(closePortal) : undefined
+                }
+                onMouseEnter={
+                  hover ? this.handleOpen(openPortal, closePortal) : undefined
+                }
+                onClick={
+                  hover ? undefined : this.handleOpen(openPortal, closePortal)
+                }
               >
-                {this.props.children}
-              </Menu>
-            ),
-          ]}
+                {label || (
+                  <NudeButton
+                    id={`${this.id}button`}
+                    aria-haspopup="true"
+                    aria-expanded={isOpen ? "true" : "false"}
+                    aria-controls={this.id}
+                  >
+                    <MoreIcon />
+                  </NudeButton>
+                )}
+              </Label>
+              {portal(
+                <Position
+                  ref={this.dropdownRef}
+                  position={this.position}
+                  fixed={this.fixed}
+                  top={this.top}
+                  bottom={this.bottom}
+                  left={this.left}
+                  right={this.right}
+                >
+                  <Menu
+                    ref={this.menuRef}
+                    onMouseMove={hover ? this.clearCloseTimeout : undefined}
+                    onMouseOut={
+                      hover ? this.closeAfterTimeout(closePortal) : undefined
+                    }
+                    onClick={
+                      typeof children === "function"
+                        ? undefined
+                        : (ev) => {
+                            ev.stopPropagation();
+                            closePortal();
+                          }
+                    }
+                    style={this.props.style}
+                    id={this.id}
+                    aria-labelledby={`${this.id}button`}
+                    role="menu"
+                  >
+                    {typeof children === "function"
+                      ? children({ closePortal })
+                      : children}
+                  </Menu>
+                </Position>
+              )}
+            </>
+          )}
         </PortalWithState>
       </div>
     );
@@ -74,28 +229,58 @@ class DropdownMenu extends Component {
 }
 
 const Label = styled(Flex).attrs({
-  justify: 'center',
-  align: 'center',
+  justify: "center",
+  align: "center",
 })`
-  z-index: 1000;
+  z-index: ${(props) => props.theme.depths.menu};
   cursor: pointer;
 `;
 
+const Position = styled.div`
+  position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
+  display: flex;
+  ${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
+  ${({ right }) => (right !== undefined ? `right: ${right}px` : "")};
+  ${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
+  ${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
+  max-height: 75%;
+  z-index: ${(props) => props.theme.depths.menu};
+  transform: ${(props) =>
+    props.position === "center" ? "translateX(-50%)" : "initial"};
+  pointer-events: none;
+`;
+
 const Menu = styled.div`
   animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: 75% 0;
-
-  position: absolute;
-  right: ${({ right }) => right}px;
-  top: ${({ top }) => top}px;
-  z-index: 1000;
-  border: ${color.slateLight};
-  background: ${color.white};
+  transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
+  backdrop-filter: blur(10px);
+  background: ${(props) => rgba(props.theme.menuBackground, 0.8)};
+  border: ${(props) =>
+    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
   border-radius: 2px;
-  min-width: 160px;
+  padding: 0.5em 0;
+  min-width: 180px;
   overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
-    0 2px 4px rgba(0, 0, 0, 0.08);
+  overflow-y: auto;
+  box-shadow: ${(props) => props.theme.menuShadow};
+  pointer-events: all;
+
+  hr {
+    margin: 0.5em 12px;
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export const Header = styled.h3`
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${(props) => props.theme.sidebarText};
+  letter-spacing: 0.04em;
+  margin: 1em 12px 0.5em;
 `;
 
 export default DropdownMenu;

app/components/DropdownMenu/DropdownMenuItem.js

@@ -1,47 +1,88 @@
 // @flow
-import React from 'react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
+import { CheckmarkIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  onClick?: (SyntheticEvent<>) => void | Promise<void>,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+};
 
 const DropdownMenuItem = ({
   onClick,
   children,
-}: {
-  onClick?: SyntheticEvent => void,
-  children?: React.Element<any>,
-}) => {
-  return <MenuItem onClick={onClick}>{children}</MenuItem>;
+  selected,
+  disabled,
+  ...rest
+}: Props) => {
+  return (
+    <MenuItem
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      role="menuitem"
+      tabIndex="-1"
+      {...rest}
+    >
+      {selected !== undefined && (
+        <>
+          <CheckmarkIcon
+            color={selected === false ? "transparent" : undefined}
+          />
+          &nbsp;
+        </>
+      )}
+      {children}
+    </MenuItem>
+  );
 };
 
-const MenuItem = styled(Flex)`
+const MenuItem = styled.a`
+  display: flex;
   margin: 0;
-  padding: 5px 10px;
-  height: 32px;
+  padding: 6px 12px;
+  width: 100%;
+  min-height: 32px;
 
-  color: ${color.slateDark};
+  color: ${(props) =>
+    props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
   justify-content: left;
   align-items: center;
-  cursor: pointer;
   font-size: 15px;
+  cursor: default;
+  user-select: none;
 
-  svg {
+  svg:not(:last-child) {
     margin-right: 8px;
   }
 
-  a {
-    text-decoration: none;
-    width: 100%;
+  svg {
+    opacity: ${(props) => (props.disabled ? ".5" : 1)};
   }
 
+  ${(props) =>
+    props.disabled
+      ? "pointer-events: none;"
+      : `
+
   &:hover {
-    color: ${color.white};
-    background: ${color.primary};
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    box-shadow: none;
+    cursor: pointer;
 
     svg {
-      fill: ${color.white};
+      fill: ${props.theme.white};
     }
   }
+
+  &:focus {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    outline: none;
+  }
+  `};
 `;
 
 export default DropdownMenuItem;

app/components/DropdownMenu/index.js

@@ -1,3 +1,3 @@
 // @flow
-export { default as DropdownMenu } from './DropdownMenu';
-export { default as DropdownMenuItem } from './DropdownMenuItem';
+export { default as DropdownMenu, Header } from "./DropdownMenu";
+export { default as DropdownMenuItem } from "./DropdownMenuItem";

app/components/Editor.js

@@ -0,0 +1,129 @@
+// @flow
+import { lighten } from "polished";
+import * as React from "react";
+import { withRouter, type RouterHistory } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+import UiStore from "stores/UiStore";
+import ErrorBoundary from "components/ErrorBoundary";
+import Tooltip from "components/Tooltip";
+import embeds from "../embeds";
+import isInternalUrl from "utils/isInternalUrl";
+import { uploadFile } from "utils/uploadFile";
+
+const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
+
+const EMPTY_ARRAY = [];
+
+type Props = {
+  id?: string,
+  defaultValue?: string,
+  readOnly?: boolean,
+  grow?: boolean,
+  disableEmbeds?: boolean,
+  ui?: UiStore,
+};
+
+type PropsWithRef = Props & {
+  forwardedRef: React.Ref<any>,
+  history: RouterHistory,
+};
+
+class Editor extends React.Component<PropsWithRef> {
+  onUploadImage = async (file: File) => {
+    const result = await uploadFile(file, { documentId: this.props.id });
+    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) => {
+    if (this.props.ui) {
+      this.props.ui.showToast(message);
+    }
+  };
+
+  render() {
+    return (
+      <ErrorBoundary reloadOnChunkMissing>
+        <StyledEditor
+          ref={this.props.forwardedRef}
+          uploadImage={this.onUploadImage}
+          onClickLink={this.onClickLink}
+          onShowToast={this.onShowToast}
+          embeds={this.props.disableEmbeds ? EMPTY_ARRAY : embeds}
+          tooltip={EditorTooltip}
+          {...this.props}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+const StyledEditor = styled(RichMarkdownEditor)`
+  flex-grow: ${(props) => (props.grow ? 1 : 0)};
+  justify-content: start;
+
+  > div {
+    transition: ${(props) => props.theme.backgroundTransition};
+  }
+
+  .notice-block.tip,
+  .notice-block.warning {
+    font-weight: 500;
+  }
+
+  p {
+    a {
+      color: ${(props) => props.theme.text};
+      border-bottom: 1px solid ${(props) => lighten(0.5, props.theme.text)};
+      text-decoration: none !important;
+      font-weight: 500;
+
+      &:hover {
+        border-bottom: 1px solid ${(props) => props.theme.text};
+        text-decoration: none;
+      }
+    }
+  }
+`;
+
+const EditorTooltip = ({ children, ...props }) => (
+  <Tooltip offset="0, 16" delay={150} {...props}>
+    <Span>{children}</Span>
+  </Tooltip>
+);
+
+const Span = styled.span`
+  outline: none;
+`;
+
+const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
+
+export default React.forwardRef<Props, typeof Editor>((props, ref) => (
+  <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
+));

app/components/Editor/Editor.js

@@ -1,338 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { Editor, Plain } from 'slate';
-import keydown from 'react-keydown';
-import type { State, Editor as EditorType } from './types';
-import getDataTransferFiles from 'utils/getDataTransferFiles';
-import Flex from 'shared/components/Flex';
-import ClickablePadding from './components/ClickablePadding';
-import Toolbar from './components/Toolbar';
-import BlockInsert from './components/BlockInsert';
-import Placeholder from './components/Placeholder';
-import Contents from './components/Contents';
-import Markdown from './serializer';
-import createSchema from './schema';
-import createPlugins from './plugins';
-import insertImage from './insertImage';
-import styled from 'styled-components';
-
-type Props = {
-  text: string,
-  onChange: Function,
-  onSave: Function,
-  onCancel: Function,
-  onImageUploadStart: Function,
-  onImageUploadStop: Function,
-  emoji?: string,
-  readOnly: boolean,
-};
-
-type KeyData = {
-  isMeta: boolean,
-  key: string,
-};
-
-@observer
-class MarkdownEditor extends Component {
-  props: Props;
-  editor: EditorType;
-  schema: Object;
-  plugins: Array<Object>;
-  @observable editorState: State;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.schema = createSchema({
-      onInsertImage: this.insertImageFile,
-      onChange: this.onChange,
-    });
-    this.plugins = createPlugins({
-      onImageUploadStart: props.onImageUploadStart,
-      onImageUploadStop: props.onImageUploadStop,
-    });
-
-    if (props.text.trim().length) {
-      this.editorState = Markdown.deserialize(props.text);
-    } else {
-      this.editorState = Plain.deserialize('');
-    }
-  }
-
-  componentDidMount() {
-    if (!this.props.readOnly) {
-      if (this.props.text) {
-        this.focusAtEnd();
-      } else {
-        this.focusAtStart();
-      }
-    }
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    if (prevProps.readOnly && !this.props.readOnly) {
-      this.focusAtEnd();
-    }
-  }
-
-  onChange = (editorState: State) => {
-    if (this.editorState !== editorState) {
-      this.props.onChange(Markdown.serialize(editorState));
-    }
-
-    this.editorState = editorState;
-  };
-
-  handleDrop = async (ev: SyntheticEvent) => {
-    if (this.props.readOnly) return;
-    // check if this event was already handled by the Editor
-    if (ev.isDefaultPrevented()) return;
-
-    // otherwise we'll handle this
-    ev.preventDefault();
-    ev.stopPropagation();
-
-    const files = getDataTransferFiles(ev);
-    for (const file of files) {
-      if (file.type.startsWith('image/')) {
-        await this.insertImageFile(file);
-      }
-    }
-  };
-
-  insertImageFile = async (file: window.File) => {
-    const state = this.editor.getState();
-    let transform = state.transform();
-
-    transform = await insertImage(
-      transform,
-      file,
-      this.editor,
-      this.props.onImageUploadStart,
-      this.props.onImageUploadStop
-    );
-    this.editor.onChange(transform.apply());
-  };
-
-  cancelEvent = (ev: SyntheticEvent) => {
-    ev.preventDefault();
-  };
-
-  // Handling of keyboard shortcuts outside of editor focus
-  @keydown('meta+s')
-  onSave(ev: SyntheticKeyboardEvent) {
-    if (this.props.readOnly) return;
-
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.onSave();
-  }
-
-  @keydown('meta+enter')
-  onSaveAndExit(ev: SyntheticKeyboardEvent) {
-    if (this.props.readOnly) return;
-
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.onSave({ redirect: false });
-  }
-
-  @keydown('esc')
-  onCancel() {
-    if (this.props.readOnly) return;
-    this.props.onCancel();
-  }
-
-  // Handling of keyboard shortcuts within editor focus
-  onKeyDown = (ev: SyntheticKeyboardEvent, data: KeyData, state: State) => {
-    if (!data.isMeta) return;
-
-    switch (data.key) {
-      case 's':
-        this.onSave(ev);
-        return state;
-      case 'enter':
-        this.onSaveAndExit(ev);
-        return state;
-      case 'escape':
-        this.onCancel();
-        return state;
-      default:
-    }
-  };
-
-  focusAtStart = () => {
-    const state = this.editor.getState();
-    const transform = state.transform();
-    transform.collapseToStartOf(state.document);
-    transform.focus();
-    this.editorState = transform.apply();
-  };
-
-  focusAtEnd = () => {
-    const state = this.editor.getState();
-    const transform = state.transform();
-    transform.collapseToEndOf(state.document);
-    transform.focus();
-    this.editorState = transform.apply();
-  };
-
-  render = () => {
-    const { readOnly, emoji, onSave } = this.props;
-
-    return (
-      <Flex
-        onDrop={this.handleDrop}
-        onDragOver={this.cancelEvent}
-        onDragEnter={this.cancelEvent}
-        align="flex-start"
-        justify="center"
-        auto
-      >
-        <MaxWidth column auto>
-          <Header onClick={this.focusAtStart} readOnly={readOnly} />
-          <Contents state={this.editorState} />
-          {!readOnly && (
-            <Toolbar state={this.editorState} onChange={this.onChange} />
-          )}
-          {!readOnly && (
-            <BlockInsert
-              state={this.editorState}
-              onChange={this.onChange}
-              onInsertImage={this.insertImageFile}
-            />
-          )}
-          <StyledEditor
-            innerRef={ref => (this.editor = ref)}
-            placeholder="Start with a title…"
-            bodyPlaceholder="…the rest is your canvas"
-            schema={this.schema}
-            plugins={this.plugins}
-            emoji={emoji}
-            state={this.editorState}
-            onKeyDown={this.onKeyDown}
-            onChange={this.onChange}
-            onSave={onSave}
-            readOnly={readOnly}
-          />
-          <ClickablePadding
-            onClick={!readOnly ? this.focusAtEnd : undefined}
-            grow
-          />
-        </MaxWidth>
-      </Flex>
-    );
-  };
-}
-
-const MaxWidth = styled(Flex)`
-  padding: 0 60px;
-  max-width: 50em;
-  height: 100%;
-`;
-
-const Header = styled(Flex)`
-  height: 60px;
-  flex-shrink: 0;
-  align-items: flex-end;
-  ${({ readOnly }) => !readOnly && 'cursor: text;'};
-`;
-
-const StyledEditor = styled(Editor)`
-  font-weight: 400;
-  font-size: 1em;
-  line-height: 1.7em;
-  width: 100%;
-  color: #1b2830;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 500;
-  }
-
-  h1:first-of-type {
-    ${Placeholder} {
-      visibility: visible;
-    }
-  }
-
-  p:nth-child(2) {
-    ${Placeholder} {
-      visibility: visible;
-    }
-  }
-
-  ul,
-  ol {
-    margin: 1em 0.1em;
-    padding-left: 1em;
-
-    ul,
-    ol {
-      margin: 0.1em;
-    }
-  }
-
-  p {
-    position: relative;
-  }
-
-  a:hover {
-    text-decoration: ${({ readOnly }) => (readOnly ? 'underline' : 'none')};
-  }
-
-  li p {
-    display: inline;
-    margin: 0;
-  }
-
-  .todoList {
-    list-style: none;
-    padding-left: 0;
-
-    .todoList {
-      padding-left: 1em;
-    }
-  }
-
-  .todo {
-    span:last-child:focus {
-      outline: none;
-    }
-  }
-
-  blockquote {
-    border-left: 3px solid #efefef;
-    padding-left: 10px;
-  }
-
-  table {
-    border-collapse: collapse;
-  }
-
-  tr {
-    border-bottom: 1px solid #eee;
-  }
-
-  th {
-    font-weight: bold;
-  }
-
-  th,
-  td {
-    padding: 5px 20px 5px 0;
-  }
-
-  b,
-  strong {
-    font-weight: 600;
-  }
-`;
-
-export default MarkdownEditor;

app/components/Editor/components/BlockInsert.js

@@ -1,148 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { Portal } from 'react-portal';
-import { findDOMNode, Node } from 'slate';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import PlusIcon from 'components/Icon/PlusIcon';
-import type { State } from '../types';
-
-type Props = {
-  state: State,
-  onChange: Function,
-  onInsertImage: File => Promise<*>,
-};
-
-function findClosestRootNode(state, ev) {
-  let previous;
-
-  for (const node of state.document.nodes) {
-    const element = findDOMNode(node);
-    const bounds = element.getBoundingClientRect();
-    if (bounds.top > ev.clientY) return previous;
-    previous = { node, element, bounds };
-  }
-}
-
-@observer
-export default class BlockInsert extends Component {
-  props: Props;
-  mouseMoveTimeout: number;
-  mouseMovementSinceClick: number = 0;
-  lastClientX: number = 0;
-  lastClientY: number = 0;
-
-  @observable closestRootNode: Node;
-  @observable active: boolean = false;
-  @observable top: number;
-  @observable left: number;
-
-  componentDidMount = () => {
-    window.addEventListener('mousemove', this.handleMouseMove);
-  };
-
-  componentWillUnmount = () => {
-    window.removeEventListener('mousemove', this.handleMouseMove);
-  };
-
-  setInactive = () => {
-    this.active = false;
-  };
-
-  handleMouseMove = (ev: SyntheticMouseEvent) => {
-    const windowWidth = window.innerWidth / 2.5;
-    const result = findClosestRootNode(this.props.state, ev);
-    const movementThreshold = 200;
-
-    this.mouseMovementSinceClick +=
-      Math.abs(this.lastClientX - ev.clientX) +
-      Math.abs(this.lastClientY - ev.clientY);
-    this.lastClientX = ev.clientX;
-    this.lastClientY = ev.clientY;
-
-    this.active =
-      ev.clientX < windowWidth &&
-      this.mouseMovementSinceClick > movementThreshold;
-
-    if (result) {
-      this.closestRootNode = result.node;
-
-      // do not show block menu on title heading or editor
-      const firstNode = this.props.state.document.nodes.first();
-      if (result.node === firstNode || result.node.type === 'block-toolbar') {
-        this.left = -1000;
-      } else {
-        this.left = Math.round(result.bounds.left - 20);
-        this.top = Math.round(result.bounds.top + window.scrollY);
-      }
-    }
-
-    if (this.active) {
-      clearTimeout(this.mouseMoveTimeout);
-      this.mouseMoveTimeout = setTimeout(this.setInactive, 2000);
-    }
-  };
-
-  handleClick = (ev: SyntheticMouseEvent) => {
-    this.mouseMovementSinceClick = 0;
-    this.active = false;
-
-    const { state } = this.props;
-    const type = { type: 'block-toolbar', isVoid: true };
-    let transform = state.transform();
-
-    // remove any existing toolbars in the document as a fail safe
-    state.document.nodes.forEach(node => {
-      if (node.type === 'block-toolbar') {
-        transform.removeNodeByKey(node.key);
-      }
-    });
-
-    transform
-      .collapseToStartOf(this.closestRootNode)
-      .collapseToEndOfPreviousBlock()
-      .insertBlock(type);
-
-    this.props.onChange(transform.apply());
-  };
-
-  render() {
-    const style = { top: `${this.top}px`, left: `${this.left}px` };
-
-    return (
-      <Portal>
-        <Trigger active={this.active} style={style}>
-          <PlusIcon onClick={this.handleClick} color={color.slate} />
-        </Trigger>
-      </Portal>
-    );
-  }
-}
-
-const Trigger = styled.div`
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
-  background-color: ${color.white};
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
-    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  line-height: 0;
-  margin-left: -10px;
-  box-shadow: inset 0 0 0 2px ${color.slate};
-  border-radius: 100%;
-  transform: scale(0.9);
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${color.smokeDark};
-  }
-
-  ${({ active }) =>
-    active &&
-    `
-    transform: scale(1);
-    opacity: .9;
-  `};
-`;

app/components/Editor/components/ClickablePadding/ClickablePadding.js

@@ -1,22 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-
-type Props = {
-  onClick?: ?Function,
-  grow?: boolean,
-};
-
-const ClickablePadding = (props: Props) => {
-  return <Container grow={props.grow} onClick={props.onClick} />;
-};
-
-const Container = styled.div`
-  min-height: 150px;
-  padding-top: 50px;
-  cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
-
-  ${({ grow }) => grow && `flex-grow: 1;`};
-`;
-
-export default ClickablePadding;

app/components/Editor/components/ClickablePadding/index.js

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

app/components/Editor/components/Code.js

@@ -1,40 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import CopyButton from './CopyButton';
-import { color } from 'shared/styles/constants';
-import type { Props } from '../types';
-
-export default function Code({ children, node, readOnly, attributes }: Props) {
-  const language = node.data.get('language') || 'javascript';
-
-  return (
-    <Container {...attributes}>
-      {readOnly && <CopyButton text={node.text} />}
-      <Pre className={`language-${language}`}>
-        <code className={`language-${language}`}>{children}</code>
-      </Pre>
-    </Container>
-  );
-}
-
-const Pre = styled.pre`
-  padding: 0.5em 1em;
-  background: ${color.smokeLight};
-  border-radius: 4px;
-  border: 1px solid ${color.smokeDark};
-
-  code {
-    padding: 0;
-  }
-`;
-
-const Container = styled.div`
-  position: relative;
-
-  &:hover {
-    > span {
-      opacity: 1;
-    }
-  }
-`;

app/components/Editor/components/Contents.js

@@ -1,150 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { List } from 'immutable';
-import { color } from 'shared/styles/constants';
-import headingToSlug from '../headingToSlug';
-import type { State, Block } from '../types';
-import styled from 'styled-components';
-
-type Props = {
-  state: State,
-};
-
-@observer
-class Contents extends Component {
-  props: Props;
-  @observable activeHeading: ?string;
-
-  componentDidMount() {
-    window.addEventListener('scroll', this.updateActiveHeading);
-    this.updateActiveHeading();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.updateActiveHeading);
-  }
-
-  updateActiveHeading = () => {
-    const elements = this.headingElements;
-    if (!elements.length) return;
-
-    let activeHeading = elements[0].id;
-
-    for (const element of elements) {
-      const bounds = element.getBoundingClientRect();
-      if (bounds.top <= 0) activeHeading = element.id;
-    }
-
-    this.activeHeading = activeHeading;
-  };
-
-  get headingElements(): HTMLElement[] {
-    const elements = [];
-    const tagNames = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-    for (const tagName of tagNames) {
-      for (const ele of document.getElementsByTagName(tagName)) {
-        elements.push(ele);
-      }
-    }
-
-    return elements;
-  }
-
-  get headings(): List<Block> {
-    const { state } = this.props;
-
-    return state.document.nodes.filter((node: Block) => {
-      if (!node.text) return false;
-      return node.type.match(/^heading/);
-    });
-  }
-
-  render() {
-    // If there are one or less headings in the document no need for a minimap
-    if (this.headings.size <= 1) return null;
-
-    return (
-      <Wrapper>
-        <Sections>
-          {this.headings.map(heading => {
-            const slug = headingToSlug(heading);
-            const active = this.activeHeading === slug;
-
-            return (
-              <ListItem type={heading.type} active={active}>
-                <Anchor href={`#${slug}`} active={active}>
-                  {heading.text}
-                </Anchor>
-              </ListItem>
-            );
-          })}
-        </Sections>
-      </Wrapper>
-    );
-  }
-}
-
-const Wrapper = styled.div`
-  position: fixed;
-  right: 0;
-  top: 150px;
-  z-index: 100;
-`;
-
-const Anchor = styled.a`
-  color: ${props => (props.active ? color.slateDark : color.slate)};
-  font-weight: ${props => (props.active ? 500 : 400)};
-  opacity: 0;
-  transition: all 100ms ease-in-out;
-  margin-right: -5px;
-  padding: 2px 0;
-  pointer-events: none;
-  text-overflow: ellipsis;
-
-  &:hover {
-    color: ${color.primary};
-  }
-`;
-
-const ListItem = styled.li`
-  position: relative;
-  margin-left: ${props => (props.type.match(/heading[12]/) ? '8px' : '16px')};
-  text-align: right;
-  color: ${color.slate};
-  padding-right: 16px;
-  white-space: nowrap;
-
-  &:after {
-    color: ${props => (props.active ? color.slateDark : color.slate)};
-    content: "${props => (props.type.match(/heading[12]/) ? '—' : '–')}";
-    position: absolute;
-    right: 0;
-  }
-`;
-
-const Sections = styled.ol`
-  margin: 0 0 0 -8px;
-  padding: 0;
-  list-style: none;
-  font-size: 13px;
-  width: 100px;
-  transition-delay: 1s;
-  transition: width 100ms ease-in-out;
-
-  &:hover {
-    width: 300px;
-    transition-delay: 0s;
-
-    ${Anchor} {
-      opacity: 1;
-      margin-right: 0;
-      background: ${color.white};
-      pointer-events: all;
-    }
-  }
-`;
-
-export default Contents;

app/components/Editor/components/CopyButton.js

@@ -1,50 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { color } from 'shared/styles/constants';
-import styled from 'styled-components';
-import CopyToClipboard from 'components/CopyToClipboard';
-
-@observer
-class CopyButton extends Component {
-  @observable copied: boolean = false;
-  copiedTimeout: ?number;
-
-  componentWillUnmount() {
-    clearTimeout(this.copiedTimeout);
-  }
-
-  handleCopy = () => {
-    this.copied = true;
-    this.copiedTimeout = setTimeout(() => (this.copied = false), 3000);
-  };
-
-  render() {
-    return (
-      <StyledCopyToClipboard onCopy={this.handleCopy} {...this.props}>
-        <span>{this.copied ? 'Copied!' : 'Copy to clipboard'}</span>
-      </StyledCopyToClipboard>
-    );
-  }
-}
-
-const StyledCopyToClipboard = styled(CopyToClipboard)`
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  opacity: 0;
-  transition: opacity 50ms ease-in-out;
-  z-index: 1;
-  font-size: 12px;
-  background: ${color.slateLight};
-  border-radius: 2px;
-  padding: 1px 6px;
-
-  &:hover {
-    background: ${color.slate};
-  }
-`;
-
-export default CopyButton;

app/components/Editor/components/Heading.js

@@ -1,103 +0,0 @@
-// @flow
-import React from 'react';
-import { Document } from 'slate';
-import styled from 'styled-components';
-import headingToSlug from '../headingToSlug';
-import type { Node, Editor } from '../types';
-import Placeholder from './Placeholder';
-
-type Props = {
-  children: React$Element<*>,
-  placeholder?: boolean,
-  parent: Node,
-  node: Node,
-  editor: Editor,
-  readOnly: boolean,
-  component?: string,
-  attributes: Object,
-  className?: string,
-};
-
-function Heading(props: Props) {
-  const {
-    parent,
-    placeholder,
-    node,
-    editor,
-    readOnly,
-    children,
-    component = 'h1',
-    className,
-    attributes,
-  } = props;
-  const parentIsDocument = parent instanceof Document;
-  const firstHeading = parentIsDocument && parent.nodes.first() === node;
-  const showPlaceholder = placeholder && firstHeading && !node.text;
-  const slugish = headingToSlug(node);
-  const showHash = readOnly && !!slugish;
-  const Component = component;
-  const emoji = editor.props.emoji || '';
-  const title = node.text.trim();
-  const startsWithEmojiAndSpace =
-    emoji && title.match(new RegExp(`^${emoji}\\s`));
-
-  return (
-    <Component {...attributes} id={slugish} className={className}>
-      <Wrapper hasEmoji={startsWithEmojiAndSpace}>{children}</Wrapper>
-      {showPlaceholder && (
-        <Placeholder contentEditable={false}>
-          {editor.props.placeholder}
-        </Placeholder>
-      )}
-      {showHash && (
-        <Anchor name={slugish} href={`#${slugish}`}>
-          #
-        </Anchor>
-      )}
-    </Component>
-  );
-}
-
-const Wrapper = styled.div`
-  display: inline;
-  margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)};
-`;
-
-const Anchor = styled.a`
-  visibility: hidden;
-  padding-left: 0.25em;
-  color: #dedede;
-
-  &:hover {
-    color: #cdcdcd;
-  }
-`;
-
-export const StyledHeading = styled(Heading)`
-  position: relative;
-
-  &:hover {
-    ${Anchor} {
-      visibility: visible;
-      text-decoration: none;
-    }
-  }
-`;
-export const Heading1 = (props: Props) => (
-  <StyledHeading component="h1" {...props} />
-);
-export const Heading2 = (props: Props) => (
-  <StyledHeading component="h2" {...props} />
-);
-export const Heading3 = (props: Props) => (
-  <StyledHeading component="h3" {...props} />
-);
-export const Heading4 = (props: Props) => (
-  <StyledHeading component="h4" {...props} />
-);
-export const Heading5 = (props: Props) => (
-  <StyledHeading component="h5" {...props} />
-);
-export const Heading6 = (props: Props) => (
-  <StyledHeading component="h6" {...props} />
-);

app/components/Editor/components/HorizontalRule.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import type { Props } from '../types';
-import { color } from 'shared/styles/constants';
-
-function HorizontalRule(props: Props) {
-  const { state, node, attributes } = props;
-  const active = state.isFocused && state.selection.hasEdgeIn(node);
-  return <StyledHr active={active} {...attributes} />;
-}
-
-const StyledHr = styled.hr`
-  padding-top: 0.75em;
-  margin: 0;
-  border: 0;
-  border-bottom: 1px solid
-    ${props => (props.active ? color.slate : color.slateLight)};
-`;
-
-export default HorizontalRule;

app/components/Editor/components/Image.js

@@ -1,104 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import ImageZoom from 'react-medium-image-zoom';
-import styled from 'styled-components';
-import type { Props } from '../types';
-import { color } from 'shared/styles/constants';
-
-class Image extends Component {
-  props: Props;
-
-  handleChange = (ev: SyntheticInputEvent) => {
-    const alt = ev.target.value;
-    const { editor, node } = this.props;
-    const data = node.data.toObject();
-    const state = editor
-      .getState()
-      .transform()
-      .setNodeByKey(node.key, { data: { ...data, alt } })
-      .apply();
-
-    editor.onChange(state);
-  };
-
-  handleClick = (ev: SyntheticInputEvent) => {
-    ev.stopPropagation();
-  };
-
-  render() {
-    const { attributes, state, node, readOnly } = this.props;
-    const loading = node.data.get('loading');
-    const caption = node.data.get('alt');
-    const src = node.data.get('src');
-    const active = state.isFocused && state.selection.hasEdgeIn(node);
-    const showCaption = !readOnly || caption;
-
-    return (
-      <CenteredImage>
-        {!readOnly ? (
-          <StyledImg
-            {...attributes}
-            src={src}
-            alt={caption}
-            active={active}
-            loading={loading}
-          />
-        ) : (
-          <ImageZoom
-            image={{
-              src,
-              alt: caption,
-              style: {
-                maxWidth: '100%',
-              },
-              ...attributes,
-            }}
-            shouldRespectMaxDimension
-          />
-        )}
-        {showCaption && (
-          <Caption
-            type="text"
-            placeholder="Write a caption"
-            onChange={this.handleChange}
-            onClick={this.handleClick}
-            defaultValue={caption}
-            contentEditable={false}
-            disabled={readOnly}
-            tabIndex={-1}
-          />
-        )}
-      </CenteredImage>
-    );
-  }
-}
-
-const StyledImg = styled.img`
-  max-width: 100%;
-  box-shadow: ${props => (props.active ? `0 0 0 2px ${color.slate}` : '0')};
-  border-radius: ${props => (props.active ? `2px` : '0')};
-  opacity: ${props => (props.loading ? 0.5 : 1)};
-`;
-
-const CenteredImage = styled.div`
-  text-align: center;
-`;
-
-const Caption = styled.input`
-  border: 0;
-  display: block;
-  font-size: 13px;
-  font-style: italic;
-  color: ${color.slate};
-  padding: 2px 0;
-  line-height: 16px;
-  text-align: center;
-  width: 100%;
-  outline: none;
-
-  &::placeholder {
-    color: ${color.slate};
-  }
-`;
-
-export default Image;

app/components/Editor/components/InlineCode.js

@@ -1,12 +0,0 @@
-// @flow
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-
-const InlineCode = styled.code`
-  padding: 0.25em;
-  background: ${color.smoke};
-  border-radius: 4px;
-  border: 1px solid ${color.smokeDark};
-`;
-
-export default InlineCode;

app/components/Editor/components/Link.js

@@ -1,46 +0,0 @@
-// @flow
-import React from 'react';
-import { Link as InternalLink } from 'react-router-dom';
-import type { Props } from '../types';
-
-function getPathFromUrl(href: string) {
-  if (href[0] === '/') return href;
-
-  try {
-    const parsed = new URL(href);
-    return parsed.pathname;
-  } catch (err) {
-    return '';
-  }
-}
-
-function isOutlineUrl(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;
-  }
-}
-
-export default function Link({ attributes, node, children, readOnly }: Props) {
-  const href = node.data.get('href');
-  const path = getPathFromUrl(href);
-
-  if (isOutlineUrl(href) && readOnly) {
-    return (
-      <InternalLink {...attributes} to={path}>
-        {children}
-      </InternalLink>
-    );
-  } else {
-    return (
-      <a {...attributes} href={href} target="_blank">
-        {children}
-      </a>
-    );
-  }
-}

app/components/Editor/components/ListItem.js

@@ -1,27 +0,0 @@
-// @flow
-import React from 'react';
-import type { Props } from '../types';
-import TodoItem from './TodoItem';
-
-export default function ListItem({
-  children,
-  node,
-  attributes,
-  ...props
-}: Props) {
-  const checked = node.data.get('checked');
-
-  if (checked !== undefined) {
-    return (
-      <TodoItem
-        checked={checked}
-        node={node}
-        attributes={attributes}
-        {...props}
-      >
-        {children}
-      </TodoItem>
-    );
-  }
-  return <li {...attributes}>{children}</li>;
-}

app/components/Editor/components/Paragraph.js

@@ -1,35 +0,0 @@
-// @flow
-import React from 'react';
-import { Document } from 'slate';
-import type { Props } from '../types';
-import Placeholder from './Placeholder';
-
-export default function Link({
-  attributes,
-  editor,
-  node,
-  parent,
-  children,
-  readOnly,
-}: Props) {
-  const parentIsDocument = parent instanceof Document;
-  const firstParagraph = parent && parent.nodes.get(1) === node;
-  const lastParagraph = parent && parent.nodes.last() === node;
-  const showPlaceholder =
-    !readOnly &&
-    parentIsDocument &&
-    firstParagraph &&
-    lastParagraph &&
-    !node.text;
-
-  return (
-    <p {...attributes}>
-      {children}
-      {showPlaceholder && (
-        <Placeholder contentEditable={false}>
-          {editor.props.bodyPlaceholder}
-        </Placeholder>
-      )}
-    </p>
-  );
-}

app/components/Editor/components/Placeholder.js

@@ -1,11 +0,0 @@
-// @flow
-import styled from 'styled-components';
-
-export default styled.span`
-  position: absolute;
-  top: 0;
-  visibility: hidden;
-  pointer-events: none;
-  user-select: none;
-  color: #b1becc;
-`;

app/components/Editor/components/TodoItem.js

@@ -1,54 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import type { Props } from '../types';
-
-export default class TodoItem extends Component {
-  props: Props & { checked: boolean };
-
-  handleChange = (ev: SyntheticInputEvent) => {
-    const checked = ev.target.checked;
-    const { editor, node } = this.props;
-    const state = editor
-      .getState()
-      .transform()
-      .setNodeByKey(node.key, { data: { checked } })
-      .apply();
-
-    editor.onChange(state);
-  };
-
-  render() {
-    const { children, checked, attributes, readOnly } = this.props;
-
-    return (
-      <ListItem checked={checked} {...attributes}>
-        <Input
-          type="checkbox"
-          checked={checked}
-          onChange={this.handleChange}
-          disabled={readOnly}
-          contentEditable={false}
-        />
-        {children}
-      </ListItem>
-    );
-  }
-}
-
-const ListItem = styled.li`
-  padding-left: 1.4em;
-  position: relative;
-
-  > p > span {
-    color: ${props => (props.checked ? color.slateDark : 'inherit')};
-    text-decoration: ${props => (props.checked ? 'line-through' : 'none')};
-  }
-`;
-
-const Input = styled.input`
-  position: absolute;
-  left: 0;
-  top: 0.4em;
-`;

app/components/Editor/components/TodoList.js

@@ -1,13 +0,0 @@
-// @flow
-import styled from 'styled-components';
-
-const TodoList = styled.ul`
-  list-style: none;
-  padding: 0 !important;
-
-  ul {
-    padding-left: 1em;
-  }
-`;
-
-export default TodoList;

app/components/Editor/components/Toolbar/BlockToolbar.js

@@ -1,194 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import keydown from 'react-keydown';
-import styled from 'styled-components';
-import getDataTransferFiles from 'utils/getDataTransferFiles';
-import Heading1Icon from 'components/Icon/Heading1Icon';
-import Heading2Icon from 'components/Icon/Heading2Icon';
-import ImageIcon from 'components/Icon/ImageIcon';
-import CodeIcon from 'components/Icon/CodeIcon';
-import BulletedListIcon from 'components/Icon/BulletedListIcon';
-import OrderedListIcon from 'components/Icon/OrderedListIcon';
-import HorizontalRuleIcon from 'components/Icon/HorizontalRuleIcon';
-import TodoListIcon from 'components/Icon/TodoListIcon';
-import Flex from 'shared/components/Flex';
-import ToolbarButton from './components/ToolbarButton';
-import type { Props as BaseProps } from '../../types';
-import { color } from 'shared/styles/constants';
-import { fadeIn } from 'shared/styles/animations';
-import { splitAndInsertBlock } from '../../transforms';
-
-type Props = BaseProps & {
-  onInsertImage: Function,
-  onChange: Function,
-};
-
-type Options = {
-  type: string | Object,
-  wrapper?: string | Object,
-  append?: string | Object,
-};
-
-class BlockToolbar extends Component {
-  props: Props;
-  file: HTMLInputElement;
-
-  componentWillReceiveProps(nextProps: Props) {
-    const wasActive = this.props.state.selection.hasEdgeIn(this.props.node);
-    const isActive = nextProps.state.selection.hasEdgeIn(nextProps.node);
-    const becameInactive = !isActive && wasActive;
-
-    if (becameInactive) {
-      const state = nextProps.state
-        .transform()
-        .removeNodeByKey(nextProps.node.key)
-        .apply();
-      this.props.onChange(state);
-    }
-  }
-
-  @keydown('esc')
-  removeSelf(ev: SyntheticEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-
-    const state = this.props.state
-      .transform()
-      .removeNodeByKey(this.props.node.key)
-      .apply();
-    this.props.onChange(state);
-  }
-
-  insertBlock = (options: Options) => {
-    const { state } = this.props;
-    let transform = splitAndInsertBlock(state.transform(), state, options);
-
-    state.document.nodes.forEach(node => {
-      if (node.type === 'block-toolbar') {
-        transform.removeNodeByKey(node.key);
-      }
-    });
-
-    this.props.onChange(transform.focus().apply());
-  };
-
-  handleClickBlock = (ev: SyntheticEvent, type: string) => {
-    ev.preventDefault();
-
-    switch (type) {
-      case 'heading1':
-      case 'heading2':
-      case 'code':
-        return this.insertBlock({ type });
-      case 'horizontal-rule':
-        return this.insertBlock({
-          type: { type: 'horizontal-rule', isVoid: true },
-        });
-      case 'bulleted-list':
-        return this.insertBlock({
-          type: 'list-item',
-          wrapper: 'bulleted-list',
-        });
-      case 'ordered-list':
-        return this.insertBlock({
-          type: 'list-item',
-          wrapper: 'ordered-list',
-        });
-      case 'todo-list':
-        return this.insertBlock({
-          type: { type: 'list-item', data: { checked: false } },
-          wrapper: 'todo-list',
-        });
-      case 'image':
-        return this.onPickImage();
-      default:
-    }
-  };
-
-  onPickImage = () => {
-    // simulate a click on the file upload input element
-    this.file.click();
-  };
-
-  onImagePicked = async (ev: SyntheticEvent) => {
-    const files = getDataTransferFiles(ev);
-    for (const file of files) {
-      await this.props.onInsertImage(file);
-    }
-  };
-
-  renderBlockButton = (type: string, IconClass: Function) => {
-    return (
-      <ToolbarButton onMouseDown={ev => this.handleClickBlock(ev, type)}>
-        <IconClass color={color.text} />
-      </ToolbarButton>
-    );
-  };
-
-  render() {
-    const { state, attributes, node } = this.props;
-    const active = state.isFocused && state.selection.hasEdgeIn(node);
-
-    return (
-      <Bar active={active} {...attributes}>
-        <HiddenInput
-          type="file"
-          innerRef={ref => (this.file = ref)}
-          onChange={this.onImagePicked}
-          accept="image/*"
-        />
-        {this.renderBlockButton('heading1', Heading1Icon)}
-        {this.renderBlockButton('heading2', Heading2Icon)}
-        <Separator />
-        {this.renderBlockButton('bulleted-list', BulletedListIcon)}
-        {this.renderBlockButton('ordered-list', OrderedListIcon)}
-        {this.renderBlockButton('todo-list', TodoListIcon)}
-        <Separator />
-        {this.renderBlockButton('code', CodeIcon)}
-        {this.renderBlockButton('horizontal-rule', HorizontalRuleIcon)}
-        {this.renderBlockButton('image', ImageIcon)}
-      </Bar>
-    );
-  }
-}
-
-const Separator = styled.div`
-  height: 100%;
-  width: 1px;
-  background: ${color.smokeDark};
-  display: inline-block;
-  margin-left: 10px;
-`;
-
-const Bar = styled(Flex)`
-  z-index: 100;
-  animation: ${fadeIn} 150ms ease-in-out;
-  position: relative;
-  align-items: center;
-  background: ${color.smoke};
-  height: 44px;
-
-  &:before,
-  &:after {
-    content: '';
-    position: absolute;
-    left: -100%;
-    width: 100%;
-    height: 44px;
-    background: ${color.smoke};
-  }
-
-  &:after {
-    left: auto;
-    right: -100%;
-  }
-`;
-
-const HiddenInput = styled.input`
-  position: absolute;
-  top: -100px;
-  left: -100px;
-  visibility: hidden;
-`;
-
-export default BlockToolbar;

app/components/Editor/components/Toolbar/Toolbar.js

@@ -1,153 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { Portal } from 'react-portal';
-import styled from 'styled-components';
-import _ from 'lodash';
-import type { State } from '../../types';
-import FormattingToolbar from './components/FormattingToolbar';
-import LinkToolbar from './components/LinkToolbar';
-
-@observer
-export default class Toolbar extends Component {
-  @observable active: boolean = false;
-  @observable focused: boolean = false;
-  @observable link: ?React$Element<any>;
-  @observable top: string = '';
-  @observable left: string = '';
-
-  props: {
-    state: State,
-    onChange: (state: State) => void,
-  };
-
-  menu: HTMLElement;
-
-  componentDidMount = () => {
-    this.update();
-  };
-
-  componentDidUpdate = () => {
-    this.update();
-  };
-
-  handleFocus = () => {
-    this.focused = true;
-  };
-
-  handleBlur = () => {
-    this.focused = false;
-  };
-
-  get linkInSelection(): any {
-    const { state } = this.props;
-
-    try {
-      const selectedLinks = state.startBlock
-        .getInlinesAtRange(state.selection)
-        .filter(node => node.type === 'link');
-      if (selectedLinks.size) {
-        return selectedLinks.first();
-      }
-    } catch (err) {
-      //
-    }
-  }
-
-  update = () => {
-    const { state } = this.props;
-    const link = this.linkInSelection;
-
-    if (state.isBlurred || (state.isCollapsed && !link)) {
-      if (this.active && !this.focused) {
-        this.active = false;
-        this.link = undefined;
-        this.top = '';
-        this.left = '';
-      }
-      return;
-    }
-
-    // don't display toolbar for document title
-    const firstNode = state.document.nodes.first();
-    if (firstNode === state.startBlock) return;
-
-    // don't display toolbar for code blocks
-    if (state.startBlock.type === 'code') return;
-
-    this.active = true;
-    this.focused = !!link;
-    this.link = link;
-
-    const padding = 16;
-    const selection = window.getSelection();
-    const range = selection.getRangeAt(0);
-    const rect = range.getBoundingClientRect();
-
-    if (rect.top === 0 && rect.left === 0) {
-      return;
-    }
-
-    const left =
-      rect.left + window.scrollX - this.menu.offsetWidth / 2 + rect.width / 2;
-    this.top = `${Math.round(
-      rect.top + window.scrollY - this.menu.offsetHeight
-    )}px`;
-    this.left = `${Math.round(Math.max(padding, left))}px`;
-  };
-
-  setRef = (ref: HTMLElement) => {
-    this.menu = ref;
-  };
-
-  render() {
-    const style = {
-      top: this.top,
-      left: this.left,
-    };
-
-    return (
-      <Portal>
-        <Menu active={this.active} innerRef={this.setRef} style={style}>
-          {this.link ? (
-            <LinkToolbar
-              {...this.props}
-              link={this.link}
-              onBlur={this.handleBlur}
-            />
-          ) : (
-            <FormattingToolbar
-              onCreateLink={this.handleFocus}
-              {...this.props}
-            />
-          )}
-        </Menu>
-      </Portal>
-    );
-  }
-}
-
-const Menu = styled.div`
-  padding: 8px 16px;
-  position: absolute;
-  z-index: 2;
-  top: -10000px;
-  left: -10000px;
-  opacity: 0;
-  background-color: #2f3336;
-  border-radius: 4px;
-  transform: scale(0.95);
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
-    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  line-height: 0;
-  height: 40px;
-  min-width: 260px;
-
-  ${({ active }) =>
-    active &&
-    `
-    transform: translateY(-6px) scale(1);
-    opacity: 1;
-  `};
-`;

app/components/Editor/components/Toolbar/components/DocumentResult.js

@@ -1,49 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import { fontWeight, color } from 'shared/styles/constants';
-import Document from 'models/Document';
-import NextIcon from 'components/Icon/NextIcon';
-
-type Props = {
-  innerRef?: Function,
-  onClick: SyntheticEvent => void,
-  document: Document,
-};
-
-function DocumentResult({ document, ...rest }: Props) {
-  return (
-    <ListItem {...rest} href="">
-      <i>
-        <NextIcon light />
-      </i>
-      {document.title}
-    </ListItem>
-  );
-}
-
-const ListItem = styled.a`
-  display: flex;
-  align-items: center;
-  height: 24px;
-  padding: 4px 8px 4px 0;
-  color: ${color.white};
-  font-size: 15px;
-
-  i {
-    visibility: hidden;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    font-weight: ${fontWeight.medium};
-    outline: none;
-
-    i {
-      visibility: visible;
-    }
-  }
-`;
-
-export default DocumentResult;

app/components/Editor/components/Toolbar/components/FormattingToolbar.js

@@ -1,127 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import type { State } from '../../../types';
-import ToolbarButton from './ToolbarButton';
-import BoldIcon from 'components/Icon/BoldIcon';
-import CodeIcon from 'components/Icon/CodeIcon';
-import Heading1Icon from 'components/Icon/Heading1Icon';
-import Heading2Icon from 'components/Icon/Heading2Icon';
-import ItalicIcon from 'components/Icon/ItalicIcon';
-import LinkIcon from 'components/Icon/LinkIcon';
-import StrikethroughIcon from 'components/Icon/StrikethroughIcon';
-
-class FormattingToolbar extends Component {
-  props: {
-    state: State,
-    onChange: Function,
-    onCreateLink: Function,
-  };
-
-  /**
-   * Check if the current selection has a mark with `type` in it.
-   *
-   * @param {String} type
-   * @return {Boolean}
-   */
-  hasMark = (type: string) => {
-    return this.props.state.marks.some(mark => mark.type === type);
-  };
-
-  isBlock = (type: string) => {
-    return this.props.state.startBlock.type === type;
-  };
-
-  /**
-   * When a mark button is clicked, toggle the current mark.
-   *
-   * @param {Event} ev
-   * @param {String} type
-   */
-  onClickMark = (ev: SyntheticEvent, type: string) => {
-    ev.preventDefault();
-    let { state } = this.props;
-
-    state = state
-      .transform()
-      .toggleMark(type)
-      .apply();
-    this.props.onChange(state);
-  };
-
-  onClickBlock = (ev: SyntheticEvent, type: string) => {
-    ev.preventDefault();
-    let { state } = this.props;
-
-    state = state
-      .transform()
-      .setBlock(type)
-      .apply();
-    this.props.onChange(state);
-  };
-
-  onCreateLink = (ev: SyntheticEvent) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    let { state } = this.props;
-    const data = { href: '' };
-    state = state
-      .transform()
-      .wrapInline({ type: 'link', data })
-      .apply();
-    this.props.onChange(state);
-    this.props.onCreateLink();
-  };
-
-  renderMarkButton = (type: string, IconClass: Function) => {
-    const isActive = this.hasMark(type);
-    const onMouseDown = ev => this.onClickMark(ev, type);
-
-    return (
-      <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
-        <IconClass light />
-      </ToolbarButton>
-    );
-  };
-
-  renderBlockButton = (type: string, IconClass: Function) => {
-    const isActive = this.isBlock(type);
-    const onMouseDown = ev =>
-      this.onClickBlock(ev, isActive ? 'paragraph' : type);
-
-    return (
-      <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
-        <IconClass light />
-      </ToolbarButton>
-    );
-  };
-
-  render() {
-    return (
-      <span>
-        {this.renderMarkButton('bold', BoldIcon)}
-        {this.renderMarkButton('italic', ItalicIcon)}
-        {this.renderMarkButton('deleted', StrikethroughIcon)}
-        {this.renderMarkButton('code', CodeIcon)}
-        <Separator />
-        {this.renderBlockButton('heading1', Heading1Icon)}
-        {this.renderBlockButton('heading2', Heading2Icon)}
-        <Separator />
-        <ToolbarButton onMouseDown={this.onCreateLink}>
-          <LinkIcon light />
-        </ToolbarButton>
-      </span>
-    );
-  }
-}
-
-const Separator = styled.div`
-  height: 100%;
-  width: 1px;
-  background: #fff;
-  opacity: 0.2;
-  display: inline-block;
-  margin-left: 10px;
-`;
-
-export default FormattingToolbar;

app/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -1,216 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { observable, action } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { withRouter } from 'react-router-dom';
-import styled from 'styled-components';
-import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
-import ToolbarButton from './ToolbarButton';
-import DocumentResult from './DocumentResult';
-import type { State } from '../../../types';
-import DocumentsStore from 'stores/DocumentsStore';
-import keydown from 'react-keydown';
-import CloseIcon from 'components/Icon/CloseIcon';
-import OpenIcon from 'components/Icon/OpenIcon';
-import TrashIcon from 'components/Icon/TrashIcon';
-import Flex from 'shared/components/Flex';
-
-@keydown
-@observer
-class LinkToolbar extends Component {
-  input: HTMLElement;
-  firstDocument: HTMLElement;
-
-  props: {
-    state: State,
-    link: Object,
-    documents: DocumentsStore,
-    onBlur: () => void,
-    onChange: State => void,
-  };
-
-  @observable isEditing: boolean = false;
-  @observable isFetching: boolean = false;
-  @observable resultIds: string[] = [];
-  @observable searchTerm: ?string = null;
-
-  componentWillMount() {
-    this.isEditing = !!this.props.link.data.get('href');
-  }
-
-  @action
-  search = async () => {
-    this.isFetching = true;
-
-    if (this.searchTerm) {
-      try {
-        this.resultIds = await this.props.documents.search(this.searchTerm);
-      } catch (err) {
-        console.error(err);
-      }
-    } else {
-      this.resultIds = [];
-    }
-
-    this.isFetching = false;
-  };
-
-  selectDocument = (ev, document) => {
-    ev.preventDefault();
-    this.save(document.url);
-  };
-
-  onKeyDown = (ev: SyntheticKeyboardEvent & SyntheticInputEvent) => {
-    switch (ev.keyCode) {
-      case 13: // enter
-        ev.preventDefault();
-        return this.save(ev.target.value);
-      case 27: // escape
-        return this.input.blur();
-      case 40: // down
-        ev.preventDefault();
-        if (this.firstDocument) {
-          const element = ReactDOM.findDOMNode(this.firstDocument);
-          if (element instanceof HTMLElement) element.focus();
-        }
-        break;
-      default:
-    }
-  };
-
-  onChange = (ev: SyntheticKeyboardEvent & SyntheticInputEvent) => {
-    try {
-      new URL(ev.target.value);
-    } catch (err) {
-      // this is not a valid url, show search suggestions
-      this.searchTerm = ev.target.value;
-      this.search();
-      return;
-    }
-    this.resultIds = [];
-  };
-
-  onBlur = () => {
-    if (!this.resultIds.length) {
-      if (this.input.value) {
-        this.props.onBlur();
-      } else {
-        this.removeLink();
-      }
-    }
-  };
-
-  removeLink = () => {
-    this.save('');
-  };
-
-  openLink = () => {
-    const href = this.props.link.data.get('href');
-    window.open(href, '_blank');
-  };
-
-  save = (href: string) => {
-    href = href.trim();
-    const { state } = this.props;
-    const transform = state.transform();
-
-    if (href) {
-      transform.setInline({ type: 'link', data: { href } });
-    } else {
-      transform.unwrapInline('link');
-    }
-
-    this.props.onChange(transform.apply());
-    this.props.onBlur();
-  };
-
-  setFirstDocumentRef = ref => {
-    this.firstDocument = ref;
-  };
-
-  render() {
-    const href = this.props.link.data.get('href');
-    const hasResults = this.resultIds.length > 0;
-
-    return (
-      <span>
-        <LinkEditor>
-          <Input
-            innerRef={ref => (this.input = ref)}
-            defaultValue={href}
-            placeholder="Search or paste a link…"
-            onBlur={this.onBlur}
-            onKeyDown={this.onKeyDown}
-            onChange={this.onChange}
-            autoFocus
-          />
-          {this.isEditing && (
-            <ToolbarButton onMouseDown={this.openLink}>
-              <OpenIcon light />
-            </ToolbarButton>
-          )}
-          <ToolbarButton onMouseDown={this.removeLink}>
-            {this.isEditing ? <TrashIcon light /> : <CloseIcon light />}
-          </ToolbarButton>
-        </LinkEditor>
-        {hasResults && (
-          <SearchResults>
-            <ArrowKeyNavigation
-              mode={ArrowKeyNavigation.mode.VERTICAL}
-              defaultActiveChildIndex={0}
-            >
-              {this.resultIds.map((id, index) => {
-                const document = this.props.documents.getById(id);
-                if (!document) return null;
-
-                return (
-                  <DocumentResult
-                    innerRef={ref =>
-                      index === 0 && this.setFirstDocumentRef(ref)
-                    }
-                    document={document}
-                    key={document.id}
-                    onClick={ev => this.selectDocument(ev, document)}
-                  />
-                );
-              })}
-            </ArrowKeyNavigation>
-          </SearchResults>
-        )}
-      </span>
-    );
-  }
-}
-
-const SearchResults = styled.div`
-  background: #2f3336;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  height: auto;
-  left: 0;
-  padding: 8px;
-  margin-top: -3px;
-  margin-bottom: 0;
-  border-radius: 0 0 4px 4px;
-`;
-
-const LinkEditor = styled(Flex)`
-  margin-left: -8px;
-  margin-right: -8px;
-`;
-
-const Input = styled.input`
-  font-size: 15px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
-  padding: 4px 8px;
-  border: 0;
-  margin: 0;
-  outline: none;
-  color: #fff;
-  flex-grow: 1;
-`;
-
-export default withRouter(inject('documents')(LinkToolbar));

app/components/Editor/components/Toolbar/components/ToolbarButton.js

@@ -1,26 +0,0 @@
-// @flow
-import styled from 'styled-components';
-
-export default styled.button`
-  display: inline-block;
-  flex: 0;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  margin-left: 10px;
-  border: none;
-  background: none;
-  transition: opacity 100ms ease-in-out;
-  padding: 0;
-  opacity: 0.7;
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-
-  ${({ active }) => active && 'opacity: 1;'};
-`;

app/components/Editor/components/Toolbar/index.js

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