chore: Cleanup related unused methods in UiStore

.babelrc

@@ -9,7 +9,7 @@
           "version": "2",
           "proposals": true
         },
-        "useBuiltIns": "usage"
+        "useBuiltIns": "usage",
       }
     ]
   ],

.circleci/config.yml

@@ -29,15 +29,12 @@ jobs:
       - run:
           name: migrate
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
+      - run:
+          name: test
+          command: yarn 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
+          command: yarn flow check --max-workers 4

.eslintrc

@@ -97,8 +97,5 @@
   },
   "env": {
     "jest": true
-  },
-  "globals": {
-    "EDITOR_VERSION": true
   }
 }

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.46.0
+Licensed Work:        Outline 0.44.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
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2023-08-12
+Change Date:          2023-07-03
 
 Change License:       Apache License, Version 2.0
 

app/components/CenteredContent.js

@@ -9,7 +9,6 @@ type Props = {
 
 const Container = styled.div`
   width: 100%;
-  max-width: 100vw;
   padding: 60px 20px;
 
   ${breakpoint("tablet")`

app/components/DelayedMount.js

@@ -6,7 +6,7 @@ type Props = {
   children: React.Node,
 };
 
-export default function DelayedMount({ delay = 250, children }: Props) {
+export default function DelayedMount({ delay = 150, children }: Props) {
   const [isShowing, setShowing] = React.useState(false);
 
   React.useEffect(() => {

app/components/DocumentPreview/DocumentPreview.js

@@ -169,7 +169,6 @@ const DocumentLink = styled(Link)`
   border-radius: 8px;
   max-height: 50vh;
   min-width: 100%;
-  max-width: calc(100vw - 40px);
   overflow: hidden;
   position: relative;
 

app/components/DropdownMenu/DropdownMenu.js

@@ -232,7 +232,7 @@ const Label = styled(Flex).attrs({
   justify: "center",
   align: "center",
 })`
-  z-index: ${(props) => props.theme.depths.menu};
+  z-index: 1000;
   cursor: pointer;
 `;
 
@@ -244,7 +244,7 @@ const Position = styled.div`
   ${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
   ${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
   max-height: 75%;
-  z-index: ${(props) => props.theme.depths.menu};
+  z-index: 1000;
   transform: ${(props) =>
     props.position === "center" ? "translateX(-50%)" : "initial"};
   pointer-events: none;

app/components/Editor.js

@@ -2,16 +2,14 @@
 import { lighten } from "polished";
 import * as React from "react";
 import { withRouter, type RouterHistory } from "react-router-dom";
+import RichMarkdownEditor from "rich-markdown-editor";
 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 = {
@@ -24,7 +22,7 @@ type Props = {
 };
 
 type PropsWithRef = Props & {
-  forwardedRef: React.Ref<any>,
+  forwardedRef: React.Ref<RichMarkdownEditor>,
   history: RouterHistory,
 };
 
@@ -69,17 +67,15 @@ class Editor extends React.Component<PropsWithRef> {
 
   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>
+      <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}
+      />
     );
   }
 }

app/components/ErrorBoundary.js

@@ -12,7 +12,6 @@ import env from "env";
 
 type Props = {
   children: React.Node,
-  reloadOnChunkMissing?: boolean,
 };
 
 @observer
@@ -24,25 +23,13 @@ class ErrorBoundary extends React.Component<Props> {
     this.error = error;
     console.error(error);
 
-    if (
-      this.props.reloadOnChunkMissing &&
-      error.message &&
-      error.message.match(/chunk/)
-    ) {
-      // If the editor bundle fails to load then reload the entire window. This
-      // can happen if a deploy happens between the user loading the initial JS
-      // bundle and the async-loaded editor JS bundle as the hash will change.
-      window.location.reload(true);
-      return;
-    }
-
     if (window.Sentry) {
       window.Sentry.captureException(error);
     }
   }
 
   handleReload = () => {
-    window.location.reload(true);
+    window.location.reload();
   };
 
   handleShowDetails = () => {

app/components/FullscreenLoading.js

@@ -1,24 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import Empty from "components/Empty";
-import Fade from "components/Fade";
-import Flex from "components/Flex";
-
-export default function FullscreenLoading() {
-  return (
-    <Fade timing={500}>
-      <Centered>
-        <Empty>Loading…</Empty>
-      </Centered>
-    </Fade>
-  );
-}
-
-const Centered = styled(Flex)`
-  text-align: center;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;

app/components/Heading.js

@@ -4,7 +4,6 @@ import styled from "styled-components";
 const Heading = styled.h1`
   display: flex;
   align-items: center;
-  ${(props) => (props.centered ? "text-align: center;" : "")}
 
   svg {
     margin-left: -6px;

app/components/HoverPreview.js

@@ -5,7 +5,7 @@ import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import { fadeAndSlideIn } from "shared/styles/animations";
-import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentSlug";
+import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentIds";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
 import isInternalUrl from "utils/isInternalUrl";

app/components/HoverPreviewDocument.js

@@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentSlug";
+import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentIds";
 import DocumentsStore from "stores/DocumentsStore";
 import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
@@ -29,14 +29,12 @@ function HoverPreviewDocument({ url, documents, children }: Props) {
       <Heading>{document.titleWithDefault}</Heading>
       <DocumentMetaWithViews isDraft={document.isDraft} document={document} />
 
-      <React.Suspense fallback={<div />}>
-        <Editor
-          key={document.id}
-          defaultValue={document.getSummary()}
-          disableEmbeds
-          readOnly
-        />
-      </React.Suspense>
+      <Editor
+        key={document.id}
+        defaultValue={document.getSummary()}
+        disableEmbeds
+        readOnly
+      />
     </Content>
   );
 }

app/components/IconPicker.js

@@ -22,17 +22,13 @@ import {
   VehicleIcon,
 } from "outline-icons";
 import * as React from "react";
+import { TwitterPicker } from "react-color";
 import styled from "styled-components";
 import { DropdownMenu } from "components/DropdownMenu";
 import Flex from "components/Flex";
-import HelpText from "components/HelpText";
 import { LabelText } from "components/Input";
 import NudeButton from "components/NudeButton";
 
-const TwitterPicker = React.lazy(() =>
-  import("react-color/lib/components/twitter/Twitter")
-);
-
 export const icons = {
   collection: {
     component: CollectionIcon,
@@ -197,16 +193,14 @@ class IconPicker extends React.Component<Props> {
             })}
           </Icons>
           <Flex onClick={preventEventBubble}>
-            <React.Suspense fallback={<Loading>Loading…</Loading>}>
-              <ColorPicker
-                color={this.props.color}
-                onChange={(color) =>
-                  this.props.onChange(color.hex, this.props.icon)
-                }
-                colors={colors}
-                triangle="hide"
-              />
-            </React.Suspense>
+            <ColorPicker
+              color={this.props.color}
+              onChange={(color) =>
+                this.props.onChange(color.hex, this.props.icon)
+              }
+              colors={colors}
+              triangle="hide"
+            />
           </Flex>
         </DropdownMenu>
       </Wrapper>
@@ -232,10 +226,6 @@ const IconButton = styled(NudeButton)`
   height: 30px;
 `;
 
-const Loading = styled(HelpText)`
-  padding: 16px;
-`;
-
 const ColorPicker = styled(TwitterPicker)`
   box-shadow: none !important;
   background: transparent !important;

app/components/InputRich.js

@@ -4,8 +4,6 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import styled, { withTheme } from "styled-components";
 import UiStore from "stores/UiStore";
-import Editor from "components/Editor";
-import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";
 
 type Props = {
@@ -21,6 +19,10 @@ class InputRich extends React.Component<Props> {
   @observable editorComponent: React.ComponentType<any>;
   @observable focused: boolean = false;
 
+  componentDidMount() {
+    this.loadEditor();
+  }
+
   handleBlur = () => {
     this.focused = false;
   };
@@ -29,18 +31,36 @@ class InputRich extends React.Component<Props> {
     this.focused = true;
   };
 
+  loadEditor = async () => {
+    try {
+      const EditorImport = await import("./Editor");
+      this.editorComponent = EditorImport.default;
+    } catch (err) {
+      if (err.message && err.message.match(/chunk/)) {
+        // If the editor bundle fails to load then reload the entire window. This
+        // can happen if a deploy happens between the user loading the initial JS
+        // bundle and the async-loaded editor JS bundle as the hash will change.
+        window.location.reload();
+        return;
+      }
+      throw err;
+    }
+  };
+
   render() {
     const { label, minHeight, maxHeight, ui, ...rest } = this.props;
+    const Editor = this.editorComponent;
 
     return (
       <>
         <LabelText>{label}</LabelText>
+
         <StyledOutline
           maxHeight={maxHeight}
           minHeight={minHeight}
           focused={this.focused}
         >
-          <React.Suspense fallback={<HelpText>Loading editor…</HelpText>}>
+          {Editor ? (
             <Editor
               onBlur={this.handleBlur}
               onFocus={this.handleFocus}
@@ -48,7 +68,9 @@ class InputRich extends React.Component<Props> {
               grow
               {...rest}
             />
-          </React.Suspense>
+          ) : (
+            "Loading…"
+          )}
         </StyledOutline>
       </>
     );

app/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -18,7 +18,7 @@ const loadingFrame = keyframes`
 const Container = styled.div`
   position: fixed;
   top: 0;
-  z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
+  z-index: 9999;
 
   background-color: #03a9f4;
   width: 100%;

app/components/Modal.js

@@ -23,7 +23,7 @@ const GlobalStyles = createGlobalStyle`
   .ReactModal__Overlay {
     background-color: ${(props) =>
       transparentize(0.25, props.theme.background)} !important;
-    z-index: ${(props) => props.theme.depths.modalOverlay};
+    z-index: 100;
   }
 
   ${breakpoint("tablet")`
@@ -103,7 +103,7 @@ const StyledModal = styled(ReactModal)`
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: ${(props) => props.theme.depths.modal};
+  z-index: 100;
   display: flex;
   justify-content: center;
   align-items: flex-start;

app/components/Popover.js

@@ -22,7 +22,7 @@ const StyledPopover = styled(BoundlessPopover)`
   position: absolute;
   top: 0;
   left: 0;
-  z-index: ${(props) => props.theme.depths.popover};
+  z-index: 9999;
 
   svg {
     height: 16px;

app/components/Sidebar/Settings.js

@@ -40,7 +40,7 @@ type Props = {
 @observer
 class SettingsSidebar extends React.Component<Props> {
   returnToDashboard = () => {
-    this.props.history.push("/home");
+    this.props.history.push("/");
   };
 
   render() {

app/components/Sidebar/Sidebar.js

@@ -71,7 +71,7 @@ const Container = styled(Flex)`
   transition: left 100ms ease-out,
     ${(props) => props.theme.backgroundTransition};
   margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
-  z-index: ${(props) => props.theme.depths.sidebar};
+  z-index: 1000;
 
   @media print {
     display: none;

app/components/Sidebar/components/HeaderBlock.js

@@ -1,15 +1,16 @@
 // @flow
 import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
-import styled from "styled-components";
+import styled, { withTheme } from "styled-components";
 import Flex from "components/Flex";
 import TeamLogo from "components/TeamLogo";
 
 type Props = {
   teamName: string,
-  subheading: React.Node,
+  subheading: string,
   showDisclosure?: boolean,
   logoUrl: string,
+  theme: Object,
 };
 
 function HeaderBlock({
@@ -17,6 +18,7 @@ function HeaderBlock({
   teamName,
   subheading,
   logoUrl,
+  theme,
   ...rest
 }: Props) {
   return (
@@ -25,7 +27,7 @@ function HeaderBlock({
       <Flex align="flex-start" column>
         <TeamName showDisclosure>
           {teamName}{" "}
-          {showDisclosure && <StyledExpandedIcon color="currentColor" />}
+          {showDisclosure && <StyledExpandedIcon color={theme.text} />}
         </TeamName>
         <Subheading>{subheading}</Subheading>
       </Flex>
@@ -71,4 +73,4 @@ const Header = styled(Flex)`
   }
 `;
 
-export default HeaderBlock;
+export default withTheme(HeaderBlock);

app/components/SocketProvider.js

@@ -3,7 +3,7 @@ import { find } from "lodash";
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import * as React from "react";
-import io, { Socket } from "socket.io-client";
+import io from "socket.io-client";
 import AuthStore from "stores/AuthStore";
 import CollectionsStore from "stores/CollectionsStore";
 import DocumentPresenceStore from "stores/DocumentPresenceStore";
@@ -13,7 +13,6 @@ import MembershipsStore from "stores/MembershipsStore";
 import PoliciesStore from "stores/PoliciesStore";
 import UiStore from "stores/UiStore";
 import ViewsStore from "stores/ViewsStore";
-import { getVisibilityListener, getPageVisible } from "utils/pageVisibility";
 
 export const SocketContext: any = React.createContext();
 
@@ -32,42 +31,12 @@ type Props = {
 
 @observer
 class SocketProvider extends React.Component<Props> {
-  @observable socket: Socket;
+  @observable socket;
 
   componentDidMount() {
-    this.createConnection();
-
-    document.addEventListener(getVisibilityListener(), this.checkConnection);
-  }
-
-  componentWillUnmount() {
-    if (this.socket) {
-      this.socket.authenticated = false;
-      this.socket.disconnect();
-    }
-
-    document.removeEventListener(getVisibilityListener(), this.checkConnection);
-  }
-
-  checkConnection = () => {
-    if (this.socket && this.socket.disconnected && getPageVisible()) {
-      // null-ifying this reference is important, do not remove. Without it
-      // references to old sockets are potentially held in context
-      this.socket.close();
-      this.socket = null;
-
-      this.createConnection();
-    }
-  };
-
-  createConnection = () => {
     this.socket = io(window.location.origin, {
       path: "/realtime",
-      transports: ["websocket"],
-      reconnectionDelay: 1000,
-      reconnectionDelayMax: 30000,
     });
-
     this.socket.authenticated = false;
 
     const {
@@ -96,12 +65,12 @@ class SocketProvider extends React.Component<Props> {
       // when the socket is disconnected we need to clear all presence state as
       // it's no longer reliable.
       presence.clear();
-    });
 
-    // on reconnection, reset the transports option, as the Websocket
-    // connection may have failed (caused by proxy, firewall, browser, ...)
-    this.socket.on("reconnect_attempt", () => {
-      this.socket.io.opts.transports = ["polling", "websocket"];
+      if (reason === "io server disconnect") {
+        // the disconnection was initiated by the server, need to reconnect
+        // manually, else the socket will automatically try to reconnect
+        this.socket.connect();
+      }
     });
 
     this.socket.on("authenticated", () => {
@@ -291,7 +260,14 @@ class SocketProvider extends React.Component<Props> {
     this.socket.on("user.presence", (event) => {
       presence.touch(event.documentId, event.userId, event.isEditing);
     });
-  };
+  }
+
+  componentWillUnmount() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket.authenticated = false;
+    }
+  }
 
   render() {
     return (

app/components/Tabs.js

@@ -6,8 +6,6 @@ const Tabs = styled.nav`
   border-bottom: 1px solid ${(props) => props.theme.divider};
   margin-top: 22px;
   margin-bottom: 12px;
-  overflow-y: auto;
-  white-space: nowrap;
 `;
 
 export const Separator = styled.span`

app/components/Toasts/Toasts.js

@@ -34,7 +34,7 @@ const List = styled.ol`
   list-style: none;
   margin: 0;
   padding: 0;
-  z-index: ${(props) => props.theme.depths.toasts};
+  z-index: 1000;
 `;
 
 export default inject("ui")(Toasts);

app/models/Collection.js

@@ -16,6 +16,7 @@ export default class Collection extends BaseModel {
   icon: string;
   color: string;
   private: boolean;
+  type: "atlas" | "journal";
   documents: NavigationNode[];
   createdAt: ?string;
   updatedAt: ?string;

app/routes.js

@@ -0,0 +1,121 @@
+// @flow
+import * as React from "react";
+import { Switch, Route, Redirect, type Match } from "react-router-dom";
+import Archive from "scenes/Archive";
+import Collection from "scenes/Collection";
+import Dashboard from "scenes/Dashboard";
+import KeyedDocument from "scenes/Document/KeyedDocument";
+import DocumentNew from "scenes/DocumentNew";
+import Drafts from "scenes/Drafts";
+import Error404 from "scenes/Error404";
+import Login from "scenes/Login";
+import Search from "scenes/Search";
+import Settings from "scenes/Settings";
+import Details from "scenes/Settings/Details";
+import Events from "scenes/Settings/Events";
+import Export from "scenes/Settings/Export";
+import Groups from "scenes/Settings/Groups";
+import Notifications from "scenes/Settings/Notifications";
+import People from "scenes/Settings/People";
+import Security from "scenes/Settings/Security";
+import Shares from "scenes/Settings/Shares";
+import Slack from "scenes/Settings/Slack";
+import Tokens from "scenes/Settings/Tokens";
+import Zapier from "scenes/Settings/Zapier";
+import Starred from "scenes/Starred";
+import Templates from "scenes/Templates";
+import Trash from "scenes/Trash";
+
+import Authenticated from "components/Authenticated";
+import Layout from "components/Layout";
+import SocketProvider from "components/SocketProvider";
+import { matchDocumentSlug as slug } from "utils/routeHelpers";
+
+const NotFound = () => <Search notFound />;
+const RedirectDocument = ({ match }: { match: Match }) => (
+  <Redirect
+    to={
+      match.params.documentSlug ? `/doc/${match.params.documentSlug}` : "/home"
+    }
+  />
+);
+
+export default function Routes() {
+  return (
+    <Switch>
+      <Route exact path="/" component={Login} />
+      <Route exact path="/create" component={Login} />
+      <Route exact path="/share/:shareId" component={KeyedDocument} />
+      <Authenticated>
+        <SocketProvider>
+          <Layout>
+            <Switch>
+              <Redirect from="/dashboard" to="/home" />
+              <Route path="/home/:tab" component={Dashboard} />
+              <Route path="/home" component={Dashboard} />
+              <Route exact path="/starred" component={Starred} />
+              <Route exact path="/starred/:sort" component={Starred} />
+              <Route exact path="/templates" component={Templates} />
+              <Route exact path="/templates/:sort" component={Templates} />
+              <Route exact path="/drafts" component={Drafts} />
+              <Route exact path="/archive" component={Archive} />
+              <Route exact path="/trash" component={Trash} />
+              <Route exact path="/settings" component={Settings} />
+              <Route exact path="/settings/details" component={Details} />
+              <Route exact path="/settings/security" component={Security} />
+              <Route exact path="/settings/people" component={People} />
+              <Route exact path="/settings/people/:filter" component={People} />
+              <Route exact path="/settings/groups" component={Groups} />
+              <Route exact path="/settings/shares" component={Shares} />
+              <Route exact path="/settings/tokens" component={Tokens} />
+              <Route exact path="/settings/events" component={Events} />
+              <Route
+                exact
+                path="/settings/notifications"
+                component={Notifications}
+              />
+              <Route
+                exact
+                path="/settings/integrations/slack"
+                component={Slack}
+              />
+              <Route
+                exact
+                path="/settings/integrations/zapier"
+                component={Zapier}
+              />
+              <Route exact path="/settings/export" component={Export} />
+              <Route
+                exact
+                path="/collections/:id/new"
+                component={DocumentNew}
+              />
+              <Route
+                exact
+                path="/collections/:id/:tab"
+                component={Collection}
+              />
+              <Route exact path="/collections/:id" component={Collection} />
+              <Route exact path={`/d/${slug}`} component={RedirectDocument} />
+              <Route
+                exact
+                path={`/doc/${slug}/history/:revisionId?`}
+                component={KeyedDocument}
+              />
+              <Route
+                exact
+                path={`/doc/${slug}/edit`}
+                component={KeyedDocument}
+              />
+              <Route path={`/doc/${slug}`} component={KeyedDocument} />
+              <Route exact path="/search" component={Search} />
+              <Route exact path="/search/:term" component={Search} />
+              <Route path="/404" component={Error404} />
+              <Route component={NotFound} />
+            </Switch>
+          </Layout>
+        </SocketProvider>
+      </Authenticated>
+    </Switch>
+  );
+}

app/routes/authenticated.js

@@ -1,76 +0,0 @@
-// @flow
-import * as React from "react";
-import { Switch, Route, Redirect, type Match } from "react-router-dom";
-import Archive from "scenes/Archive";
-import Collection from "scenes/Collection";
-import Dashboard from "scenes/Dashboard";
-import KeyedDocument from "scenes/Document/KeyedDocument";
-import DocumentNew from "scenes/DocumentNew";
-import Drafts from "scenes/Drafts";
-import Error404 from "scenes/Error404";
-import Search from "scenes/Search";
-import Starred from "scenes/Starred";
-import Templates from "scenes/Templates";
-import Trash from "scenes/Trash";
-
-import CenteredContent from "components/CenteredContent";
-import Layout from "components/Layout";
-import LoadingPlaceholder from "components/LoadingPlaceholder";
-import SocketProvider from "components/SocketProvider";
-import { matchDocumentSlug as slug } from "utils/routeHelpers";
-
-const SettingsRoutes = React.lazy(() => import("./settings"));
-
-const NotFound = () => <Search notFound />;
-const RedirectDocument = ({ match }: { match: Match }) => (
-  <Redirect
-    to={
-      match.params.documentSlug ? `/doc/${match.params.documentSlug}` : "/home"
-    }
-  />
-);
-
-export default function AuthenticatedRoutes() {
-  return (
-    <SocketProvider>
-      <Layout>
-        <Switch>
-          <Redirect from="/dashboard" to="/home" />
-          <Route path="/home/:tab" component={Dashboard} />
-          <Route path="/home" component={Dashboard} />
-          <Route exact path="/starred" component={Starred} />
-          <Route exact path="/starred/:sort" component={Starred} />
-          <Route exact path="/templates" component={Templates} />
-          <Route exact path="/templates/:sort" component={Templates} />
-          <Route exact path="/drafts" component={Drafts} />
-          <Route exact path="/archive" component={Archive} />
-          <Route exact path="/trash" component={Trash} />
-          <Route exact path="/collections/:id/new" component={DocumentNew} />
-          <Route exact path="/collections/:id/:tab" component={Collection} />
-          <Route exact path="/collections/:id" component={Collection} />
-          <Route exact path={`/d/${slug}`} component={RedirectDocument} />
-          <Route
-            exact
-            path={`/doc/${slug}/history/:revisionId?`}
-            component={KeyedDocument}
-          />
-          <Route exact path={`/doc/${slug}/edit`} component={KeyedDocument} />
-          <Route path={`/doc/${slug}`} component={KeyedDocument} />
-          <Route exact path="/search" component={Search} />
-          <Route exact path="/search/:term" component={Search} />
-          <Route path="/404" component={Error404} />
-          <React.Suspense
-            fallback={
-              <CenteredContent>
-                <LoadingPlaceholder />
-              </CenteredContent>
-            }
-          >
-            <SettingsRoutes />
-          </React.Suspense>
-          <Route component={NotFound} />
-        </Switch>
-      </Layout>
-    </SocketProvider>
-  );
-}

app/routes/index.js

@@ -1,31 +0,0 @@
-// @flow
-import * as React from "react";
-import { Switch, Route } from "react-router-dom";
-import DelayedMount from "components/DelayedMount";
-import FullscreenLoading from "components/FullscreenLoading";
-
-const Authenticated = React.lazy(() => import("components/Authenticated"));
-const AuthenticatedRoutes = React.lazy(() => import("./authenticated"));
-const KeyedDocument = React.lazy(() => import("scenes/Document/KeyedDocument"));
-const Login = React.lazy(() => import("scenes/Login"));
-
-export default function Routes() {
-  return (
-    <React.Suspense
-      fallback={
-        <DelayedMount delay={2000}>
-          <FullscreenLoading />
-        </DelayedMount>
-      }
-    >
-      <Switch>
-        <Route exact path="/" component={Login} />
-        <Route exact path="/create" component={Login} />
-        <Route exact path="/share/:shareId" component={KeyedDocument} />
-        <Authenticated>
-          <AuthenticatedRoutes />
-        </Authenticated>
-      </Switch>
-    </React.Suspense>
-  );
-}

app/routes/settings.js

@@ -1,35 +0,0 @@
-// @flow
-import * as React from "react";
-import { Switch, Route } from "react-router-dom";
-import Settings from "scenes/Settings";
-import Details from "scenes/Settings/Details";
-import Events from "scenes/Settings/Events";
-import Export from "scenes/Settings/Export";
-import Groups from "scenes/Settings/Groups";
-import Notifications from "scenes/Settings/Notifications";
-import People from "scenes/Settings/People";
-import Security from "scenes/Settings/Security";
-import Shares from "scenes/Settings/Shares";
-import Slack from "scenes/Settings/Slack";
-import Tokens from "scenes/Settings/Tokens";
-import Zapier from "scenes/Settings/Zapier";
-
-export default function SettingsRoutes() {
-  return (
-    <Switch>
-      <Route exact path="/settings" component={Settings} />
-      <Route exact path="/settings/details" component={Details} />
-      <Route exact path="/settings/security" component={Security} />
-      <Route exact path="/settings/people" component={People} />
-      <Route exact path="/settings/people/:filter" component={People} />
-      <Route exact path="/settings/groups" component={Groups} />
-      <Route exact path="/settings/shares" component={Shares} />
-      <Route exact path="/settings/tokens" component={Tokens} />
-      <Route exact path="/settings/events" component={Events} />
-      <Route exact path="/settings/notifications" component={Notifications} />
-      <Route exact path="/settings/integrations/slack" component={Slack} />
-      <Route exact path="/settings/integrations/zapier" component={Zapier} />
-      <Route exact path="/settings/export" component={Export} />
-    </Switch>
-  );
-}

app/scenes/Collection.js

@@ -5,6 +5,7 @@ import { observer, inject } from "mobx-react";
 import { NewDocumentIcon, PlusIcon, PinIcon } from "outline-icons";
 import * as React from "react";
 import { Redirect, Link, Switch, Route, type Match } from "react-router-dom";
+import RichMarkdownEditor from "rich-markdown-editor";
 import styled, { withTheme } from "styled-components";
 
 import CollectionsStore from "stores/CollectionsStore";
@@ -21,7 +22,6 @@ import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
 import CollectionIcon from "components/CollectionIcon";
 import DocumentList from "components/DocumentList";
-import Editor from "components/Editor";
 import Flex from "components/Flex";
 import Heading from "components/Heading";
 import HelpText from "components/HelpText";
@@ -218,14 +218,13 @@ class CollectionScene extends React.Component<Props> {
                 </Heading>
 
                 {collection.description && (
-                  <React.Suspense fallback={<p>Loading…</p>}>
-                    <Editor
-                      id={collection.id}
-                      key={collection.description}
-                      defaultValue={collection.description}
-                      readOnly
-                    />
-                  </React.Suspense>
+                  <RichMarkdownEditor
+                    id={collection.id}
+                    key={collection.description}
+                    defaultValue={collection.description}
+                    theme={theme}
+                    readOnly
+                  />
                 )}
 
                 {hasPinnedDocuments && (

app/scenes/Document/components/DataLoader.js

@@ -64,6 +64,12 @@ class DataLoader extends React.Component<Props> {
     }
   }
 
+  goToDocumentCanonical = () => {
+    if (this.document) {
+      this.props.history.push(this.document.url);
+    }
+  };
+
   get isEditing() {
     return this.props.match.path === matchDocumentEdit;
   }
@@ -119,28 +125,17 @@ class DataLoader extends React.Component<Props> {
     const document = this.document;
 
     if (document) {
-      const can = this.props.policies.abilities(document.id);
-
-      // sets the document as active in the sidebar, ideally in the future this
-      // will be route driven.
       this.props.ui.setActiveDocument(document);
 
-      // If we're attempting to update an archived, deleted, or otherwise
-      // uneditable document then forward to the canonical read url.
-      if (!can.update && this.isEditing) {
-        this.props.history.push(document.url);
-        return;
+      if (document.isArchived && this.isEditing) {
+        return this.goToDocumentCanonical();
       }
 
-      // Prevents unauthorized request to load share information for the document
-      // when viewing a public share link
-      if (can.read) {
-        this.props.shares.fetch(document.id).catch((err) => {
-          if (!(err instanceof NotFoundError)) {
-            throw err;
-          }
-        });
-      }
+      this.props.shares.fetch(document.id).catch((err) => {
+        if (!(err instanceof NotFoundError)) {
+          throw err;
+        }
+      });
 
       const isMove = this.props.location.pathname.match(/move$/);
       const canRedirect = !revisionId && !isMove && !shareId;

app/scenes/Document/components/Document.js

@@ -24,9 +24,9 @@ import Time from "components/Time";
 import Container from "./Container";
 import Contents from "./Contents";
 import DocumentMove from "./DocumentMove";
-import Editor from "./Editor";
 import Header from "./Header";
 import KeyboardShortcutsButton from "./KeyboardShortcutsButton";
+import Loading from "./Loading";
 import MarkAsViewed from "./MarkAsViewed";
 import References from "./References";
 import { type LocationWithState } from "types";
@@ -39,6 +39,7 @@ import {
   documentUrl,
 } from "utils/routeHelpers";
 
+let EditorImport;
 const AUTOSAVE_DELAY = 3000;
 const IS_DIRTY_DELAY = 500;
 const DISCARD_CHANGES = `
@@ -68,6 +69,7 @@ type Props = {
 @observer
 class DocumentScene extends React.Component<Props> {
   @observable editor: ?any;
+  @observable editorComponent = EditorImport;
   @observable isUploading: boolean = false;
   @observable isSaving: boolean = false;
   @observable isPublishing: boolean = false;
@@ -82,6 +84,7 @@ class DocumentScene extends React.Component<Props> {
     super();
     this.title = props.document.title;
     this.lastRevision = props.document.revision;
+    this.loadEditor();
   }
 
   componentDidMount() {
@@ -194,6 +197,25 @@ class DocumentScene extends React.Component<Props> {
     }
   }
 
+  loadEditor = async () => {
+    if (this.editorComponent) return;
+
+    try {
+      const EditorImport = await import("./Editor");
+      this.editorComponent = EditorImport.default;
+    } catch (err) {
+      if (err.message && err.message.match(/chunk/)) {
+        // If the editor bundle fails to load then reload the entire window. This
+        // can happen if a deploy happens between the user loading the initial JS
+        // bundle and the async-loaded editor JS bundle as the hash will change.
+        window.location.reload();
+        return;
+      }
+
+      throw err;
+    }
+  };
+
   handleCloseMoveModal = () => (this.moveModalOpen = false);
   handleOpenMoveModal = () => (this.moveModalOpen = true);
 
@@ -316,14 +338,20 @@ class DocumentScene extends React.Component<Props> {
       document,
       revision,
       readOnly,
+      location,
       abilities,
       auth,
       ui,
       match,
     } = this.props;
     const team = auth.team;
+    const Editor = this.editorComponent;
     const isShare = !!match.params.shareId;
 
+    if (!Editor) {
+      return <Loading location={location} />;
+    }
+
     const value = revision ? revision.text : document.text;
     const injectTemplate = document.injectTemplate;
     const disableEmbeds =

app/scenes/Document/components/Editor.js

@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import Textarea from "react-autosize-textarea";
+import RichMarkdownEditor from "rich-markdown-editor";
 import styled from "styled-components";
 import parseTitle from "shared/utils/parseTitle";
 import Document from "models/Document";
@@ -11,7 +12,6 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
-import LoadingPlaceholder from "components/LoadingPlaceholder";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {
@@ -27,7 +27,7 @@ type Props = {
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
-  editor = React.createRef<any>();
+  editor = React.createRef<RichMarkdownEditor>();
 
   focusAtStart = () => {
     if (this.editor.current) {
@@ -78,43 +78,39 @@ class DocumentEditor extends React.Component<Props> {
 
     return (
       <Flex auto column>
-        <React.Suspense fallback={<LoadingPlaceholder />}>
-          <Title
-            type="text"
-            onChange={onChangeTitle}
-            onKeyDown={this.handleTitleKeyDown}
-            placeholder={document.placeholder}
-            value={!title && readOnly ? document.titleWithDefault : title}
-            style={
-              startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined
-            }
-            readOnly={readOnly}
-            autoFocus={!title}
-            maxLength={100}
+        <Title
+          type="text"
+          onChange={onChangeTitle}
+          onKeyDown={this.handleTitleKeyDown}
+          placeholder={document.placeholder}
+          value={!title && readOnly ? document.titleWithDefault : title}
+          style={startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined}
+          readOnly={readOnly}
+          autoFocus={!title}
+          maxLength={100}
+        />
+        <DocumentMetaWithViews
+          isDraft={isDraft}
+          document={document}
+          to={documentHistoryUrl(document)}
+        />
+        <Editor
+          ref={this.editor}
+          autoFocus={title && !this.props.defaultValue}
+          placeholder="…the rest is up to you"
+          onHoverLink={this.handleLinkActive}
+          scrollTo={window.location.hash}
+          grow
+          {...this.props}
+        />
+        {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
+        {this.activeLinkEvent && !isShare && readOnly && (
+          <HoverPreview
+            node={this.activeLinkEvent.target}
+            event={this.activeLinkEvent}
+            onClose={this.handleLinkInactive}
           />
-          <DocumentMetaWithViews
-            isDraft={isDraft}
-            document={document}
-            to={documentHistoryUrl(document)}
-          />
-          <Editor
-            ref={this.editor}
-            autoFocus={title && !this.props.defaultValue}
-            placeholder="…the rest is up to you"
-            onHoverLink={this.handleLinkActive}
-            scrollTo={window.location.hash}
-            grow
-            {...this.props}
-          />
-          {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
-          {this.activeLinkEvent && !isShare && readOnly && (
-            <HoverPreview
-              node={this.activeLinkEvent.target}
-              event={this.activeLinkEvent}
-              onClose={this.handleLinkInactive}
-            />
-          )}
-        </React.Suspense>
+        )}
       </Flex>
     );
   }

app/scenes/Document/components/SocketPresence.js

@@ -41,7 +41,7 @@ export default class SocketPresence extends React.Component<Props> {
   }
 
   setupOnce = () => {
-    if (this.context && this.context !== this.previousContext) {
+    if (this.context && !this.previousContext) {
       this.previousContext = this.context;
 
       if (this.context.authenticated) {

app/scenes/Login/index.js

@@ -82,7 +82,7 @@ class Login extends React.Component<Props, State> {
             <PageTitle title="Check your email" />
             <CheckEmailIcon size={38} color="currentColor" />
 
-            <Heading centered>Check your email</Heading>
+            <Heading>Check your email</Heading>
             <Note>
               A magic sign-in link has been sent to the email{" "}
               <em>{this.state.emailLinkSentTo}</em>, no password needed.
@@ -110,9 +110,9 @@ class Login extends React.Component<Props, State> {
           </Logo>
 
           {isCreate ? (
-            <Heading centered>Create an account</Heading>
+            <Heading>Create an account</Heading>
           ) : (
-            <Heading centered>Login to {config.name || "Outline"}</Heading>
+            <Heading>Login to {config.name || "Outline"}</Heading>
           )}
 
           <Notices notice={getQueryVariable("notice")} />

app/scenes/Search/Search.js

@@ -12,7 +12,6 @@ import { withRouter, Link } from "react-router-dom";
 import type { RouterHistory, Match } from "react-router-dom";
 import { Waypoint } from "react-waypoint";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DocumentsStore from "stores/DocumentsStore";
@@ -388,12 +387,6 @@ const Filters = styled(Flex)`
   margin-bottom: 12px;
   opacity: 0.85;
   transition: opacity 100ms ease-in-out;
-  overflow-y: auto;
-  padding: 8px 0;
-
-  ${breakpoint("tablet")`	
-    padding: 0;
-  `};
 
   &:hover {
     opacity: 1;

app/stores/UiStore.js

@@ -32,18 +32,16 @@ class UiStore {
     }
 
     // system theme listeners
-    if (window.matchMedia) {
-      const colorSchemeQueryList = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      );
+    const colorSchemeQueryList = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
 
-      const setSystemTheme = (event) => {
-        this.systemTheme = event.matches ? "dark" : "light";
-      };
-      setSystemTheme(colorSchemeQueryList);
-      if (colorSchemeQueryList.addListener) {
-        colorSchemeQueryList.addListener(setSystemTheme);
-      }
+    const setSystemTheme = (event) => {
+      this.systemTheme = event.matches ? "dark" : "light";
+    };
+    setSystemTheme(colorSchemeQueryList);
+    if (colorSchemeQueryList.addListener) {
+      colorSchemeQueryList.addListener(setSystemTheme);
     }
 
     // persisted keys

app/utils/ApiClient.js

@@ -1,6 +1,7 @@
 // @flow
 import invariant from "invariant";
 import { map, trim } from "lodash";
+import pkg from "rich-markdown-editor/package.json";
 import stores from "stores";
 import download from "./download";
 import {
@@ -56,7 +57,7 @@ class ApiClient {
       Accept: "application/json",
       "Content-Type": "application/json",
       "cache-control": "no-cache",
-      "x-editor-version": EDITOR_VERSION,
+      "x-editor-version": pkg.version,
       pragma: "no-cache",
     });
     if (stores.auth.authenticated) {

app/utils/pageVisibility.js

@@ -1,25 +0,0 @@
-// @flow
-let hidden = "hidden";
-let visibilityChange = "visibilitychange";
-
-if ("hidden" in document) {
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if ("mozHidden" in document) {
-  // Firefox up to v17
-  hidden = "mozHidden";
-  visibilityChange = "mozvisibilitychange";
-} else if ("webkitHidden" in document) {
-  // Chrome up to v32, Android up to v4.4, Blackberry up to v10
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-export function getVisibilityListener(): string {
-  return visibilityChange;
-}
-
-export function getPageVisible(): boolean {
-  // $FlowFixMe
-  return !document[hidden];
-}

flow-typed/globals.js

@@ -4,5 +4,3 @@ declare var process: {
     [string]: string,
   },
 };
-
-declare var EDITOR_VERSION: string;

flow-typed/npm/identity-obj-proxy_vx.x.x.js

@@ -0,0 +1,119 @@
+// flow-typed signature: d828559e8abc3863ee0f8ef88f5b646e
+// flow-typed version: <<STUB>>/identity-obj-proxy_v^3.0.0/flow_v0.104.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'identity-obj-proxy'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'identity-obj-proxy' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'identity-obj-proxy/src/__tests__/import-es6-export-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/import-es6-import-export-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/import-es6-import-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/import-vanilla-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/index-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/require-es6-export-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/require-es6-import-export-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/require-es6-import-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/__tests__/require-vanilla-test' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/test-redirections/idObjES6Export' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/test-redirections/idObjES6Import' {
+  declare module.exports: any;
+}
+
+declare module 'identity-obj-proxy/src/test-redirections/idObjES6ImportExport' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'identity-obj-proxy/src/__tests__/import-es6-export-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/import-es6-export-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/import-es6-import-export-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/import-es6-import-export-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/import-es6-import-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/import-es6-import-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/import-vanilla-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/import-vanilla-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/index-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/index-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/require-es6-export-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/require-es6-export-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/require-es6-import-export-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/require-es6-import-export-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/require-es6-import-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/require-es6-import-test'>;
+}
+declare module 'identity-obj-proxy/src/__tests__/require-vanilla-test.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/__tests__/require-vanilla-test'>;
+}
+declare module 'identity-obj-proxy/src/index' {
+  declare module.exports: $Exports<'identity-obj-proxy/src'>;
+}
+declare module 'identity-obj-proxy/src/index.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src'>;
+}
+declare module 'identity-obj-proxy/src/test-redirections/idObjES6Export.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/test-redirections/idObjES6Export'>;
+}
+declare module 'identity-obj-proxy/src/test-redirections/idObjES6Import.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/test-redirections/idObjES6Import'>;
+}
+declare module 'identity-obj-proxy/src/test-redirections/idObjES6ImportExport.js' {
+  declare module.exports: $Exports<'identity-obj-proxy/src/test-redirections/idObjES6ImportExport'>;
+}

flow-typed/npm/uglifyjs-webpack-plugin_vx.x.x.js

@@ -0,0 +1,83 @@
+// flow-typed signature: 90824cfc39ff764d3f06f9f71bdb6ef1
+// flow-typed version: <<STUB>>/uglifyjs-webpack-plugin_v1.2.5/flow_v0.104.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'uglifyjs-webpack-plugin'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'uglifyjs-webpack-plugin' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'uglifyjs-webpack-plugin/dist/cjs' {
+  declare module.exports: any;
+}
+
+declare module 'uglifyjs-webpack-plugin/dist' {
+  declare module.exports: any;
+}
+
+declare module 'uglifyjs-webpack-plugin/dist/uglify' {
+  declare module.exports: any;
+}
+
+declare module 'uglifyjs-webpack-plugin/dist/uglify/minify' {
+  declare module.exports: any;
+}
+
+declare module 'uglifyjs-webpack-plugin/dist/uglify/versions' {
+  declare module.exports: any;
+}
+
+declare module 'uglifyjs-webpack-plugin/dist/uglify/worker' {
+  declare module.exports: any;
+}
+
+declare module 'uglifyjs-webpack-plugin/dist/utils' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'uglifyjs-webpack-plugin/dist/cjs.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/cjs'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/index' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/index.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/uglify/index' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/uglify'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/uglify/index.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/uglify'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/uglify/minify.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/uglify/minify'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/uglify/versions.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/uglify/versions'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/uglify/worker.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/uglify/worker'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/utils/index' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/utils'>;
+}
+declare module 'uglifyjs-webpack-plugin/dist/utils/index.js' {
+  declare module.exports: $Exports<'uglifyjs-webpack-plugin/dist/utils'>;
+}

package.json

@@ -56,14 +56,7 @@
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-transform-destructuring": "^7.10.4",
-    "@babel/plugin-transform-regenerator": "^7.10.4",
     "@babel/polyfill": "^7.10.4",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-flow": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
     "@babel/register": "^7.10.5",
     "@rehooks/window-scroll-position": "^1.0.1",
     "@sentry/node": "^5.12.2",
@@ -71,9 +64,6 @@
     "@tommoor/remove-markdown": "0.3.1",
     "autotrack": "^2.4.1",
     "aws-sdk": "^2.135.0",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-styled-components": "^1.11.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "boundless-arrow-key-navigation": "^1.0.4",
     "boundless-popover": "^1.0.4",
     "bull": "^3.5.2",
@@ -90,6 +80,7 @@
     "flow-typed": "^2.6.2",
     "fs-extra": "^4.0.2",
     "google-auth-library": "^5.5.1",
+    "html-webpack-plugin": "3.2.0",
     "http-errors": "1.4.0",
     "immutable": "^3.8.2",
     "imports-loader": "0.6.5",
@@ -138,7 +129,7 @@
     "react-portal": "^4.0.0",
     "react-router-dom": "^5.1.2",
     "react-waypoint": "^9.0.2",
-    "rich-markdown-editor": "^10.6.1",
+    "rich-markdown-editor": "^10.5.0",
     "semver": "^7.3.2",
     "sequelize": "^5.21.1",
     "sequelize-cli": "^5.5.0",
@@ -155,14 +146,27 @@
     "styled-normalize": "^8.0.4",
     "tiny-cookie": "^2.3.1",
     "tmp": "0.0.33",
+    "uglifyjs-webpack-plugin": "1.2.5",
+    "url-loader": "^0.6.2",
     "uuid": "2.0.2",
-    "validator": "5.2.0"
+    "validator": "5.2.0",
+    "webpack": "3.10.0",
+    "webpack-manifest-plugin": "^1.3.2"
   },
   "devDependencies": {
-    "@relative-ci/agent": "^1.3.0",
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-transform-destructuring": "^7.10.4",
+    "@babel/plugin-transform-regenerator": "^7.10.4",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",
     "babel-loader": "^8.1.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-styled-components": "^1.11.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "eslint": "^7.6.0",
     "eslint-config-react-app": "3.0.6",
     "eslint-plugin-flowtype": "^5.2.0",
@@ -172,23 +176,18 @@
     "eslint-plugin-react": "^7.20.0",
     "fetch-test-server": "^1.1.0",
     "flow-bin": "^0.104.0",
-    "html-webpack-plugin": "3.2.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest-cli": "^26.0.0",
     "koa-webpack-dev-middleware": "^1.4.5",
     "koa-webpack-hot-middleware": "^1.0.3",
     "mobx-react-devtools": "^6.0.3",
     "nodemon": "^1.19.4",
     "prettier": "^2.0.5",
-    "rimraf": "^2.5.4",
-    "terser-webpack-plugin": "^4.1.0",
-    "url-loader": "^0.6.2",
-    "webpack": "4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-manifest-plugin": "^2.2.0"
+    "rimraf": "^2.5.4"
   },
   "resolutions": {
     "dot-prop": "^5.2.0",
     "js-yaml": "^3.13.1"
   },
-  "version": "0.46.0"
-}
+  "version": "0.45.0"
+}

server/api/collections.js

@@ -30,7 +30,7 @@ const { authorize } = policy;
 const router = new Router();
 
 router.post("collections.create", auth(), async (ctx) => {
-  const { name, color, description, icon } = ctx.body;
+  const { name, color, description, icon, type } = ctx.body;
   const isPrivate = ctx.body.private;
   ctx.assertPresent(name, "name is required");
 
@@ -46,6 +46,7 @@ router.post("collections.create", auth(), async (ctx) => {
     description,
     icon,
     color,
+    type: type || "atlas",
     teamId: user.teamId,
     creatorId: user.id,
     private: isPrivate,

server/api/collections.test.js

@@ -1062,6 +1062,7 @@ describe("#collections.delete", () => {
       urlId: "blah",
       teamId: user.teamId,
       creatorId: user.id,
+      type: "atlas",
     });
 
     const res = await server.post("/api/collections.delete", {

server/api/documents.js

@@ -718,7 +718,7 @@ router.post("documents.create", auth(), async (ctx) => {
   authorize(user, "publish", collection);
 
   let parentDocument;
-  if (parentDocumentId) {
+  if (parentDocumentId && collection.type === "atlas") {
     parentDocument = await Document.findOne({
       where: {
         id: parentDocumentId,
@@ -938,6 +938,13 @@ router.post("documents.move", auth(), async (ctx) => {
   const document = await Document.findByPk(id, { userId: user.id });
   authorize(user, "move", document);
 
+  const { collection } = document;
+  if (collection.type !== "atlas" && parentDocumentId) {
+    throw new InvalidRequestError(
+      "Document cannot be nested in this collection type"
+    );
+  }
+
   if (parentDocumentId) {
     const parent = await Document.findByPk(parentDocumentId, {
       userId: user.id,

server/migrations/20200812170227-remove-collection-type.js

@@ -1,14 +0,0 @@
-'use strict';
-
-module.exports = {
-  up: async (queryInterface, Sequelize) => {
-    await queryInterface.removeColumn('collections', 'type');
-  },
-
-  down: async (queryInterface, Sequelize) => {
-    await queryInterface.addColumn('collections', 'type', {
-      type: Sequelize.STRING,
-      defaultValue: "atlas"
-    });
-  }
-};

server/models/Collection.js

@@ -23,6 +23,12 @@ const Collection = sequelize.define(
     color: DataTypes.STRING,
     private: DataTypes.BOOLEAN,
     maintainerApprovalRequired: DataTypes.BOOLEAN,
+    type: {
+      type: DataTypes.STRING,
+      validate: { isIn: [["atlas", "journal"]] },
+    },
+
+    /* type: atlas */
     documentStructure: DataTypes.JSONB,
   },
   {

server/models/Document.js

@@ -441,7 +441,7 @@ Document.addHook("beforeSave", async (model) => {
   }
 
   const collection = await Collection.findByPk(model.collectionId);
-  if (!collection) {
+  if (!collection || collection.type !== "atlas") {
     return;
   }
 
@@ -455,7 +455,7 @@ Document.addHook("afterCreate", async (model) => {
   }
 
   const collection = await Collection.findByPk(model.collectionId);
-  if (!collection) {
+  if (!collection || collection.type !== "atlas") {
     return;
   }
 
@@ -548,6 +548,8 @@ Document.prototype.publish = async function (options) {
   if (this.publishedAt) return this.save(options);
 
   const collection = await Collection.findByPk(this.collectionId);
+  if (collection.type !== "atlas") return this.save(options);
+
   await collection.addDocumentToStructure(this);
 
   this.publishedAt = new Date();

server/models/Team.js

@@ -134,6 +134,7 @@ Team.prototype.provisionFirstCollection = async function (userId) {
     name: "Welcome",
     description:
       "This collection is a quick guide to what Outline is all about. Feel free to delete this collection once your team is up to speed with the basics!",
+    type: "atlas",
     teamId: this.id,
     creatorId: userId,
   });

server/presenters/collection.js

@@ -26,6 +26,7 @@ export default function present(collection: Collection) {
     description: collection.description,
     icon: collection.icon,
     color: collection.color || "#4E5C6E",
+    type: collection.type,
     private: collection.private,
     createdAt: collection.createdAt,
     updatedAt: collection.updatedAt,
@@ -33,8 +34,10 @@ export default function present(collection: Collection) {
     documents: undefined,
   };
 
-  // Force alphabetical sorting
-  data.documents = sortDocuments(collection.documentStructure);
+  if (collection.type === "atlas") {
+    // Force alphabetical sorting
+    data.documents = sortDocuments(collection.documentStructure);
+  }
 
   return data;
 }

server/services/backlinks.js

@@ -1,8 +1,8 @@
 // @flow
 import { difference } from "lodash";
+import parseDocumentIds from "../../shared/utils/parseDocumentIds";
 import type { DocumentEvent } from "../events";
 import { Document, Revision, Backlink } from "../models";
-import parseDocumentIds from "../utils/parseDocumentIds";
 import slugify from "../utils/slugify";
 
 export default class Backlinks {

server/test/factories.js

@@ -85,6 +85,7 @@ export async function buildCollection(overrides: Object = {}) {
     name: `Test Collection ${count}`,
     description: "Test collection description",
     creatorId: overrides.userId,
+    type: "atlas",
     ...overrides,
   });
 }

server/test/support.js

@@ -60,6 +60,7 @@ const seed = async () => {
     urlId: "collection",
     teamId: team.id,
     creatorId: user.id,
+    type: "atlas",
   });
 
   const document = await Document.create({

shared/styles/theme.js

@@ -101,16 +101,6 @@ export const base = {
     desktop: 1025, // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
     desktopLarge: 1600,
   },
-
-  depths: {
-    sidebar: 1000,
-    modalOverlay: 2000,
-    modal: 3000,
-    menu: 4000,
-    toasts: 5000,
-    loadingIndicatorBar: 6000,
-    popover: 9000,
-  },
 };
 
 export const light = {

shared/utils/parseDocumentIds.js

@@ -37,3 +37,14 @@ export default function parseDocumentIds(text: string): string[] {
   findLinks(value);
   return links;
 }
+
+export function parseDocumentSlugFromUrl(url: string) {
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch (err) {
+    return;
+  }
+
+  return parsed.pathname.replace(/^\/doc\//, "");
+}

shared/utils/parseDocumentSlug.js

@@ -1,12 +0,0 @@
-// @flow
-
-export function parseDocumentSlugFromUrl(url: string) {
-  let parsed;
-  try {
-    parsed = new URL(url);
-  } catch (err) {
-    return;
-  }
-
-  return parsed.pathname.replace(/^\/doc\//, "");
-}

webpack.config.dev.js

@@ -4,20 +4,19 @@ const commonWebpackConfig = require("./webpack.config");
 
 const developmentWebpackConfig = Object.assign(commonWebpackConfig, {
   cache: true,
-  mode: "development",
   devtool: "eval-source-map",
   entry: [
     "webpack-hot-middleware/client",
     "./app/index",
   ],
-  optimization: {
-    usedExports: true,
-  },
 });
 
 developmentWebpackConfig.plugins = [
   ...developmentWebpackConfig.plugins,
-  new webpack.HotModuleReplacementPlugin()
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.DefinePlugin({
+    "process.env.NODE_ENV": JSON.stringify("development"),
+  }),
 ];
 
 module.exports = developmentWebpackConfig;

webpack.config.js

@@ -2,38 +2,37 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
-const pkg = require("rich-markdown-editor/package.json");
 
 require('dotenv').config({ silent: true });
 
 module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: '[name].[hash].js',
+    filename: 'bundle.js',
     publicPath: '/static/',
   },
   module: {
     rules: [
       {
-       test: /\.js$/,
-       loader: 'babel-loader',
-       exclude: [
-         path.join(__dirname, 'node_modules')
-       ],
-       include: [
-         path.join(__dirname, 'app'),
-         path.join(__dirname, 'shared'),
-       ],
-       options: {
-         cacheDirectory: true
-       }
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: [
+          path.join(__dirname, 'node_modules')
+        ],
+        include: [
+          path.join(__dirname, 'app'),
+          path.join(__dirname, 'shared'),
+        ],
+        options: {
+          cacheDirectory: true
+        }
       },
+      { test: /\.json$/, loader: 'json-loader' },
       // inline base64 URLs for <=8k images, direct URLs for the rest
       { test: /\.(png|jpg|svg)$/, loader: 'url-loader' },
       {
-       test: /\.woff$/,
-       loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
+        test: /\.woff$/,
+        loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
       },
       { test: /\.md/, loader: 'raw-loader' },
     ]
@@ -49,9 +48,6 @@ module.exports = {
     }
   },
   plugins: [
-    new webpack.DefinePlugin({
-      EDITOR_VERSION: JSON.stringify(pkg.version)
-    }),
     new webpack.ProvidePlugin({
       fetch: 'imports-loader?this=>global!exports-loader?global.fetch!isomorphic-fetch',
     }),
@@ -59,22 +55,8 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'server/static/index.html',
     }),
-    new RelativeCiAgentWebpackPlugin(),
   ],
   stats: {
     assets: false,
   },
-  optimization: {
-    runtimeChunk: 'single',
-    moduleIds: 'hashed',
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          chunks: 'initial',
-        },
-      },
-    },
-  }
 };

webpack.config.prod.js

@@ -1,48 +1,35 @@
 /* eslint-disable */
 const path = require('path');
 const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 
 commonWebpackConfig = require('./webpack.config');
 
 productionWebpackConfig = Object.assign(commonWebpackConfig, {
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].[contenthash].js',
-    publicPath: '/static/',
-  },
   cache: true,
-  mode: "production",
   devtool: 'source-map',
   entry: ['./app/index'],
-  stats: "normal",
-  optimization: {
-    ...commonWebpackConfig.optimization,
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          ecma: undefined,
-          parse: {},
-          compress: {},
-          mangle: true, // Note `mangle.properties` is `false` by default.
-          module: false,
-          output: null,
-          toplevel: false,
-          nameCache: null,
-          ie8: false,
-          keep_classnames: undefined,
-          keep_fnames: true,
-          safari10: false,
-        },
-      }),
-    ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.[hash].js',
+    publicPath: '/static/',
   },
+  stats: "normal"
 });
-
 productionWebpackConfig.plugins = [
   ...productionWebpackConfig.plugins,
-  new ManifestPlugin()
+  new ManifestPlugin(),
+  new UglifyJsPlugin({
+    sourceMap: true,
+    uglifyOptions: {
+      compress: true,
+      keep_fnames: true
+    }
+  }),
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  }),
 ];
 
 module.exports = productionWebpackConfig;