lint

fix: documents.update should not trigger event if nothing changes

.env.sample

@@ -8,7 +8,8 @@
 
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
-# Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
+# Generate a unique 32 character hexadecimal key. The format is important as this
+# value is fed directly into encryption libraries. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
 
@@ -94,10 +95,6 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
-
 # Override the maxium size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000
@@ -132,8 +129,6 @@ SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
 SMTP_REPLY_EMAIL=
-SMTP_TLS_CIPHERS=
-SMTP_SECURE=true
 
 # Custom logo that displays on the authentication screen, scaled to height: 60px
 # TEAM_LOGO=https://example.com/images/logo.png

.flowconfig

@@ -11,6 +11,10 @@
 .*/node_modules/react-side-effect/.*
 .*/node_modules/fbjs/.*
 .*/node_modules/config-chain/.*
+.*/node_modules/yjs/.*
+.*/node_modules/y-prosemirror/.*
+.*/node_modules/y-protocols/.*
+.*/node_modules/lib0/.*
 .*/server/scripts/.*
 *.test.js
 

app.json

@@ -135,15 +135,6 @@
       "description": "wikireply@example.com (optional)",
       "required": false
     },
-    "SMTP_SECURE": {
-      "value": "true",
-      "description": "Use a secure SMTP connection (optional)",
-      "required": false
-    },
-    "SMTP_TLS_CIPHERS": {
-      "description": "Override SMTP cipher configuration (optional)",
-      "required": false
-    },
     "GOOGLE_ANALYTICS_ID": {
       "description": "UA-xxxx (optional)",
       "required": false

app/.jestconfig.json

@@ -1,30 +0,0 @@
-{
-  "testURL": "http://localhost",
-  "verbose": false,
-  "rootDir": "..",
-  "roots": [
-    "<rootDir>/app",
-    "<rootDir>/shared"
-  ],
-  "moduleNameMapper": {
-    "^shared/(.*)$": "<rootDir>/shared/$1",
-    "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
-  },
-  "moduleFileExtensions": [
-    "js",
-    "jsx",
-    "json"
-  ],
-  "moduleDirectories": [
-    "node_modules"
-  ],
-  "modulePaths": [
-    "<rootDir>/app"
-  ],
-  "setupFiles": [
-    "<rootDir>/__mocks__/window.js"
-  ],
-  "setupFilesAfterEnv": [
-    "./app/test/setup.js"
-  ]
-}

app/components/Authenticated.js

@@ -6,7 +6,6 @@ import { Redirect } from "react-router-dom";
 import { isCustomSubdomain } from "shared/utils/domains";
 import LoadingIndicator from "components/LoadingIndicator";
 import useStores from "../hooks/useStores";
-import { changeLanguage } from "../utils/language";
 import env from "env";
 
 type Props = {
@@ -21,7 +20,11 @@ const Authenticated = ({ children }: Props) => {
   // Watching for language changes here as this is the earliest point we have
   // the user available and means we can start loading translations faster
   React.useEffect(() => {
-    changeLanguage(language, i18n);
+    if (language && i18n.language !== language) {
+      // Languages are stored in en_US format in the database, however the
+      // frontend translation framework (i18next) expects en-US
+      i18n.changeLanguage(language.replace("_", "-"));
+    }
   }, [i18n, language]);
 
   if (auth.authenticated) {

app/components/Bubble.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import { bounceIn } from "styles/animations";
+import { bounceIn } from "shared/styles/animations";
 
 type Props = {|
   count: number,

app/components/CircularProgressBar.js

@@ -1,78 +0,0 @@
-// @flow
-import React from "react";
-import styled, { useTheme } from "styled-components";
-
-const cleanPercentage = (percentage) => {
-  const tooLow = !Number.isFinite(+percentage) || percentage < 0;
-  const tooHigh = percentage > 100;
-  return tooLow ? 0 : tooHigh ? 100 : +percentage;
-};
-
-const Circle = ({
-  color,
-  percentage,
-  offset,
-}: {
-  color: string,
-  percentage?: number,
-  offset: number,
-}) => {
-  const radius = offset * 0.7;
-  const circumference = 2 * Math.PI * radius;
-  let strokePercentage;
-  if (percentage) {
-    // because the circle is so small, anything greater than 85% appears like 100%
-    percentage = percentage > 85 && percentage < 100 ? 85 : percentage;
-    strokePercentage = percentage
-      ? ((100 - percentage) * circumference) / 100
-      : 0;
-  }
-
-  return (
-    <circle
-      r={radius}
-      cx={offset}
-      cy={offset}
-      fill="none"
-      stroke={strokePercentage !== circumference ? color : ""}
-      strokeWidth={2.5}
-      strokeDasharray={circumference}
-      strokeDashoffset={percentage ? strokePercentage : 0}
-      strokeLinecap="round"
-      style={{ transition: "stroke-dashoffset 0.6s ease 0s" }}
-    ></circle>
-  );
-};
-
-const CircularProgressBar = ({
-  percentage,
-  size = 16,
-}: {
-  percentage: number,
-  size?: number,
-}) => {
-  const theme = useTheme();
-  percentage = cleanPercentage(percentage);
-  const offset = Math.floor(size / 2);
-
-  return (
-    <SVG width={size} height={size}>
-      <g transform={`rotate(-90 ${offset} ${offset})`}>
-        <Circle color={theme.progressBarBackground} offset={offset} />
-        {percentage > 0 && (
-          <Circle
-            color={theme.primary}
-            percentage={percentage}
-            offset={offset}
-          />
-        )}
-      </g>
-    </SVG>
-  );
-};
-
-const SVG = styled.svg`
-  flex-shrink: 0;
-`;
-
-export default CircularProgressBar;

app/components/CollectionDescription.js

@@ -12,15 +12,13 @@ import LoadingIndicator from "components/LoadingIndicator";
 import NudeButton from "components/NudeButton";
 import useDebouncedCallback from "hooks/useDebouncedCallback";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 
 type Props = {|
   collection: Collection,
 |};
 
 function CollectionDescription({ collection }: Props) {
-  const { collections, policies } = useStores();
-  const { showToast } = useToasts();
+  const { collections, ui, policies } = useStores();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
@@ -55,7 +53,7 @@ function CollectionDescription({ collection }: Props) {
       });
       setDirty(false);
     } catch (err) {
-      showToast(
+      ui.showToast(
         t("Sorry, an error occurred saving the collection", {
           type: "error",
         })

app/components/ContextMenu/MenuItem.js

@@ -15,7 +15,6 @@ type Props = {|
   target?: "_blank",
   as?: string | React.ComponentType<*>,
   hide?: () => void,
-  level?: number,
 |};
 
 const MenuItem = ({
@@ -30,26 +29,15 @@ const MenuItem = ({
   const handleClick = React.useCallback(
     (ev) => {
       if (onClick) {
-        ev.preventDefault();
-        ev.stopPropagation();
         onClick(ev);
       }
-
       if (hide) {
         hide();
       }
     },
-    [onClick, hide]
+    [hide, onClick]
   );
 
-  // Preventing default mousedown otherwise menu items do not work in Firefox,
-  // which triggers the hideOnClickOutside handler first via mousedown – hiding
-  // and un-rendering the menu contents.
-  const handleMouseDown = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }, []);
-
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
@@ -63,7 +51,6 @@ const MenuItem = ({
           $toggleable={selected !== undefined}
           as={onClick ? "button" : as}
           onClick={handleClick}
-          onMouseDown={handleMouseDown}
         >
           {selected !== undefined && (
             <>
@@ -89,7 +76,6 @@ export const MenuAnchor = styled.a`
   margin: 0;
   border: 0;
   padding: 12px;
-  padding-left: ${(props) => 12 + props.level * 10}px;
   width: 100%;
   min-height: 32px;
   background: none;

app/components/ContextMenu/Template.js

@@ -9,11 +9,49 @@ import {
   MenuItem as BaseMenuItem,
 } from "reakit/Menu";
 import styled from "styled-components";
-import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
 import Separator from "./Separator";
 import ContextMenu from ".";
-import { type MenuItem as TMenuItem } from "types";
+
+type TMenuItem =
+  | {|
+      title: React.Node,
+      to: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      href: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      visible?: boolean,
+      disabled?: boolean,
+      style?: Object,
+      hover?: boolean,
+      items: TMenuItem[],
+    |}
+  | {|
+      type: "separator",
+      visible?: boolean,
+    |}
+  | {|
+      type: "heading",
+      visible?: boolean,
+      title: React.Node,
+    |};
 
 type Props = {|
   items: TMenuItem[],
@@ -45,7 +83,7 @@ const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
   );
 });
 
-export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
+function Template({ items, ...menu }: Props): React.Node {
   let filtered = items.filter((item) => item.visible !== false);
 
   // this block literally just trims unneccessary separators
@@ -63,11 +101,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
     return [...acc, item];
   }, []);
 
-  return filtered;
-}
-
-function Template({ items, ...menu }: Props): React.Node {
-  return filterTemplateItems(items).map((item, index) => {
+  return filtered.map((item, index) => {
     if (item.to) {
       return (
         <MenuItem
@@ -90,8 +124,7 @@ function Template({ items, ...menu }: Props): React.Node {
           key={index}
           disabled={item.disabled}
           selected={item.selected}
-          level={item.level}
-          target={item.href.startsWith("#") ? undefined : "_blank"}
+          target="_blank"
           {...menu}
         >
           {item.title}
@@ -130,11 +163,6 @@ function Template({ items, ...menu }: Props): React.Node {
       return <Separator key={index} />;
     }
 
-    if (item.type === "heading") {
-      return <Header>{item.title}</Header>;
-    }
-
-    console.warn("Unrecognized menu item", item);
     return null;
   });
 }

app/components/ContextMenu/index.js

@@ -4,18 +4,16 @@ import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import usePrevious from "hooks/usePrevious";
 import {
   fadeIn,
-  fadeAndSlideUp,
-  fadeAndSlideDown,
-  mobileContextMenu,
-} from "styles/animations";
+  fadeAndScaleIn,
+  fadeAndSlideIn,
+} from "shared/styles/animations";
+import usePrevious from "hooks/usePrevious";
 
 type Props = {|
   "aria-label": string,
   visible?: boolean,
-  placement?: string,
   animating?: boolean,
   children: React.Node,
   onOpen?: () => void,
@@ -46,25 +44,13 @@ export default function ContextMenu({
   return (
     <>
       <Menu hideOnClickOutside preventBodyScroll {...rest}>
-        {(props) => {
-          // kind of hacky, but this is an effective way of telling which way
-          // the menu will _actually_ be placed when taking into account screen
-          // positioning.
-          const topAnchor = props.style.top === "0";
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <Position {...props}>
-              <Background
-                dir="auto"
-                topAnchor={topAnchor}
-                rightAnchor={rightAnchor}
-              >
-                {rest.visible || rest.animating ? children : null}
-              </Background>
-            </Position>
-          );
-        }}
+        {(props) => (
+          <Position {...props}>
+            <Background>
+              {rest.visible || rest.animating ? children : null}
+            </Background>
+          </Position>
+        )}
       </Menu>
       {(rest.visible || rest.animating) && (
         <Portal>
@@ -105,7 +91,7 @@ const Position = styled.div`
 `;
 
 const Background = styled.div`
-  animation: ${mobileContextMenu} 200ms ease;
+  animation: ${fadeAndSlideIn} 200ms ease;
   transform-origin: 50% 100%;
   max-width: 100%;
   background: ${(props) => props.theme.menuBackground};
@@ -123,10 +109,9 @@ const Background = styled.div`
   }
 
   ${breakpoint("tablet")`
-    animation: ${(props) =>
-      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
+    animation: ${fadeAndScaleIn} 200ms ease;
     transform-origin: ${(props) =>
-      props.rightAnchor === "bottom-end" ? "75%" : "25%"} 0;
+      props.left !== undefined ? "25%" : "75%"} 0;
     max-width: 276px;
     background: ${(props) => props.theme.menuBackground};
     box-shadow: ${(props) => props.theme.menuShadow};

app/components/DocumentHistory/DocumentHistory.js

@@ -15,7 +15,7 @@ import RevisionsStore from "stores/RevisionsStore";
 
 import Button from "components/Button";
 import Flex from "components/Flex";
-import PlaceholderList from "components/List/Placeholder";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
 import Revision from "./components/Revision";
 import { documentHistoryUrl, documentUrl } from "utils/routeHelpers";
 
@@ -120,7 +120,7 @@ class DocumentHistory extends React.Component<Props> {
           </Header>
           {showLoading ? (
             <Loading>
-              <PlaceholderList count={5} />
+              <ListPlaceholder count={5} />
             </Loading>
           ) : (
             <ArrowKeyNavigation

app/components/DocumentListItem.js

@@ -15,7 +15,6 @@ import Flex from "components/Flex";
 import Highlight from "components/Highlight";
 import StarButton, { AnimatedStar } from "components/Star";
 import Tooltip from "components/Tooltip";
-import useBoolean from "hooks/useBoolean";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
@@ -42,12 +41,12 @@ function replaceResultMarks(tag: string) {
   return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
 }
 
-function DocumentListItem(props: Props, ref) {
+function DocumentListItem(props: Props) {
   const { t } = useTranslation();
   const { policies } = useStores();
   const currentUser = useCurrentUser();
   const currentTeam = useCurrentTeam();
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const [menuOpen, setMenuOpen] = React.useState(false);
   const {
     document,
     showNestedDocuments,
@@ -69,8 +68,6 @@ function DocumentListItem(props: Props, ref) {
 
   return (
     <DocumentLink
-      ref={ref}
-      dir={document.dir}
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
@@ -79,12 +76,8 @@ function DocumentListItem(props: Props, ref) {
       }}
     >
       <Content>
-        <Heading dir={document.dir}>
-          <Title
-            text={document.titleWithDefault}
-            highlight={highlight}
-            dir={document.dir}
-          />
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
           {document.isNew && document.createdBy.id !== currentUser.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
@@ -144,8 +137,8 @@ function DocumentListItem(props: Props, ref) {
         <DocumentMenu
           document={document}
           showPin={showPin}
-          onOpen={handleMenuOpen}
-          onClose={handleMenuClose}
+          onOpen={() => setMenuOpen(true)}
+          onClose={() => setMenuOpen(false)}
           modal={false}
         />
       </Actions>
@@ -228,7 +221,6 @@ const DocumentLink = styled(Link)`
 
 const Heading = styled.h3`
   display: flex;
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   align-items: center;
   height: 24px;
   margin-top: 0;
@@ -259,4 +251,4 @@ const ResultContext = styled(Highlight)`
   margin-bottom: 0.25em;
 `;
 
-export default observer(React.forwardRef(DocumentListItem));
+export default observer(DocumentListItem);

app/components/DocumentMeta.js

@@ -6,14 +6,11 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
 import DocumentBreadcrumb from "components/DocumentBreadcrumb";
-import DocumentTasks from "components/DocumentTasks";
 import Flex from "components/Flex";
 import Time from "components/Time";
-import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 
 const Container = styled(Flex)`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   color: ${(props) => props.theme.textTertiary};
   font-size: 13px;
   white-space: nowrap;
@@ -52,9 +49,7 @@ function DocumentMeta({
   ...rest
 }: Props) {
   const { t } = useTranslation();
-  const { collections } = useStores();
-  const user = useCurrentUser();
-
+  const { collections, auth } = useStores();
   const {
     modifiedSinceViewed,
     updatedAt,
@@ -65,8 +60,6 @@ function DocumentMeta({
     deletedAt,
     isDraft,
     lastViewedAt,
-    isTasks,
-    isTemplate,
   } = document;
 
   // Prevent meta information from displaying if updatedBy is not available.
@@ -75,8 +68,6 @@ function DocumentMeta({
     return null;
   }
 
-  const collection = collections.get(document.collectionId);
-  const lastUpdatedByCurrentUser = user.id === updatedBy.id;
   let content;
 
   if (deletedAt) {
@@ -111,16 +102,14 @@ function DocumentMeta({
     );
   } else {
     content = (
-      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
+      <Modified highlight={modifiedSinceViewed}>
         {t("updated")} <Time dateTime={updatedAt} addSuffix />
       </Modified>
     );
   }
 
-  const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
-    : 0;
-  const canShowProgressBar = isTasks && !isTemplate;
+  const collection = collections.get(document.collectionId);
+  const updatedByMe = auth.user && auth.user.id === updatedBy.id;
 
   const timeSinceNow = () => {
     if (isDraft || !showLastViewed) {
@@ -141,9 +130,13 @@ function DocumentMeta({
     );
   };
 
+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+
   return (
-    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
-      {lastUpdatedByCurrentUser ? t("You") : updatedBy.name}&nbsp;
+    <Container align="center" {...rest}>
+      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
       {to ? <Link to={to}>{content}</Link> : content}
       {showCollection && collection && (
         <span>
@@ -155,17 +148,11 @@ function DocumentMeta({
       )}
       {showNestedDocuments && nestedDocumentsCount > 0 && (
         <span>
-          &nbsp;• {nestedDocumentsCount}{" "}
+          &nbsp;&middot; {nestedDocumentsCount}{" "}
           {t("nested document", { count: nestedDocumentsCount })}
         </span>
       )}
       &nbsp;{timeSinceNow()}
-      {canShowProgressBar && (
-        <>
-          &nbsp;•&nbsp;
-          <DocumentTasks document={document} />
-        </>
-      )}
       {children}
     </Container>
   );

app/components/DocumentMetaWithViews.js

@@ -14,7 +14,6 @@ type Props = {|
   document: Document,
   isDraft: boolean,
   to?: string,
-  rtl?: boolean,
 |};
 
 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
@@ -42,7 +41,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
         <PopoverDisclosure {...popover}>
           {(props) => (
             <>
-              &nbsp;•&nbsp;
+              &nbsp;&middot;&nbsp;
               <a {...props}>
                 {t("Viewed by")}{" "}
                 {onlyYou
@@ -63,7 +62,6 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
 }
 
 const Meta = styled(DocumentMeta)`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   margin: -12px 0 2em 0;
   font-size: 14px;
   position: relative;

app/components/DocumentTasks.js

@@ -1,59 +0,0 @@
-// @flow
-import { DoneIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled, { useTheme } from "styled-components";
-import CircularProgressBar from "components/CircularProgressBar";
-import usePrevious from "../hooks/usePrevious";
-import Document from "../models/Document";
-import { bounceIn } from "styles/animations";
-
-type Props = {|
-  document: Document,
-|};
-
-function getMessage(t, total, completed) {
-  if (completed === 0) {
-    return t(`{{ total }} task`, { total, count: total });
-  } else if (completed === total) {
-    return t(`{{ completed }} task done`, { completed, count: completed });
-  } else {
-    return t(`{{ completed }} of {{ total }} tasks`, {
-      total,
-      completed,
-    });
-  }
-}
-
-function DocumentTasks({ document }: Props) {
-  const { tasks, tasksPercentage } = document;
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { completed, total } = tasks;
-  const done = completed === total;
-  const previousDone = usePrevious(done);
-  const message = getMessage(t, total, completed);
-
-  return (
-    <>
-      {completed === total ? (
-        <Done
-          color={theme.primary}
-          size={20}
-          $animated={done && previousDone === false}
-        />
-      ) : (
-        <CircularProgressBar percentage={tasksPercentage} />
-      )}
-      &nbsp;{message}
-    </>
-  );
-}
-
-const Done = styled(DoneIcon)`
-  margin: -1px;
-  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
-  transform-origin: center center;
-`;
-
-export default DocumentTasks;

app/components/DocumentViews.js

@@ -56,7 +56,7 @@ function DocumentViews({ document, isOpen }: Props) {
                 : t("Currently viewing")
               : t("Viewed {{ timeAgo }} ago", {
                   timeAgo: formatDistanceToNow(
-                    view ? Date.parse(view.lastViewedAt) : new Date()
+                    view ? new Date(view.lastViewedAt) : new Date()
                   ),
                 });
 

app/components/Editor.js

@@ -4,13 +4,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
-import { light } from "shared/theme";
+import { light } from "shared/styles/theme";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
 import useMediaQuery from "hooks/useMediaQuery";
-import useToasts from "hooks/useToasts";
 import { type Theme } from "types";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
@@ -59,9 +58,8 @@ type PropsWithRef = Props & {
 };
 
 function Editor(props: PropsWithRef) {
-  const { id, shareId, history } = props;
+  const { id, ui, shareId, history } = props;
   const { t } = useTranslation();
-  const { showToast } = useToasts();
   const isPrinting = useMediaQuery("print");
 
   const onUploadImage = React.useCallback(
@@ -108,9 +106,11 @@ function Editor(props: PropsWithRef) {
 
   const onShowToast = React.useCallback(
     (message: string) => {
-      showToast(message);
+      if (ui) {
+        ui.showToast(message);
+      }
     },
-    [showToast]
+    [ui]
   );
 
   const dictionary = React.useMemo(() => {
@@ -148,7 +148,6 @@ function Editor(props: PropsWithRef) {
       hr: t("Divider"),
       image: t("Image"),
       imageUploadError: t("Sorry, an error occurred uploading the image"),
-      imageCaptionPlaceholder: t("Write a caption"),
       info: t("Info"),
       infoNotice: t("Info notice"),
       link: t("Link"),
@@ -246,6 +245,53 @@ const StyledEditor = styled(RichMarkdownEditor)`
       }
     }
   }
+
+  .ProseMirror {
+    .ProseMirror-yjs-cursor {
+      position: relative;
+      margin-left: -1px;
+      margin-right: -1px;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+      height: 1em;
+      word-break: normal;
+
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: -8px;
+        right: -8px;
+        top: 0;
+        bottom: 0;
+      }
+
+      > div {
+        opacity: 0;
+        position: absolute;
+        top: -1.8em;
+        font-size: 13px;
+        background-color: rgb(250, 129, 0);
+        font-style: normal;
+        line-height: normal;
+        user-select: none;
+        white-space: nowrap;
+        color: white;
+        padding: 2px 6px;
+        font-weight: 500;
+        border-radius: 4px;
+        pointer-events: none;
+        left: -1px;
+      }
+
+      &:hover {
+        > div {
+          opacity: 1;
+          transition: opacity 100ms ease-in-out;
+        }
+      }
+    }
+  }
 `;
 
 const EditorTooltip = ({ children, ...props }) => (
@@ -263,3 +309,17 @@ const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
 export default React.forwardRef<Props, typeof Editor>((props, ref) => (
   <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
 ));
+
+// > .ProseMirror-yjs-cursor:first-child {
+//   margin-top: 16px;
+// }
+
+// p:first-child,
+// h1:first-child,
+// h2:first-child,
+// h3:first-child,
+// h4:first-child,
+// h5:first-child,
+// h6:first-child {
+//   margin-top: 16px;
+// }

app/components/ErrorBoundary.js

@@ -3,7 +3,6 @@ import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction, Trans } from "react-i18next";
 import styled from "styled-components";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
@@ -12,11 +11,10 @@ import PageTitle from "components/PageTitle";
 import { githubIssuesUrl } from "../../shared/utils/routeHelpers";
 import env from "env";
 
-type Props = {|
+type Props = {
   children: React.Node,
   reloadOnChunkMissing?: boolean,
-  t: TFunction,
-|};
+};
 
 @observer
 class ErrorBoundary extends React.Component<Props> {
@@ -57,8 +55,6 @@ class ErrorBoundary extends React.Component<Props> {
   };
 
   render() {
-    const { t } = this.props;
-
     if (this.error) {
       const error = this.error;
       const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
@@ -67,21 +63,15 @@ class ErrorBoundary extends React.Component<Props> {
       if (isChunkError) {
         return (
           <CenteredContent>
-            <PageTitle title={t("Module failed to load")} />
-            <h1>
-              <Trans>Loading Failed</Trans>
-            </h1>
+            <PageTitle title="Module failed to load" />
+            <h1>Loading Failed</h1>
             <HelpText>
-              <Trans>
-                Sorry, part of the application failed to load. This may be
-                because it was updated since you opened the tab or because of a
-                failed network request. Please try reloading.
-              </Trans>
+              Sorry, part of the application failed to load. This may be because
+              it was updated since you opened the tab or because of a failed
+              network request. Please try reloading.
             </HelpText>
             <p>
-              <Button onClick={this.handleReload}>
-                <Trans>Reload</Trans>
-              </Button>
+              <Button onClick={this.handleReload}>Reload</Button>
             </p>
           </CenteredContent>
         );
@@ -89,32 +79,23 @@ class ErrorBoundary extends React.Component<Props> {
 
       return (
         <CenteredContent>
-          <PageTitle title={t("Something Unexpected Happened")} />
-          <h1>
-            <Trans>Something Unexpected Happened</Trans>
-          </h1>
+          <PageTitle title="Something Unexpected Happened" />
+          <h1>Something Unexpected Happened</h1>
           <HelpText>
-            <Trans
-              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
-              values={{
-                notified: isReported
-                  ? ` – ${t("our engineers have been notified")}`
-                  : undefined,
-              }}
-            />
+            Sorry, an unrecoverable error occurred
+            {isReported && " – our engineers have been notified"}. Please try
+            reloading the page, it may have been a temporary glitch.
           </HelpText>
           {this.showDetails && <Pre>{error.toString()}</Pre>}
           <p>
-            <Button onClick={this.handleReload}>
-              <Trans>Reload</Trans>
-            </Button>{" "}
+            <Button onClick={this.handleReload}>Reload</Button>{" "}
             {this.showDetails ? (
               <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a Bug</Trans>…
+                Report a Bug…
               </Button>
             ) : (
               <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show Detail</Trans>…
+                Show Details…
               </Button>
             )}
           </p>
@@ -133,4 +114,4 @@ const Pre = styled.pre`
   white-space: pre-wrap;
 `;
 
-export default withTranslation()<ErrorBoundary>(ErrorBoundary);
+export default ErrorBoundary;

app/components/Fade.js

@@ -1,6 +1,6 @@
 // @flow
 import styled from "styled-components";
-import { fadeIn } from "styles/animations";
+import { fadeIn } from "shared/styles/animations";
 
 const Fade = styled.span`
   animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;

app/components/Flex.js

@@ -45,7 +45,7 @@ const Container = styled.div`
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
   flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
-  gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
+  gap: ${({ gap }) => `${gap}px` || "initial"};
   min-height: 0;
   min-width: 0;
 `;

app/components/Header.js

@@ -72,10 +72,6 @@ const Actions = styled(Flex)`
   flex-basis: 0;
   min-width: auto;
   padding-left: 8px;
-
-  ${breakpoint("tablet")`
-    position: unset;
-  `};
 `;
 
 const Wrapper = styled(Flex)`
@@ -88,12 +84,12 @@ const Wrapper = styled(Flex)`
   transform: translate3d(0, 0, 0);
   backdrop-filter: blur(20px);
   min-height: 56px;
-  justify-content: flex-start;
 
   @media print {
     display: none;
   }
 
+  justify-content: flex-start;
   ${breakpoint("tablet")`
     padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
     justify-content: "center";

app/components/HoverPreview.js

@@ -4,10 +4,10 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
+import { fadeAndSlideIn } from "shared/styles/animations";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
-import { fadeAndSlideDown } from "styles/animations";
 import { isInternalUrl } from "utils/urls";
 
 const DELAY_OPEN = 300;
@@ -136,7 +136,7 @@ function HoverPreview({ node, ...rest }: Props) {
 }
 
 const Animate = styled.div`
-  animation: ${fadeAndSlideDown} 150ms ease;
+  animation: ${fadeAndSlideIn} 150ms ease;
 
   @media print {
     display: none;

app/components/Input.js

@@ -29,10 +29,6 @@ const RealInput = styled.input`
   background: none;
   color: ${(props) => props.theme.text};
   height: 30px;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 
   &:disabled,
   &::placeholder {

app/components/InputRich.js

@@ -1,58 +1,58 @@
 // @flow
-import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
 import * as React from "react";
-import { Trans } from "react-i18next";
 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";
-import useStores from "hooks/useStores";
 
 type Props = {|
   label: string,
   minHeight?: number,
   maxHeight?: number,
   readOnly?: boolean,
+  ui: UiStore,
 |};
 
-function InputRich({ label, minHeight, maxHeight, ...rest }: Props) {
-  const [focused, setFocused] = React.useState<boolean>(false);
-  const { ui } = useStores();
+@observer
+class InputRich extends React.Component<Props> {
+  @observable editorComponent: React.ComponentType<any>;
+  @observable focused: boolean = false;
 
-  const handleBlur = React.useCallback(() => {
-    setFocused(false);
-  }, []);
+  handleBlur = () => {
+    this.focused = false;
+  };
 
-  const handleFocus = React.useCallback(() => {
-    setFocused(true);
-  }, []);
+  handleFocus = () => {
+    this.focused = true;
+  };
 
-  return (
-    <>
-      <LabelText>{label}</LabelText>
-      <StyledOutline
-        maxHeight={maxHeight}
-        minHeight={minHeight}
-        focused={focused}
-      >
-        <React.Suspense
-          fallback={
-            <HelpText>
-              <Trans>Loading editor</Trans>…
-            </HelpText>
-          }
+  render() {
+    const { label, minHeight, maxHeight, ui, ...rest } = this.props;
+
+    return (
+      <>
+        <LabelText>{label}</LabelText>
+        <StyledOutline
+          maxHeight={maxHeight}
+          minHeight={minHeight}
+          focused={this.focused}
         >
-          <Editor
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            ui={ui}
-            grow
-            {...rest}
-          />
-        </React.Suspense>
-      </StyledOutline>
-    </>
-  );
+          <React.Suspense fallback={<HelpText>Loading editor…</HelpText>}>
+            <Editor
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}
+              ui={ui}
+              grow
+              {...rest}
+            />
+          </React.Suspense>
+        </StyledOutline>
+      </>
+    );
+  }
 }
 
 const StyledOutline = styled(Outline)`
@@ -67,4 +67,4 @@ const StyledOutline = styled(Outline)`
   }
 `;
 
-export default observer(withTheme(InputRich));
+export default inject("ui")(withTheme(InputRich));

app/components/List/Placeholder.js

@@ -4,19 +4,18 @@ import * as React from "react";
 import styled from "styled-components";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
-import PlaceholderText from "components/PlaceholderText";
+import Mask from "components/Mask";
 
 type Props = {
   count?: number,
 };
 
-const ListPlaceHolder = ({ count }: Props) => {
+const Placeholder = ({ count }: Props) => {
   return (
     <Fade>
       {times(count || 2, (index) => (
         <Item key={index} column auto>
-          <PlaceholderText header delay={0.2 * index} />
-          <PlaceholderText delay={0.2 * index} />
+          <Mask />
         </Item>
       ))}
     </Fade>
@@ -24,7 +23,7 @@ const ListPlaceHolder = ({ count }: Props) => {
 };
 
 const Item = styled(Flex)`
-  padding: 10px 0;
+  padding: 15px 0 16px;
 `;
 
-export default ListPlaceHolder;
+export default Placeholder;

app/components/LoadingEllipsis.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from "react";
+
+type Props = {|
+  interval?: number,
+|};
+
+export default function LoadingEllipsis({ interval = 750 }: Props) {
+  const [step, setStep] = React.useState(0);
+
+  React.useEffect(() => {
+    const handle = setInterval(() => {
+      setStep((step) => (step === 3 ? 0 : step + 1));
+    }, interval);
+
+    return () => clearInterval(handle);
+  }, [interval]);
+
+  return ".".repeat(step);
+}

app/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -11,14 +11,16 @@ const LoadingIndicatorBar = () => {
 };
 
 const loadingFrame = keyframes`
-  from { margin-left: -100%; }
-  to { margin-left: 100%; }
+  from {margin-left: -100%; z-index:100;}
+  to {margin-left: 100%; }
 `;
 
 const Container = styled.div`
   position: fixed;
   top: 0;
   z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
+
+  background-color: #03a9f4;
   width: 100%;
   animation: ${loadingFrame} 4s ease-in-out infinite;
   animation-delay: 250ms;
@@ -28,7 +30,7 @@ const Container = styled.div`
 const Loader = styled.div`
   width: 100%;
   height: 2px;
-  background-color: ${(props) => props.theme.primary};
+  background-color: #03a9f4;
 `;
 
 export default LoadingIndicatorBar;

app/components/LoadingPlaceholder/ListPlaceholder.js

@@ -0,0 +1,30 @@
+// @flow
+import { times } from "lodash";
+import * as React from "react";
+import styled from "styled-components";
+import Fade from "components/Fade";
+import Flex from "components/Flex";
+import Mask from "components/Mask";
+
+type Props = {
+  count?: number,
+};
+
+const ListPlaceHolder = ({ count }: Props) => {
+  return (
+    <Fade>
+      {times(count || 2, (index) => (
+        <Item key={index} column auto>
+          <Mask header />
+          <Mask />
+        </Item>
+      ))}
+    </Fade>
+  );
+};
+
+const Item = styled(Flex)`
+  padding: 10px 0;
+`;
+
+export default ListPlaceHolder;

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -4,19 +4,18 @@ import styled from "styled-components";
 import DelayedMount from "components/DelayedMount";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
-import PlaceholderText from "components/PlaceholderText";
+import Mask from "components/Mask";
 
-export default function PlaceholderDocument(props: Object) {
+export default function LoadingPlaceholder(props: Object) {
   return (
     <DelayedMount>
       <Wrapper>
         <Flex column auto {...props}>
-          <PlaceholderText height={34} maxWidth={70} />
-          <PlaceholderText delay={0.2} maxWidth={40} />
+          <Mask height={34} />
           <br />
-          <PlaceholderText delay={0.2} />
-          <PlaceholderText delay={0.4} />
-          <PlaceholderText delay={0.6} />
+          <Mask />
+          <Mask />
+          <Mask />
         </Flex>
       </Wrapper>
     </DelayedMount>

app/components/LoadingPlaceholder/index.js

@@ -0,0 +1,6 @@
+// @flow
+import ListPlaceholder from "./ListPlaceholder";
+import LoadingPlaceholder from "./LoadingPlaceholder";
+
+export default LoadingPlaceholder;
+export { ListPlaceholder };

app/components/LocaleTime.js

@@ -1,20 +1,6 @@
 // @flow
 import { format, formatDistanceToNow } from "date-fns";
-import {
-  enUS,
-  de,
-  faIR,
-  fr,
-  es,
-  it,
-  ja,
-  ko,
-  ptBR,
-  pt,
-  zhCN,
-  zhTW,
-  ru,
-} from "date-fns/locale";
+import { enUS, de, fr, es, it, ko, ptBR, pt, zhCN, ru } from "date-fns/locale";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
@@ -23,15 +9,12 @@ const locales = {
   en_US: enUS,
   de_DE: de,
   es_ES: es,
-  fa_IR: faIR,
   fr_FR: fr,
   it_IT: it,
-  ja_JP: ja,
   ko_KR: ko,
   pt_BR: ptBR,
   pt_PT: pt,
   zh_CN: zhCN,
-  zh_TW: zhTW,
   ru_RU: ru,
 };
 

app/components/Mask.js

@@ -2,48 +2,44 @@
 import * as React from "react";
 import styled from "styled-components";
 import { randomInteger } from "shared/random";
+import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";
-import { pulsate } from "styles/animations";
 
 type Props = {|
   header?: boolean,
   height?: number,
   minWidth?: number,
   maxWidth?: number,
-  delay?: number,
 |};
 
-class PlaceholderText extends React.Component<Props> {
-  width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100);
+class Mask extends React.Component<Props> {
+  width: number;
 
   shouldComponentUpdate() {
     return false;
   }
 
+  constructor(props: Props) {
+    super();
+    this.width = randomInteger(props.minWidth || 75, props.maxWidth || 100);
+  }
+
   render() {
-    return (
-      <Mask
-        width={this.width}
-        height={this.props.height}
-        delay={this.props.delay}
-      />
-    );
+    return <Redacted width={this.width} height={this.props.height} />;
   }
 }
 
-const Mask = styled(Flex)`
+const Redacted = styled(Flex)`
   width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
   height: ${(props) =>
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;
-  border-radius: 6px;
   background-color: ${(props) => props.theme.divider};
-  animation: ${pulsate} 2s infinite;
-  animation-delay: ${(props) => props.delay || 0}s;
+  animation: ${pulsate} 1.3s infinite;
 
   &:last-child {
     margin-bottom: 0;
   }
 `;
 
-export default PlaceholderText;
+export default Mask;

app/components/Modal.js

@@ -7,12 +7,12 @@ import { useTranslation } from "react-i18next";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { fadeAndScaleIn } from "shared/styles/animations";
 import Flex from "components/Flex";
 import NudeButton from "components/NudeButton";
 import Scrollable from "components/Scrollable";
 import usePrevious from "hooks/usePrevious";
 import useUnmount from "hooks/useUnmount";
-import { fadeAndScaleIn } from "styles/animations";
 
 let openModals = 0;
 

app/components/PaginatedDocumentList.js

@@ -1,4 +1,5 @@
 // @flow
+import { observer } from "mobx-react";
 import * as React from "react";
 import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
@@ -18,26 +19,24 @@ type Props = {|
   showTemplate?: boolean,
 |};
 
-const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
-  empty,
-  heading,
-  documents,
-  fetch,
-  options,
-  ...rest
-}: Props) {
-  return (
-    <PaginatedList
-      items={documents}
-      empty={empty}
-      heading={heading}
-      fetch={fetch}
-      options={options}
-      renderItem={(item) => (
-        <DocumentListItem key={item.id} document={item} {...rest} />
-      )}
-    />
-  );
-});
+@observer
+class PaginatedDocumentList extends React.Component<Props> {
+  render() {
+    const { empty, heading, documents, fetch, options, ...rest } = this.props;
+
+    return (
+      <PaginatedList
+        items={documents}
+        empty={empty}
+        heading={heading}
+        fetch={fetch}
+        options={options}
+        renderItem={(item) => (
+          <DocumentListItem key={item.id} document={item} {...rest} />
+        )}
+      />
+    );
+  }
+}
 
 export default PaginatedDocumentList;

app/components/PaginatedList.js

@@ -7,7 +7,7 @@ import * as React from "react";
 import { Waypoint } from "react-waypoint";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DelayedMount from "components/DelayedMount";
-import PlaceholderList from "components/List/Placeholder";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
 
 type Props = {
   fetch?: (options: ?Object) => Promise<void>,
@@ -38,24 +38,14 @@ class PaginatedList extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    if (
-      prevProps.fetch !== this.props.fetch ||
-      !isEqual(prevProps.options, this.props.options)
-    ) {
-      this.reset();
+    if (prevProps.fetch !== this.props.fetch) {
+      this.fetchResults();
+    }
+    if (!isEqual(prevProps.options, this.props.options)) {
       this.fetchResults();
     }
   }
 
-  reset = () => {
-    this.offset = 0;
-    this.allowLoadMore = true;
-    this.renderCount = DEFAULT_PAGINATION_LIMIT;
-    this.isFetching = false;
-    this.isFetchingMore = false;
-    this.isLoaded = false;
-  };
-
   fetchResults = async () => {
     if (!this.props.fetch) return;
 
@@ -128,7 +118,7 @@ class PaginatedList extends React.Component<Props> {
         )}
         {showLoading && (
           <DelayedMount>
-            <PlaceholderList count={5} />
+            <ListPlaceholder count={5} />
           </DelayedMount>
         )}
       </>

app/components/PaginatedList.test.js

@@ -1,84 +0,0 @@
-// @flow
-import "../stores";
-import { shallow } from "enzyme";
-import * as React from "react";
-import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
-import { runAllPromises } from "../test/support";
-import PaginatedList from "./PaginatedList";
-
-describe("PaginatedList", () => {
-  const render = () => null;
-
-  it("with no items renders nothing", () => {
-    const list = shallow(<PaginatedList items={[]} renderItem={render} />);
-    expect(list).toEqual({});
-  });
-
-  it("with no items renders empty prop", () => {
-    const list = shallow(
-      <PaginatedList
-        items={[]}
-        empty={<p>Sorry, no results</p>}
-        renderItem={render}
-      />
-    );
-    expect(list.text()).toEqual("Sorry, no results");
-  });
-
-  it("calls fetch with options + pagination on mount", () => {
-    const fetch = jest.fn();
-    const options = { id: "one" };
-
-    shallow(
-      <PaginatedList
-        items={[]}
-        fetch={fetch}
-        options={options}
-        renderItem={render}
-      />
-    );
-    expect(fetch).toHaveBeenCalledWith({
-      ...options,
-      limit: DEFAULT_PAGINATION_LIMIT,
-      offset: 0,
-    });
-  });
-
-  it("calls fetch when options prop changes", async () => {
-    const fetchedItems = Array(DEFAULT_PAGINATION_LIMIT).fill();
-    const fetch = jest.fn().mockReturnValue(fetchedItems);
-
-    const list = shallow(
-      <PaginatedList
-        items={[]}
-        fetch={fetch}
-        options={{ id: "one" }}
-        renderItem={render}
-      />
-    );
-
-    await runAllPromises();
-
-    expect(fetch).toHaveBeenCalledWith({
-      id: "one",
-      limit: DEFAULT_PAGINATION_LIMIT,
-      offset: 0,
-    });
-
-    fetch.mockReset();
-
-    list.setProps({
-      fetch,
-      items: [],
-      options: { id: "two" },
-    });
-
-    await runAllPromises();
-
-    expect(fetch).toHaveBeenCalledWith({
-      id: "two",
-      limit: DEFAULT_PAGINATION_LIMIT,
-      offset: 0,
-    });
-  });
-});

app/components/Popover.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Popover as ReakitPopover } from "reakit/Popover";
 import styled from "styled-components";
-import { fadeAndScaleIn } from "styles/animations";
+import { fadeAndScaleIn } from "shared/styles/animations";
 
 type Props = {
   children: React.Node,

app/components/Sidebar/Main.js

@@ -1,13 +1,15 @@
 // @flow
 import { observer } from "mobx-react";
 import {
-  EditIcon,
+  ArchiveIcon,
   HomeIcon,
-  PlusIcon,
+  EditIcon,
   SearchIcon,
-  SettingsIcon,
-  ShapesIcon,
   StarredIcon,
+  ShapesIcon,
+  TrashIcon,
+  PlusIcon,
+  SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -21,22 +23,16 @@ import Flex from "components/Flex";
 import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
-import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
 import TeamButton from "./components/TeamButton";
-import TrashLink from "./components/TrashLink";
-import useCurrentTeam from "hooks/useCurrentTeam";
-import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";
 
 function MainSidebar() {
   const { t } = useTranslation();
-  const { policies, documents } = useStores();
-  const team = useCurrentTeam();
-  const user = useCurrentUser();
+  const { policies, auth, documents } = useStores();
   const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
   const [
     createCollectionModalOpen,
@@ -75,6 +71,9 @@ function MainSidebar() {
     dndArea,
   ]);
 
+  const { user, team } = auth;
+  if (!user || !team) return null;
+
   const can = policies.abilities(team.id);
 
   return (
@@ -115,6 +114,17 @@ function MainSidebar() {
                 exact={false}
                 label={t("Starred")}
               />
+              {can.createDocument && (
+                <SidebarLink
+                  to="/templates"
+                  icon={<ShapesIcon color="currentColor" />}
+                  exact={false}
+                  label={t("Templates")}
+                  active={
+                    documents.active ? documents.active.template : undefined
+                  }
+                />
+              )}
               {can.createDocument && (
                 <SidebarLink
                   to="/drafts"
@@ -141,21 +151,26 @@ function MainSidebar() {
               />
             </Section>
             <Section>
-              {can.createDocument && (
-                <>
-                  <SidebarLink
-                    to="/templates"
-                    icon={<ShapesIcon color="currentColor" />}
-                    exact={false}
-                    label={t("Templates")}
-                    active={
-                      documents.active ? documents.active.template : undefined
-                    }
-                  />
-                  <ArchiveLink documents={documents} />
-                  <TrashLink documents={documents} />
-                </>
-              )}
+              <SidebarLink
+                to="/archive"
+                icon={<ArchiveIcon color="currentColor" />}
+                exact={false}
+                label={t("Archive")}
+                active={
+                  documents.active
+                    ? documents.active.isArchived && !documents.active.isDeleted
+                    : undefined
+                }
+              />
+              <SidebarLink
+                to="/trash"
+                icon={<TrashIcon color="currentColor" />}
+                exact={false}
+                label={t("Trash")}
+                active={
+                  documents.active ? documents.active.isDeleted : undefined
+                }
+              />
               <SidebarLink
                 to="/settings"
                 icon={<SettingsIcon color="currentColor" />}

app/components/Sidebar/Sidebar.js

@@ -6,13 +6,13 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { fadeIn } from "shared/styles/animations";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
-import { fadeIn } from "styles/animations";
 
 let ANIMATION_MS = 250;
 let isFirstRender = true;

app/components/Sidebar/components/ArchiveLink.js

@@ -1,43 +0,0 @@
-// @flow
-import { observer } from "mobx-react";
-import { ArchiveIcon } from "outline-icons";
-import * as React from "react";
-import { useDrop } from "react-dnd";
-import { useTranslation } from "react-i18next";
-import useStores from "../../../hooks/useStores";
-import SidebarLink from "./SidebarLink";
-import useToasts from "hooks/useToasts";
-
-function ArchiveLink({ documents }) {
-  const { policies } = useStores();
-  const { t } = useTranslation();
-  const { showToast } = useToasts();
-
-  const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
-    accept: "document",
-    drop: async (item, monitor) => {
-      const document = documents.get(item.id);
-      await document.archive();
-      showToast(t("Document archived"), { type: "success" });
-    },
-    canDrop: (item, monitor) => policies.abilities(item.id).archive,
-    collect: (monitor) => ({
-      isDocumentDropping: monitor.isOver(),
-    }),
-  });
-
-  return (
-    <div ref={dropToArchiveDocument}>
-      <SidebarLink
-        to="/archive"
-        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
-        exact={false}
-        label={t("Archive")}
-        active={documents.active?.isArchived && !documents.active?.isDeleted}
-        isActiveDrop={isDocumentDropping}
-      />
-    </div>
-  );
-}
-
-export default observer(ArchiveLink);

app/components/Sidebar/components/CollectionLink.js

@@ -12,7 +12,6 @@ import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
-import useBoolean from "hooks/useBoolean";
 import useStores from "hooks/useStores";
 import CollectionMenu from "menus/CollectionMenu";
 import CollectionSortMenu from "menus/CollectionSortMenu";
@@ -36,7 +35,7 @@ function CollectionLink({
   isDraggingAnyCollection,
   onChangeDragging,
 }: Props) {
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const [menuOpen, setMenuOpen] = React.useState(false);
 
   const handleTitleChange = React.useCallback(
     async (name: string) => {
@@ -164,14 +163,14 @@ function CollectionLink({
                   {can.update && (
                     <CollectionSortMenuWithMargin
                       collection={collection}
-                      onOpen={handleMenuOpen}
-                      onClose={handleMenuClose}
+                      onOpen={() => setMenuOpen(true)}
+                      onClose={() => setMenuOpen(false)}
                     />
                   )}
                   <CollectionMenu
                     collection={collection}
-                    onOpen={handleMenuOpen}
-                    onClose={handleMenuClose}
+                    onOpen={() => setMenuOpen(true)}
+                    onClose={() => setMenuOpen(false)}
                   />
                 </>
               }

app/components/Sidebar/components/Collections.js

@@ -9,13 +9,11 @@ import Fade from "components/Fade";
 import Flex from "components/Flex";
 import useStores from "../../../hooks/useStores";
 import CollectionLink from "./CollectionLink";
+import CollectionsLoading from "./CollectionsLoading";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
-import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarLink from "./SidebarLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
-import useToasts from "hooks/useToasts";
-
 type Props = {
   onCreateCollection: () => void,
 };
@@ -24,7 +22,6 @@ function Collections({ onCreateCollection }: Props) {
   const [isFetching, setFetching] = React.useState(false);
   const [fetchError, setFetchError] = React.useState();
   const { ui, policies, documents, collections } = useStores();
-  const { showToast } = useToasts();
   const isPreloaded: boolean = !!collections.orderedData.length;
   const { t } = useTranslation();
   const team = useCurrentTeam();
@@ -41,7 +38,7 @@ function Collections({ onCreateCollection }: Props) {
           setFetching(true);
           await collections.fetchPage({ limit: 100 });
         } catch (error) {
-          showToast(
+          ui.showToast(
             t("Collections could not be loaded, please reload the app"),
             {
               type: "error",
@@ -54,7 +51,7 @@ function Collections({ onCreateCollection }: Props) {
       }
     }
     load();
-  }, [collections, isFetching, showToast, fetchError, t]);
+  }, [collections, isFetching, ui, fetchError, t]);
 
   const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
     accept: "collection",
@@ -108,7 +105,7 @@ function Collections({ onCreateCollection }: Props) {
     return (
       <Flex column>
         <Header>{t("Collections")}</Header>
-        <PlaceholderCollections />
+        <CollectionsLoading />
       </Flex>
     );
   }

app/components/Sidebar/components/CollectionsLoading.js

@@ -0,0 +1,21 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import Mask from "components/Mask";
+
+function CollectionsLoading() {
+  return (
+    <Wrapper>
+      <Mask />
+      <Mask />
+      <Mask />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 4px 16px;
+  width: 75%;
+`;
+
+export default CollectionsLoading;

app/components/Sidebar/components/DocumentLink.js

@@ -12,7 +12,6 @@ import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
-import useBoolean from "hooks/useBoolean";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import { type NavigationNode } from "types";
@@ -28,19 +27,16 @@ type Props = {|
   parentId?: string,
 |};
 
-function DocumentLink(
-  {
-    node,
-    canUpdate,
-    collection,
-    activeDocument,
-    prefetchDocument,
-    depth,
-    index,
-    parentId,
-  }: Props,
-  ref
-) {
+function DocumentLink({
+  node,
+  canUpdate,
+  collection,
+  activeDocument,
+  prefetchDocument,
+  depth,
+  index,
+  parentId,
+}: Props) {
   const { documents, policies } = useStores();
   const { t } = useTranslation();
 
@@ -121,7 +117,7 @@ function DocumentLink(
     [documents, document]
   );
 
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const [menuOpen, setMenuOpen] = React.useState(false);
   const isMoving = documents.movingDocumentId === node.id;
   const manualSort = collection?.sort.field === "index";
 
@@ -133,11 +129,7 @@ function DocumentLink(
       isDragging: !!monitor.isDragging(),
     }),
     canDrag: (monitor) => {
-      return (
-        policies.abilities(node.id).move ||
-        policies.abilities(node.id).archive ||
-        policies.abilities(node.id).delete
-      );
+      return policies.abilities(node.id).move;
     },
   });
 
@@ -244,14 +236,13 @@ function DocumentLink(
                 depth={depth}
                 exact={false}
                 showActions={menuOpen}
-                ref={ref}
                 menu={
                   document && !isMoving ? (
                     <Fade>
                       <DocumentMenu
                         document={document}
-                        onOpen={handleMenuOpen}
-                        onClose={handleMenuClose}
+                        onOpen={() => setMenuOpen(true)}
+                        onClose={() => setMenuOpen(false)}
                       />
                     </Fade>
                   ) : undefined
@@ -298,6 +289,5 @@ const Disclosure = styled(CollapsedIcon)`
   ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
 `;
 
-const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));
-
+const ObservedDocumentLink = observer(DocumentLink);
 export default ObservedDocumentLink;

app/components/Sidebar/components/DropToImport.js

@@ -7,7 +7,6 @@ import styled, { css } from "styled-components";
 import LoadingIndicator from "components/LoadingIndicator";
 import useImportDocument from "hooks/useImportDocument";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 
 type Props = {|
   children: React.Node,
@@ -19,8 +18,7 @@ type Props = {|
 
 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const { t } = useTranslation();
-  const { documents, policies } = useStores();
-  const { showToast } = useToasts();
+  const { ui, documents, policies } = useStores();
   const { handleFiles, isImporting } = useImportDocument(
     collectionId,
     documentId
@@ -29,11 +27,11 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const can = policies.abilities(collectionId);
 
   const handleRejection = React.useCallback(() => {
-    showToast(
+    ui.showToast(
       t("Document not supported – try Markdown, Plain text, HTML, or Word"),
       { type: "error" }
     );
-  }, [t, showToast]);
+  }, [t, ui]);
 
   if (disabled || !can.update) {
     return children;

app/components/Sidebar/components/EditableTitle.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import useToasts from "hooks/useToasts";
+import useStores from "hooks/useStores";
 
 type Props = {|
   onSubmit: (title: string) => Promise<void>,
@@ -13,7 +13,7 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
-  const { showToast } = useToasts();
+  const { ui } = useStores();
 
   React.useEffect(() => {
     setValue(title);
@@ -39,40 +39,32 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
     [originalValue]
   );
 
-  const handleSave = React.useCallback(
-    async (ev) => {
-      ev.preventDefault();
+  const handleSave = React.useCallback(async () => {
+    setIsEditing(false);
 
-      setIsEditing(false);
+    if (value === originalValue) {
+      return;
+    }
 
-      const trimmedValue = value.trim();
-      if (trimmedValue === originalValue || trimmedValue.length === 0) {
+    if (document) {
+      try {
+        await onSubmit(value);
+        setOriginalValue(value);
+      } catch (error) {
         setValue(originalValue);
-        return;
+        ui.showToast(error.message, {
+          type: "error",
+        });
+        throw error;
       }
-
-      if (document) {
-        try {
-          await onSubmit(trimmedValue);
-          setOriginalValue(trimmedValue);
-        } catch (error) {
-          setValue(originalValue);
-          showToast(error.message, {
-            type: "error",
-          });
-          throw error;
-        }
-      }
-    },
-    [originalValue, showToast, value, onSubmit]
-  );
+    }
+  }, [ui, originalValue, value, onSubmit]);
 
   return (
     <>
       {isEditing ? (
         <form onSubmit={handleSave}>
           <Input
-            dir="auto"
             type="text"
             value={value}
             onKeyDown={handleKeyDown}

app/components/Sidebar/components/PlaceholderCollections.js

@@ -1,21 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import PlaceholderText from "components/PlaceholderText";
-
-function PlaceholderCollections() {
-  return (
-    <Wrapper>
-      <PlaceholderText />
-      <PlaceholderText delay={0.2} />
-      <PlaceholderText delay={0.4} />
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  margin: 4px 16px;
-  width: 75%;
-`;
-
-export default PlaceholderCollections;

app/components/Sidebar/components/ResizeBorder.js

@@ -7,7 +7,7 @@ const ResizeBorder = styled.div`
   bottom: 0;
   right: -6px;
   width: 12px;
-  cursor: col-resize;
+  cursor: ew-resize;
 `;
 
 export default ResizeBorder;

app/components/Sidebar/components/SidebarLink.js

@@ -1,5 +1,4 @@
 // @flow
-import { transparentize } from "polished";
 import * as React from "react";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -30,28 +29,25 @@ type Props = {
   depth?: number,
 };
 
-function SidebarLink(
-  {
-    icon,
-    children,
-    onClick,
-    onMouseEnter,
-    to,
-    label,
-    active,
-    isActiveDrop,
-    menu,
-    showActions,
-    theme,
-    exact,
-    href,
-    depth,
-    history,
-    match,
-    className,
-  }: Props,
-  ref
-) {
+function SidebarLink({
+  icon,
+  children,
+  onClick,
+  onMouseEnter,
+  to,
+  label,
+  active,
+  isActiveDrop,
+  menu,
+  showActions,
+  theme,
+  exact,
+  href,
+  depth,
+  history,
+  match,
+  className,
+}: Props) {
   const style = React.useMemo(() => {
     return {
       paddingLeft: `${(depth || 0) * 16 + 16}px`,
@@ -82,7 +78,6 @@ function SidebarLink(
         as={to ? undefined : href ? "a" : "div"}
         href={href}
         className={className}
-        ref={ref}
       >
         {icon && <IconWrapper>{icon}</IconWrapper>}
         <Label>{label}</Label>
@@ -146,8 +141,7 @@ const Link = styled(NavLink)`
 
   &:focus {
     color: ${(props) => props.theme.text};
-    background: ${(props) =>
-      transparentize("0.25", props.theme.sidebarItemBackground)};
+    background: ${(props) => props.theme.black05};
   }
 
   ${breakpoint("tablet")`
@@ -178,9 +172,6 @@ const Label = styled.div`
   width: 100%;
   max-height: 4.8em;
   line-height: 1.6;
-  * {
-    unicode-bidi: plaintext;
-  }
 `;
 
-export default withRouter(withTheme(React.forwardRef(SidebarLink)));
+export default withRouter(withTheme(SidebarLink));

app/components/Sidebar/components/TrashLink.js

@@ -1,62 +0,0 @@
-// @flow
-import { observer } from "mobx-react";
-import { TrashIcon } from "outline-icons";
-import * as React from "react";
-import { useState } from "react";
-import { useDrop } from "react-dnd";
-import { useTranslation } from "react-i18next";
-import DocumentDelete from "scenes/DocumentDelete";
-import Modal from "components/Modal";
-import useStores from "../../../hooks/useStores";
-import SidebarLink from "./SidebarLink";
-
-function TrashLink({ documents }) {
-  const { policies } = useStores();
-  const { t } = useTranslation();
-  const [document, setDocument] = useState();
-
-  const [{ isDocumentDropping }, dropToTrashDocument] = useDrop({
-    accept: "document",
-    drop: (item, monitor) => {
-      const doc = documents.get(item.id);
-      // without setTimeout it was not working in firefox v89.0.2-ubuntu
-      // on dropping mouseup is considered as clicking outside the modal, and it immediately closes
-      setTimeout(() => setDocument(doc), 1);
-    },
-    canDrop: (item, monitor) => policies.abilities(item.id).delete,
-    collect: (monitor) => ({
-      isDocumentDropping: monitor.isOver(),
-    }),
-  });
-
-  return (
-    <>
-      <div ref={dropToTrashDocument}>
-        <SidebarLink
-          to="/trash"
-          icon={<TrashIcon color="currentColor" open={isDocumentDropping} />}
-          exact={false}
-          label={t("Trash")}
-          active={documents.active?.isDeleted}
-          isActiveDrop={isDocumentDropping}
-        />
-      </div>
-      {document && (
-        <Modal
-          title={t("Delete {{ documentName }}", {
-            documentName: document.noun,
-          })}
-          onRequestClose={() => setDocument(undefined)}
-          isOpen
-        >
-          <DocumentDelete
-            document={document}
-            onSubmit={() => setDocument(undefined)}
-          />
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default observer(TrashLink);

app/components/SocketProvider.js

@@ -11,7 +11,7 @@ import DocumentsStore from "stores/DocumentsStore";
 import GroupsStore from "stores/GroupsStore";
 import MembershipsStore from "stores/MembershipsStore";
 import PoliciesStore from "stores/PoliciesStore";
-import ToastsStore from "stores/ToastsStore";
+import UiStore from "stores/UiStore";
 import ViewsStore from "stores/ViewsStore";
 import { getVisibilityListener, getPageVisible } from "utils/pageVisibility";
 
@@ -27,7 +27,7 @@ type Props = {
   policies: PoliciesStore,
   views: ViewsStore,
   auth: AuthStore,
-  toasts: ToastsStore,
+  ui: UiStore,
 };
 
 @observer
@@ -72,7 +72,7 @@ class SocketProvider extends React.Component<Props> {
 
     const {
       auth,
-      toasts,
+      ui,
       documents,
       collections,
       groups,
@@ -113,7 +113,7 @@ class SocketProvider extends React.Component<Props> {
 
     this.socket.on("unauthorized", (err) => {
       this.socket.authenticated = false;
-      toasts.showToast(err.message, {
+      ui.showToast(err.message, {
         type: "error",
       });
       throw err;
@@ -250,10 +250,6 @@ class SocketProvider extends React.Component<Props> {
       documents.starredIds.set(event.documentId, false);
     });
 
-    this.socket.on("documents.permanent_delete", (event) => {
-      documents.remove(event.documentId);
-    });
-
     // received when a user is given access to a collection
     // if the user is us then we go ahead and load the collection from API.
     this.socket.on("collections.add_user", (event) => {
@@ -338,7 +334,7 @@ class SocketProvider extends React.Component<Props> {
 
 export default inject(
   "auth",
-  "toasts",
+  "ui",
   "documents",
   "collections",
   "groups",

app/components/Tab.js

@@ -1,26 +1,14 @@
 // @flow
-import { m } from "framer-motion";
 import * as React from "react";
-import { NavLink, Route } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
 import { type Theme } from "types";
 
 type Props = {
   theme: Theme,
-  children: React.Node,
 };
 
-const NavLinkWithChildrenFunc = ({ to, exact = false, children, ...rest }) => (
-  <Route path={to} exact={exact}>
-    {({ match }) => (
-      <NavLink to={to} exact={exact} {...rest}>
-        {children(match)}
-      </NavLink>
-    )}
-  </Route>
-);
-
-const TabLink = styled(NavLinkWithChildrenFunc)`
+const TabLink = styled(NavLink)`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -32,48 +20,19 @@ const TabLink = styled(NavLinkWithChildrenFunc)`
 
   &:hover {
     color: ${(props) => props.theme.textSecondary};
+    border-bottom: 3px solid ${(props) => props.theme.divider};
+    padding-bottom: 5px;
   }
 `;
 
-const Active = styled(m.div)`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  width: 100%;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  background: ${(props) => props.theme.textSecondary};
-`;
-
-const transition = {
-  type: "spring",
-  stiffness: 500,
-  damping: 30,
-};
-
-function Tab({ theme, children, ...rest }: Props) {
+function Tab({ theme, ...rest }: Props) {
   const activeStyle = {
+    paddingBottom: "5px",
+    borderBottom: `3px solid ${theme.textSecondary}`,
     color: theme.textSecondary,
   };
 
-  return (
-    <TabLink {...rest} activeStyle={activeStyle}>
-      {(match) => (
-        <>
-          {children}
-          {match && (
-            <Active
-              layoutId="underline"
-              initial={false}
-              transition={transition}
-            />
-          )}
-        </>
-      )}
-    </TabLink>
-  );
+  return <TabLink {...rest} activeStyle={activeStyle} />;
 }
 
 export default withTheme(Tab);

app/components/Table.js

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import Button from "components/Button";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
-import PlaceholderText from "components/PlaceholderText";
+import Mask from "components/Mask";
 
 export type Props = {|
   data: any[],
@@ -170,7 +170,7 @@ export const Placeholder = ({
         <Row key={row}>
           {new Array(columns).fill().map((_, col) => (
             <Cell key={col}>
-              <PlaceholderText minWidth={25} maxWidth={75} />
+              <Mask minWidth={25} maxWidth={75} />
             </Cell>
           ))}
         </Row>

app/components/Tabs.js

@@ -1,40 +1,13 @@
 // @flow
-import { AnimateSharedLayout } from "framer-motion";
-import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import useWindowSize from "hooks/useWindowSize";
 
 const Nav = styled.nav`
   border-bottom: 1px solid ${(props) => props.theme.divider};
   margin: 12px 0;
   overflow-y: auto;
   white-space: nowrap;
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 50px;
-    height: 100%;
-    pointer-events: none;
-    background: ${(props) =>
-      props.$shadowVisible
-        ? `linear-gradient(
-      90deg,
-      ${transparentize(1, props.theme.background)} 0%,
-      ${props.theme.background} 100%
-    )`
-        : `transparent`};
-  }
+  transition: opacity 250ms ease-out;
 `;
 
 // When sticky we need extra background coverage around the sides otherwise
@@ -57,36 +30,11 @@ export const Separator = styled.span`
   margin-top: 6px;
 `;
 
-const Tabs = ({ children }: {| children: React.Node |}) => {
-  const ref = React.useRef<?HTMLDivElement>();
-  const [shadowVisible, setShadow] = React.useState(false);
-  const { width } = useWindowSize();
-
-  const updateShadows = React.useCallback(() => {
-    const c = ref.current;
-    if (!c) return;
-
-    const scrollLeft = c.scrollLeft;
-    const wrapperWidth = c.scrollWidth - c.clientWidth;
-    const fade = !!(wrapperWidth - scrollLeft !== 0);
-
-    if (fade !== shadowVisible) {
-      setShadow(fade);
-    }
-  }, [shadowVisible]);
-
-  React.useEffect(() => {
-    updateShadows();
-  }, [width, updateShadows]);
-
+const Tabs = (props: {}) => {
   return (
-    <AnimateSharedLayout>
-      <Sticky>
-        <Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
-          {children}
-        </Nav>
-      </Sticky>
-    </AnimateSharedLayout>
+    <Sticky>
+      <Nav {...props}></Nav>
+    </Sticky>
   );
 };
 

app/components/Theme.js

@@ -2,10 +2,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
-import { dark, light, lightMobile, darkMobile } from "shared/theme";
+import GlobalStyles from "shared/styles/globals";
+import { dark, light, lightMobile, darkMobile } from "shared/styles/theme";
 import useMediaQuery from "hooks/useMediaQuery";
 import useStores from "hooks/useStores";
-import GlobalStyles from "styles/globals";
 
 const empty = {};
 

app/components/Time.js

@@ -32,7 +32,7 @@ function Time(props: Props) {
         <time dateTime={props.dateTime}>{props.children || content}</time>
       }
     >
-      <LocaleTime tooltipDelay={250} {...props} />
+      <LocaleTime {...props} />
     </React.Suspense>
   );
 }

app/components/Toast.js

@@ -3,7 +3,7 @@ import { CheckboxIcon, InfoIcon, WarningIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { fadeAndScaleIn, pulse } from "styles/animations";
+import { fadeAndScaleIn, pulse } from "shared/styles/animations";
 import type { Toast as TToast } from "types";
 
 type Props = {

app/components/Toasts.js

@@ -6,15 +6,15 @@ import Toast from "components/Toast";
 import useStores from "hooks/useStores";
 
 function Toasts() {
-  const { toasts } = useStores();
+  const { ui } = useStores();
 
   return (
     <List>
-      {toasts.orderedData.map((toast) => (
+      {ui.orderedToasts.map((toast) => (
         <Toast
           key={toast.id}
           toast={toast}
-          onRequestClose={() => toasts.hideToast(toast.id)}
+          onRequestClose={() => ui.removeToast(toast.id)}
         />
       ))}
     </List>

app/embeds/GoogleDataStudio.js

@@ -1,39 +0,0 @@
-// @flow
-import * as React from "react";
-import Image from "components/Image";
-import Frame from "./components/Frame";
-
-const URL_REGEX = new RegExp(
-  "^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
-);
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
-
-export default class GoogleDataStudio extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    return (
-      <Frame
-        {...this.props}
-        src={this.props.attrs.href.replace("u/0", "embed").replace("/edit", "")}
-        icon={
-          <Image
-            src="/images/google-datastudio.png"
-            alt="Google Data Studio Icon"
-            width={16}
-            height={16}
-          />
-        }
-        canonicalUrl={this.props.attrs.href}
-        title="Google Data Studio"
-        border
-      />
-    );
-  }
-}

app/embeds/GoogleDataStudio.test.js

@@ -1,19 +0,0 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
-import GoogleDataStudio from "./GoogleDataStudio";
-
-describe("GoogleDataStudio", () => {
-  const match = GoogleDataStudio.ENABLED[0];
-  test("to be enabled on share link", () => {
-    expect(
-      "https://datastudio.google.com/embed/reporting/aab01789-f3a2-4ff3-9cba-c4c94c4a92e8/page/7zFD".match(
-        match
-      )
-    ).toBeTruthy();
-  });
-
-  test("to not be enabled elsewhere", () => {
-    expect("https://datastudio.google.com/u/0/".match(match)).toBe(null);
-    expect("https://datastudio.google.com".match(match)).toBe(null);
-    expect("https://www.google.com".match(match)).toBe(null);
-  });
-});

app/embeds/Mindmeister.js

@@ -17,10 +17,7 @@ export default class Mindmeister extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
-    const chartId =
-      this.props.attrs.matches[4] +
-      (this.props.attrs.matches[5] || "") +
-      (this.props.attrs.matches[6] || "");
+    const chartId = this.props.attrs.matches[4] + this.props.attrs.matches[6];
 
     return (
       <Frame

app/embeds/components/Frame.js

@@ -11,7 +11,9 @@ import Flex from "components/Flex";
 const Iframe = (props) => <iframe title="Embed" {...props} />;
 
 const StyledIframe = styled(Iframe)`
-  border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
+  border: 1px solid;
+  border-color: ${(props) => props.theme.embedBorder};
+  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
   display: block;
 `;
 
@@ -68,13 +70,13 @@ class Frame extends React.Component<PropsWithRef> {
       <Rounded
         width={width}
         height={height}
-        $withBar={withBar}
+        withBar={withBar}
         className={isSelected ? "ProseMirror-selectednode" : ""}
       >
         {this.isLoaded && (
           <Component
             ref={forwardedRef}
-            $withBar={withBar}
+            withBar={withBar}
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
             width={width}
             height={height}
@@ -106,11 +108,10 @@ class Frame extends React.Component<PropsWithRef> {
 }
 
 const Rounded = styled.div`
-  border: 1px solid ${(props) => props.theme.embedBorder};
-  border-radius: 6px;
+  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
   overflow: hidden;
   width: ${(props) => props.width};
-  height: ${(props) => (props.$withBar ? props.height + 28 : props.height)};
+  height: ${(props) => (props.withBar ? props.height + 28 : props.height)};
 `;
 
 const Open = styled.a`
@@ -131,12 +132,11 @@ const Title = styled.span`
 `;
 
 const Bar = styled(Flex)`
-  border-top: 1px solid ${(props) => props.theme.embedBorder};
   background: ${(props) => props.theme.secondaryBackground};
   color: ${(props) => props.theme.textSecondary};
   padding: 0 8px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
   user-select: none;
 `;
 

app/embeds/index.js

@@ -11,7 +11,6 @@ import Descript from "./Descript";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
-import GoogleDataStudio from "./GoogleDataStudio";
 import GoogleDocs from "./GoogleDocs";
 import GoogleDrawings from "./GoogleDrawings";
 import GoogleDrive from "./GoogleDrive";
@@ -149,13 +148,6 @@ export default [
     component: GoogleSlides,
     matcher: matcher(GoogleSlides),
   },
-  {
-    title: "Google Data Studio",
-    keywords: "business intelligence",
-    icon: () => <Img src="/images/google-datastudio.png" />,
-    component: GoogleDataStudio,
-    matcher: matcher(GoogleDataStudio),
-  },
   {
     title: "InVision",
     keywords: "design prototype",

app/hooks/useBoolean.js

@@ -1,23 +0,0 @@
-// @flow
-import * as React from "react";
-
-type InitialState = boolean | (() => boolean);
-
-/**
- * React hook to manage booleans
- *
- * @param initialState the initial boolean state value
- */
-export default function useBoolean(initialState: InitialState = false) {
-  const [value, setValue] = React.useState(initialState);
-
-  const setTrue = React.useCallback(() => {
-    setValue(true);
-  }, []);
-
-  const setFalse = React.useCallback(() => {
-    setValue(false);
-  }, []);
-
-  return [value, setTrue, setFalse];
-}

app/hooks/useCurrentTeam.js

@@ -4,6 +4,6 @@ import useStores from "./useStores";
 
 export default function useCurrentTeam() {
   const { auth } = useStores();
-  invariant(auth.team, "team required");
+  invariant(auth.team, "Expected to be authenticated");
   return auth.team;
 }

app/hooks/useImportDocument.js

@@ -4,7 +4,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 
 let importingLock = false;
 
@@ -12,8 +11,7 @@ export default function useImportDocument(
   collectionId: string,
   documentId?: string
 ): {| handleFiles: (files: File[]) => Promise<void>, isImporting: boolean |} {
-  const { documents } = useStores();
-  const { showToast } = useToasts();
+  const { documents, ui } = useStores();
   const [isImporting, setImporting] = React.useState(false);
   const { t } = useTranslation();
   const history = useHistory();
@@ -53,7 +51,7 @@ export default function useImportDocument(
           }
         }
       } catch (err) {
-        showToast(`${t("Could not import file")}. ${err.message}`, {
+        ui.showToast(`${t("Could not import file")}. ${err.message}`, {
           type: "error",
         });
       } finally {
@@ -61,7 +59,7 @@ export default function useImportDocument(
         importingLock = false;
       }
     },
-    [t, documents, history, showToast, collectionId, documentId]
+    [t, ui, documents, history, collectionId, documentId]
   );
 
   return {

app/hooks/useToasts.js

@@ -1,8 +0,0 @@
-// @flow
-import useStores from "./useStores";
-
-export default function useToasts() {
-  const { toasts } = useStores();
-
-  return { showToast: toasts.showToast, hideToast: toasts.hideToast };
-}

app/index.js

@@ -1,6 +1,5 @@
 // @flow
 import "focus-visible";
-import { LazyMotion } from "framer-motion";
 import { createBrowserHistory } from "history";
 import { Provider } from "mobx-react";
 import * as React from "react";
@@ -50,10 +49,6 @@ if ("serviceWorker" in window.navigator) {
   });
 }
 
-// Make sure to return the specific export containing the feature bundle.
-const loadFeatures = () =>
-  import("./utils/motion.js").then((res) => res.default);
-
 if (element) {
   const App = () => (
     <React.StrictMode>
@@ -61,17 +56,15 @@ if (element) {
         <Analytics>
           <Theme>
             <ErrorBoundary>
-              <LazyMotion features={loadFeatures}>
-                <Router history={history}>
-                  <>
-                    <PageTheme />
-                    <ScrollToTop>
-                      <Routes />
-                    </ScrollToTop>
-                    <Toasts />
-                  </>
-                </Router>
-              </LazyMotion>
+              <Router history={history}>
+                <>
+                  <PageTheme />
+                  <ScrollToTop>
+                    <Routes />
+                  </ScrollToTop>
+                  <Toasts />
+                </>
+              </Router>
             </ErrorBoundary>
           </Theme>
         </Analytics>

app/menus/AccountMenu.js

@@ -19,7 +19,6 @@ import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem";
 import Separator from "components/ContextMenu/Separator";
 import Flex from "components/Flex";
 import Guide from "components/Guide";
-import useBoolean from "hooks/useBoolean";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
@@ -73,18 +72,15 @@ const AppearanceMenu = React.forwardRef((props, ref) => {
 
 function AccountMenu(props: Props) {
   const menu = useMenuState({
-    unstable_offset: [8, 0],
     placement: "bottom-start",
     modal: true,
   });
   const { auth, ui } = useStores();
   const previousTheme = usePrevious(ui.theme);
   const { t } = useTranslation();
-  const [
-    keyboardShortcutsOpen,
-    handleKeyboardShortcutsOpen,
-    handleKeyboardShortcutsClose,
-  ] = useBoolean();
+  const [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState(
+    false
+  );
 
   React.useEffect(() => {
     if (ui.theme !== previousTheme) {
@@ -96,7 +92,7 @@ function AccountMenu(props: Props) {
     <>
       <Guide
         isOpen={keyboardShortcutsOpen}
-        onRequestClose={handleKeyboardShortcutsClose}
+        onRequestClose={() => setKeyboardShortcutsOpen(false)}
         title={t("Keyboard shortcuts")}
       >
         <KeyboardShortcuts />
@@ -106,7 +102,7 @@ function AccountMenu(props: Props) {
         <MenuItem {...menu} as={Link} to={settings()}>
           {t("Settings")}
         </MenuItem>
-        <MenuItem {...menu} onClick={handleKeyboardShortcutsOpen}>
+        <MenuItem {...menu} onClick={() => setKeyboardShortcutsOpen(true)}>
           {t("Keyboard shortcuts")}
         </MenuItem>
         <MenuItem {...menu} href={developers()} target="_blank">

app/menus/CollectionMenu.js

@@ -12,10 +12,9 @@ import CollectionExport from "scenes/CollectionExport";
 import CollectionPermissions from "scenes/CollectionPermissions";
 import ContextMenu from "components/ContextMenu";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
-import Template, { filterTemplateItems } from "components/ContextMenu/Template";
+import Template from "components/ContextMenu/Template";
 import Modal from "components/Modal";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 import getDataTransferFiles from "utils/getDataTransferFiles";
 import { newDocumentUrl } from "utils/routeHelpers";
 
@@ -38,8 +37,7 @@ function CollectionMenu({
 }: Props) {
   const menu = useMenuState({ modal, placement });
   const [renderModals, setRenderModals] = React.useState(false);
-  const { documents, policies } = useStores();
-  const { showToast } = useToasts();
+  const { ui, documents, policies } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -101,63 +99,17 @@ function CollectionMenu({
         });
         history.push(document.url);
       } catch (err) {
-        showToast(err.message, {
+        ui.showToast(err.message, {
           type: "error",
         });
 
         throw err;
       }
     },
-    [history, showToast, collection.id, documents]
+    [history, ui, collection.id, documents]
   );
 
   const can = policies.abilities(collection.id);
-  const items = React.useMemo(
-    () =>
-      filterTemplateItems([
-        {
-          title: t("New document"),
-          visible: can.update,
-          onClick: handleNewDocument,
-        },
-        {
-          title: t("Import document"),
-          visible: can.update,
-          onClick: handleImportDocument,
-        },
-        {
-          type: "separator",
-        },
-        {
-          title: `${t("Edit")}…`,
-          visible: can.update,
-          onClick: () => setShowCollectionEdit(true),
-        },
-        {
-          title: `${t("Permissions")}…`,
-          visible: can.update,
-          onClick: () => setShowCollectionPermissions(true),
-        },
-        {
-          title: `${t("Export")}…`,
-          visible: !!(collection && can.export),
-          onClick: () => setShowCollectionExport(true),
-        },
-        {
-          type: "separator",
-        },
-        {
-          title: `${t("Delete")}…`,
-          visible: !!(collection && can.delete),
-          onClick: () => setShowCollectionDelete(true),
-        },
-      ]),
-    [can, collection, handleNewDocument, handleImportDocument, t]
-  );
-
-  if (!items.length) {
-    return null;
-  }
 
   return (
     <>
@@ -182,7 +134,47 @@ function CollectionMenu({
         onClose={onClose}
         aria-label={t("Collection")}
       >
-        <Template {...menu} items={items} />
+        <Template
+          {...menu}
+          items={[
+            {
+              title: t("New document"),
+              visible: can.update,
+              onClick: handleNewDocument,
+            },
+            {
+              title: t("Import document"),
+              visible: can.update,
+              onClick: handleImportDocument,
+            },
+            {
+              type: "separator",
+            },
+            {
+              title: `${t("Edit")}…`,
+              visible: can.update,
+              onClick: () => setShowCollectionEdit(true),
+            },
+            {
+              title: `${t("Permissions")}…`,
+              visible: can.update,
+              onClick: () => setShowCollectionPermissions(true),
+            },
+            {
+              title: `${t("Export")}…`,
+              visible: !!(collection && can.export),
+              onClick: () => setShowCollectionExport(true),
+            },
+            {
+              type: "separator",
+            },
+            {
+              title: `${t("Delete")}…`,
+              visible: !!(collection && can.delete),
+              onClick: () => setShowCollectionDelete(true),
+            },
+          ]}
+        />
       </ContextMenu>
       {renderModals && (
         <>

app/menus/DocumentMenu.js

@@ -9,7 +9,6 @@ import styled from "styled-components";
 import Document from "models/Document";
 import DocumentDelete from "scenes/DocumentDelete";
 import DocumentMove from "scenes/DocumentMove";
-import DocumentPermanentDelete from "scenes/DocumentPermanentDelete";
 import DocumentTemplatize from "scenes/DocumentTemplatize";
 import CollectionIcon from "components/CollectionIcon";
 import ContextMenu from "components/ContextMenu";
@@ -18,7 +17,6 @@ import Template from "components/ContextMenu/Template";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 import getDataTransferFiles from "utils/getDataTransferFiles";
 import {
   documentHistoryUrl,
@@ -52,8 +50,7 @@ function DocumentMenu({
   onOpen,
   onClose,
 }: Props) {
-  const { policies, collections, documents } = useStores();
-  const { showToast } = useToasts();
+  const { policies, collections, ui, documents } = useStores();
   const menu = useMenuState({
     modal,
     unstable_preventOverflow: true,
@@ -64,10 +61,6 @@ function DocumentMenu({
   const { t } = useTranslation();
   const [renderModals, setRenderModals] = React.useState(false);
   const [showDeleteModal, setShowDeleteModal] = React.useState(false);
-  const [
-    showPermanentDeleteModal,
-    setShowPermanentDeleteModal,
-  ] = React.useState(false);
   const [showMoveModal, setShowMoveModal] = React.useState(false);
   const [showTemplateModal, setShowTemplateModal] = React.useState(false);
   const file = React.useRef<?HTMLInputElement>();
@@ -85,33 +78,33 @@ function DocumentMenu({
 
       // when duplicating, go straight to the duplicated document content
       history.push(duped.url);
-      showToast(t("Document duplicated"), { type: "success" });
+      ui.showToast(t("Document duplicated"), { type: "success" });
     },
-    [t, history, showToast, document]
+    [ui, t, history, document]
   );
 
   const handleArchive = React.useCallback(
     async (ev: SyntheticEvent<>) => {
       await document.archive();
-      showToast(t("Document archived"), { type: "success" });
+      ui.showToast(t("Document archived"), { type: "success" });
     },
-    [showToast, t, document]
+    [ui, t, document]
   );
 
   const handleRestore = React.useCallback(
     async (ev: SyntheticEvent<>, options?: { collectionId: string }) => {
       await document.restore(options);
-      showToast(t("Document restored"), { type: "success" });
+      ui.showToast(t("Document restored"), { type: "success" });
     },
-    [showToast, t, document]
+    [ui, t, document]
   );
 
   const handleUnpublish = React.useCallback(
     async (ev: SyntheticEvent<>) => {
       await document.unpublish();
-      showToast(t("Document unpublished"), { type: "success" });
+      ui.showToast(t("Document unpublished"), { type: "success" });
     },
-    [showToast, t, document]
+    [ui, t, document]
   );
 
   const handlePrint = React.useCallback((ev: SyntheticEvent<>) => {
@@ -183,14 +176,14 @@ function DocumentMenu({
         );
         history.push(importedDocument.url);
       } catch (err) {
-        showToast(err.message, {
+        ui.showToast(err.message, {
           type: "error",
         });
 
         throw err;
       }
     },
-    [history, showToast, collection, documents, document.id]
+    [history, ui, collection, documents, document.id]
   );
 
   return (
@@ -334,11 +327,6 @@ function DocumentMenu({
               onClick: () => setShowDeleteModal(true),
               visible: !!can.delete,
             },
-            {
-              title: `${t("Permanently delete")}…`,
-              onClick: () => setShowPermanentDeleteModal(true),
-              visible: can.permanentDelete,
-            },
             {
               title: `${t("Move")}…`,
               onClick: () => setShowMoveModal(true),
@@ -369,60 +357,40 @@ function DocumentMenu({
       </ContextMenu>
       {renderModals && (
         <>
-          {can.move && (
-            <Modal
-              title={t("Move {{ documentName }}", {
-                documentName: document.noun,
-              })}
+          <Modal
+            title={t("Move {{ documentName }}", {
+              documentName: document.noun,
+            })}
+            onRequestClose={() => setShowMoveModal(false)}
+            isOpen={showMoveModal}
+          >
+            <DocumentMove
+              document={document}
               onRequestClose={() => setShowMoveModal(false)}
-              isOpen={showMoveModal}
-            >
-              <DocumentMove
-                document={document}
-                onRequestClose={() => setShowMoveModal(false)}
-              />
-            </Modal>
-          )}
-          {can.delete && (
-            <Modal
-              title={t("Delete {{ documentName }}", {
-                documentName: document.noun,
-              })}
-              onRequestClose={() => setShowDeleteModal(false)}
-              isOpen={showDeleteModal}
-            >
-              <DocumentDelete
-                document={document}
-                onSubmit={() => setShowDeleteModal(false)}
-              />
-            </Modal>
-          )}
-          {can.permanentDelete && (
-            <Modal
-              title={t("Permanently delete {{ documentName }}", {
-                documentName: document.noun,
-              })}
-              onRequestClose={() => setShowPermanentDeleteModal(false)}
-              isOpen={showPermanentDeleteModal}
-            >
-              <DocumentPermanentDelete
-                document={document}
-                onSubmit={() => setShowPermanentDeleteModal(false)}
-              />
-            </Modal>
-          )}
-          {can.update && (
-            <Modal
-              title={t("Create template")}
-              onRequestClose={() => setShowTemplateModal(false)}
-              isOpen={showTemplateModal}
-            >
-              <DocumentTemplatize
-                document={document}
-                onSubmit={() => setShowTemplateModal(false)}
-              />
-            </Modal>
-          )}
+            />
+          </Modal>
+          <Modal
+            title={t("Delete {{ documentName }}", {
+              documentName: document.noun,
+            })}
+            onRequestClose={() => setShowDeleteModal(false)}
+            isOpen={showDeleteModal}
+          >
+            <DocumentDelete
+              document={document}
+              onSubmit={() => setShowDeleteModal(false)}
+            />
+          </Modal>
+          <Modal
+            title={t("Create template")}
+            onRequestClose={() => setShowTemplateModal(false)}
+            isOpen={showTemplateModal}
+          >
+            <DocumentTemplatize
+              document={document}
+              onSubmit={() => setShowTemplateModal(false)}
+            />
+          </Modal>
         </>
       )}
     </>

app/menus/RevisionMenu.js

@@ -11,7 +11,7 @@ import MenuItem from "components/ContextMenu/MenuItem";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import Separator from "components/ContextMenu/Separator";
 import CopyToClipboard from "components/CopyToClipboard";
-import useToasts from "hooks/useToasts";
+import useStores from "hooks/useStores";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {|
@@ -22,7 +22,7 @@ type Props = {|
 |};
 
 function RevisionMenu({ document, revision, className, iconColor }: Props) {
-  const { showToast } = useToasts();
+  const { ui } = useStores();
   const menu = useMenuState({ modal: true });
   const { t } = useTranslation();
   const history = useHistory();
@@ -31,15 +31,15 @@ function RevisionMenu({ document, revision, className, iconColor }: Props) {
     async (ev: SyntheticEvent<>) => {
       ev.preventDefault();
       await document.restore({ revisionId: revision.id });
-      showToast(t("Document restored"), { type: "success" });
+      ui.showToast(t("Document restored"), { type: "success" });
       history.push(document.url);
     },
-    [history, showToast, t, document, revision]
+    [history, ui, t, document, revision]
   );
 
   const handleCopy = React.useCallback(() => {
-    showToast(t("Link copied"), { type: "info" });
-  }, [showToast, t]);
+    ui.showToast(t("Link copied"), { type: "info" });
+  }, [ui, t]);
 
   const url = `${window.location.origin}${documentHistoryUrl(
     document,

app/menus/ShareMenu.js

@@ -10,7 +10,6 @@ import MenuItem from "components/ContextMenu/MenuItem";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import CopyToClipboard from "components/CopyToClipboard";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 
 type Props = {
   share: Share,
@@ -18,8 +17,7 @@ type Props = {
 
 function ShareMenu({ share }: Props) {
   const menu = useMenuState({ modal: true });
-  const { shares, policies } = useStores();
-  const { showToast } = useToasts();
+  const { ui, shares, policies } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
   const can = policies.abilities(share.id);
@@ -38,17 +36,17 @@ function ShareMenu({ share }: Props) {
 
       try {
         await shares.revoke(share);
-        showToast(t("Share link revoked"), { type: "info" });
+        ui.showToast(t("Share link revoked"), { type: "info" });
       } catch (err) {
-        showToast(err.message, { type: "error" });
+        ui.showToast(err.message, { type: "error" });
       }
     },
-    [t, shares, share, showToast]
+    [t, shares, share, ui]
   );
 
   const handleCopy = React.useCallback(() => {
-    showToast(t("Share link copied"), { type: "info" });
-  }, [t, showToast]);
+    ui.showToast(t("Share link copied"), { type: "info" });
+  }, [t, ui]);
 
   return (
     <>

app/menus/TableOfContentsMenu.js

@@ -1,76 +0,0 @@
-// @flow
-import { observer } from "mobx-react";
-import { TableOfContentsIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { MenuButton, useMenuState } from "reakit/Menu";
-import Button from "components/Button";
-import ContextMenu from "components/ContextMenu";
-import Template from "components/ContextMenu/Template";
-import { type MenuItem } from "types";
-
-type Props = {|
-  headings: { title: string, level: number, id: string }[],
-|};
-
-function TableOfContentsMenu({ headings }: Props) {
-  const menu = useMenuState({
-    modal: true,
-    unstable_preventOverflow: true,
-    unstable_fixed: true,
-    unstable_flip: true,
-  });
-
-  const { t } = useTranslation();
-
-  const minHeading = headings.reduce(
-    (memo, heading) => (heading.level < memo ? heading.level : memo),
-    Infinity
-  );
-
-  const items: MenuItem[] = React.useMemo(() => {
-    let i = [
-      {
-        type: "heading",
-        visible: true,
-        title: t("Contents"),
-      },
-      ...headings.map((heading) => ({
-        href: `#${heading.id}`,
-        title: t(heading.title),
-        level: heading.level - minHeading,
-      })),
-    ];
-
-    if (i.length === 1) {
-      i.push({
-        href: "#",
-        title: t("Headings you add to the document will appear here"),
-        disabled: true,
-      });
-    }
-
-    return i;
-  }, [t, headings, minHeading]);
-
-  return (
-    <>
-      <MenuButton {...menu}>
-        {(props) => (
-          <Button
-            {...props}
-            icon={<TableOfContentsIcon />}
-            iconColor="currentColor"
-            borderOnHover
-            neutral
-          />
-        )}
-      </MenuButton>
-      <ContextMenu {...menu} aria-label={t("Table of contents")}>
-        <Template {...menu} items={items} />
-      </ContextMenu>
-    </>
-  );
-}
-
-export default observer(TableOfContentsMenu);

app/menus/TemplatesMenu.js

@@ -40,13 +40,13 @@ function TemplatesMenu({ document }: Props) {
       {...menu}
     >
       <DocumentIcon />
-      <TemplateItem>
+      <div>
         <strong>{template.titleWithDefault}</strong>
         <br />
         <Author>
           {t("By {{ author }}", { author: template.createdBy.name })}
         </Author>
-      </TemplateItem>
+      </div>
     </MenuItem>
   );
 
@@ -70,12 +70,9 @@ function TemplatesMenu({ document }: Props) {
   );
 }
 
-const TemplateItem = styled.div`
+const Author = styled.div`
+  font-size: 13px;
   text-align: left;
 `;
 
-const Author = styled.div`
-  font-size: 13px;
-`;
-
 export default observer(TemplatesMenu);

app/models/Document.js

@@ -1,7 +1,6 @@
 // @flow
 import { addDays, differenceInDays } from "date-fns";
 import invariant from "invariant";
-import { floor } from "lodash";
 import { action, computed, observable, set } from "mobx";
 import parseTitle from "shared/utils/parseTitle";
 import unescape from "shared/utils/unescape";
@@ -44,7 +43,6 @@ export default class Document extends BaseModel {
   deletedAt: ?string;
   url: string;
   urlId: string;
-  tasks: { completed: number, total: number };
   revision: number;
 
   constructor(fields: Object, store: DocumentsStore) {
@@ -60,26 +58,6 @@ export default class Document extends BaseModel {
     return emoji;
   }
 
-  /**
-   * Best-guess the text direction of the document based on the language the
-   * title is written in. Note: wrapping as a computed getter means that it will
-   * only be called directly when the title changes.
-   */
-  @computed
-  get dir(): "rtl" | "ltr" {
-    const element = document.createElement("p");
-    element.innerHTML = this.title;
-    element.style.visibility = "hidden";
-    element.dir = "auto";
-
-    // element must appear in body for direction to be computed
-    document.body?.appendChild(element);
-
-    const direction = window.getComputedStyle(element).direction;
-    document.body?.removeChild(element);
-    return direction;
-  }
-
   @computed
   get noun(): string {
     return this.template ? "template" : "document";
@@ -98,6 +76,7 @@ export default class Document extends BaseModel {
   @computed
   get isNew(): boolean {
     return (
+      !!this.publishedAt &&
       !this.lastViewedAt &&
       differenceInDays(new Date(), new Date(this.createdAt)) < 14
     );
@@ -153,16 +132,8 @@ export default class Document extends BaseModel {
   }
 
   @computed
-  get isTasks(): boolean {
-    return !!this.tasks.total;
-  }
-
-  @computed
-  get tasksPercentage(): number {
-    if (!this.isTasks) {
-      return 0;
-    }
-    return floor((this.tasks.completed / this.tasks.total) * 100);
+  get placeholder(): ?string {
+    return this.isTemplate ? "Start your template…" : "Start with a title…";
   }
 
   @action
@@ -261,6 +232,27 @@ export default class Document extends BaseModel {
     this.injectTemplate = true;
   };
 
+  @action
+  update = async (options: SaveOptions & { title: string }) => {
+    if (this.isSaving) return this;
+    this.isSaving = true;
+
+    try {
+      if (options.lastRevision) {
+        return await this.store.update({
+          id: this.id,
+          title: this.title,
+          lastRevision: options.lastRevision,
+          ...options,
+        });
+      }
+
+      throw new Error("Attempting to update without a lastRevision");
+    } finally {
+      this.isSaving = false;
+    }
+  };
+
   @action
   save = async (options: SaveOptions = {}) => {
     if (this.isSaving) return this;
@@ -294,7 +286,7 @@ export default class Document extends BaseModel {
         });
       }
 
-      throw new Error("Attempting to update without a lastRevision");
+      throw new Error("Attempting to save without a lastRevision");
     } finally {
       this.isSaving = false;
     }

app/models/Team.js

@@ -8,6 +8,7 @@ class Team extends BaseModel {
   avatarUrl: string;
   sharing: boolean;
   documentEmbeds: boolean;
+  multiplayerEditor: boolean;
   guestSignin: boolean;
   subdomain: ?string;
   domain: ?string;

app/models/User.js

@@ -8,6 +8,7 @@ class User extends BaseModel {
   id: string;
   name: string;
   email: string;
+  color: string;
   isAdmin: boolean;
   isViewer: boolean;
   lastActiveAt: string;

app/multiplayer/MultiplayerExtension.js

@@ -0,0 +1,55 @@
+// @flow
+import { keymap } from "prosemirror-keymap";
+import { Extension } from "rich-markdown-editor";
+import {
+  ySyncPlugin,
+  yCursorPlugin,
+  yUndoPlugin,
+  undo,
+  redo,
+} from "y-prosemirror";
+import * as Y from "yjs";
+
+export default class MultiplayerExtension extends Extension {
+  get name() {
+    return "multiplayer";
+  }
+
+  get plugins() {
+    const { user, provider, doc } = this.options;
+    const type = doc.get("prosemirror", Y.XmlFragment);
+
+    const assignUser = (tr) => {
+      const clientIds = Array.from(doc.store.clients.keys());
+
+      if (
+        tr.local &&
+        tr.changed.size > 0 &&
+        !clientIds.includes(doc.clientID)
+      ) {
+        const permanentUserData = new Y.PermanentUserData(doc);
+        permanentUserData.setUserMapping(doc, doc.clientID, user.id);
+        doc.off("afterTransaction", assignUser);
+      }
+    };
+
+    provider.awareness.setLocalStateField("user", {
+      color: user.color,
+      name: user.name,
+      id: user.id,
+    });
+
+    doc.on("afterTransaction", assignUser);
+
+    return [
+      ySyncPlugin(type),
+      yCursorPlugin(provider.awareness),
+      yUndoPlugin(),
+      keymap({
+        "Mod-z": undo,
+        "Mod-y": redo,
+        "Mod-Shift-z": redo,
+      }),
+    ];
+  }
+}

app/multiplayer/WebsocketProvider.js

@@ -0,0 +1,356 @@
+// Based on example implementation, modified to work with existing sockets
+// https://github.com/yjs/y-websocket/blob/master/src/y-websocket.js
+
+// @flow
+import * as bc from "lib0/broadcastchannel.js";
+import * as decoding from "lib0/decoding.js";
+import * as encoding from "lib0/encoding.js";
+import * as mutex from "lib0/mutex.js";
+import { Observable } from "lib0/observable.js";
+import { Socket } from "socket.io-client";
+import * as awarenessProtocol from "y-protocols/awareness.js";
+import * as syncProtocol from "y-protocols/sync.js";
+import * as Y from "yjs";
+import {
+  MESSAGE_SYNC,
+  MESSAGE_AWARENESS,
+  MESSAGE_QUERY_AWARENESS,
+} from "shared/constants";
+
+const readMessage = (
+  provider: WebsocketProvider,
+  buff: Uint8Array,
+  emitSynced: boolean
+): encoding.Encoder => {
+  const decoder = decoding.createDecoder(buff);
+  const encoder = encoding.createEncoder();
+  const messageType = decoding.readVarUint(decoder);
+
+  switch (messageType) {
+    case MESSAGE_SYNC: {
+      encoding.writeVarUint(encoder, MESSAGE_SYNC);
+      const syncMessageType = syncProtocol.readSyncMessage(
+        decoder,
+        encoder,
+        provider.doc,
+        provider
+      );
+      if (
+        emitSynced &&
+        syncMessageType === syncProtocol.messageYjsSyncStep2 &&
+        !provider.synced
+      ) {
+        provider.synced = true;
+      }
+      break;
+    }
+    case MESSAGE_QUERY_AWARENESS:
+      encoding.writeVarUint(encoder, MESSAGE_AWARENESS);
+      encoding.writeVarUint8Array(
+        encoder,
+        awarenessProtocol.encodeAwarenessUpdate(
+          provider.awareness,
+          Array.from(provider.awareness.getStates().keys())
+        )
+      );
+      break;
+    case MESSAGE_AWARENESS:
+      awarenessProtocol.applyAwarenessUpdate(
+        provider.awareness,
+        decoding.readVarUint8Array(decoder),
+        provider
+      );
+      break;
+    default:
+      console.error("Unable to compute message");
+      return encoder;
+  }
+  return encoder;
+};
+
+const broadcastMessage = (provider: WebsocketProvider, buff: ArrayBuffer) => {
+  if (provider.wsconnected) {
+    provider.wsPublish(buff);
+  }
+  if (provider.bcconnected) {
+    provider.mux(() => {
+      bc.publish(provider.documentId, buff);
+    });
+  }
+};
+
+/**
+ * Websocket Provider for Yjs. Syncs the shared document using socket.io socket
+ */
+export class WebsocketProvider extends Observable {
+  constructor(
+    socket: Socket,
+    documentId: string,
+    userId: string,
+    doc: Y.Doc,
+    {
+      awareness = new awarenessProtocol.Awareness(doc),
+      resyncInterval = 0,
+    }: {
+      awareness: awarenessProtocol.Awareness,
+      resyncInterval: number,
+    } = {}
+  ) {
+    super();
+    this.socket = socket;
+    this.bcChannel = documentId;
+    this.documentId = documentId;
+    this.userId = userId;
+    this.doc = doc;
+    this.awareness = awareness;
+    this.wsconnected = false;
+    this.bcconnected = false;
+    this.shouldConnect = true;
+    this.mux = mutex.createMutex();
+    this._synced = false;
+    this._resyncInterval = 0;
+
+    if (resyncInterval > 0) {
+      this._resyncInterval = setInterval(() => {
+        if (this.ws) {
+          // resend sync step 1
+          const encoder = encoding.createEncoder();
+          encoding.writeVarUint(encoder, MESSAGE_SYNC);
+          syncProtocol.writeSyncStep1(encoder, doc);
+          this.wsPublish(encoding.toUint8Array(encoder));
+        }
+      }, resyncInterval);
+    }
+
+    this.doc.on("update", this._updateHandler);
+
+    window.addEventListener("beforeunload", this._unloadHandler);
+    awareness.on("update", this._awarenessUpdateHandler);
+
+    this.connect();
+  }
+
+  _unloadHandler = () => {
+    awarenessProtocol.removeAwarenessStates(
+      this.awareness,
+      [this.doc.clientID],
+      "window unload"
+    );
+  };
+
+  _bcSubscriber = (data: ArrayBuffer) => {
+    this.mux(() => {
+      const encoder = readMessage(this, new Uint8Array(data), false);
+      if (encoding.length(encoder) > 1) {
+        bc.publish(this.bcChannel, encoding.toUint8Array(encoder));
+      }
+    });
+  };
+
+  /**
+   * Listens to Yjs updates and sends them to remote peers (ws and broadcastchannel)
+   */
+  _updateHandler = (update: Uint8Array, origin: any) => {
+    if (origin !== this || origin === null) {
+      const encoder = encoding.createEncoder();
+      encoding.writeVarUint(encoder, MESSAGE_SYNC);
+      syncProtocol.writeUpdate(encoder, update);
+      broadcastMessage(this, encoding.toUint8Array(encoder));
+    }
+  };
+
+  _awarenessUpdateHandler = ({ added, updated, removed }: any, origin: any) => {
+    const changedClients = added.concat(updated).concat(removed);
+    const encoder = encoding.createEncoder();
+    encoding.writeVarUint(encoder, MESSAGE_AWARENESS);
+    encoding.writeVarUint8Array(
+      encoder,
+      awarenessProtocol.encodeAwarenessUpdate(this.awareness, changedClients)
+    );
+    broadcastMessage(this, encoding.toUint8Array(encoder));
+  };
+
+  get synced() {
+    return this._synced;
+  }
+
+  set synced(state: boolean) {
+    if (this._synced !== state) {
+      this._synced = state;
+      this.emit("sync", [state]);
+    }
+  }
+
+  destroy() {
+    if (this._resyncInterval !== 0) {
+      clearInterval(this._resyncInterval);
+    }
+    this.disconnect();
+    this.awareness.off("update", this._awarenessUpdateHandler);
+    this.doc.off("update", this._updateHandler);
+    this.awareness.destroy();
+    window.removeEventListener("beforeunload", this._unloadHandler);
+    super.destroy();
+  }
+
+  connectBc() {
+    if (!this.bcconnected) {
+      bc.subscribe(this.bcChannel, this._bcSubscriber);
+      this.bcconnected = true;
+    }
+
+    // send sync step1 to bc
+    this.mux(() => {
+      // write sync step 1
+      const encoderSync = encoding.createEncoder();
+      encoding.writeVarUint(encoderSync, MESSAGE_SYNC);
+      syncProtocol.writeSyncStep1(encoderSync, this.doc);
+      bc.publish(this.bcChannel, encoding.toUint8Array(encoderSync));
+
+      // broadcast local state
+      const encoderState = encoding.createEncoder();
+      encoding.writeVarUint(encoderState, MESSAGE_SYNC);
+      syncProtocol.writeSyncStep2(encoderState, this.doc);
+      bc.publish(this.bcChannel, encoding.toUint8Array(encoderState));
+
+      // write queryAwareness
+      const encoderAwarenessQuery = encoding.createEncoder();
+      encoding.writeVarUint(encoderAwarenessQuery, MESSAGE_QUERY_AWARENESS);
+      bc.publish(this.bcChannel, encoding.toUint8Array(encoderAwarenessQuery));
+
+      // broadcast local awareness state
+      const encoderAwarenessState = encoding.createEncoder();
+      encoding.writeVarUint(encoderAwarenessState, MESSAGE_AWARENESS);
+      encoding.writeVarUint8Array(
+        encoderAwarenessState,
+        awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
+          this.doc.clientID,
+        ])
+      );
+      bc.publish(this.bcChannel, encoding.toUint8Array(encoderAwarenessState));
+    });
+  }
+
+  disconnectBc() {
+    // broadcast message with local awareness state set to null (indicating disconnect)
+    const encoder = encoding.createEncoder();
+    encoding.writeVarUint(encoder, MESSAGE_AWARENESS);
+    encoding.writeVarUint8Array(
+      encoder,
+      awarenessProtocol.encodeAwarenessUpdate(
+        this.awareness,
+        [this.doc.clientID],
+        new Map()
+      )
+    );
+    broadcastMessage(this, encoding.toUint8Array(encoder));
+    if (this.bcconnected) {
+      bc.unsubscribe(this.bcChannel, this._bcSubscriber);
+      this.bcconnected = false;
+    }
+  }
+
+  wsPublish(data: ArrayBuffer) {
+    if (!data) return;
+
+    this.socket.binary(true).emit("sync", {
+      documentId: this.documentId,
+      userId: this.userId,
+      data,
+    });
+  }
+
+  _wsMessageHandler = (event: {
+    documentId: string,
+    userId: string,
+    data: ArrayBuffer,
+  }) => {
+    if (event.documentId === this.documentId) {
+      const encoder = readMessage(this, new Uint8Array(event.data), true);
+      if (encoding.length(encoder) > 1) {
+        this.wsPublish(encoding.toUint8Array(encoder));
+      }
+    }
+  };
+
+  _wsCloseHandler = () => {
+    awarenessProtocol.removeAwarenessStates(
+      this.awareness,
+      Array.from(this.awareness.getStates().keys()),
+      this
+    );
+
+    this.emit("status", [
+      {
+        status: "disconnected",
+      },
+    ]);
+  };
+
+  _wsJoinHandler = (event: { documentId: string, userId: string }) => {
+    if (event.userId !== this.userId || event.documentId !== this.documentId) {
+      return;
+    }
+    console.log("user.join");
+
+    this.awareness.setLocalState({});
+
+    this.emit("status", [
+      {
+        status: "connected",
+      },
+    ]);
+
+    console.log("writing sync step 1");
+
+    // always send sync step 1 when connected
+    const encoder = encoding.createEncoder();
+    encoding.writeVarUint(encoder, MESSAGE_SYNC);
+    syncProtocol.writeSyncStep1(encoder, this.doc);
+    this.wsPublish(encoding.toUint8Array(encoder));
+
+    // broadcast local awareness state
+    if (this.awareness.getLocalState() !== null) {
+      console.log("broadcast awareness state");
+
+      const encoderAwarenessState = encoding.createEncoder();
+      encoding.writeVarUint(encoderAwarenessState, MESSAGE_AWARENESS);
+      encoding.writeVarUint8Array(
+        encoderAwarenessState,
+        awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
+          this.doc.clientID,
+        ])
+      );
+
+      this.wsPublish(encoding.toUint8Array(encoderAwarenessState));
+    }
+  };
+
+  connectWs() {
+    this.socket.on("document.sync", this._wsMessageHandler);
+    this.socket.on("disconnect", this._wsCloseHandler);
+    this.socket.on("user.join", this._wsJoinHandler);
+  }
+
+  disconnectWs() {
+    this.socket.off("document.sync", this._wsMessageHandler);
+    this.socket.off("disconnect", this._wsCloseHandler);
+    this.socket.off("user.join", this._wsJoinHandler);
+  }
+
+  disconnect() {
+    this.shouldConnect = false;
+    this.disconnectWs();
+    this.disconnectBc();
+  }
+
+  connect() {
+    this.shouldConnect = true;
+
+    if (!this.wsconnected) {
+      this.wsconnected = true;
+      this.connectWs();
+      this.connectBc();
+    }
+  }
+}

app/routes/authenticated.js

@@ -14,7 +14,7 @@ import Trash from "scenes/Trash";
 
 import CenteredContent from "components/CenteredContent";
 import Layout from "components/Layout";
-import PlaceholderDocument from "components/PlaceholderDocument";
+import LoadingPlaceholder from "components/LoadingPlaceholder";
 import Route from "components/ProfiledRoute";
 import SocketProvider from "components/SocketProvider";
 import { matchDocumentSlug as slug } from "utils/routeHelpers";
@@ -22,10 +22,8 @@ import { matchDocumentSlug as slug } from "utils/routeHelpers";
 const SettingsRoutes = React.lazy(() =>
   import(/* webpackChunkName: "settings" */ "./settings")
 );
-const KeyedDocument = React.lazy(() =>
-  import(
-    /* webpackChunkName: "keyed-document" */ "scenes/Document/KeyedDocument"
-  )
+const Document = React.lazy(() =>
+  import(/* webpackChunkName: "document" */ "scenes/Document")
 );
 const NotFound = () => <Search notFound />;
 const RedirectDocument = ({ match }: { match: Match }) => (
@@ -43,7 +41,7 @@ export default function AuthenticatedRoutes() {
         <React.Suspense
           fallback={
             <CenteredContent>
-              <PlaceholderDocument />
+              <LoadingPlaceholder />
             </CenteredContent>
           }
         >
@@ -66,10 +64,10 @@ export default function AuthenticatedRoutes() {
             <Route
               exact
               path={`/doc/${slug}/history/:revisionId?`}
-              component={KeyedDocument}
+              component={Document}
             />
-            <Route exact path={`/doc/${slug}/edit`} component={KeyedDocument} />
-            <Route path={`/doc/${slug}`} component={KeyedDocument} />
+            <Route exact path={`/doc/${slug}/edit`} component={Document} />
+            <Route path={`/doc/${slug}`} component={Document} />
             <Route exact path="/search" component={Search} />
             <Route exact path="/search/:term" component={Search} />
             <Route path="/404" component={Error404} />

app/routes/index.js

@@ -12,10 +12,8 @@ const Authenticated = React.lazy(() =>
 const AuthenticatedRoutes = React.lazy(() =>
   import(/* webpackChunkName: "authenticated-routes" */ "./authenticated")
 );
-const KeyedDocument = React.lazy(() =>
-  import(
-    /* webpackChunkName: "keyed-document" */ "scenes/Document/KeyedDocument"
-  )
+const SharedDocument = React.lazy(() =>
+  import(/* webpackChunkName: "shared-document" */ "scenes/Document/Shared")
 );
 const Login = React.lazy(() =>
   import(/* webpackChunkName: "login" */ "scenes/Login")
@@ -37,11 +35,11 @@ export default function Routes() {
         <Route exact path="/" component={Login} />
         <Route exact path="/create" component={Login} />
         <Route exact path="/logout" component={Logout} />
-        <Route exact path="/share/:shareId" component={KeyedDocument} />
+        <Route exact path="/share/:shareId" component={SharedDocument} />
         <Route
           exact
           path={`/share/:shareId/doc/${slug}`}
-          component={KeyedDocument}
+          component={SharedDocument}
         />
         <Authenticated>
           <AuthenticatedRoutes />

app/routes/settings.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Switch, Redirect } from "react-router-dom";
 import Details from "scenes/Settings/Details";
+import Features from "scenes/Settings/Features";
 import Groups from "scenes/Settings/Groups";
 import ImportExport from "scenes/Settings/ImportExport";
 import Notifications from "scenes/Settings/Notifications";
@@ -19,6 +20,7 @@ export default function SettingsRoutes() {
     <Switch>
       <Route exact path="/settings" component={Profile} />
       <Route exact path="/settings/details" component={Details} />
+      <Route exact path="/settings/features" component={Features} />
       <Route exact path="/settings/security" component={Security} />
       <Route exact path="/settings/members" component={People} />
       <Route exact path="/settings/groups" component={Groups} />

app/scenes/APITokenNew.js

@@ -1,67 +0,0 @@
-// @flow
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import Button from "components/Button";
-import Flex from "components/Flex";
-import HelpText from "components/HelpText";
-import Input from "components/Input";
-import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
-
-type Props = {|
-  onSubmit: () => void,
-|};
-
-function APITokenNew({ onSubmit }: Props) {
-  const [name, setName] = React.useState("");
-  const [isSaving, setIsSaving] = React.useState(false);
-  const { apiKeys } = useStores();
-  const { showToast } = useToasts();
-  const { t } = useTranslation();
-
-  const handleSubmit = React.useCallback(async () => {
-    setIsSaving(true);
-
-    try {
-      await apiKeys.create({ name });
-      showToast(t("API token created", { type: "success" }));
-      onSubmit();
-    } catch (err) {
-      showToast(err.message, { type: "error" });
-    } finally {
-      setIsSaving(false);
-    }
-  }, [t, showToast, name, onSubmit, apiKeys]);
-
-  const handleNameChange = React.useCallback((event) => {
-    setName(event.target.value);
-  }, []);
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <HelpText>
-        <Trans>
-          Name your token something that will help you to remember it's use in
-          the future, for example "local development", "production", or
-          "continuous integration".
-        </Trans>
-      </HelpText>
-      <Flex>
-        <Input
-          type="text"
-          label="Name"
-          onChange={handleNameChange}
-          value={name}
-          required
-          autoFocus
-          flex
-        />
-      </Flex>
-      <Button type="submit" disabled={isSaving || !name}>
-        {isSaving ? "Creating…" : "Create"}
-      </Button>
-    </form>
-  );
-}
-
-export default APITokenNew;

app/scenes/Collection.js

@@ -27,11 +27,11 @@ import Flex from "components/Flex";
 import Heading from "components/Heading";
 import HelpText from "components/HelpText";
 import InputSearchPage from "components/InputSearchPage";
-import PlaceholderList from "components/List/Placeholder";
 import LoadingIndicator from "components/LoadingIndicator";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
+import Mask from "components/Mask";
 import Modal from "components/Modal";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
-import PlaceholderText from "components/PlaceholderText";
 import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import Tab from "components/Tab";
@@ -39,11 +39,9 @@ import Tabs from "components/Tabs";
 import Tooltip from "components/Tooltip";
 import Collection from "../models/Collection";
 import { updateCollectionUrl } from "../utils/routeHelpers";
-import useBoolean from "hooks/useBoolean";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useImportDocument from "hooks/useImportDocument";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 import CollectionMenu from "menus/CollectionMenu";
 import { newDocumentUrl, collectionUrl } from "utils/routeHelpers";
 
@@ -53,15 +51,10 @@ function CollectionScene() {
   const match = useRouteMatch();
   const { t } = useTranslation();
   const { documents, policies, collections, ui } = useStores();
-  const { showToast } = useToasts();
   const team = useCurrentTeam();
   const [isFetching, setFetching] = React.useState();
   const [error, setError] = React.useState();
-  const [
-    permissionsModalOpen,
-    handlePermissionsModalOpen,
-    handlePermissionsModalClose,
-  ] = useBoolean();
+  const [permissionsModalOpen, setPermissionsModalOpen] = React.useState(false);
 
   const id = params.id || "";
   const collection: ?Collection =
@@ -109,12 +102,20 @@ function CollectionScene() {
     load();
   }, [collections, isFetching, collection, error, id, can]);
 
+  const handlePermissionsModalOpen = React.useCallback(() => {
+    setPermissionsModalOpen(true);
+  }, []);
+
+  const handlePermissionsModalClose = React.useCallback(() => {
+    setPermissionsModalOpen(false);
+  }, []);
+
   const handleRejection = React.useCallback(() => {
-    showToast(
+    ui.showToast(
       t("Document not supported – try Markdown, Plain text, HTML, or Word"),
       { type: "error" }
     );
-  }, [t, showToast]);
+  }, [t, ui]);
 
   if (!collection && error) {
     return <Search notFound />;
@@ -148,27 +149,25 @@ function CollectionScene() {
             />
           </Action>
           {can.update && (
-            <>
-              <Action>
-                <Tooltip
-                  tooltip={t("New document")}
-                  shortcut="n"
-                  delay={500}
-                  placement="bottom"
+            <Action>
+              <Tooltip
+                tooltip={t("New document")}
+                shortcut="n"
+                delay={500}
+                placement="bottom"
+              >
+                <Button
+                  as={Link}
+                  to={collection ? newDocumentUrl(collection.id) : ""}
+                  disabled={!collection}
+                  icon={<PlusIcon />}
                 >
-                  <Button
-                    as={Link}
-                    to={collection ? newDocumentUrl(collection.id) : ""}
-                    disabled={!collection}
-                    icon={<PlusIcon />}
-                  >
-                    {t("New doc")}
-                  </Button>
-                </Tooltip>
-              </Action>
-              <Separator />
-            </>
+                  {t("New doc")}
+                </Button>
+              </Tooltip>
+            </Action>
           )}
+          <Separator />
           <Action>
             <CollectionMenu
               collection={collection}
@@ -375,9 +374,9 @@ function CollectionScene() {
   ) : (
     <CenteredContent>
       <Heading>
-        <PlaceholderText height={35} />
+        <Mask height={35} />
       </Heading>
-      <PlaceholderList count={5} />
+      <ListPlaceholder count={5} />
     </CenteredContent>
   );
 }

app/scenes/CollectionDelete.js

@@ -1,60 +1,62 @@
 // @flow
-import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { withRouter, type RouterHistory } from "react-router-dom";
+import CollectionsStore from "stores/CollectionsStore";
+import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
-import useToasts from "hooks/useToasts";
 import { homeUrl } from "utils/routeHelpers";
 
 type Props = {
+  history: RouterHistory,
   collection: Collection,
+  collections: CollectionsStore,
+  ui: UiStore,
   onSubmit: () => void,
 };
 
-function CollectionDelete({ collection, onSubmit }: Props) {
-  const [isDeleting, setIsDeleting] = React.useState();
-  const { showToast } = useToasts();
-  const history = useHistory();
-  const { t } = useTranslation();
+@observer
+class CollectionDelete extends React.Component<Props> {
+  @observable isDeleting: boolean;
 
-  const handleSubmit = React.useCallback(
-    async (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
-      setIsDeleting(true);
+  handleSubmit = async (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    this.isDeleting = true;
 
-      try {
-        await collection.delete();
-        history.push(homeUrl());
-        onSubmit();
-      } catch (err) {
-        showToast(err.message, { type: "error" });
-      } finally {
-        setIsDeleting(false);
-      }
-    },
-    [showToast, onSubmit, collection, history]
-  );
+    try {
+      await this.props.collection.delete();
+      this.props.history.push(homeUrl());
+      this.props.onSubmit();
+    } catch (err) {
+      this.props.ui.showToast(err.message, { type: "error" });
+    } finally {
+      this.isDeleting = false;
+    }
+  };
 
-  return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
-        <HelpText>
-          <Trans
-            defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however documents within will be moved to the trash."
-            values={{ collectionName: collection.name }}
-            components={{ em: <strong /> }}
-          />
-        </HelpText>
-        <Button type="submit" disabled={isDeleting} autoFocus danger>
-          {isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
-        </Button>
-      </form>
-    </Flex>
-  );
+  render() {
+    const { collection } = this.props;
+
+    return (
+      <Flex column>
+        <form onSubmit={this.handleSubmit}>
+          <HelpText>
+            Are you sure about that? Deleting the{" "}
+            <strong>{collection.name}</strong> collection is permanent and
+            cannot be restored, however documents within will be moved to the
+            trash.
+          </HelpText>
+          <Button type="submit" disabled={this.isDeleting} autoFocus danger>
+            {this.isDeleting ? "Deleting…" : "I’m sure – Delete"}
+          </Button>
+        </form>
+      </Flex>
+    );
+  }
 }
 
-export default observer(CollectionDelete);
+export default inject("collections", "ui")(withRouter(CollectionDelete));

app/scenes/CollectionEdit.js

@@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, Trans, type TFunction } from "react-i18next";
 import AuthStore from "stores/AuthStore";
-import ToastsStore from "stores/ToastsStore";
+import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
@@ -16,7 +16,7 @@ import Switch from "components/Switch";
 
 type Props = {
   collection: Collection,
-  toasts: ToastsStore,
+  ui: UiStore,
   auth: AuthStore,
   onSubmit: () => void,
   t: TFunction,
@@ -46,11 +46,11 @@ class CollectionEdit extends React.Component<Props> {
         sort: this.sort,
       });
       this.props.onSubmit();
-      this.props.toasts.showToast(t("The collection was updated"), {
+      this.props.ui.showToast(t("The collection was updated"), {
         type: "success",
       });
     } catch (err) {
-      this.props.toasts.showToast(err.message, { type: "error" });
+      this.props.ui.showToast(err.message, { type: "error" });
     } finally {
       this.isSaving = false;
     }
@@ -148,5 +148,5 @@ class CollectionEdit extends React.Component<Props> {
 }
 
 export default withTranslation()<CollectionEdit>(
-  inject("toasts", "auth")(CollectionEdit)
+  inject("ui", "auth")(CollectionEdit)
 );

app/scenes/CollectionExport.js

@@ -1,7 +1,9 @@
 // @flow
-import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
+import AuthStore from "stores/AuthStore";
+import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
@@ -9,41 +11,43 @@ import HelpText from "components/HelpText";
 
 type Props = {
   collection: Collection,
+  auth: AuthStore,
+  ui: UiStore,
   onSubmit: () => void,
 };
 
-function CollectionExport({ collection, onSubmit }: Props) {
-  const [isLoading, setIsLoading] = React.useState();
-  const { t } = useTranslation();
+@observer
+class CollectionExport extends React.Component<Props> {
+  @observable isLoading: boolean = false;
 
-  const handleSubmit = React.useCallback(
-    async (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
+  handleSubmit = async (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
 
-      setIsLoading(true);
-      await collection.export();
-      setIsLoading(false);
-      onSubmit();
-    },
-    [collection, onSubmit]
-  );
+    this.isLoading = true;
+    await this.props.collection.export();
+    this.isLoading = false;
+    this.props.onSubmit();
+  };
 
-  return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
-        <HelpText>
-          <Trans
-            defaults="Exporting the collection <em>{{collectionName}}</em> may take a few seconds. Your documents will be downloaded as a zip of folders with files in Markdown format."
-            values={{ collectionName: collection.name }}
-            components={{ em: <strong /> }}
-          />
-        </HelpText>
-        <Button type="submit" disabled={isLoading} primary>
-          {isLoading ? `${t("Exporting")}…` : t("Export Collection")}
-        </Button>
-      </form>
-    </Flex>
-  );
+  render() {
+    const { collection, auth } = this.props;
+    if (!auth.user) return null;
+
+    return (
+      <Flex column>
+        <form onSubmit={this.handleSubmit}>
+          <HelpText>
+            Exporting the collection <strong>{collection.name}</strong> may take
+            a few seconds. Your documents will be downloaded as a zip of folders
+            with files in Markdown format.
+          </HelpText>
+          <Button type="submit" disabled={this.isLoading} primary>
+            {this.isLoading ? "Exporting…" : "Export Collection"}
+          </Button>
+        </form>
+      </Flex>
+    );
+  }
 }
 
-export default observer(CollectionExport);
+export default inject("ui", "auth")(CollectionExport);

app/scenes/CollectionNew.js

@@ -7,7 +7,7 @@ import { withTranslation, type TFunction, Trans } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import AuthStore from "stores/AuthStore";
 import CollectionsStore from "stores/CollectionsStore";
-import ToastsStore from "stores/ToastsStore";
+import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
@@ -20,7 +20,7 @@ import Switch from "components/Switch";
 type Props = {
   history: RouterHistory,
   auth: AuthStore,
-  toasts: ToastsStore,
+  ui: UiStore,
   collections: CollectionsStore,
   onSubmit: () => void,
   t: TFunction,
@@ -55,7 +55,7 @@ class CollectionNew extends React.Component<Props> {
       this.props.onSubmit();
       this.props.history.push(collection.url);
     } catch (err) {
-      this.props.toasts.showToast(err.message, { type: "error" });
+      this.props.ui.showToast(err.message, { type: "error" });
     } finally {
       this.isSaving = false;
     }
@@ -169,5 +169,5 @@ class CollectionNew extends React.Component<Props> {
 }
 
 export default withTranslation()<CollectionNew>(
-  inject("collections", "toasts", "auth")(withRouter(CollectionNew))
+  inject("collections", "ui", "auth")(withRouter(CollectionNew))
 );

app/scenes/CollectionPermissions/AddGroupsToCollection.js

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import AuthStore from "stores/AuthStore";
 import CollectionGroupMembershipsStore from "stores/CollectionGroupMembershipsStore";
 import GroupsStore from "stores/GroupsStore";
-import ToastsStore from "stores/ToastsStore";
+import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Group from "models/Group";
 import GroupNew from "scenes/GroupNew";
@@ -23,7 +23,7 @@ import Modal from "components/Modal";
 import PaginatedList from "components/PaginatedList";
 
 type Props = {
-  toasts: ToastsStore,
+  ui: UiStore,
   auth: AuthStore,
   collection: Collection,
   collectionGroupMemberships: CollectionGroupMembershipsStore,
@@ -65,14 +65,14 @@ class AddGroupsToCollection extends React.Component<Props> {
         groupId: group.id,
         permission: "read_write",
       });
-      this.props.toasts.showToast(
+      this.props.ui.showToast(
         t("{{ groupName }} was added to the collection", {
           groupName: group.name,
         }),
         { type: "success" }
       );
     } catch (err) {
-      this.props.toasts.showToast(t("Could not add user"), { type: "error" });
+      this.props.ui.showToast(t("Could not add user"), { type: "error" });
       console.error(err);
     }
   };
@@ -147,6 +147,6 @@ export default withTranslation()<AddGroupsToCollection>(
     "auth",
     "groups",
     "collectionGroupMemberships",
-    "toasts"
+    "ui"
   )(AddGroupsToCollection)
 );

app/scenes/CollectionPermissions/AddPeopleToCollection.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import { withTranslation, type TFunction } from "react-i18next";
 import AuthStore from "stores/AuthStore";
 import MembershipsStore from "stores/MembershipsStore";
-import ToastsStore from "stores/ToastsStore";
+import UiStore from "stores/UiStore";
 import UsersStore from "stores/UsersStore";
 import Collection from "models/Collection";
 import User from "models/User";
@@ -21,7 +21,7 @@ import PaginatedList from "components/PaginatedList";
 import MemberListItem from "./components/MemberListItem";
 
 type Props = {
-  toasts: ToastsStore,
+  ui: UiStore,
   auth: AuthStore,
   collection: Collection,
   memberships: MembershipsStore,
@@ -62,14 +62,14 @@ class AddPeopleToCollection extends React.Component<Props> {
         userId: user.id,
         permission: "read_write",
       });
-      this.props.toasts.showToast(
+      this.props.ui.showToast(
         t("{{ userName }} was added to the collection", {
           userName: user.name,
         }),
         { type: "success" }
       );
     } catch (err) {
-      this.props.toasts.showToast(t("Could not add user"), { type: "error" });
+      this.props.ui.showToast(t("Could not add user"), { type: "error" });
     }
   };
 
@@ -130,5 +130,5 @@ class AddPeopleToCollection extends React.Component<Props> {
 }
 
 export default withTranslation()<AddPeopleToCollection>(
-  inject("auth", "users", "memberships", "toasts")(AddPeopleToCollection)
+  inject("auth", "users", "memberships", "ui")(AddPeopleToCollection)
 );

app/scenes/CollectionPermissions/index.js

@@ -17,10 +17,8 @@ import AddGroupsToCollection from "./AddGroupsToCollection";
 import AddPeopleToCollection from "./AddPeopleToCollection";
 import CollectionGroupMemberListItem from "./components/CollectionGroupMemberListItem";
 import MemberListItem from "./components/MemberListItem";
-import useBoolean from "hooks/useBoolean";
 import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 
 type Props = {|
   collection: Collection,
@@ -30,22 +28,14 @@ function CollectionPermissions({ collection }: Props) {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const {
+    ui,
     memberships,
     collectionGroupMemberships,
     users,
     groups,
   } = useStores();
-  const { showToast } = useToasts();
-  const [
-    addGroupModalOpen,
-    handleAddGroupModalOpen,
-    handleAddGroupModalClose,
-  ] = useBoolean();
-  const [
-    addMemberModalOpen,
-    handleAddMemberModalOpen,
-    handleAddMemberModalClose,
-  ] = useBoolean();
+  const [addGroupModalOpen, setAddGroupModalOpen] = React.useState(false);
+  const [addMemberModalOpen, setAddMemberModalOpen] = React.useState(false);
 
   const handleRemoveUser = React.useCallback(
     async (user) => {
@@ -54,7 +44,7 @@ function CollectionPermissions({ collection }: Props) {
           collectionId: collection.id,
           userId: user.id,
         });
-        showToast(
+        ui.showToast(
           t(`{{ userName }} was removed from the collection`, {
             userName: user.name,
           }),
@@ -63,10 +53,10 @@ function CollectionPermissions({ collection }: Props) {
           }
         );
       } catch (err) {
-        showToast(t("Could not remove user"), { type: "error" });
+        ui.showToast(t("Could not remove user"), { type: "error" });
       }
     },
-    [memberships, showToast, collection, t]
+    [memberships, ui, collection, t]
   );
 
   const handleUpdateUser = React.useCallback(
@@ -77,17 +67,17 @@ function CollectionPermissions({ collection }: Props) {
           userId: user.id,
           permission,
         });
-        showToast(
+        ui.showToast(
           t(`{{ userName }} permissions were updated`, { userName: user.name }),
           {
             type: "success",
           }
         );
       } catch (err) {
-        showToast(t("Could not update user"), { type: "error" });
+        ui.showToast(t("Could not update user"), { type: "error" });
       }
     },
-    [memberships, showToast, collection, t]
+    [memberships, ui, collection, t]
   );
 
   const handleRemoveGroup = React.useCallback(
@@ -97,7 +87,7 @@ function CollectionPermissions({ collection }: Props) {
           collectionId: collection.id,
           groupId: group.id,
         });
-        showToast(
+        ui.showToast(
           t(`The {{ groupName }} group was removed from the collection`, {
             groupName: group.name,
           }),
@@ -106,10 +96,10 @@ function CollectionPermissions({ collection }: Props) {
           }
         );
       } catch (err) {
-        showToast(t("Could not remove group"), { type: "error" });
+        ui.showToast(t("Could not remove group"), { type: "error" });
       }
     },
-    [collectionGroupMemberships, showToast, collection, t]
+    [collectionGroupMemberships, ui, collection, t]
   );
 
   const handleUpdateGroup = React.useCallback(
@@ -120,7 +110,7 @@ function CollectionPermissions({ collection }: Props) {
           groupId: group.id,
           permission,
         });
-        showToast(
+        ui.showToast(
           t(`{{ groupName }} permissions were updated`, {
             groupName: group.name,
           }),
@@ -129,24 +119,24 @@ function CollectionPermissions({ collection }: Props) {
           }
         );
       } catch (err) {
-        showToast(t("Could not update user"), { type: "error" });
+        ui.showToast(t("Could not update user"), { type: "error" });
       }
     },
-    [collectionGroupMemberships, showToast, collection, t]
+    [collectionGroupMemberships, ui, collection, t]
   );
 
   const handleChangePermission = React.useCallback(
     async (ev) => {
       try {
         await collection.save({ permission: ev.target.value });
-        showToast(t("Default access permissions were updated"), {
+        ui.showToast(t("Default access permissions were updated"), {
           type: "success",
         });
       } catch (err) {
-        showToast(t("Could not update permissions"), { type: "error" });
+        ui.showToast(t("Could not update permissions"), { type: "error" });
       }
     },
-    [collection, showToast, t]
+    [collection, ui, t]
   );
 
   const fetchOptions = React.useMemo(() => ({ id: collection.id }), [
@@ -193,7 +183,7 @@ function CollectionPermissions({ collection }: Props) {
         <Actions>
           <Button
             type="button"
-            onClick={handleAddGroupModalOpen}
+            onClick={() => setAddGroupModalOpen(true)}
             icon={<PlusIcon />}
             neutral
           >
@@ -201,7 +191,7 @@ function CollectionPermissions({ collection }: Props) {
           </Button>{" "}
           <Button
             type="button"
-            onClick={handleAddMemberModalOpen}
+            onClick={() => setAddMemberModalOpen(true)}
             icon={<PlusIcon />}
             neutral
           >
@@ -254,24 +244,24 @@ function CollectionPermissions({ collection }: Props) {
         title={t(`Add groups to {{ collectionName }}`, {
           collectionName: collection.name,
         })}
-        onRequestClose={handleAddGroupModalClose}
+        onRequestClose={() => setAddGroupModalOpen(false)}
         isOpen={addGroupModalOpen}
       >
         <AddGroupsToCollection
           collection={collection}
-          onSubmit={handleAddGroupModalClose}
+          onSubmit={() => setAddGroupModalOpen(false)}
         />
       </Modal>
       <Modal
         title={t(`Add people to {{ collectionName }}`, {
           collectionName: collection.name,
         })}
-        onRequestClose={handleAddMemberModalClose}
+        onRequestClose={() => setAddMemberModalOpen(false)}
         isOpen={addMemberModalOpen}
       >
         <AddPeopleToCollection
           collection={collection}
-          onSubmit={handleAddMemberModalClose}
+          onSubmit={() => setAddMemberModalOpen(false)}
         />
       </Modal>
     </Flex>

app/scenes/Document/KeyedDocument.js

@@ -1,25 +0,0 @@
-// @flow
-import { inject } from "mobx-react";
-import * as React from "react";
-import DataLoader from "./components/DataLoader";
-
-class KeyedDocument extends React.Component<*> {
-  componentWillUnmount() {
-    this.props.ui.clearActiveDocument();
-  }
-
-  render() {
-    const { documentSlug, revisionId } = this.props.match.params;
-
-    // the urlId portion of the url does not include the slugified title
-    // we only want to force a re-mount of the document component when the
-    // document changes, not when the title does so only this portion is used
-    // for the key.
-    const urlParts = documentSlug ? documentSlug.split("-") : [];
-    const urlId = urlParts.length ? urlParts[urlParts.length - 1] : undefined;
-
-    return <DataLoader key={[urlId, revisionId].join("/")} {...this.props} />;
-  }
-}
-
-export default inject("ui")(KeyedDocument);

app/scenes/Document/Shared.js

@@ -0,0 +1,61 @@
+// @flow
+import * as React from "react";
+import { type Match } from "react-router-dom";
+import { useTheme } from "styled-components";
+import Error404 from "scenes/Error404";
+import ErrorOffline from "scenes/ErrorOffline";
+import useStores from "../../hooks/useStores";
+import Document from "./components/Document";
+import Loading from "./components/Loading";
+import { type LocationWithState } from "types";
+import { OfflineError } from "utils/errors";
+
+type Props = {|
+  match: Match,
+  location: LocationWithState,
+|};
+
+export default function SharedEditor(props: Props) {
+  const theme = useTheme();
+  const [response, setResponse] = React.useState();
+  const [error, setError] = React.useState<?Error>();
+  const { documents } = useStores();
+  const { shareId, documentSlug } = props.match.params;
+
+  // ensure the wider page color always matches the theme
+  React.useEffect(() => {
+    window.document.body.style.background = theme.background;
+  }, [theme]);
+
+  React.useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await documents.fetch(documentSlug, {
+          shareId,
+        });
+        setResponse(response);
+      } catch (err) {
+        setError(err);
+      }
+    }
+    fetchData();
+  }, [documents, documentSlug, shareId]);
+
+  if (error) {
+    return error instanceof OfflineError ? <ErrorOffline /> : <Error404 />;
+  }
+
+  if (!response) {
+    return <Loading location={props.location} />;
+  }
+
+  return (
+    <Document
+      document={response.document}
+      sharedTree={response.sharedTree}
+      location={props.location}
+      shareId={shareId}
+      readOnly
+    />
+  );
+}

app/scenes/Document/components/Contents.js

@@ -70,13 +70,11 @@ const Wrapper = styled("div")`
   display: none;
   position: sticky;
   top: 80px;
-  max-height: calc(100vh - 80px);
 
   box-shadow: 1px 0 0 ${(props) => props.theme.divider};
   margin-top: 40px;
   margin-right: 2em;
   min-height: 40px;
-  overflow-y: auto;
 
   ${breakpoint("desktopLarge")`
     margin-left: -16em;

app/scenes/Document/components/DataLoader.js

@@ -18,10 +18,8 @@ import Document from "models/Document";
 import Revision from "models/Revision";
 import Error404 from "scenes/Error404";
 import ErrorOffline from "scenes/ErrorOffline";
-import DocumentComponent from "./Document";
 import HideSidebar from "./HideSidebar";
 import Loading from "./Loading";
-import SocketPresence from "./SocketPresence";
 import { type LocationWithState, type NavigationNode } from "types";
 import { NotFoundError, OfflineError } from "utils/errors";
 import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
@@ -29,6 +27,7 @@ import { isInternalUrl } from "utils/urls";
 type Props = {|
   match: Match,
   location: LocationWithState,
+  auth: AuthStore,
   shares: SharesStore,
   documents: DocumentsStore,
   policies: PoliciesStore,
@@ -36,6 +35,7 @@ type Props = {|
   auth: AuthStore,
   ui: UiStore,
   history: RouterHistory,
+  children: (any) => React.Node,
 |};
 
 const sharedTreeCache = {};
@@ -121,7 +121,7 @@ class DataLoader extends React.Component<Props> {
 
     return sortBy(
       results.map((document) => {
-        const time = formatDistanceToNow(Date.parse(document.updatedAt), {
+        const time = formatDistanceToNow(document.updatedAt, {
           addSuffix: true,
         });
         return {
@@ -223,7 +223,7 @@ class DataLoader extends React.Component<Props> {
   };
 
   render() {
-    const { location, policies, ui } = this.props;
+    const { location, policies, auth, ui } = this.props;
 
     if (this.error) {
       return this.error instanceof OfflineError ? (
@@ -233,10 +233,11 @@ class DataLoader extends React.Component<Props> {
       );
     }
 
+    const team = auth.team;
     const document = this.document;
     const revision = this.revision;
 
-    if (!document) {
+    if (!document || !team) {
       return (
         <>
           <Loading location={location} />
@@ -246,21 +247,25 @@ class DataLoader extends React.Component<Props> {
     }
 
     const abilities = policies.abilities(document.id);
+    const key = team.multiplayerEditor
+      ? ""
+      : this.isEditing
+      ? "editing"
+      : "read-only";
 
     return (
-      <SocketPresence documentId={document.id} isEditing={this.isEditing}>
+      <React.Fragment key={key}>
         {this.isEditing && <HideSidebar ui={ui} />}
-        <DocumentComponent
-          document={document}
-          revision={revision}
-          abilities={abilities}
-          location={location}
-          readOnly={!this.isEditing || !abilities.update || document.isArchived}
-          onSearchLink={this.onSearchLink}
-          onCreateLink={this.onCreateLink}
-          sharedTree={this.sharedTree}
-        />
-      </SocketPresence>
+        {this.props.children({
+          document,
+          revision,
+          abilities,
+          readOnly: !this.isEditing || !abilities.update || document.isArchived,
+          onSearchLink: this.onSearchLink,
+          onCreateLink: this.onCreateLink,
+          sharedTree: this.sharedTree,
+        })}
+      </React.Fragment>
     );
   }
 }

app/scenes/Document/components/Document.js

@@ -4,15 +4,13 @@ import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import { InputIcon } from "outline-icons";
 import * as React from "react";
-import { type TFunction, Trans, withTranslation } from "react-i18next";
 import keydown from "react-keydown";
 import { Prompt, Route, withRouter } from "react-router-dom";
-import type { RouterHistory, Match } from "react-router-dom";
+import type { RouterHistory } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import getTasks from "shared/utils/getTasks";
+import * as Y from "yjs";
 import AuthStore from "stores/AuthStore";
-import ToastsStore from "stores/ToastsStore";
 import UiStore from "stores/UiStore";
 import Document from "models/Document";
 import Revision from "models/Revision";
@@ -20,11 +18,12 @@ import DocumentMove from "scenes/DocumentMove";
 import Branding from "components/Branding";
 import ErrorBoundary from "components/ErrorBoundary";
 import Flex from "components/Flex";
+import LoadingEllipsis from "components/LoadingEllipsis";
 import LoadingIndicator from "components/LoadingIndicator";
+import LoadingPlaceholder from "components/LoadingPlaceholder";
 import Modal from "components/Modal";
 import Notice from "components/Notice";
 import PageTitle from "components/PageTitle";
-import PlaceholderDocument from "components/PlaceholderDocument";
 import Time from "components/Time";
 import Container from "./Container";
 import Contents from "./Contents";
@@ -34,6 +33,7 @@ import KeyboardShortcutsButton from "./KeyboardShortcutsButton";
 import MarkAsViewed from "./MarkAsViewed";
 import PublicReferences from "./PublicReferences";
 import References from "./References";
+import { WebsocketProvider } from "multiplayer/WebsocketProvider";
 import { type LocationWithState, type NavigationNode, type Theme } from "types";
 import { isCustomDomain } from "utils/domains";
 import { emojiToUrl } from "utils/emoji";
@@ -47,8 +47,16 @@ import {
 
 const AUTOSAVE_DELAY = 3000;
 const IS_DIRTY_DELAY = 500;
+const DISCARD_CHANGES = `
+You have unsaved changes.
+Are you sure you want to discard them?
+`;
+const UPLOADING_WARNING = `
+Images are still uploading.
+Are you sure you want to discard them?
+`;
+
 type Props = {
-  match: Match,
   history: RouterHistory,
   location: LocationWithState,
   sharedTree: ?NavigationNode,
@@ -56,13 +64,19 @@ type Props = {
   document: Document,
   revision: Revision,
   readOnly: boolean,
+  isShare?: boolean,
+  multiplayer: {
+    isConnected: boolean,
+    isReconnecting: boolean,
+    isRemoteSynced: boolean,
+    provider: ?WebsocketProvider,
+    doc: Y.Doc,
+  },
   onCreateLink: (title: string) => Promise<string>,
   onSearchLink: (term: string) => any,
   theme: Theme,
   auth: AuthStore,
   ui: UiStore,
-  toasts: ToastsStore,
-  t: TFunction,
 };
 
 @observer
@@ -77,12 +91,8 @@ class DocumentScene extends React.Component<Props> {
   @observable title: string = this.props.document.title;
   getEditorText: () => string = () => this.props.document.text;
 
-  componentDidMount() {
-    this.updateIsDirty();
-  }
-
   componentDidUpdate(prevProps) {
-    const { auth, document, t } = this.props;
+    const { auth, document } = this.props;
 
     if (prevProps.readOnly && !this.props.readOnly) {
       this.updateIsDirty();
@@ -96,10 +106,8 @@ class DocumentScene extends React.Component<Props> {
       }
     } else if (prevProps.document.revision !== this.lastRevision) {
       if (auth.user && document.updatedBy.id !== auth.user.id) {
-        this.props.toasts.showToast(
-          t(`Document updated by {{userName}}`, {
-            userName: document.updatedBy.name,
-          }),
+        this.props.ui.showToast(
+          `Document updated by ${document.updatedBy.name}`,
           {
             timeout: 30 * 1000,
             type: "warning",
@@ -118,7 +126,6 @@ class DocumentScene extends React.Component<Props> {
       document.injectTemplate = false;
       this.title = document.title;
       this.isDirty = true;
-      this.updateIsDirty();
     }
   }
 
@@ -197,7 +204,7 @@ class DocumentScene extends React.Component<Props> {
       autosave?: boolean,
     } = {}
   ) => {
-    const { document } = this.props;
+    const { document, auth } = this.props;
 
     // prevent saves when we are already saving
     if (document.isSaving) return;
@@ -224,13 +231,23 @@ class DocumentScene extends React.Component<Props> {
     this.isSaving = true;
     this.isPublishing = !!options.publish;
 
-    document.tasks = getTasks(document.text);
-
     try {
-      const savedDocument = await document.save({
-        ...options,
-        lastRevision: this.lastRevision,
-      });
+      let savedDocument = document;
+      if (auth.team && auth.team.multiplayerEditor) {
+        // update does not send "text" field to the API, this is a workaround
+        // while the multiplayer editor is toggleable. Once it's finalized
+        // this can be cleaned up to single code path
+        savedDocument = await document.update({
+          ...options,
+          lastRevision: this.lastRevision,
+        });
+      } else {
+        savedDocument = await document.save({
+          ...options,
+          lastRevision: this.lastRevision,
+        });
+      }
+
       this.isDirty = false;
       this.lastRevision = savedDocument.revision;
 
@@ -242,7 +259,7 @@ class DocumentScene extends React.Component<Props> {
         this.props.ui.setActiveDocument(savedDocument);
       }
     } catch (err) {
-      this.props.toasts.showToast(err.message, { type: "error" });
+      this.props.ui.showToast(err.message, { type: "error" });
     } finally {
       this.isSaving = false;
       this.isPublishing = false;
@@ -275,6 +292,11 @@ class DocumentScene extends React.Component<Props> {
   };
 
   onChange = (getEditorText) => {
+    const { auth } = this.props;
+    if (auth.team && auth.team.multiplayerEditor) {
+      return;
+    }
+
     this.getEditorText = getEditorText;
 
     // document change while read only is presumed to be a checkbox edit,
@@ -303,11 +325,11 @@ class DocumentScene extends React.Component<Props> {
       document,
       revision,
       readOnly,
-      abilities,
+      abilities = {},
       auth,
       ui,
+      multiplayer,
       match,
-      t,
     } = this.props;
     const team = auth.team;
     const { shareId } = match.params;
@@ -332,7 +354,7 @@ class DocumentScene extends React.Component<Props> {
           auto
         >
           <Route
-            path={`${match.url}/move`}
+            path={`${document.url}/move`}
             component={() => (
               <Modal
                 title={`Move ${document.noun}`}
@@ -356,16 +378,17 @@ class DocumentScene extends React.Component<Props> {
             {!readOnly && (
               <>
                 <Prompt
-                  when={this.isDirty && !this.isUploading}
-                  message={t(
-                    `You have unsaved changes.\nAre you sure you want to discard them?`
-                  )}
+                  when={
+                    this.isDirty &&
+                    !this.isUploading &&
+                    !!team &&
+                    !team.multiplayerEditor
+                  }
+                  message={DISCARD_CHANGES}
                 />
                 <Prompt
                   when={this.isUploading && !this.isDirty}
-                  message={t(
-                    `Images are still uploading.\nAre you sure you want to discard them?`
-                  )}
+                  message={UPLOADING_WARNING}
                 />
               </>
             )}
@@ -384,7 +407,6 @@ class DocumentScene extends React.Component<Props> {
               sharedTree={this.props.sharedTree}
               goBack={this.goBack}
               onSave={this.onSave}
-              headings={headings}
             />
             <MaxWidth
               archived={document.isArchived}
@@ -394,56 +416,54 @@ class DocumentScene extends React.Component<Props> {
             >
               {document.isTemplate && !readOnly && (
                 <Notice muted>
-                  <Trans>
-                    You’re editing a template. Highlight some text and use the{" "}
-                    <PlaceholderIcon color="currentColor" /> control to add
-                    placeholders that can be filled out when creating new
-                    documents from this template.
-                  </Trans>
+                  You’re editing a template. Highlight some text and use the{" "}
+                  <PlaceholderIcon color="currentColor" /> control to add
+                  placeholders that can be filled out when creating new
+                  documents from this template.
                 </Notice>
               )}
               {document.archivedAt && !document.deletedAt && (
                 <Notice muted>
-                  {t("Archived by {{userName}}", {
-                    userName: document.updatedBy.name,
-                  })}{" "}
-                  <Time dateTime={document.updatedAt} addSuffix />
+                  Archived by {document.updatedBy.name}{" "}
+                  <Time dateTime={document.archivedAt} /> ago
                 </Notice>
               )}
               {document.deletedAt && (
                 <Notice muted>
-                  <strong>
-                    {t("Deleted by {{userName}}", {
-                      userName: document.updatedBy.name,
-                    })}{" "}
-                    <Time dateTime={document.deletedAt || ""} addSuffix />
-                  </strong>
+                  Deleted by {document.updatedBy.name}{" "}
+                  <Time dateTime={document.deletedAt} /> ago
                   {document.permanentlyDeletedAt && (
                     <>
                       <br />
-                      {document.template ? (
-                        <Trans>
-                          This template will be permanently deleted in{" "}
-                          <Time dateTime={document.permanentlyDeletedAt} />{" "}
-                          unless restored.
-                        </Trans>
-                      ) : (
-                        <Trans>
-                          This document will be permanently deleted in{" "}
-                          <Time dateTime={document.permanentlyDeletedAt} />{" "}
-                          unless restored.
-                        </Trans>
-                      )}
+                      This {document.noun} will be permanently deleted in{" "}
+                      <Time dateTime={document.permanentlyDeletedAt} /> unless
+                      restored.
                     </>
                   )}
                 </Notice>
               )}
-              <React.Suspense fallback={<PlaceholderDocument />}>
+              {team &&
+                multiplayer &&
+                !multiplayer.isConnected &&
+                team.multiplayerEditor && (
+                  <Notice muted>
+                    Connection lost. Any edits will sync once you’re back
+                    online.{" "}
+                    {multiplayer.isReconnecting && (
+                      <>
+                        Trying to reconnect
+                        <LoadingEllipsis />
+                      </>
+                    )}
+                  </Notice>
+                )}
+              <React.Suspense fallback={<LoadingPlaceholder />}>
                 <Flex auto={!readOnly}>
                   {showContents && <Contents headings={headings} />}
                   <Editor
                     id={document.id}
                     innerRef={this.editor}
+                    canShowHoverPreviews={!isShare}
                     shareId={shareId}
                     isDraft={document.isDraft}
                     template={document.isTemplate}
@@ -465,6 +485,7 @@ class DocumentScene extends React.Component<Props> {
                     readOnly={readOnly}
                     readOnlyWriteCheckboxes={readOnly && abilities.update}
                     ui={this.props.ui}
+                    multiplayer={this.props.multiplayer}
                   >
                     {shareId && (
                       <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
@@ -536,7 +557,5 @@ const MaxWidth = styled(Flex)`
 `;
 
 export default withRouter(
-  withTranslation()<DocumentScene>(
-    inject("ui", "auth", "toasts")(DocumentScene)
-  )
+  inject("ui", "auth", "policies", "revisions")(DocumentScene)
 );

app/scenes/Document/components/Editor.js

@@ -1,15 +1,14 @@
 // @flow
 import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import Textarea from "react-autosize-textarea";
-import { type TFunction, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import * as Y from "yjs";
 import { MAX_TITLE_LENGTH } from "shared/constants";
-import { light } from "shared/theme";
+import { light } from "shared/styles/theme";
 import parseTitle from "shared/utils/parseTitle";
-import PoliciesStore from "stores/PoliciesStore";
 import Document from "models/Document";
 import ClickablePadding from "components/ClickablePadding";
 import DocumentMetaWithViews from "components/DocumentMetaWithViews";
@@ -17,6 +16,8 @@ import Editor, { type Props as EditorProps } from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
 import Star, { AnimatedStar } from "components/Star";
+import MultiplayerEditor from "./MultiplayerEditor";
+import { WebsocketProvider } from "multiplayer/WebsocketProvider";
 import { isModKey } from "utils/keyboard";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
@@ -26,18 +27,24 @@ type Props = {|
   title: string,
   document: Document,
   isDraft: boolean,
-  shareId: ?string,
-  onSave: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
+  canShowHoverPreviews?: boolean,
+  readOnly?: boolean,
+  onSave: ({ publish?: boolean, done?: boolean, autosave?: boolean }) => mixed,
   innerRef: { current: any },
+  multiplayer: {
+    isConnected: boolean,
+    isReconnecting: boolean,
+    isRemoteSynced: boolean,
+    provider: ?WebsocketProvider,
+    doc: Y.Doc,
+  },
+  shareId: ?string,
   children: React.Node,
-  policies: PoliciesStore,
-  t: TFunction,
 |};
 
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
-  ref = React.createRef<HTMLDivElement | HTMLInputElement>();
 
   focusAtStart = () => {
     if (this.props.innerRef.current) {
@@ -102,18 +109,18 @@ class DocumentEditor extends React.Component<Props> {
       title,
       onChangeTitle,
       isDraft,
-      shareId,
+      canShowHoverPreviews,
       readOnly,
       innerRef,
+      multiplayer,
+      shareId,
       children,
-      policies,
-      t,
       ...rest
     } = this.props;
 
-    const can = policies.abilities(document.id);
     const { emoji } = parseTitle(title);
     const startsWithEmojiAndSpace = !!(emoji && title.startsWith(`${emoji} `));
+    const EditorComponent = multiplayer ? MultiplayerEditor : Editor;
     const normalizedTitle =
       !title && readOnly ? document.titleWithDefault : title;
 
@@ -122,32 +129,22 @@ class DocumentEditor extends React.Component<Props> {
         {readOnly ? (
           <Title
             as="div"
-            ref={this.ref}
             $startsWithEmojiAndSpace={startsWithEmojiAndSpace}
             $isStarred={document.isStarred}
-            dir="auto"
           >
             <span>{normalizedTitle}</span>{" "}
-            {(can.star || can.unstar) && (
-              <StarButton document={document} size={32} />
-            )}
+            {!shareId && <StarButton document={document} size={32} />}
           </Title>
         ) : (
           <Title
             type="text"
-            ref={this.ref}
             onChange={onChangeTitle}
             onKeyDown={this.handleTitleKeyDown}
-            placeholder={
-              document.isTemplate
-                ? t("Start your template…")
-                : t("Start with a title…")
-            }
+            placeholder={document.placeholder}
             value={normalizedTitle}
             $startsWithEmojiAndSpace={startsWithEmojiAndSpace}
             autoFocus={!title}
             maxLength={MAX_TITLE_LENGTH}
-            dir="auto"
           />
         )}
         {!shareId && (
@@ -155,26 +152,22 @@ class DocumentEditor extends React.Component<Props> {
             isDraft={isDraft}
             document={document}
             to={documentHistoryUrl(document)}
-            rtl={
-              this.ref.current
-                ? window.getComputedStyle(this.ref.current).direction === "rtl"
-                : false
-            }
           />
         )}
-        <Editor
+        <EditorComponent
           ref={innerRef}
           autoFocus={!!title && !this.props.defaultValue}
-          placeholder={t("…the rest is up to you")}
+          placeholder="…the rest is up to you"
           onHoverLink={this.handleLinkActive}
           scrollTo={window.location.hash}
           readOnly={readOnly}
+          multiplayer={multiplayer}
           shareId={shareId}
           grow
           {...rest}
         />
         {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
-        {this.activeLinkEvent && !shareId && readOnly && (
+        {this.activeLinkEvent && canShowHoverPreviews && readOnly && (
           <HoverPreview
             node={this.activeLinkEvent.target}
             event={this.activeLinkEvent}
@@ -237,6 +230,4 @@ const Title = styled(Textarea)`
   }
 `;
 
-export default withTranslation()<DocumentEditor>(
-  inject("policies")(DocumentEditor)
-);
+export default DocumentEditor;

app/scenes/Document/components/Header.js

@@ -24,7 +24,6 @@ import useMobile from "hooks/useMobile";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import NewChildDocumentMenu from "menus/NewChildDocumentMenu";
-import TableOfContentsMenu from "menus/TableOfContentsMenu";
 import TemplatesMenu from "menus/TemplatesMenu";
 import { type NavigationNode } from "types";
 import { metaDisplay } from "utils/keyboard";
@@ -47,7 +46,6 @@ type Props = {|
     publish?: boolean,
     autosave?: boolean,
   }) => void,
-  headings: { title: string, level: number, id: string }[],
 |};
 
 function DocumentHeader({
@@ -62,7 +60,6 @@ function DocumentHeader({
   publishingIsDisabled,
   sharedTree,
   onSave,
-  headings,
 }: Props) {
   const { t } = useTranslation();
   const { auth, ui, policies } = useStores();
@@ -76,7 +73,7 @@ function DocumentHeader({
     onSave({ done: true, publish: true });
   }, [onSave]);
 
-  const isNew = document.isNewDocument;
+  const isNew = document.isNew;
   const isTemplate = document.isTemplate;
   const can = policies.abilities(document.id);
   const canShareDocument = auth.team && auth.team.sharing && can.share;
@@ -156,11 +153,6 @@ function DocumentHeader({
         }
         actions={
           <>
-            {isMobile && (
-              <TocWrapper>
-                <TableOfContentsMenu headings={headings} />
-              </TocWrapper>
-            )}
             {!isPublishing && isSaving && <Status>{t("Saving")}…</Status>}
             <Collaborators
               document={document}
@@ -282,9 +274,4 @@ const Status = styled(Action)`
   color: ${(props) => props.theme.slate};
 `;
 
-const TocWrapper = styled(Action)`
-  position: absolute;
-  left: 42px;
-`;
-
 export default observer(DocumentHeader);