fix: Actor on users.delete

* api

* ui

* update collection permissions

.babelrc

@@ -35,6 +35,14 @@
             "displayName": false
           }
         ]
+      ],
+      "ignore": [
+        "**/*.test.ts"
+      ]
+    },
+    "development": {
+      "ignore": [
+        "**/*.test.ts"
       ]
     }
   }

.circleci/config.yml

@@ -70,6 +70,15 @@ jobs:
       - run:
           name: test
           command: yarn test:app
+  test-shared:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:shared
   test-server:
     <<: *defaults
     steps:
@@ -81,7 +90,7 @@ jobs:
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: test
-          command: yarn test:server
+          command: yarn test:server --forceExit
   bundle-size:
     <<: *defaults
     steps:
@@ -140,6 +149,9 @@ workflows:
       - test-server:
           requires:
             - build
+      - test-shared:
+          requires:
+            - build
       - test-app:
           requires:
             - build
@@ -149,6 +161,7 @@ workflows:
       - bundle-size:
           requires:
             - test-app
+            - test-shared
             - test-server
 
   build-docker:

.env.sample

@@ -1,5 +1,7 @@
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
+NODE_ENV=production
+
 # Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
@@ -16,7 +18,15 @@ DATABASE_CONNECTION_POOL_MIN=
 DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
+
+# For redis you can either specify an ioredis compatible url like this
 REDIS_URL=redis://localhost:6379
+# or alternatively, if you would like to provide addtional connection options,
+# use a base64 encoded JSON connection option object. Refer to the ioredis documentation
+# for a list of available options.
+# Example: Use Redis Sentinel for high availability
+# {"sentinels":[{"host":"sentinel-0","port":26379},{"host":"sentinel-1","port":26379}],"name":"mymaster"}
+# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJzZW50aW5lbC0wIiwicG9ydCI6MjYzNzl9LHsiaG9zdCI6InNlbnRpbmVsLTEiLCJwb3J0IjoyNjM3OX1dLCJuYW1lIjoibXltYXN0ZXIifQ==
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
@@ -57,8 +67,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_KEY=get_a_key_from_slack
-SLACK_SECRET=get_the_secret_of_above_key
+SLACK_CLIENT_ID=get_a_key_from_slack
+SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 
 # To configure Google auth, you'll need to create an OAuth Client ID at
 # => https://console.cloud.google.com/apis/credentials
@@ -129,10 +139,6 @@ MAXIMUM_IMPORT_SIZE=5120000
 # requests and this ends up being duplicative
 DEBUG=http
 
-# Comma separated list of domains to be allowed to signin to the wiki. If not
-# set, all domains are allowed by default when using Google OAuth to signin
-ALLOWED_DOMAINS=
-
 # For a complete Slack integration with search and posting to channels the
 # following configs are also needed, some more details
 # => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
@@ -164,3 +170,10 @@ SMTP_SECURE=true
 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
+
+# Optionally enable rate limiter at application web server
+RATE_LIMITER_ENABLED=true
+
+# Configure default throttling parameters for rate limiter
+RATE_LIMITER_REQUESTS=1000
+RATE_LIMITER_DURATION_WINDOW=60

.eslintrc

@@ -12,7 +12,6 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
-    "plugin:react-hooks/recommended",
     "plugin:prettier/recommended"
   ],
   "plugins": [
@@ -21,12 +20,12 @@
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "eslint-plugin-react-hooks",
     "import"
   ],
   "rules": {
     "eqeqeq": 2,
     "curly": 2,
+    "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
     "es/no-regexp-lookbehind-assertions": "error",

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/stale.yml

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

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/stale.yml

@@ -0,0 +1,29 @@
+name: "Close Stale PRs"
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "30 1 * * *"
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v5
+        with:
+          stale-pr-message: "This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
+          stale-issue-message: "This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
+          close-pr-message: "Automatically closed due to inactivity"
+          close-issue-message: "Automatically closed due to inactivity"
+          days-before-issue-stale: 120
+          days-before-pr-stale: 60
+          days-before-close: 5
+          operations-per-run: 60
+          stale-issue-label: stale
+          stale-pr-label: stale
+          exempt-issue-labels: "security,pinned"
+      - name: Print outputs
+        run: echo ${{ join(steps.stale.outputs.*, ',') }}

.gitignore

@@ -3,6 +3,7 @@ build
 node_modules/*
 .env
 .log
+.vscode/*
 npm-debug.log
 stats.json
 .DS_Store

.jestconfig.json

@@ -0,0 +1,88 @@
+{
+  "projects": [
+    {
+      "displayName": "server",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/server"
+      ],
+      "moduleNameMapper": {
+        "^@server/(.*)$": "<rootDir>/server/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/server/test/setup.ts"
+      ],
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
+    },
+    {
+      "displayName": "app",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/app"
+      ],
+      "moduleNameMapper": {
+        "^~/(.*)$": "<rootDir>/app/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+      },
+      "modulePaths": [
+        "<rootDir>/app"
+      ],
+      "setupFiles": [
+        "<rootDir>/__mocks__/window.js"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/app/test/setup.ts"
+      ],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    },
+    {
+      "displayName": "shared-node",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/shared"
+      ],
+      "moduleNameMapper": {
+        "^@server/(.*)$": "<rootDir>/server/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/shared/test/setup.ts"
+      ],
+      "testEnvironment": "node"
+    },
+    {
+      "displayName": "shared-jsdom",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/shared"
+      ],
+      "moduleNameMapper": {
+        "^~/(.*)$": "<rootDir>/app/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/window.js"
+      ],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    }
+  ]
+}

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.63.0
+Licensed Work:        Outline 0.64.0
                       The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2026-04-15
+Change Date:          2026-05-23
 
 Change License:       Apache License, Version 2.0
 

__mocks__/bull.js

@@ -1,17 +0,0 @@
-export default class Queue {
-  name;
-
-  constructor(name) {
-    this.name = name;
-  }
-
-  process = (fn) => {
-    console.log(`Registered function ${this.name}`);
-    this.processFn = fn;
-  };
-
-  add = (data) => {
-    console.log(`Running ${this.name}`);
-    return this.processFn({ data });
-  };
-}

__mocks__/console.js

@@ -1,2 +1 @@
-// Mock for node-uuid
 global.console.warn = () => {};

app.json

@@ -43,10 +43,6 @@
       "value": "true",
       "required": true
     },
-    "ALLOWED_DOMAINS": {
-      "description": "Comma separated list of domains to be allowed (optional). If not set, all domains are allowed by default when using Google OAuth to signin. Consider putting {your app name}.herokuapp.com and any domain you are binding on in this list.",
-      "required": false
-    },
     "URL": {
       "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
       "required": true
@@ -106,11 +102,11 @@
       "value": "openid profile email",
       "required": false
     },
-    "SLACK_KEY": {
+    "SLACK_CLIENT_ID": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_SECRET": {
+    "SLACK_CLIENT_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -209,4 +205,4 @@
       "required": false
     }
   }
-}
+}

app/.eslintrc

@@ -1,6 +1,10 @@
 {
   "extends": [
-    "../.eslintrc"
+    "../.eslintrc",
+    "plugin:react-hooks/recommended",
+  ],
+  "plugins": [
+    "eslint-plugin-react-hooks",
   ],
   "env": {
     "jest": true,

app/.jestconfig.json

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

app/actions/definitions/debug.tsx

@@ -1,32 +0,0 @@
-import { ToolsIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { DebugSection } from "~/actions/sections";
-import env from "~/env";
-import { deleteAllDatabases } from "~/utils/developer";
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Delete IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DebugSection,
-  perform: async ({ t }) => {
-    await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
-  },
-});
-
-export const development = createAction({
-  name: ({ t }) => t("Development"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DebugSection,
-  visible: ({ event }) =>
-    env.ENVIRONMENT === "development" ||
-    (event instanceof KeyboardEvent && event.altKey),
-  children: [clearIndexedDB],
-});
-
-export const rootDebugActions = [development];

app/actions/definitions/developer.tsx

@@ -0,0 +1,50 @@
+import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { DeveloperSection } from "~/actions/sections";
+import env from "~/env";
+import { client } from "~/utils/ApiClient";
+import { deleteAllDatabases } from "~/utils/developer";
+
+export const clearIndexedDB = createAction({
+  name: ({ t }) => t("Delete IndexedDB cache"),
+  icon: <TrashIcon />,
+  keywords: "cache clear database",
+  section: DeveloperSection,
+  perform: async ({ t }) => {
+    await deleteAllDatabases();
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
+  },
+});
+
+export const createTestUsers = createAction({
+  name: "Create test users",
+  icon: <UserIcon />,
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: async () => {
+    const count = 10;
+
+    try {
+      await client.post("/developer.create_test_users", { count });
+      stores.toasts.showToast(`${count} test users created`);
+    } catch (err) {
+      stores.toasts.showToast(err.message, { type: "error" });
+    }
+  },
+});
+
+export const developer = createAction({
+  name: ({ t }) => t("Developer"),
+  keywords: "debug",
+  icon: <ToolsIcon />,
+  iconInContextMenu: false,
+  section: DeveloperSection,
+  visible: ({ event }) =>
+    env.ENVIRONMENT === "development" ||
+    (event instanceof KeyboardEvent && event.altKey),
+  children: [clearIndexedDB, createTestUsers],
+});
+
+export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -11,9 +11,18 @@ import {
   ImportIcon,
   PinIcon,
   SearchIcon,
+  UnsubscribeIcon,
+  SubscribeIcon,
+  MoveIcon,
+  TrashIcon,
+  CrossIcon,
+  ArchiveIcon,
 } from "outline-icons";
 import * as React from "react";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { getEventFiles } from "@shared/utils/files";
+import DocumentDelete from "~/scenes/DocumentDelete";
+import DocumentMove from "~/scenes/DocumentMove";
+import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
@@ -108,6 +117,68 @@ export const unstarDocument = createAction({
   },
 });
 
+export const subscribeDocument = createAction({
+  name: ({ t }) => t("Subscribe"),
+  section: DocumentSection,
+  icon: <SubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).subscribe
+    );
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    document?.subscribe();
+
+    stores.toasts.showToast(t("Subscribed to document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const unsubscribeDocument = createAction({
+  name: ({ t }) => t("Unsubscribe"),
+  section: DocumentSection,
+  icon: <UnsubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !!document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).unsubscribe
+    );
+  },
+  perform: ({ activeDocumentId, stores, currentUserId, t }) => {
+    if (!activeDocumentId || !currentUserId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    document?.unsubscribe(currentUserId);
+
+    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
+      type: "success",
+    });
+  },
+});
+
 export const downloadDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Download") : t("Download document"),
@@ -260,8 +331,8 @@ export const importDocument = createAction({
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
 
-    input.onchange = async (ev: Event) => {
-      const files = getDataTransferFiles(ev);
+    input.onchange = async (ev) => {
+      const files = getEventFiles(ev);
 
       try {
         const file = files[0];
@@ -296,10 +367,11 @@ export const createTemplate = createAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    return (
+    return !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate
+      !document?.isTemplate &&
+      !document?.isDeleted
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -328,15 +400,146 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
+  section: DocumentSection,
+  icon: <MoveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).move;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Move {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        content: (
+          <DocumentMove
+            document={document}
+            onRequestClose={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const archiveDocument = createAction({
+  name: ({ t }) => t("Archive"),
+  section: DocumentSection,
+  icon: <ArchiveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).archive;
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      await document.archive();
+      stores.toasts.showToast(t("Document archived"), {
+        type: "success",
+      });
+    }
+  },
+});
+
+export const deleteDocument = createAction({
+  name: ({ t }) => t("Delete"),
+  section: DocumentSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).delete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const permanentlyDeleteDocument = createAction({
+  name: ({ t }) => t("Permanently delete"),
+  section: DocumentSection,
+  icon: <CrossIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).permanentDelete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Permanently delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentPermanentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
 export const rootDocumentActions = [
   openDocument,
+  archiveDocument,
   createDocument,
   createTemplate,
+  deleteDocument,
   importDocument,
   downloadDocument,
   starDocument,
   unstarDocument,
+  subscribeDocument,
+  unsubscribeDocument,
   duplicateDocument,
+  moveDocument,
+  permanentlyDeleteDocument,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,

app/actions/definitions/teams.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import styled from "styled-components";
+import { createAction } from "~/actions";
+import { loadSessionsFromCookie } from "~/hooks/useSessions";
+
+export const changeTeam = createAction({
+  name: ({ t }) => t("Switch team"),
+  placeholder: ({ t }) => t("Select a team"),
+  keywords: "change workspace organization",
+  section: "Account",
+  visible: ({ currentTeamId }) => {
+    const sessions = loadSessionsFromCookie();
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== currentTeamId
+    );
+    return otherSessions.length > 0;
+  },
+  children: ({ currentTeamId }) => {
+    const sessions = loadSessionsFromCookie();
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== currentTeamId
+    );
+
+    return otherSessions.map((session) => ({
+      id: session.url,
+      name: session.name,
+      section: "Account",
+      icon: <Logo alt={session.name} src={session.logoUrl} />,
+      perform: () => (window.location.href = session.url),
+    }));
+  },
+});
+
+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+`;
+
+export const rootTeamActions = [changeTeam];

app/actions/index.ts

@@ -56,6 +56,7 @@ export function actionToMenuItem(
     title,
     icon,
     visible,
+    dangerous: action.dangerous,
     onClick: () => action.perform && action.perform(context),
     selected: action.selected ? action.selected(context) : undefined,
   };

app/actions/root.ts

@@ -1,8 +1,9 @@
 import { rootCollectionActions } from "./definitions/collections";
-import { rootDebugActions } from "./definitions/debug";
+import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
 import { rootSettingsActions } from "./definitions/settings";
+import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";
 
 export default [
@@ -11,5 +12,6 @@ export default [
   ...rootUserActions,
   ...rootNavigationActions,
   ...rootSettingsActions,
-  ...rootDebugActions,
+  ...rootDeveloperActions,
+  ...rootTeamActions,
 ];

app/actions/sections.ts

@@ -2,7 +2,7 @@ import { ActionContext } from "~/types";
 
 export const CollectionSection = ({ t }: ActionContext) => t("Collection");
 
-export const DebugSection = ({ t }: ActionContext) => t("Debug");
+export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 

app/components/Authenticated.tsx

@@ -2,9 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import { isCustomSubdomain } from "@shared/utils/domains";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import env from "~/env";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 
@@ -25,29 +23,11 @@ const Authenticated = ({ children }: Props) => {
 
   if (auth.authenticated) {
     const { user, team } = auth;
-    const { hostname } = window.location;
 
     if (!team || !user) {
       return <LoadingIndicator />;
     }
 
-    // If we're authenticated but viewing a domain that doesn't match the
-    // current team then kick the user to the teams correct domain.
-    if (team.domain) {
-      if (team.domain !== hostname) {
-        window.location.href = `${team.url}${window.location.pathname}`;
-        return <LoadingIndicator />;
-      }
-    } else if (
-      env.SUBDOMAINS_ENABLED &&
-      team.subdomain &&
-      isCustomSubdomain(hostname) &&
-      !hostname.startsWith(`${team.subdomain}.`)
-    ) {
-      window.location.href = `${team.url}${window.location.pathname}`;
-      return <LoadingIndicator />;
-    }
-
     return children;
   }
 

app/components/Breadcrumb.tsx

@@ -37,7 +37,7 @@ function Breadcrumb({
   return (
     <Flex justify="flex-start" align="center">
       {topLevelItems.map((item, index) => (
-        <React.Fragment key={item.to || index}>
+        <React.Fragment key={String(item.to) || index}>
           {item.icon}
           {item.to ? (
             <Item

app/components/Button.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
@@ -155,7 +156,7 @@ export type Props<T> = {
   primary?: boolean;
   fullwidth?: boolean;
   as?: T;
-  to?: string;
+  to?: LocationDescriptor;
   borderOnHover?: boolean;
   href?: string;
   "data-on"?: string;

app/components/ButtonLink.tsx

@@ -1,17 +1,6 @@
-import * as React from "react";
 import styled from "styled-components";
 
-type Props = {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-const ButtonLink: React.FC<Props> = React.forwardRef(
-  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
-    return <Button {...props} ref={ref} />;
-  }
-);
-
-const Button = styled.button`
+const ButtonLink = styled.button`
   margin: 0;
   padding: 0;
   border: 0;

app/components/CenteredContent.tsx

@@ -12,7 +12,7 @@ const Container = styled.div<Props>`
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: any) =>
+    padding: ${(props: Props) =>
       props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
   `};
 `;

app/components/Collaborators.tsx

@@ -42,8 +42,9 @@ function Collaborators(props: Props) {
         filter(
           users.orderedData,
           (user) =>
-            presentIds.includes(user.id) ||
-            document.collaboratorIds.includes(user.id)
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
         ),
         (user) => presentIds.includes(user.id)
       ),

app/components/CollectionDeleteDialog.tsx

@@ -3,12 +3,10 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import Collection from "~/models/Collection";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { homePath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -16,39 +14,29 @@ type Props = {
   onSubmit: () => void;
 };
 
-function CollectionDelete({ collection, onSubmit }: Props) {
-  const [isDeleting, setIsDeleting] = React.useState(false);
+function CollectionDeleteDialog({ collection, onSubmit }: Props) {
   const team = useCurrentTeam();
-  const { showToast } = useToasts();
   const { ui } = useStores();
   const history = useHistory();
   const { t } = useTranslation();
-  const handleSubmit = React.useCallback(
-    async (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      setIsDeleting(true);
 
-      try {
-        const redirect = collection.id === ui.activeCollectionId;
-        await collection.delete();
-        onSubmit();
-        if (redirect) {
-          history.push(homePath());
-        }
-      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
-      } finally {
-        setIsDeleting(false);
-      }
-    },
-    [collection, history, onSubmit, showToast, ui.activeCollectionId]
-  );
+  const handleSubmit = async () => {
+    const redirect = collection.id === ui.activeCollectionId;
+    await collection.delete();
+    onSubmit();
+    if (redirect) {
+      history.push(homePath());
+    }
+  };
 
   return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I’m sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <>
         <Text type="secondary">
           <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."
@@ -73,12 +61,9 @@ function CollectionDelete({ collection, onSubmit }: Props) {
             />
           </Text>
         ) : null}
-        <Button type="submit" disabled={isDeleting} autoFocus danger>
-          {isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
-        </Button>
-      </form>
-    </Flex>
+      </>
+    </ConfirmationDialog>
   );
 }
 
-export default observer(CollectionDelete);
+export default observer(CollectionDeleteDialog);

app/components/CollectionDescription.tsx

@@ -25,7 +25,7 @@ function CollectionDescription({ collection }: Props) {
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
   const [isDirty, setDirty] = React.useState(false);
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
 
   const handleStartEditing = React.useCallback(() => {
     setEditing(true);

app/components/CollectionIcon.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import Collection from "~/models/Collection";
 import { icons } from "~/components/IconPicker";
 import useStores from "~/hooks/useStores";
-import Logger from "~/utils/logger";
+import Logger from "~/utils/Logger";
 
 type Props = {
   collection: Collection;

app/components/ConfirmationDialog.tsx

@@ -7,20 +7,23 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
 type Props = {
-  onSubmit: () => void;
-  children: JSX.Element;
+  /** Callback when the dialog is submitted */
+  onSubmit: () => Promise<void> | void;
+  /** Text to display on the submit button */
   submitText?: string;
+  /** Text to display while the form is saving */
   savingText?: string;
+  /** If true, the submit button will be a dangerous red */
   danger?: boolean;
 };
 
-function ConfirmationDialog({
+const ConfirmationDialog: React.FC<Props> = ({
   onSubmit,
   children,
   submitText,
   savingText,
   danger,
-}: Props) {
+}) => {
   const [isSaving, setIsSaving] = React.useState(false);
   const { dialogs } = useStores();
   const { showToast } = useToasts();
@@ -53,6 +56,6 @@ function ConfirmationDialog({
       </form>
     </Flex>
   );
-}
+};
 
 export default observer(ConfirmationDialog);

app/components/ContextMenu/MenuItem.tsx

@@ -1,9 +1,9 @@
+import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
@@ -11,7 +11,7 @@ type Props = {
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   href?: string;
   target?: "_blank";
   as?: string | React.ComponentType<any>;
@@ -132,16 +132,18 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       ? "pointer-events: none;"
       : `
 
-  &:${hover},
-  &:focus,
-  &.focus-visible {
-    color: ${props.theme.white};
-    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
-    box-shadow: none;
-    cursor: pointer;
+  @media (hover: hover) {
+    &:hover,
+    &:focus,
+    &.focus-visible {
+      color: ${props.theme.white};
+      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+      box-shadow: none;
+      cursor: pointer;
 
-    svg {
-      fill: ${props.theme.white};
+      svg {
+        fill: ${props.theme.white};
+      }
     }
   }
   `};

app/components/ContextMenu/Separator.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";
 
-export default function Separator(rest: any) {
+export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
   return (
     <MenuSeparator {...rest}>
       {(props) => <HorizontalRule {...props} />}

app/components/ContextMenu/Template.tsx

@@ -69,29 +69,27 @@ const Submenu = React.forwardRef(
 );
 
 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  let filtered = items.filter((item) => item.visible !== false);
-
-  // this block literally just trims unnecessary separators
-  filtered = filtered.reduce((acc, item, index) => {
-    // trim separators from start / end
-    if (item.type === "separator" && index === 0) {
-      return acc;
-    }
-    if (item.type === "separator" && index === filtered.length - 1) {
-      return acc;
-    }
-
-    // trim double separators looking ahead / behind
-    const prev = filtered[index - 1];
-    if (prev && prev.type === "separator" && item.type === "separator") {
-      return acc;
-    }
-
-    // otherwise, continue
-    return [...acc, item];
-  }, []);
-
-  return filtered;
+  return items
+    .filter((item) => item.visible !== false)
+    .reduce((acc, item) => {
+      // trim separator if the previous item was a separator
+      if (
+        item.type === "separator" &&
+        acc[acc.length - 1]?.type === "separator"
+      ) {
+        return acc;
+      }
+      return [...acc, item];
+    }, [] as TMenuItem[])
+    .filter((item, index, arr) => {
+      if (
+        item.type === "separator" &&
+        (index === 0 || index === arr.length - 1)
+      ) {
+        return false;
+      }
+      return true;
+    });
 }
 
 function Template({ items, actions, context, ...menu }: Props) {

app/components/ContextMenu/index.tsx

@@ -1,3 +1,4 @@
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
@@ -92,6 +93,19 @@ const ContextMenu: React.FC<Props> = ({
     t,
   ]);
 
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement) {
+      disableBodyScroll(scrollElement);
+    }
+    return () => {
+      scrollElement && enableBodyScroll(scrollElement);
+    };
+  }, [rest.visible]);
+
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -101,7 +115,7 @@ const ContextMenu: React.FC<Props> = ({
   // trigger and the bottom of the window
   return (
     <>
-      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+      <Menu hideOnClickOutside preventBodyScroll={false} {...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

app/components/CopyToClipboard.ts

@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
+import env from "~/env";
 
 type Props = {
   text: string;
@@ -14,7 +15,7 @@ class CopyToClipboard extends React.PureComponent<Props> {
     const elem = React.Children.only(children);
 
     copy(text, {
-      debug: process.env.NODE_ENV !== "production",
+      debug: env.ENVIRONMENT !== "production",
       format: "text/plain",
     });
 

app/components/DocumentListItem.tsx

@@ -49,8 +49,8 @@ function DocumentListItem(
   ref: React.RefObject<HTMLAnchorElement>
 ) {
   const { t } = useTranslation();
-  const currentUser = useCurrentUser();
-  const currentTeam = useCurrentTeam();
+  const user = useCurrentUser();
+  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -70,7 +70,7 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(currentTeam.id);
+  const can = usePolicy(team);
   const canCollection = usePolicy(document.collectionId);
 
   return (
@@ -96,7 +96,7 @@ function DocumentListItem(
             highlight={highlight}
             dir={document.dir}
           />
-          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
+          {document.isBadgedNew && document.createdBy.id !== user.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
           {canStar && (

app/components/DocumentMeta.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -35,7 +36,7 @@ type Props = {
   showLastViewed?: boolean;
   showParentDocuments?: boolean;
   document: Document;
-  to?: string;
+  to?: LocationDescriptor;
 };
 
 const DocumentMeta: React.FC<Props> = ({

app/components/DocumentMetaWithViews.tsx

@@ -1,4 +1,5 @@
-import { useObserver } from "mobx-react";
+import { LocationDescriptor } from "history";
+import { observer, useObserver } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
@@ -12,7 +13,7 @@ import useStores from "~/hooks/useStores";
 type Props = {
   document: Document;
   isDraft: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   rtl?: boolean;
 };
 
@@ -83,4 +84,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
   }
 `;
 
-export default DocumentMetaWithViews;
+export default observer(DocumentMetaWithViews);

app/components/DocumentTasks.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, TFunction } from "react-i18next";
@@ -60,4 +61,4 @@ const Done = styled(DoneIcon)<{ $animated: boolean }>`
   transform-origin: center center;
 `;
 
-export default DocumentTasks;
+export default observer(DocumentTasks);

app/components/Editor.tsx

@@ -1,20 +1,24 @@
 import { formatDistanceToNow } from "date-fns";
 import { deburr, sortBy } from "lodash";
+import { observer } from "mobx-react";
+import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
-import embeds from "@shared/editor/embeds";
-import { supportedImageMimeTypes } from "@shared/utils/files";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { Heading } from "@shared/editor/lib/getHeadings";
+import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isInternalUrl } from "@shared/utils/urls";
+import { AttachmentValidation } from "@shared/validations";
 import Document from "~/models/Document";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
 import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
 import useDictionary from "~/hooks/useDictionary";
+import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import { NotFoundError } from "~/utils/errors";
@@ -45,19 +49,22 @@ export type Props = Optional<
   shareId?: string | undefined;
   embedsDisabled?: boolean;
   grow?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
 };
 
-function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
-  const { id, shareId } = props;
+function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
+  const { id, shareId, onChange, onHeadingsChange } = props;
   const { documents } = useStores();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
+  const embeds = useEmbeds(!shareId);
   const [
     activeLinkEvent,
     setActiveLinkEvent,
   ] = React.useState<MouseEvent | null>(null);
+  const previousHeadings = React.useRef<Heading[] | null>(null);
 
   const handleLinkActive = React.useCallback((event: MouseEvent) => {
     setActiveLinkEvent(event);
@@ -165,7 +172,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
   );
 
   const focusAtEnd = React.useCallback(() => {
-    ref.current?.focusAtEnd();
+    ref?.current?.focusAtEnd();
   }, [ref]);
 
   const handleDrop = React.useCallback(
@@ -173,21 +180,41 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
       event.preventDefault();
       event.stopPropagation();
       const files = getDataTransferFiles(event);
-      const view = ref.current?.view;
+
+      const view = ref?.current?.view;
       if (!view) {
         return;
       }
 
+      // Find a valid position at the end of the document to insert our content
+      const pos = TextSelection.near(
+        view.state.doc.resolve(view.state.doc.nodeSize - 2)
+      ).from;
+
+      // If there are no files in the drop event attempt to parse the html
+      // as a fragment and insert it at the end of the document
+      if (files.length === 0) {
+        const text =
+          event.dataTransfer.getData("text/html") ||
+          event.dataTransfer.getData("text/plain");
+
+        const dom = new DOMParser().parseFromString(text, "text/html");
+
+        view.dispatch(
+          view.state.tr.insert(
+            pos,
+            ProsemirrorDOMParser.fromSchema(view.state.schema).parse(dom)
+          )
+        );
+
+        return;
+      }
+
       // Insert all files as attachments if any of the files are not images.
       const isAttachment = files.some(
-        (file) => !supportedImageMimeTypes.includes(file.type)
+        (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
       );
 
-      // Find a valid position at the end of the document
-      const pos = TextSelection.near(
-        view.state.doc.resolve(view.state.doc.nodeSize - 2)
-      ).from;
-
       insertFiles(view, event, pos, files, {
         uploadFile: onUploadFile,
         onFileUploadStart: props.onFileUploadStart,
@@ -216,11 +243,43 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
     []
   );
 
+  // Calculate if headings have changed and trigger callback if so
+  const updateHeadings = React.useCallback(() => {
+    if (onHeadingsChange) {
+      const headings = ref?.current?.getHeadings();
+      if (
+        headings &&
+        headings.map((h) => h.level + h.title).join("") !==
+          previousHeadings.current?.map((h) => h.level + h.title).join("")
+      ) {
+        previousHeadings.current = headings;
+        onHeadingsChange(headings);
+      }
+    }
+  }, [ref, onHeadingsChange]);
+
+  const handleChange = React.useCallback(
+    (event) => {
+      onChange?.(event);
+      updateHeadings();
+    },
+    [onChange, updateHeadings]
+  );
+
+  const handleRefChanged = React.useCallback(
+    (node: SharedEditor | null) => {
+      if (node && !previousHeadings.current) {
+        updateHeadings();
+      }
+    },
+    [updateHeadings]
+  );
+
   return (
     <ErrorBoundary reloadOnChunkMissing>
       <>
         <LazyLoadedEditor
-          ref={ref}
+          ref={mergeRefs([ref, handleRefChanged])}
           uploadFile={onUploadFile}
           onShowToast={showToast}
           embeds={embeds}
@@ -229,6 +288,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
           onHoverLink={handleLinkActive}
           onClickLink={onClickLink}
           onSearchLink={handleSearchLink}
+          onChange={handleChange}
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
         />
@@ -252,4 +312,4 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
   );
 }
 
-export default React.forwardRef(Editor);
+export default observer(React.forwardRef(Editor));

app/components/Empty.ts

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const Empty = styled.p`
   color: ${(props) => props.theme.textTertiary};
+  user-select: none;
 `;
 
 export default Empty;

app/components/ErrorBoundary.tsx

@@ -9,8 +9,8 @@ import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
-import isHosted from "~/utils/isHosted";
-import Logger from "~/utils/logger";
+import Logger from "~/utils/Logger";
+import isCloudHosted from "~/utils/isCloudHosted";
 
 type Props = WithTranslation & {
   reloadOnChunkMissing?: boolean;
@@ -59,7 +59,7 @@ class ErrorBoundary extends React.Component<Props> {
 
     if (this.error) {
       const error = this.error;
-      const isReported = !!env.SENTRY_DSN && isHosted;
+      const isReported = !!env.SENTRY_DSN && isCloudHosted;
       const isChunkError = this.error.message.match(/chunk/);
 
       if (isChunkError) {

app/components/EventListItem.tsx

@@ -5,6 +5,7 @@ import {
   PublishIcon,
   MoveIcon,
   CheckboxIcon,
+  UnpublishIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -32,7 +33,7 @@ type Props = {
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
   const location = useLocation();
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
   const opts = {
     userName: event.actor.name,
   };
@@ -85,6 +86,11 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       meta = t("{{userName}} published", opts);
       break;
 
+    case "documents.unpublish":
+      icon = <UnpublishIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} unpublished", opts);
+      break;
+
     case "documents.move":
       icon = <MoveIcon color="currentColor" size={16} />;
       meta = t("{{userName}} moved", opts);
@@ -113,7 +119,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         <Time
           dateTime={event.createdAt}
           tooltipDelay={500}
-          format="MMM do, h:mm a"
+          format={{
+            en_US: "MMM do, h:mm a",
+            fr_FR: "'Le 'd MMMM 'à' H:mm",
+          }}
           relative={false}
           addSuffix
           onClick={handleTimeClick}

app/components/Flex.tsx

@@ -11,11 +11,19 @@ const Flex = styled.div<{
   align?: AlignValues;
   justify?: JustifyValues;
   shrink?: boolean;
+  reverse?: boolean;
   gap?: number;
 }>`
   display: flex;
   flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
-  flex-direction: ${({ column }) => (column ? "column" : "row")};
+  flex-direction: ${({ column, reverse }) =>
+    reverse
+      ? column
+        ? "column-reverse"
+        : "row-reverse"
+      : column
+      ? "column"
+      : "row"};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
   flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};

app/components/GroupListItem.tsx

@@ -19,7 +19,7 @@ type Props = RootStore & {
   membership?: CollectionGroupMembership;
   showFacepile?: boolean;
   showAvatar?: boolean;
-  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };
 
 @observer

app/components/IconPicker.tsx

@@ -40,6 +40,7 @@ import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
 import { LabelText } from "~/components/Input";
@@ -200,18 +201,7 @@ export const icons = {
     keywords: "warning alert error",
   },
 };
-const colors = [
-  "#4E5C6E",
-  "#0366d6",
-  "#9E5CF7",
-  "#FF825C",
-  "#FF5C80",
-  "#FFBE0B",
-  "#42DED1",
-  "#00D084",
-  "#FF4DFA",
-  "#2F362F",
-];
+
 type Props = {
   onOpen?: () => void;
   onClose?: () => void;
@@ -272,7 +262,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
             <ColorPicker
               color={color}
               onChange={(color) => onChange(color.hex, icon)}
-              colors={colors}
+              colors={colorPalette}
               triangle="hide"
               styles={{
                 default: {

app/components/Input.tsx

@@ -38,6 +38,13 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
     color: ${(props) => props.theme.placeholder};
   }
 
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px ${(props) => props.theme.background}
+      inset;
+  }
+
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
@@ -97,30 +104,17 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = React.HTMLAttributes<HTMLInputElement> & {
+export type Props = React.InputHTMLAttributes<
+  HTMLInputElement | HTMLTextAreaElement
+> & {
   type?: "text" | "email" | "checkbox" | "search" | "textarea";
-  value?: string;
-  label?: string;
-  className?: string;
   labelHidden?: boolean;
+  label?: string;
   flex?: boolean;
   short?: boolean;
   margin?: string | number;
   icon?: React.ReactNode;
-  name?: string;
-  minLength?: number;
-  maxLength?: number;
-  autoFocus?: boolean;
-  autoComplete?: boolean | string;
-  readOnly?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  onChange?: (
-    ev: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => unknown;
-  innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  innerRef?: React.Ref<any>;
   onFocus?: (ev: React.SyntheticEvent) => unknown;
   onBlur?: (ev: React.SyntheticEvent) => unknown;
 };
@@ -163,8 +157,6 @@ class Input extends React.Component<Props> {
       ...rest
     } = this.props;
 
-    const InputComponent: React.ComponentType =
-      type === "textarea" ? RealTextarea : RealInput;
     const wrappedLabel = <LabelText>{label}</LabelText>;
 
     return (
@@ -178,15 +170,24 @@ class Input extends React.Component<Props> {
             ))}
           <Outline focused={this.focused} margin={margin}>
             {icon && <IconWrapper>{icon}</IconWrapper>}
-            <InputComponent
-              // @ts-expect-error no idea why this is not working
-              ref={this.input}
-              onBlur={this.handleBlur}
-              onFocus={this.handleFocus}
-              hasIcon={!!icon}
-              type={type === "textarea" ? undefined : type}
-              {...rest}
-            />
+            {type === "textarea" ? (
+              <RealTextarea
+                ref={this.props.innerRef}
+                onBlur={this.props.onBlur}
+                onFocus={this.handleFocus}
+                hasIcon={!!icon}
+                {...rest}
+              />
+            ) : (
+              <RealInput
+                ref={this.props.innerRef}
+                onBlur={this.props.onBlur}
+                onFocus={this.handleFocus}
+                hasIcon={!!icon}
+                type={type}
+                {...rest}
+              />
+            )}
           </Outline>
         </label>
       </Wrapper>
@@ -194,4 +195,10 @@ class Input extends React.Component<Props> {
   }
 }
 
+export const ReactHookWrappedInput = React.forwardRef(
+  (props: Omit<Props, "innerRef">, ref: React.Ref<any>) => {
+    return <Input {...{ ...props, innerRef: ref }} />;
+  }
+);
+
 export default Input;

app/components/InputSelectPermission.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { $Diff } from "utility-types";
+import { CollectionPermission } from "@shared/types";
 import InputSelect, { Props, Option } from "./InputSelect";
 
 export default function InputSelectPermission(
@@ -31,11 +32,11 @@ export default function InputSelectPermission(
       options={[
         {
           label: t("View and edit"),
-          value: "read_write",
+          value: CollectionPermission.ReadWrite,
         },
         {
           label: t("View only"),
-          value: "read",
+          value: CollectionPermission.Read,
         },
         {
           label: t("No access"),

app/components/LazyPolyfills.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { loadPolyfills } from "~/utils/polyfills";
+
+/**
+ * Asyncronously load required polyfills. Should wrap the React tree.
+ */
+export const LazyPolyfill: React.FC = ({ children }) => {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    loadPolyfills().then(() => {
+      setIsLoaded(true);
+    });
+  }, []);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default LazyPolyfill;

app/components/List/Error.tsx

@@ -0,0 +1,53 @@
+import { DisconnectedIcon, WarningIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Empty from "~/components/Empty";
+import useEventListener from "~/hooks/useEventListener";
+import { OfflineError } from "~/utils/errors";
+import ButtonLink from "../ButtonLink";
+import Flex from "../Flex";
+
+type Props = {
+  error: Error;
+  retry: () => void;
+};
+
+export default function LoadingError({ error, retry, ...rest }: Props) {
+  const { t } = useTranslation();
+  useEventListener("online", retry);
+
+  const message =
+    error instanceof OfflineError ? (
+      <>
+        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
+      </>
+    ) : (
+      <>
+        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
+      </>
+    );
+
+  return (
+    <Content {...rest}>
+      <Flex align="center" gap={4}>
+        {message}{" "}
+        <ButtonLink onClick={() => retry()}>{t("Click to retry")}…</ButtonLink>
+      </Flex>
+    </Content>
+  );
+}
+
+const Content = styled(Empty)`
+  padding: 8px 0;
+  white-space: nowrap;
+
+  ${ButtonLink} {
+    color: ${(props) => props.theme.textTertiary};
+
+    &:hover {
+      color: ${(props) => props.theme.textSecondary};
+      text-decoration: underline;
+    }
+  }
+`;

app/components/List/Item.tsx

@@ -69,7 +69,11 @@ const ListItem = (
   );
 };
 
-const Wrapper = styled.a<{ $small?: boolean; $border?: boolean; to?: string }>`
+const Wrapper = styled.a<{
+  $small?: boolean;
+  $border?: boolean;
+  to?: string;
+}>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) =>

app/components/LocaleTime.tsx

@@ -2,7 +2,7 @@ import { format as formatDate, formatDistanceToNow } from "date-fns";
 import * as React from "react";
 import Tooltip from "~/components/Tooltip";
 import useUserLocale from "~/hooks/useUserLocale";
-import { dateLocale } from "~/utils/i18n";
+import { dateLocale, locales } from "~/utils/i18n";
 
 let callbacks: (() => void)[] = [];
 
@@ -26,7 +26,7 @@ type Props = {
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
-  format?: string;
+  format?: Partial<Record<keyof typeof locales, string>>;
 };
 
 const LocaleTime: React.FC<Props> = ({
@@ -38,7 +38,13 @@ const LocaleTime: React.FC<Props> = ({
   relative,
   tooltipDelay,
 }) => {
-  const userLocale = useUserLocale();
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong = dateFormatLong[userLocale] ?? "MMMM do, yyyy h:mm a";
+  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
   const callback = React.useRef<() => void>();
 
@@ -66,17 +72,13 @@ const LocaleTime: React.FC<Props> = ({
       .replace("minute", "min");
   }
 
-  const tooltipContent = formatDate(
-    Date.parse(dateTime),
-    "MMMM do, yyyy h:mm a",
-    {
-      locale,
-    }
-  );
+  const tooltipContent = formatDate(Date.parse(dateTime), formatLocaleLong, {
+    locale,
+  });
   const content =
     relative !== false
       ? relativeContent
-      : formatDate(Date.parse(dateTime), format || "MMMM do, yyyy h:mm a", {
+      : formatDate(Date.parse(dateTime), formatLocale, {
           locale,
         });
 

app/components/Modal.tsx

@@ -67,6 +67,7 @@ const Modal: React.FC<Props> = ({
         <Backdrop $isCentered={isCentered} {...props}>
           <Dialog
             {...dialog}
+            aria-label={typeof title === "string" ? title : undefined}
             preventBodyScroll
             hideOnEsc
             hideOnClickOutside={!!isCentered}
@@ -75,7 +76,12 @@ const Modal: React.FC<Props> = ({
             {(props) =>
               isCentered && !isMobile ? (
                 <Small {...props}>
-                  <Centered onClick={(ev) => ev.stopPropagation()} column>
+                  <Centered
+                    onClick={(ev) => ev.stopPropagation()}
+                    column
+                    reverse
+                  >
+                    <SmallContent shadow>{children}</SmallContent>
                     <Header>
                       {title && (
                         <Text as="span" size="large">
@@ -88,7 +94,6 @@ const Modal: React.FC<Props> = ({
                         </NudeButton>
                       </Text>
                     </Header>
-                    <SmallContent shadow>{children}</SmallContent>
                   </Centered>
                 </Small>
               ) : (

app/components/NavLink.tsx

@@ -1,8 +1,15 @@
 import * as React from "react";
-import { NavLink, Route } from "react-router-dom";
+import { match, NavLink, Route } from "react-router-dom";
 
 type Props = React.ComponentProps<typeof NavLink> & {
-  children?: (match: any) => React.ReactNode;
+  children?: (
+    match:
+      | match<{
+          [x: string]: string | undefined;
+        }>
+      | boolean
+      | null
+  ) => React.ReactNode;
   exact?: boolean;
   activeStyle?: React.CSSProperties;
   to: string;

app/components/PaginatedDocumentList.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import Document from "~/models/Document";
 import DocumentListItem from "~/components/DocumentListItem";
+import Error from "~/components/List/Error";
 import PaginatedList from "~/components/PaginatedList";
 
 type Props = {
@@ -40,6 +41,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
       heading={heading}
       fetch={fetch}
       options={options}
+      renderError={(props) => <Error {...props} />}
       renderItem={(item: Document, _index, compositeProps) => (
         <DocumentListItem
           key={item.id}

app/components/PaginatedList.tsx

@@ -34,12 +34,19 @@ type Props<T> = WithTranslation &
       index: number,
       compositeProps: CompositeStateReturn
     ) => React.ReactNode;
+    renderError?: (options: {
+      error: Error;
+      retry: () => void;
+    }) => React.ReactNode;
     renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
     onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
   };
 
 @observer
 class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
+  @observable
+  error?: Error;
+
   @observable
   isFetchingMore = false;
 
@@ -80,6 +87,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     this.isFetchingMore = false;
   };
 
+  @action
   fetchResults = async () => {
     if (!this.props.fetch) {
       return;
@@ -87,25 +95,30 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     this.isFetching = true;
     const counter = ++this.fetchCounter;
     const limit = DEFAULT_PAGINATION_LIMIT;
+    this.error = undefined;
 
-    const results = await this.props.fetch({
-      limit,
-      offset: this.offset,
-      ...this.props.options,
-    });
+    try {
+      const results = await this.props.fetch({
+        limit,
+        offset: this.offset,
+        ...this.props.options,
+      });
 
-    if (results && (results.length === 0 || results.length < limit)) {
-      this.allowLoadMore = false;
-    } else {
-      this.offset += limit;
-    }
+      if (results && (results.length === 0 || results.length < limit)) {
+        this.allowLoadMore = false;
+      } else {
+        this.offset += limit;
+      }
 
-    this.renderCount += limit;
-
-    // only the most recent fetch should end the loading state
-    if (counter >= this.fetchCounter) {
-      this.isFetching = false;
-      this.isFetchingMore = false;
+      this.renderCount += limit;
+    } catch (err) {
+      this.error = err;
+    } finally {
+      // only the most recent fetch should end the loading state
+      if (counter >= this.fetchCounter) {
+        this.isFetching = false;
+        this.isFetchingMore = false;
+      }
     }
   };
 
@@ -119,7 +132,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     // of lazy rendering then show another page.
     const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
 
-    if (leftToRender > 1) {
+    if (leftToRender > 0) {
       this.renderCount += DEFAULT_PAGINATION_LIMIT;
     }
 
@@ -138,9 +151,9 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
       auth,
       empty = null,
       renderHeading,
+      renderError,
       onEscape,
     } = this.props;
-    let previousHeading = "";
 
     const showLoading =
       this.isFetching &&
@@ -158,6 +171,10 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     }
 
     if (items?.length === 0) {
+      if (this.error && renderError) {
+        return renderError({ error: this.error, retry: this.fetchResults });
+      }
+
       return empty;
     }
 
@@ -168,8 +185,9 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
           aria-label={this.props["aria-label"]}
           onEscape={onEscape}
         >
-          {(composite: CompositeStateReturn) =>
-            items.slice(0, this.renderCount).map((item, index) => {
+          {(composite: CompositeStateReturn) => {
+            let previousHeading = "";
+            return items.slice(0, this.renderCount).map((item, index) => {
               const children = this.props.renderItem(item, index, composite);
 
               // If there is no renderHeading method passed then no date
@@ -202,8 +220,8 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
               }
 
               return children;
-            })
-          }
+            });
+          }}
         </ArrowKeyNavigation>
         {this.allowLoadMore && (
           <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />

app/components/PathToDocument.tsx

@@ -14,7 +14,7 @@ type Props = {
   collection: Collection | null | undefined;
   onSuccess?: () => void;
   style?: React.CSSProperties;
-  ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void;
+  ref?: (element: React.ElementRef<"div"> | null | undefined) => void;
 };
 
 @observer

app/components/Sidebar/App.tsx

@@ -10,6 +10,7 @@ import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import { inviteUser } from "~/actions/definitions/users";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
@@ -34,12 +35,15 @@ function AppSidebar() {
   const { t } = useTranslation();
   const { documents } = useStores();
   const team = useCurrentTeam();
-  const can = usePolicy(team.id);
+  const user = useCurrentUser();
+  const can = usePolicy(team);
 
   React.useEffect(() => {
-    documents.fetchDrafts();
-    documents.fetchTemplates();
-  }, [documents]);
+    if (!user.isViewer) {
+      documents.fetchDrafts();
+      documents.fetchTemplates();
+    }
+  }, [documents, user.isViewer]);
 
   const [dndArea, setDndArea] = React.useState();
   const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);

app/components/Sidebar/Settings.tsx

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
-import isHosted from "~/utils/isHosted";
+import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
@@ -51,7 +51,7 @@ function SettingsSidebar() {
               </Header>
             </Section>
           ))}
-          {!isHosted && (
+          {!isCloudHosted && (
             <Section>
               <Header title={t("Installation")} />
               <Version />

app/components/Sidebar/Sidebar.tsx

@@ -65,8 +65,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
     const handleStopDrag = React.useCallback(() => {
       setResizing(false);
 
-      if (document.activeElement) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
+      if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }
 

app/components/Sidebar/components/CollectionLink.tsx

@@ -44,7 +44,7 @@ const CollectionLink: React.FC<Props> = ({
   const { dialogs, documents, collections } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
-  const canUpdate = usePolicy(collection.id).update;
+  const canUpdate = usePolicy(collection).update;
   const { t } = useTranslation();
   const history = useHistory();
   const inStarredSection = useStarredContext();

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -25,7 +25,7 @@ function CollectionLinkChildren({
   expanded,
   prefetchDocument,
 }: Props) {
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const { showToast } = useToasts();
   const manualSort = collection.sort.field === "index";
   const { documents } = useStores();
@@ -37,7 +37,7 @@ function CollectionLinkChildren({
   const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
     accept: "document",
     drop: (item: DragObject) => {
-      if (!manualSort) {
+      if (!manualSort && item.collectionId === collection?.id) {
         showToast(
           t(
             "You can't reorder documents in an alphabetically sorted collection"

app/components/Sidebar/components/Collections.tsx

@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import Collection from "~/models/Collection";
-import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import Error from "~/components/List/Error";
+import PaginatedList from "~/components/PaginatedList";
 import { createCollection } from "~/actions/definitions/collections";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import DraggableCollectionLink from "./DraggableCollectionLink";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
@@ -18,39 +19,10 @@ import SidebarAction from "./SidebarAction";
 import { DragObject } from "./SidebarLink";
 
 function Collections() {
-  const [isFetching, setFetching] = React.useState(false);
-  const [fetchError, setFetchError] = React.useState();
   const { documents, collections } = useStores();
-  const { showToast } = useToasts();
-  const isPreloaded = !!collections.orderedData.length;
   const { t } = useTranslation();
   const orderedCollections = collections.orderedData;
 
-  React.useEffect(() => {
-    async function load() {
-      if (!collections.isLoaded && !isFetching && !fetchError) {
-        try {
-          setFetching(true);
-          await collections.fetchPage({
-            limit: 100,
-          });
-        } catch (error) {
-          showToast(
-            t("Collections could not be loaded, please reload the app"),
-            {
-              type: "error",
-            }
-          );
-          setFetchError(error);
-        } finally {
-          setFetching(false);
-        }
-      }
-    }
-
-    load();
-  }, [collections, isFetching, showToast, fetchError, t]);
-
   const [
     { isCollectionDropping, isDraggingAnyCollection },
     dropToReorderCollection,
@@ -71,45 +43,46 @@ function Collections() {
     }),
   });
 
-  const content = (
-    <>
-      {isDraggingAnyCollection && (
-        <DropCursor
-          isActiveDrop={isCollectionDropping}
-          innerRef={dropToReorderCollection}
-          position="top"
-        />
-      )}
-      {orderedCollections.map((collection: Collection, index: number) => (
-        <DraggableCollectionLink
-          key={collection.id}
-          collection={collection}
-          activeDocument={documents.active}
-          prefetchDocument={documents.prefetchDocument}
-          belowCollection={orderedCollections[index + 1]}
-        />
-      ))}
-      <SidebarAction action={createCollection} depth={0} />
-    </>
-  );
-
-  if (!collections.isLoaded || fetchError) {
-    return (
-      <Flex column>
-        <Header id="collections" title={t("Collections")}>
-          <PlaceholderCollections />
-        </Header>
-      </Flex>
-    );
-  }
-
   return (
     <Flex column>
       <Header id="collections" title={t("Collections")}>
-        <Relative>{isPreloaded ? content : <Fade>{content}</Fade>}</Relative>
+        <Relative>
+          <PaginatedList
+            aria-label={t("Collections")}
+            items={collections.orderedData}
+            fetch={collections.fetchPage}
+            options={{ limit: 100 }}
+            loading={<PlaceholderCollections />}
+            heading={
+              isDraggingAnyCollection ? (
+                <DropCursor
+                  isActiveDrop={isCollectionDropping}
+                  innerRef={dropToReorderCollection}
+                  position="top"
+                />
+              ) : undefined
+            }
+            renderError={(props) => <StyledError {...props} />}
+            renderItem={(item: Collection, index) => (
+              <DraggableCollectionLink
+                key={item.id}
+                collection={item}
+                activeDocument={documents.active}
+                prefetchDocument={documents.prefetchDocument}
+                belowCollection={orderedCollections[index + 1]}
+              />
+            )}
+          />
+          <SidebarAction action={createCollection} depth={0} />
+        </Relative>
       </Header>
     </Flex>
   );
 }
 
+const StyledError = styled(Error)`
+  font-size: 15px;
+  padding: 0 8px;
+`;
+
 export default observer(Collections);

app/components/Sidebar/components/DocumentLink.tsx

@@ -6,8 +6,8 @@ import { useDrag, useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { MAX_TITLE_LENGTH } from "@shared/constants";
 import { sortNavigationNodes } from "@shared/utils/collections";
+import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
@@ -148,7 +148,7 @@ function InnerDocumentLink(
       collectionId: collection?.id || "",
     }),
     collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
+      isDragging: monitor.isDragging(),
     }),
     canDrag: () => {
       return (
@@ -213,7 +213,7 @@ function InnerDocumentLink(
       }
     },
     collect: (monitor) => ({
-      isOverReparent: !!monitor.isOver({
+      isOverReparent: monitor.isOver({
         shallow: true,
       }),
       canDropToReparent: monitor.canDrop(),
@@ -252,25 +252,24 @@ function InnerDocumentLink(
       documents.move(item.id, collection.id, parentId, index + 1);
     },
     collect: (monitor) => ({
-      isOverReorder: !!monitor.isOver(),
-      isDraggingAnyDocument: !!monitor.canDrop(),
+      isOverReorder: monitor.isOver(),
+      isDraggingAnyDocument: monitor.canDrop(),
     }),
   });
 
   const nodeChildren = React.useMemo(() => {
-    if (
-      collection &&
+    const insertDraftDocument =
       activeDocument?.isDraft &&
       activeDocument?.isActive &&
-      activeDocument?.parentDocumentId === node.id
-    ) {
-      return sortNavigationNodes(
-        [activeDocument?.asNavigationNode, ...node.children],
-        collection.sort
-      );
-    }
+      activeDocument?.parentDocumentId === node.id;
 
-    return node.children;
+    return collection && insertDraftDocument
+      ? sortNavigationNodes(
+          [activeDocument?.asNavigationNode, ...node.children],
+          collection.sort,
+          false
+        )
+      : node.children;
   }, [
     activeDocument?.isActive,
     activeDocument?.isDraft,
@@ -320,7 +319,7 @@ function InnerDocumentLink(
                     onSubmit={handleTitleChange}
                     onEditing={handleTitleEditing}
                     canUpdate={canUpdate}
-                    maxLength={MAX_TITLE_LENGTH}
+                    maxLength={DocumentValidation.maxTitleLength}
                   />
                 }
                 isActive={(match, location: Location<{ starred?: boolean }>) =>

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -39,7 +39,7 @@ function DraggableCollectionLink({
   const [expanded, setExpanded] = React.useState(
     collection.id === ui.activeCollectionId && !locationStateStarred
   );
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to reorder collection

app/components/Sidebar/components/NavLink.tsx

@@ -2,7 +2,7 @@
 // This file is pulled almost 100% from react-router with the addition of one
 // thing, automatic scroll to the active link. It's worth the copy paste because
 // it avoids recalculating the link match again.
-import { Location, createLocation } from "history";
+import { Location, createLocation, LocationDescriptor } from "history";
 import * as React from "react";
 import {
   __RouterContext as RouterContext,
@@ -13,12 +13,12 @@ import { Link } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 
 const resolveToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor | ((location: Location) => LocationDescriptor),
   currentLocation: Location
 ) => (typeof to === "function" ? to(currentLocation) : to);
 
 const normalizeToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor,
   currentLocation: Location
 ) => {
   return typeof to === "string"
@@ -30,17 +30,15 @@ const joinClassnames = (...classnames: (string | undefined)[]) => {
   return classnames.filter((i) => i).join(" ");
 };
 
-export type Props = React.HTMLAttributes<HTMLAnchorElement> & {
+export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   activeClassName?: string;
   activeStyle?: React.CSSProperties;
-  className?: string;
   scrollIntoViewIfNeeded?: boolean;
   exact?: boolean;
   isActive?: (match: match | null, location: Location) => boolean;
   location?: Location;
   strict?: boolean;
-  style?: React.CSSProperties;
-  to: string | Record<string, any>;
+  to: LocationDescriptor;
 };
 
 /**

app/components/Sidebar/components/SidebarLink.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -14,8 +15,7 @@ export type DragObject = NavigationNode & {
 };
 
 type Props = Omit<NavLinkProps, "to"> & {
-  to?: string | Record<string, any>;
-  href?: string | Record<string, any>;
+  to?: LocationDescriptor;
   innerRef?: (ref: HTMLElement | null | undefined) => void;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;

app/components/Sidebar/components/Version.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Badge from "~/components/Badge";
 import { version } from "../../../../package.json";
@@ -6,6 +7,7 @@ import SidebarLink from "./SidebarLink";
 
 export default function Version() {
   const [releasesBehind, setReleasesBehind] = React.useState(0);
+  const { t } = useTranslation();
 
   React.useEffect(() => {
     async function loadReleases() {
@@ -30,6 +32,7 @@ export default function Version() {
 
   return (
     <SidebarLink
+      target="_blank"
       href="https://github.com/outline/outline/releases"
       label={
         <>
@@ -37,10 +40,11 @@ export default function Version() {
           <br />
           <LilBadge>
             {releasesBehind === 0
-              ? "Up to date"
-              : `${releasesBehind} version${
-                  releasesBehind === 1 ? "" : "s"
-                } behind`}
+              ? t("Up to date")
+              : t(`{{ releasesBehind }} versions behind`, {
+                  releasesBehind,
+                  count: releasesBehind,
+                })}
           </LilBadge>
         </>
       }

app/components/Sidebar/components/useCollectionDocuments.ts

@@ -12,19 +12,19 @@ export default function useCollectionDocuments(
       return [];
     }
 
-    if (
+    const insertDraftDocument =
       activeDocument?.isActive &&
       activeDocument?.isDraft &&
       activeDocument?.collectionId === collection.id &&
-      !activeDocument?.parentDocumentId
-    ) {
-      return sortNavigationNodes(
-        [activeDocument.asNavigationNode, ...collection.documents],
-        collection.sort
-      );
-    }
+      !activeDocument?.parentDocumentId;
 
-    return collection.documents;
+    return insertDraftDocument
+      ? sortNavigationNodes(
+          [activeDocument.asNavigationNode, ...collection.sortedDocuments],
+          collection.sort,
+          false
+        )
+      : collection.sortedDocuments;
   }, [
     activeDocument?.isActive,
     activeDocument?.isDraft,
@@ -32,7 +32,7 @@ export default function useCollectionDocuments(
     activeDocument?.parentDocumentId,
     activeDocument?.asNavigationNode,
     collection,
-    collection?.documents,
+    collection?.sortedDocuments,
     collection?.id,
     collection?.sort,
   ]);

app/components/SocketProvider.tsx

@@ -1,387 +0,0 @@
-import invariant from "invariant";
-import { find } from "lodash";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import io from "socket.io-client";
-import RootStore from "~/stores/RootStore";
-import withStores from "~/components/withStores";
-import { getVisibilityListener, getPageVisible } from "~/utils/pageVisibility";
-
-type SocketWithAuthentication = {
-  authenticated?: boolean;
-  disconnected: boolean;
-  disconnect: () => void;
-  close: () => void;
-  on: (event: string, callback: (data: any) => void) => void;
-  emit: (event: string, data: any) => void;
-  io: any;
-};
-
-export const SocketContext: any = React.createContext<SocketWithAuthentication | null>(
-  null
-);
-
-type Props = RootStore;
-
-@observer
-class SocketProvider extends React.Component<Props> {
-  @observable
-  socket: SocketWithAuthentication | null;
-
-  componentDidMount() {
-    this.createConnection();
-    document.addEventListener(getVisibilityListener(), this.checkConnection);
-  }
-
-  componentWillUnmount() {
-    if (this.socket) {
-      this.socket.authenticated = false;
-      this.socket.disconnect();
-    }
-
-    document.removeEventListener(getVisibilityListener(), this.checkConnection);
-  }
-
-  checkConnection = () => {
-    if (this.socket?.disconnected && getPageVisible()) {
-      // null-ifying this reference is important, do not remove. Without it
-      // references to old sockets are potentially held in context
-      this.socket.close();
-      this.socket = null;
-      this.createConnection();
-    }
-  };
-
-  createConnection = () => {
-    this.socket = io(window.location.origin, {
-      path: "/realtime",
-      transports: ["websocket"],
-      reconnectionDelay: 1000,
-      reconnectionDelayMax: 30000,
-    });
-    invariant(this.socket, "Socket should be defined");
-
-    this.socket.authenticated = false;
-    const {
-      auth,
-      toasts,
-      documents,
-      collections,
-      groups,
-      pins,
-      stars,
-      memberships,
-      policies,
-      presence,
-      views,
-      fileOperations,
-    } = this.props;
-    if (!auth.token) {
-      return;
-    }
-
-    this.socket.on("connect", () => {
-      // immediately send current users token to the websocket backend where it
-      // is verified, if all goes well an 'authenticated' message will be
-      // received in response
-      this.socket?.emit("authentication", {
-        token: auth.token,
-      });
-    });
-
-    this.socket.on("disconnect", () => {
-      // when the socket is disconnected we need to clear all presence state as
-      // it's no longer reliable.
-      presence.clear();
-    });
-
-    // on reconnection, reset the transports option, as the Websocket
-    // connection may have failed (caused by proxy, firewall, browser, ...)
-    this.socket.on("reconnect_attempt", () => {
-      if (this.socket) {
-        this.socket.io.opts.transports = auth?.team?.domain
-          ? ["websocket"]
-          : ["websocket", "polling"];
-      }
-    });
-
-    this.socket.on("authenticated", () => {
-      if (this.socket) {
-        this.socket.authenticated = true;
-      }
-    });
-
-    this.socket.on("unauthorized", (err: Error) => {
-      if (this.socket) {
-        this.socket.authenticated = false;
-      }
-      toasts.showToast(err.message, {
-        type: "error",
-      });
-      throw err;
-    });
-
-    this.socket.on("entities", async (event: any) => {
-      if (event.documentIds) {
-        for (const documentDescriptor of event.documentIds) {
-          const documentId = documentDescriptor.id;
-          let document = documents.get(documentId) || {};
-
-          if (event.event === "documents.delete") {
-            const document = documents.get(documentId);
-
-            if (document) {
-              document.deletedAt = documentDescriptor.updatedAt;
-            }
-
-            policies.remove(documentId);
-            continue;
-          }
-
-          // if we already have the latest version (it was us that performed
-          // the change) then we don't need to update anything either.
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type '{}'.
-          const { title, updatedAt } = document;
-
-          if (updatedAt === documentDescriptor.updatedAt) {
-            continue;
-          }
-
-          // otherwise, grab the latest version of the document
-          try {
-            document = await documents.fetch(documentId, {
-              force: true,
-            });
-          } catch (err) {
-            if (err.statusCode === 404 || err.statusCode === 403) {
-              documents.remove(documentId);
-              return;
-            }
-          }
-
-          // if the title changed then we need to update the collection also
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type '{}'.
-          if (title !== document.title) {
-            if (!event.collectionIds) {
-              event.collectionIds = [];
-            }
-
-            const existing = find(event.collectionIds, {
-              // @ts-expect-error ts-migrate(2339) FIXME: Property 'collectionId' does not exist on type '{}... Remove this comment to see the full error message
-              id: document.collectionId,
-            });
-
-            if (!existing) {
-              event.collectionIds.push({
-                // @ts-expect-error ts-migrate(2339) FIXME: Property 'collectionId' does not exist on type '{}... Remove this comment to see the full error message
-                id: document.collectionId,
-              });
-            }
-          }
-        }
-      }
-
-      if (event.collectionIds) {
-        for (const collectionDescriptor of event.collectionIds) {
-          const collectionId = collectionDescriptor.id;
-          const collection = collections.get(collectionId);
-
-          if (event.event === "collections.delete") {
-            if (collection) {
-              collection.deletedAt = collectionDescriptor.updatedAt;
-            }
-
-            const deletedDocuments = documents.inCollection(collectionId);
-            deletedDocuments.forEach((doc) => {
-              doc.deletedAt = collectionDescriptor.updatedAt;
-              policies.remove(doc.id);
-            });
-            documents.removeCollectionDocuments(collectionId);
-            memberships.removeCollectionMemberships(collectionId);
-            collections.remove(collectionId);
-            policies.remove(collectionId);
-            continue;
-          }
-
-          // if we already have the latest version (it was us that performed
-          // the change) then we don't need to update anything either.
-
-          if (collection?.updatedAt === collectionDescriptor.updatedAt) {
-            continue;
-          }
-
-          try {
-            await collections.fetch(collectionId, {
-              force: true,
-            });
-          } catch (err) {
-            if (err.statusCode === 404 || err.statusCode === 403) {
-              documents.removeCollectionDocuments(collectionId);
-              memberships.removeCollectionMemberships(collectionId);
-              collections.remove(collectionId);
-              policies.remove(collectionId);
-              return;
-            }
-          }
-        }
-      }
-
-      if (event.groupIds) {
-        for (const groupDescriptor of event.groupIds) {
-          const groupId = groupDescriptor.id;
-          const group = groups.get(groupId) || {};
-          // if we already have the latest version (it was us that performed
-          // the change) then we don't need to update anything either.
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'updatedAt' does not exist on type '{}'.
-          const { updatedAt } = group;
-
-          if (updatedAt === groupDescriptor.updatedAt) {
-            continue;
-          }
-
-          try {
-            await groups.fetch(groupId, {
-              force: true,
-            });
-          } catch (err) {
-            if (err.statusCode === 404 || err.statusCode === 403) {
-              groups.remove(groupId);
-            }
-          }
-        }
-      }
-
-      if (event.teamIds) {
-        await auth.fetch();
-      }
-    });
-
-    this.socket.on("pins.create", (event: any) => {
-      pins.add(event);
-    });
-
-    this.socket.on("pins.update", (event: any) => {
-      pins.add(event);
-    });
-
-    this.socket.on("pins.delete", (event: any) => {
-      pins.remove(event.modelId);
-    });
-
-    this.socket.on("stars.create", (event: any) => {
-      stars.add(event);
-    });
-
-    this.socket.on("stars.update", (event: any) => {
-      stars.add(event);
-    });
-
-    this.socket.on("stars.delete", (event: any) => {
-      stars.remove(event.modelId);
-    });
-
-    this.socket.on("documents.permanent_delete", (event: any) => {
-      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: any) => {
-      if (auth.user && event.userId === auth.user.id) {
-        collections.fetch(event.collectionId, {
-          force: true,
-        });
-      }
-
-      // Document policies might need updating as the permission changes
-      documents.inCollection(event.collectionId).forEach((document) => {
-        policies.remove(document.id);
-      });
-    });
-
-    // received when a user is removed from having access to a collection
-    // to keep state in sync we must update our UI if the user is us,
-    // or otherwise just remove any membership state we have for that user.
-    this.socket.on("collections.remove_user", (event: any) => {
-      if (auth.user && event.userId === auth.user.id) {
-        collections.remove(event.collectionId);
-        memberships.removeCollectionMemberships(event.collectionId);
-        documents.removeCollectionDocuments(event.collectionId);
-      } else {
-        memberships.remove(`${event.userId}-${event.collectionId}`);
-      }
-    });
-
-    this.socket.on("collections.update_index", (event: any) => {
-      const collection = collections.get(event.collectionId);
-
-      if (collection) {
-        collection.updateIndex(event.index);
-      }
-    });
-
-    this.socket.on("fileOperations.create", async (event: any) => {
-      const user = auth.user;
-      if (user) {
-        fileOperations.add({ ...event, user });
-      }
-    });
-
-    this.socket.on("fileOperations.update", async (event: any) => {
-      const user = auth.user;
-      if (user) {
-        fileOperations.add({ ...event, user });
-      }
-    });
-
-    // received a message from the API server that we should request
-    // to join a specific room. Forward that to the ws server.
-    this.socket.on("join", (event: any) => {
-      this.socket?.emit("join", event);
-    });
-
-    // received a message from the API server that we should request
-    // to leave a specific room. Forward that to the ws server.
-    this.socket.on("leave", (event: any) => {
-      this.socket?.emit("leave", event);
-    });
-
-    // received whenever we join a document room, the payload includes
-    // userIds that are present/viewing and those that are editing.
-    this.socket.on("document.presence", (event: any) => {
-      presence.init(event.documentId, event.userIds, event.editingIds);
-    });
-
-    // received whenever a new user joins a document room, aka they
-    // navigate to / start viewing a document
-    this.socket.on("user.join", (event: any) => {
-      presence.touch(event.documentId, event.userId, event.isEditing);
-      views.touch(event.documentId, event.userId);
-    });
-
-    // received whenever a new user leaves a document room, aka they
-    // navigate away / stop viewing a document
-    this.socket.on("user.leave", (event: any) => {
-      presence.leave(event.documentId, event.userId);
-      views.touch(event.documentId, event.userId);
-    });
-
-    // received when another client in a document room wants to change
-    // or update it's presence. Currently the only property is whether
-    // the client is in editing state or not.
-    this.socket.on("user.presence", (event: any) => {
-      presence.touch(event.documentId, event.userId, event.isEditing);
-    });
-  };
-
-  render() {
-    return (
-      <SocketContext.Provider value={this.socket}>
-        {this.props.children}
-      </SocketContext.Provider>
-    );
-  }
-}
-
-export default withStores(SocketProvider);

app/components/Tab.tsx

@@ -1,17 +1,14 @@
 import { m } from "framer-motion";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import NavLinkWithChildrenFunc from "~/components/NavLink";
+import NavLink from "~/components/NavLink";
 
-type Props = Omit<
-  React.ComponentProps<typeof NavLinkWithChildrenFunc>,
-  "children"
-> & {
+type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
   to: string;
   exact?: boolean;
 };
 
-const TabLink = styled(NavLinkWithChildrenFunc)`
+const TabLink = styled(NavLink)`
   position: relative;
   display: inline-flex;
   align-items: center;

app/components/TableFromParams.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
@@ -72,4 +73,4 @@ const TableFromParams = (
   );
 };
 
-export default TableFromParams;
+export default observer(TableFromParams);

app/components/WebsocketProvider.tsx

@@ -0,0 +1,448 @@
+import invariant from "invariant";
+import { find } from "lodash";
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { io, Socket } from "socket.io-client";
+import RootStore from "~/stores/RootStore";
+import Collection from "~/models/Collection";
+import Document from "~/models/Document";
+import FileOperation from "~/models/FileOperation";
+import Group from "~/models/Group";
+import Pin from "~/models/Pin";
+import Star from "~/models/Star";
+import Subscription from "~/models/Subscription";
+import Team from "~/models/Team";
+import withStores from "~/components/withStores";
+import {
+  PartialWithId,
+  WebsocketCollectionUpdateIndexEvent,
+  WebsocketCollectionUserEvent,
+  WebsocketEntitiesEvent,
+  WebsocketEntityDeletedEvent,
+} from "~/types";
+import { AuthorizationError, NotFoundError } from "~/utils/errors";
+import { getVisibilityListener, getPageVisible } from "~/utils/pageVisibility";
+
+type SocketWithAuthentication = Socket & {
+  authenticated?: boolean;
+};
+
+export const WebsocketContext = React.createContext<SocketWithAuthentication | null>(
+  null
+);
+
+type Props = RootStore;
+
+@observer
+class WebsocketProvider extends React.Component<Props> {
+  @observable
+  socket: SocketWithAuthentication | null;
+
+  componentDidMount() {
+    this.createConnection();
+    document.addEventListener(getVisibilityListener(), this.checkConnection);
+  }
+
+  componentWillUnmount() {
+    if (this.socket) {
+      this.socket.authenticated = false;
+      this.socket.disconnect();
+    }
+
+    document.removeEventListener(getVisibilityListener(), this.checkConnection);
+  }
+
+  checkConnection = () => {
+    if (this.socket?.disconnected && getPageVisible()) {
+      // null-ifying this reference is important, do not remove. Without it
+      // references to old sockets are potentially held in context
+      this.socket.close();
+      this.socket = null;
+      this.createConnection();
+    }
+  };
+
+  createConnection = () => {
+    this.socket = io(window.location.origin, {
+      path: "/realtime",
+      transports: ["websocket"],
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 30000,
+    });
+    invariant(this.socket, "Socket should be defined");
+
+    this.socket.authenticated = false;
+    const {
+      auth,
+      toasts,
+      documents,
+      collections,
+      groups,
+      pins,
+      stars,
+      memberships,
+      policies,
+      presence,
+      views,
+      subscriptions,
+      fileOperations,
+    } = this.props;
+    if (!auth.token) {
+      return;
+    }
+
+    this.socket.on("connect", () => {
+      // immediately send current users token to the websocket backend where it
+      // is verified, if all goes well an 'authenticated' message will be
+      // received in response
+      this.socket?.emit("authentication", {
+        token: auth.token,
+      });
+    });
+
+    this.socket.on("disconnect", () => {
+      // when the socket is disconnected we need to clear all presence state as
+      // it's no longer reliable.
+      presence.clear();
+    });
+
+    // on reconnection, reset the transports option, as the Websocket
+    // connection may have failed (caused by proxy, firewall, browser, ...)
+    this.socket.io.on("reconnect_attempt", () => {
+      if (this.socket) {
+        this.socket.io.opts.transports = auth?.team?.domain
+          ? ["websocket"]
+          : ["websocket", "polling"];
+      }
+    });
+
+    this.socket.on("authenticated", () => {
+      if (this.socket) {
+        this.socket.authenticated = true;
+      }
+    });
+
+    this.socket.on("unauthorized", (err: Error) => {
+      if (this.socket) {
+        this.socket.authenticated = false;
+      }
+      toasts.showToast(err.message, {
+        type: "error",
+      });
+      throw err;
+    });
+
+    this.socket.on(
+      "entities",
+      action(async (event: WebsocketEntitiesEvent) => {
+        if (event.documentIds) {
+          for (const documentDescriptor of event.documentIds) {
+            const documentId = documentDescriptor.id;
+            let document = documents.get(documentId);
+            const previousTitle = document?.title;
+
+            // if we already have the latest version (it was us that performed
+            // the change) then we don't need to update anything either.
+            if (document?.updatedAt === documentDescriptor.updatedAt) {
+              continue;
+            }
+
+            // otherwise, grab the latest version of the document
+            try {
+              document = await documents.fetch(documentId, {
+                force: true,
+              });
+            } catch (err) {
+              if (
+                err instanceof AuthorizationError ||
+                err instanceof NotFoundError
+              ) {
+                documents.remove(documentId);
+                return;
+              }
+            }
+
+            // if the title changed then we need to update the collection also
+            if (document && previousTitle !== document.title) {
+              if (!event.collectionIds) {
+                event.collectionIds = [];
+              }
+
+              const existing = find(event.collectionIds, {
+                id: document.collectionId,
+              });
+
+              if (!existing) {
+                event.collectionIds.push({
+                  id: document.collectionId,
+                });
+              }
+            }
+          }
+        }
+
+        if (event.collectionIds) {
+          for (const collectionDescriptor of event.collectionIds) {
+            const collectionId = collectionDescriptor.id;
+            const collection = collections.get(collectionId);
+
+            // if we already have the latest version (it was us that performed
+            // the change) then we don't need to update anything either.
+            if (collection?.updatedAt === collectionDescriptor.updatedAt) {
+              continue;
+            }
+
+            try {
+              await collections.fetch(collectionId, {
+                force: true,
+              });
+            } catch (err) {
+              if (
+                err instanceof AuthorizationError ||
+                err instanceof NotFoundError
+              ) {
+                documents.removeCollectionDocuments(collectionId);
+                memberships.removeCollectionMemberships(collectionId);
+                collections.remove(collectionId);
+                policies.remove(collectionId);
+                return;
+              }
+            }
+          }
+        }
+      })
+    );
+
+    this.socket.on(
+      "documents.update",
+      action(
+        (event: PartialWithId<Document> & { title: string; url: string }) => {
+          documents.add(event);
+
+          if (event.collectionId) {
+            const collection = collections.get(event.collectionId);
+            collection?.updateDocument(event);
+          }
+        }
+      )
+    );
+
+    this.socket.on(
+      "documents.archive",
+      action((event: PartialWithId<Document>) => {
+        documents.add(event);
+        policies.remove(event.id);
+
+        if (event.collectionId) {
+          const collection = collections.get(event.collectionId);
+          collection?.removeDocument(event.id);
+        }
+      })
+    );
+
+    this.socket.on(
+      "documents.delete",
+      action((event: PartialWithId<Document>) => {
+        documents.add(event);
+        policies.remove(event.id);
+
+        if (event.collectionId) {
+          const collection = collections.get(event.collectionId);
+          collection?.removeDocument(event.id);
+        }
+      })
+    );
+
+    this.socket.on(
+      "documents.permanent_delete",
+      (event: WebsocketEntityDeletedEvent) => {
+        documents.remove(event.modelId);
+      }
+    );
+
+    this.socket.on("groups.create", (event: PartialWithId<Group>) => {
+      groups.add(event);
+    });
+
+    this.socket.on("groups.update", (event: PartialWithId<Group>) => {
+      groups.add(event);
+    });
+
+    this.socket.on("groups.delete", (event: WebsocketEntityDeletedEvent) => {
+      groups.remove(event.modelId);
+    });
+
+    this.socket.on("collections.create", (event: PartialWithId<Collection>) => {
+      collections.add(event);
+    });
+
+    this.socket.on(
+      "collections.delete",
+      action((event: WebsocketEntityDeletedEvent) => {
+        const collectionId = event.modelId;
+        const deletedAt = new Date().toISOString();
+
+        const deletedDocuments = documents.inCollection(collectionId);
+        deletedDocuments.forEach((doc) => {
+          doc.deletedAt = deletedAt;
+          policies.remove(doc.id);
+        });
+        documents.removeCollectionDocuments(collectionId);
+        memberships.removeCollectionMemberships(collectionId);
+        collections.remove(collectionId);
+        policies.remove(collectionId);
+      })
+    );
+
+    this.socket.on("teams.update", (event: PartialWithId<Team>) => {
+      auth.updateTeam(event);
+    });
+
+    this.socket.on("pins.create", (event: PartialWithId<Pin>) => {
+      pins.add(event);
+    });
+
+    this.socket.on("pins.update", (event: PartialWithId<Pin>) => {
+      pins.add(event);
+    });
+
+    this.socket.on("pins.delete", (event: WebsocketEntityDeletedEvent) => {
+      pins.remove(event.modelId);
+    });
+
+    this.socket.on("stars.create", (event: PartialWithId<Star>) => {
+      stars.add(event);
+    });
+
+    this.socket.on("stars.update", (event: PartialWithId<Star>) => {
+      stars.add(event);
+    });
+
+    this.socket.on("stars.delete", (event: WebsocketEntityDeletedEvent) => {
+      stars.remove(event.modelId);
+    });
+
+    // 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",
+      action((event: WebsocketCollectionUserEvent) => {
+        if (auth.user && event.userId === auth.user.id) {
+          collections.fetch(event.collectionId, {
+            force: true,
+          });
+        }
+
+        // Document policies might need updating as the permission changes
+        documents.inCollection(event.collectionId).forEach((document) => {
+          policies.remove(document.id);
+        });
+      })
+    );
+
+    // received when a user is removed from having access to a collection
+    // to keep state in sync we must update our UI if the user is us,
+    // or otherwise just remove any membership state we have for that user.
+    this.socket.on(
+      "collections.remove_user",
+      action((event: WebsocketCollectionUserEvent) => {
+        if (auth.user && event.userId === auth.user.id) {
+          collections.remove(event.collectionId);
+          memberships.removeCollectionMemberships(event.collectionId);
+          documents.removeCollectionDocuments(event.collectionId);
+        } else {
+          memberships.remove(`${event.userId}-${event.collectionId}`);
+        }
+      })
+    );
+
+    this.socket.on(
+      "collections.update_index",
+      action((event: WebsocketCollectionUpdateIndexEvent) => {
+        const collection = collections.get(event.collectionId);
+
+        if (collection) {
+          collection.updateIndex(event.index);
+        }
+      })
+    );
+
+    this.socket.on(
+      "fileOperations.create",
+      (event: PartialWithId<FileOperation>) => {
+        fileOperations.add(event);
+      }
+    );
+
+    this.socket.on(
+      "fileOperations.update",
+      (event: PartialWithId<FileOperation>) => {
+        fileOperations.add(event);
+      }
+    );
+
+    this.socket.on(
+      "subscriptions.create",
+      (event: PartialWithId<Subscription>) => {
+        subscriptions.add(event);
+      }
+    );
+
+    this.socket.on(
+      "subscriptions.delete",
+      (event: WebsocketEntityDeletedEvent) => {
+        subscriptions.remove(event.modelId);
+      }
+    );
+
+    // received a message from the API server that we should request
+    // to join a specific room. Forward that to the ws server.
+    this.socket.on("join", (event: any) => {
+      this.socket?.emit("join", event);
+    });
+
+    // received a message from the API server that we should request
+    // to leave a specific room. Forward that to the ws server.
+    this.socket.on("leave", (event: any) => {
+      this.socket?.emit("leave", event);
+    });
+
+    // received whenever we join a document room, the payload includes
+    // userIds that are present/viewing and those that are editing.
+    this.socket.on("document.presence", (event: any) => {
+      presence.init(event.documentId, event.userIds, event.editingIds);
+    });
+
+    // received whenever a new user joins a document room, aka they
+    // navigate to / start viewing a document
+    this.socket.on("user.join", (event: any) => {
+      presence.touch(event.documentId, event.userId, event.isEditing);
+      views.touch(event.documentId, event.userId);
+    });
+
+    // received whenever a new user leaves a document room, aka they
+    // navigate away / stop viewing a document
+    this.socket.on("user.leave", (event: any) => {
+      presence.leave(event.documentId, event.userId);
+      views.touch(event.documentId, event.userId);
+    });
+
+    // received when another client in a document room wants to change
+    // or update it's presence. Currently the only property is whether
+    // the client is in editing state or not.
+    this.socket.on("user.presence", (event: any) => {
+      presence.touch(event.documentId, event.userId, event.isEditing);
+    });
+  };
+
+  render() {
+    return (
+      <WebsocketContext.Provider value={this.socket}>
+        {this.props.children}
+      </WebsocketContext.Provider>
+    );
+  }
+}
+
+export default withStores(WebsocketProvider);

app/components/withStores.tsx

@@ -6,15 +6,13 @@ import useStores from "~/hooks/useStores";
 type StoreProps = keyof RootStore;
 
 function withStores<
-  P extends React.ComponentType<React.ComponentProps<P> & RootStore>,
+  P extends React.ComponentType<ResolvedProps & RootStore>,
   ResolvedProps = JSX.LibraryManagedAttributes<
     P,
     Omit<React.ComponentProps<P>, StoreProps>
   >
->(WrappedComponent: P): React.FC<Omit<ResolvedProps, StoreProps>> {
-  const ComponentWithStore = (
-    props: Omit<React.ComponentProps<P>, StoreProps>
-  ) => {
+>(WrappedComponent: P): React.FC<ResolvedProps> {
+  const ComponentWithStore = (props: ResolvedProps) => {
     const stores = useStores();
     return <WrappedComponent {...(props as any)} {...stores} />;
   };

app/editor/components/CommandMenu.tsx

@@ -7,12 +7,13 @@ import { Portal } from "react-portal";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import insertFiles from "@shared/editor/commands/insertFiles";
+import { EmbedDescriptor } from "@shared/editor/embeds";
 import { CommandFactory } from "@shared/editor/lib/Extension";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
-import { EmbedDescriptor, MenuItem } from "@shared/editor/types";
+import { MenuItem } from "@shared/editor/types";
 import { depths } from "@shared/styles";
-import { supportedImageMimeTypes } from "@shared/utils/files";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { getEventFiles } from "@shared/utils/files";
+import { AttachmentValidation } from "@shared/validations";
 import Scrollable from "~/components/Scrollable";
 import { Dictionary } from "~/hooks/useDictionary";
 import Input from "./Input";
@@ -36,7 +37,7 @@ export type Props<T extends MenuItem = MenuItem> = {
   onFileUploadStop?: () => void;
   onShowToast: (message: string) => void;
   onLinkToolbarOpen?: () => void;
-  onClose: () => void;
+  onClose: (insertNewLine?: boolean) => void;
   onClearSearch: () => void;
   embeds?: EmbedDescriptor[];
   renderMenuItem: (
@@ -123,7 +124,7 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
       if (item) {
         this.insertItem(item);
       } else {
-        this.props.onClose();
+        this.props.onClose(true);
       }
     }
 
@@ -182,7 +183,9 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
   insertItem = (item: any) => {
     switch (item.name) {
       case "image":
-        return this.triggerFilePick(supportedImageMimeTypes.join(", "));
+        return this.triggerFilePick(
+          AttachmentValidation.imageContentTypes.join(", ")
+        );
       case "attachment":
         return this.triggerFilePick("*");
       case "embed":
@@ -275,7 +278,7 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
   };
 
   handleFilePicked = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = getDataTransferFiles(event);
+    const files = getEventFiles(event);
 
     const {
       view,
@@ -424,11 +427,13 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
     const embedItems: EmbedDescriptor[] = [];
 
     for (const embed of embeds) {
-      if (embed.title && embed.icon) {
-        embedItems.push({
-          ...embed,
-          name: "embed",
-        });
+      if (embed.title) {
+        embedItems.push(
+          new EmbedDescriptor({
+            ...embed,
+            name: "embed",
+          })
+        );
       }
     }
 

app/editor/components/EmojiMenu.tsx

@@ -21,7 +21,7 @@ const searcher = new FuzzySearch<{
   sort: true,
 });
 
-class EmojiMenu extends React.Component<
+class EmojiMenu extends React.PureComponent<
   Omit<
     Props<Emoji>,
     | "renderMenuItem"

app/editor/components/LinkEditor.tsx

@@ -11,8 +11,7 @@ import { setTextSelection } from "prosemirror-utils";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import styled from "styled-components";
-import isUrl from "@shared/editor/lib/isUrl";
-import { isInternalUrl } from "@shared/utils/urls";
+import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
 import Flex from "~/components/Flex";
 import { Dictionary } from "~/hooks/useDictionary";
 import { ToastOptions } from "~/types";
@@ -45,7 +44,7 @@ type Props = {
     href: string,
     event: React.MouseEvent<HTMLButtonElement>
   ) => void;
-  onShowToast: (message: string, options: ToastOptions) => void;
+  onShowToast: (message: string, options?: ToastOptions) => void;
   view: EditorView;
 };
 
@@ -71,7 +70,7 @@ class LinkEditor extends React.Component<Props, State> {
   };
 
   get href(): string {
-    return this.props.mark ? this.props.mark.attrs.href : "";
+    return sanitizeUrl(this.props.mark?.attrs.href) ?? "";
   }
 
   get suggestedLinkTitle(): string {
@@ -114,17 +113,7 @@ class LinkEditor extends React.Component<Props, State> {
 
     this.discardInputValue = true;
     const { from, to } = this.props;
-
-    // Make sure a protocol is added to the beginning of the input if it's
-    // likely an absolute URL that was entered without one.
-    if (
-      !isUrl(href) &&
-      !href.startsWith("/") &&
-      !href.startsWith("#") &&
-      !href.startsWith("mailto:")
-    ) {
-      href = `https://${href}`;
-    }
+    href = sanitizeUrl(href) ?? "";
 
     this.props.onSelectLink({ href, title, from, to });
   };
@@ -240,7 +229,12 @@ class LinkEditor extends React.Component<Props, State> {
 
   handleOpenLink = (event: React.MouseEvent<HTMLButtonElement>): void => {
     event.preventDefault();
-    this.props.onClickLink(this.href, event);
+
+    try {
+      this.props.onClickLink(this.href, event);
+    } catch (err) {
+      this.props.onShowToast(this.props.dictionary.openLinkError);
+    }
   };
 
   handleCreateLink = async (value: string) => {

app/editor/components/SelectionToolbar.tsx

@@ -42,7 +42,7 @@ type Props = {
 
 function isVisible(props: Props) {
   const { view } = props;
-  const { selection } = view.state;
+  const { selection, doc } = view.state;
 
   if (isMarkActive(view.state.schema.marks.link)(view.state)) {
     return true;
@@ -63,6 +63,11 @@ function isVisible(props: Props) {
     return false;
   }
 
+  const selectionText = doc.cut(selection.from, selection.to).textContent;
+  if (selection instanceof TextSelection && !selectionText) {
+    return false;
+  }
+
   const slice = selection.content();
   const fragment = slice.content;
   const nodes = (fragment as any).content;
@@ -192,7 +197,6 @@ export default class SelectionToolbar extends React.Component<Props> {
     const link = isMarkActive(state.schema.marks.link)(state);
     const range = getMarkRange(selection.$from, state.schema.marks.link);
     const isImageSelection = selection.node?.type?.name === "image";
-    let isTextSelection = false;
 
     let items: MenuItem[] = [];
     if (isTableSelection) {
@@ -207,7 +211,6 @@ export default class SelectionToolbar extends React.Component<Props> {
       items = getDividerMenuItems(state, dictionary);
     } else {
       items = getFormattingMenuItems(state, isTemplate, dictionary);
-      isTextSelection = true;
     }
 
     // Some extensions may be disabled, remove corresponding items
@@ -226,15 +229,6 @@ export default class SelectionToolbar extends React.Component<Props> {
       return null;
     }
 
-    const selectionText = state.doc.cut(
-      state.selection.from,
-      state.selection.to
-    ).textContent;
-
-    if (isTextSelection && !selectionText && !link) {
-      return null;
-    }
-
     return (
       <FloatingToolbar
         view={view}

app/editor/components/Styles.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-irregular-whitespace */
-import { lighten } from "polished";
+import { darken, lighten, transparentize } from "polished";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 
 const EditorStyles = styled.div<{
   rtl: boolean;
@@ -62,6 +63,15 @@ const EditorStyles = styled.div<{
       margin-bottom: 0.25em;
     }
 
+    // all of heading sizes are stepped down one from global styles, except h1
+    // which is between h1 and h2
+    h1 { font-size: 1.75em; }
+    h2 { font-size: 1.25em; }
+    h3 { font-size: 1em; }
+    h4 { font-size: 0.875em; }
+    h5 { font-size: 0.75em; }
+    h6 { font-size: 0.75em; }
+
     .ProseMirror-yjs-cursor {
       position: relative;
       margin-left: -1px;
@@ -359,6 +369,7 @@ const EditorStyles = styled.div<{
 
   .heading-actions {
     opacity: 0;
+    z-index: ${depths.editorHeadingActions};
     background: ${(props) => props.theme.background};
     margin-${(props) => (props.rtl ? "right" : "left")}: -26px;
     flex-direction: ${(props) => (props.rtl ? "row-reverse" : "row")};
@@ -403,7 +414,10 @@ const EditorStyles = styled.div<{
     padding: 0;
 
     &.collapsed {
-      transform: rotate(${(props) => (props.rtl ? "90deg" : "-90deg")});
+      svg {
+        transform: rotate(${(props) => (props.rtl ? "90deg" : "-90deg")});
+        pointer-events: none;
+      }
       transition-delay: 0.1s;
       opacity: 1;
     }
@@ -429,10 +443,12 @@ const EditorStyles = styled.div<{
   .notice-block {
     display: flex;
     align-items: center;
-    background: ${(props) => props.theme.noticeInfoBackground};
+    background: ${(props) =>
+      transparentize(0.9, props.theme.noticeInfoBackground)};
+    border-left: 4px solid ${(props) => props.theme.noticeInfoBackground};
     color: ${(props) => props.theme.noticeInfoText};
     border-radius: 4px;
-    padding: 8px 16px;
+    padding: 8px 10px 8px 8px;
     margin: 8px 0;
 
     a {
@@ -462,21 +478,34 @@ const EditorStyles = styled.div<{
     height: 24px;
     align-self: flex-start;
     margin-${(props) => (props.rtl ? "left" : "right")}: 4px;
+    color: ${(props) => props.theme.noticeInfoBackground};
   }
 
   .notice-block.tip {
-    background: ${(props) => props.theme.noticeTipBackground};
+    background: ${(props) =>
+      transparentize(0.9, props.theme.noticeTipBackground)};
+    border-left: 4px solid ${(props) => props.theme.noticeTipBackground};
     color: ${(props) => props.theme.noticeTipText};
 
+    .icon {
+      color: ${(props) => props.theme.noticeTipBackground};
+    }
+
     a {
       color: ${(props) => props.theme.noticeTipText};
     }
   }
 
   .notice-block.warning {
-    background: ${(props) => props.theme.noticeWarningBackground};
+    background: ${(props) =>
+      transparentize(0.9, props.theme.noticeWarningBackground)};
+    border-left: 4px solid ${(props) => props.theme.noticeWarningBackground};
     color: ${(props) => props.theme.noticeWarningText};
 
+    .icon {
+      color: ${(props) => props.theme.noticeWarningBackground};
+    }
+
     a {
       color: ${(props) => props.theme.noticeWarningText};
     }
@@ -756,20 +785,45 @@ const EditorStyles = styled.div<{
 
     select,
     button {
-      background: ${(props) => props.theme.background};
-      color: ${(props) => props.theme.text};
-      border-width: 1px;
-      font-size: 13px;
-      display: none;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: ${(props) => props.theme.buttonNeutralBackground};
+      color: ${(props) => props.theme.buttonNeutralText};
+      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${(props) =>
+        props.theme.buttonNeutralBorder} 0 0 0 1px inset;
       border-radius: 4px;
-      padding: 2px 4px;
-      height: 18px;
+      font-size: 13px;
+      font-weight: 500;
+      text-decoration: none;
+      flex-shrink: 0;
+      cursor: pointer;
+      user-select: none;
+      appearance: none !important;
+      padding: 6px 8px;
+      display: none;
+
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: ${(props) =>
+          darken(0.05, props.theme.buttonNeutralBackground)};
+        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${(props) =>
+          props.theme.buttonNeutralBorder} 0 0 0 1px inset;
+      }
     }
 
-    button {
-      padding: 2px 4px;
+    select {
+      background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.03087 9C8.20119 9 7.73238 9.95209 8.23824 10.6097L11.2074 14.4696C11.6077 14.99 12.3923 14.99 12.7926 14.4696L15.7618 10.6097C16.2676 9.95209 15.7988 9 14.9691 9L9.03087 9Z" fill="currentColor"/> </svg>');
+      background-repeat: no-repeat;
+      background-position: center right;
+      padding-right: 20px;
     }
 
+    &:focus-within,
     &:hover {
       select {
         display: ${(props) => (props.readOnly ? "none" : "inline")};
@@ -786,6 +840,49 @@ const EditorStyles = styled.div<{
     button:active {
       display: inline;
     }
+
+    button.show-source-button {
+      display: none;
+    }
+    button.show-diagram-button {
+      display: inline;
+    }
+
+    &.code-hidden { 
+      button,
+      select,
+      button.show-diagram-button {
+        display: none;
+      }
+
+      button.show-source-button {
+        display: inline;
+      }
+
+      pre {
+        display: none;
+      }
+    }
+  }
+
+  .mermaid-diagram-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${(props) => props.theme.codeBackground};
+    border-radius: 6px;
+    border: 1px solid ${(props) => props.theme.codeBorder};
+    padding: 8px;
+    user-select: none;
+    cursor: default;
+
+    * {
+      font-family: ${(props) => props.theme.fontFamily};
+    }
+
+    &.diagram-hidden {
+      display: none;
+    }
   }
 
   pre {
@@ -1178,6 +1275,7 @@ const EditorStyles = styled.div<{
     .placeholder:before,
     .block-menu-trigger,
     .heading-actions,
+    button.show-source-button,
     h1:not(.placeholder):before,
     h2:not(.placeholder):before,
     h3:not(.placeholder):before,
@@ -1191,6 +1289,11 @@ const EditorStyles = styled.div<{
       opacity: 0;
     }
 
+    pre {
+      overflow-x: hidden;
+      white-space: pre-wrap;
+    }
+
     em,
     blockquote {
       font-family: "SF Pro Text", ${(props) => props.theme.fontFamily};

app/editor/index.tsx

@@ -16,19 +16,23 @@ import { EditorState, Selection, Plugin, Transaction } from "prosemirror-state";
 import { Decoration, EditorView } from "prosemirror-view";
 import * as React from "react";
 import { DefaultTheme, ThemeProps } from "styled-components";
+import { EmbedDescriptor } from "@shared/editor/embeds";
 import Extension, { CommandFactory } from "@shared/editor/lib/Extension";
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
-import headingToSlug from "@shared/editor/lib/headingToSlug";
+import getHeadings from "@shared/editor/lib/getHeadings";
+import getTasks from "@shared/editor/lib/getTasks";
 import { MarkdownSerializer } from "@shared/editor/lib/markdown/serializer";
 import Mark from "@shared/editor/marks/Mark";
 import Node from "@shared/editor/nodes/Node";
 import ReactNode from "@shared/editor/nodes/ReactNode";
 import fullExtensionsPackage from "@shared/editor/packages/full";
-import { EmbedDescriptor, EventType } from "@shared/editor/types";
+import { EventType } from "@shared/editor/types";
+import { IntegrationType } from "@shared/types";
 import EventEmitter from "@shared/utils/events";
+import Integration from "~/models/Integration";
 import Flex from "~/components/Flex";
 import { Dictionary } from "~/hooks/useDictionary";
-import Logger from "~/utils/logger";
+import Logger from "~/utils/Logger";
 import BlockMenu from "./components/BlockMenu";
 import ComponentView from "./components/ComponentView";
 import EditorContext from "./components/EditorContext";
@@ -109,6 +113,8 @@ export type Props = {
   onShowToast: (message: string) => void;
   className?: string;
   style?: React.CSSProperties;
+
+  embedIntegrations?: Integration<IntegrationType.Embed>[];
 };
 
 type State = {
@@ -429,7 +435,7 @@ export class Editor extends React.PureComponent<
       state: this.createState(this.props.value),
       editable: () => !this.props.readOnly,
       nodeViews: this.nodeViews,
-      dispatchTransaction: function (transaction) {
+      dispatchTransaction(transaction) {
         // callback is bound to have the view instance as its this binding
         const { state, transactions } = this.state.applyTransaction(
           transaction
@@ -471,7 +477,7 @@ export class Editor extends React.PureComponent<
     try {
       const element = document.querySelector(hash);
       if (element) {
-        element.scrollIntoView({ behavior: "smooth" });
+        setTimeout(() => element.scrollIntoView({ behavior: "smooth" }), 0);
       }
     } catch (err) {
       // querySelector will throw an error if the hash begins with a number
@@ -553,7 +559,14 @@ export class Editor extends React.PureComponent<
     this.setState({ blockMenuOpen: true, blockMenuSearch: search });
   };
 
-  private handleCloseBlockMenu = () => {
+  private handleCloseBlockMenu = (insertNewLine?: boolean) => {
+    if (insertNewLine) {
+      const transaction = this.view.state.tr.split(
+        this.view.state.selection.to
+      );
+      this.view.dispatch(transaction);
+      this.view.focus();
+    }
     if (!this.state.blockMenuOpen) {
       return;
     }
@@ -575,34 +588,11 @@ export class Editor extends React.PureComponent<
   };
 
   public getHeadings = () => {
-    const headings: { title: string; level: number; id: string }[] = [];
-    const previouslySeen = {};
+    return getHeadings(this.view.state.doc);
+  };
 
-    this.view.state.doc.forEach((node) => {
-      if (node.type.name === "heading") {
-        // calculate the optimal slug
-        const slug = headingToSlug(node);
-        let id = slug;
-
-        // check if we've already used it, and if so how many times?
-        // Make the new id based on that number ensuring that we have
-        // unique ID's even when headings are identical
-        if (previouslySeen[slug] > 0) {
-          id = headingToSlug(node, previouslySeen[slug]);
-        }
-
-        // record that we've seen this slug for the next loop
-        previouslySeen[slug] =
-          previouslySeen[slug] !== undefined ? previouslySeen[slug] + 1 : 1;
-
-        headings.push({
-          title: node.textContent,
-          level: node.attrs.level,
-          id,
-        });
-      }
-    });
-    return headings;
+  public getTasks = () => {
+    return getTasks(this.view.state.doc);
   };
 
   public render() {

app/editor/menus/formatting.ts

@@ -14,6 +14,7 @@ import {
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import { isInTable } from "prosemirror-tables";
+import isInCode from "@shared/editor/queries/isInCode";
 import isInList from "@shared/editor/queries/isInList";
 import isMarkActive from "@shared/editor/queries/isMarkActive";
 import isNodeActive from "@shared/editor/queries/isNodeActive";
@@ -28,6 +29,7 @@ export default function formattingMenuItems(
   const { schema } = state;
   const isTable = isInTable(state);
   const isList = isInList(state);
+  const isCode = isInCode(state);
   const allowBlocks = !isTable && !isList;
 
   return [
@@ -47,19 +49,21 @@ export default function formattingMenuItems(
       tooltip: dictionary.strong,
       icon: BoldIcon,
       active: isMarkActive(schema.marks.strong),
+      visible: !isCode,
     },
     {
       name: "strikethrough",
       tooltip: dictionary.strikethrough,
       icon: StrikethroughIcon,
       active: isMarkActive(schema.marks.strikethrough),
+      visible: !isCode,
     },
     {
       name: "highlight",
       tooltip: dictionary.mark,
       icon: HighlightIcon,
       active: isMarkActive(schema.marks.highlight),
-      visible: !isTemplate,
+      visible: !isTemplate && !isCode,
     },
     {
       name: "code_inline",
@@ -69,7 +73,7 @@ export default function formattingMenuItems(
     },
     {
       name: "separator",
-      visible: allowBlocks,
+      visible: allowBlocks && !isCode,
     },
     {
       name: "heading",
@@ -77,7 +81,7 @@ export default function formattingMenuItems(
       icon: Heading1Icon,
       active: isNodeActive(schema.nodes.heading, { level: 1 }),
       attrs: { level: 1 },
-      visible: allowBlocks,
+      visible: allowBlocks && !isCode,
     },
     {
       name: "heading",
@@ -85,7 +89,7 @@ export default function formattingMenuItems(
       icon: Heading2Icon,
       active: isNodeActive(schema.nodes.heading, { level: 2 }),
       attrs: { level: 2 },
-      visible: allowBlocks,
+      visible: allowBlocks && !isCode,
     },
     {
       name: "blockquote",
@@ -93,11 +97,11 @@ export default function formattingMenuItems(
       icon: BlockQuoteIcon,
       active: isNodeActive(schema.nodes.blockquote),
       attrs: { level: 2 },
-      visible: allowBlocks,
+      visible: allowBlocks && !isCode,
     },
     {
       name: "separator",
-      visible: allowBlocks || isList,
+      visible: (allowBlocks || isList) && !isCode,
     },
     {
       name: "checkbox_list",
@@ -105,24 +109,25 @@ export default function formattingMenuItems(
       icon: TodoListIcon,
       keywords: "checklist checkbox task",
       active: isNodeActive(schema.nodes.checkbox_list),
-      visible: allowBlocks || isList,
+      visible: (allowBlocks || isList) && !isCode,
     },
     {
       name: "bullet_list",
       tooltip: dictionary.bulletList,
       icon: BulletedListIcon,
       active: isNodeActive(schema.nodes.bullet_list),
-      visible: allowBlocks || isList,
+      visible: (allowBlocks || isList) && !isCode,
     },
     {
       name: "ordered_list",
       tooltip: dictionary.orderedList,
       icon: OrderedListIcon,
       active: isNodeActive(schema.nodes.ordered_list),
-      visible: allowBlocks || isList,
+      visible: (allowBlocks || isList) && !isCode,
     },
     {
       name: "separator",
+      visible: !isCode,
     },
     {
       name: "link",
@@ -130,6 +135,7 @@ export default function formattingMenuItems(
       icon: LinkIcon,
       active: isMarkActive(schema.marks.link),
       attrs: { href: "" },
+      visible: !isCode,
     },
   ];
 }

app/hooks/useAuthorizedSettingsConfig.ts

@@ -9,11 +9,14 @@ import {
   LinkIcon,
   TeamIcon,
   BeakerIcon,
+  BuildingBlocksIcon,
   DownloadIcon,
+  WebhooksIcon,
 } from "outline-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Details from "~/scenes/Settings/Details";
+import Drawio from "~/scenes/Settings/Drawio";
 import Export from "~/scenes/Settings/Export";
 import Features from "~/scenes/Settings/Features";
 import Groups from "~/scenes/Settings/Groups";
@@ -25,11 +28,12 @@ import Security from "~/scenes/Settings/Security";
 import Shares from "~/scenes/Settings/Shares";
 import Slack from "~/scenes/Settings/Slack";
 import Tokens from "~/scenes/Settings/Tokens";
+import Webhooks from "~/scenes/Settings/Webhooks";
 import Zapier from "~/scenes/Settings/Zapier";
 import SlackIcon from "~/components/SlackIcon";
 import ZapierIcon from "~/components/ZapierIcon";
 import env from "~/env";
-import isHosted from "~/utils/isHosted";
+import isCloudHosted from "~/utils/isCloudHosted";
 import useCurrentTeam from "./useCurrentTeam";
 import usePolicy from "./usePolicy";
 
@@ -46,6 +50,7 @@ type SettingsPage =
   | "Shares"
   | "Import"
   | "Export"
+  | "Webhooks"
   | "Slack"
   | "Zapier";
 
@@ -64,7 +69,7 @@ type ConfigType = {
 
 const useAuthorizedSettingsConfig = () => {
   const team = useCurrentTeam();
-  const can = usePolicy(team.id);
+  const can = usePolicy(team);
   const { t } = useTranslation();
 
   const config: ConfigType = React.useMemo(
@@ -146,7 +151,7 @@ const useAuthorizedSettingsConfig = () => {
         name: t("Import"),
         path: "/settings/import",
         component: Import,
-        enabled: can.manage,
+        enabled: can.createImport,
         group: t("Team"),
         icon: NewDocumentIcon,
       },
@@ -154,16 +159,32 @@ const useAuthorizedSettingsConfig = () => {
         name: t("Export"),
         path: "/settings/export",
         component: Export,
-        enabled: can.export,
+        enabled: can.createExport,
         group: t("Team"),
         icon: DownloadIcon,
       },
-      // Intergrations
+      // Integrations
+      Webhooks: {
+        name: t("Webhooks"),
+        path: "/settings/webhooks",
+        component: Webhooks,
+        enabled: can.createWebhookSubscription,
+        group: t("Integrations"),
+        icon: WebhooksIcon,
+      },
+      Drawio: {
+        name: t("Draw.io"),
+        path: "/settings/integrations/drawio",
+        component: Drawio,
+        enabled: can.update,
+        group: t("Integrations"),
+        icon: BuildingBlocksIcon,
+      },
       Slack: {
         name: "Slack",
         path: "/settings/integrations/slack",
         component: Slack,
-        enabled: can.update && (!!env.SLACK_KEY || isHosted),
+        enabled: can.update && (!!env.SLACK_CLIENT_ID || isCloudHosted),
         group: t("Integrations"),
         icon: SlackIcon,
       },
@@ -171,12 +192,19 @@ const useAuthorizedSettingsConfig = () => {
         name: "Zapier",
         path: "/settings/integrations/zapier",
         component: Zapier,
-        enabled: can.update && isHosted,
+        enabled: can.update && isCloudHosted,
         group: t("Integrations"),
         icon: ZapierIcon,
       },
     }),
-    [can.createApiKey, can.export, can.manage, can.update, t]
+    [
+      can.createApiKey,
+      can.createWebhookSubscription,
+      can.createExport,
+      can.createImport,
+      can.update,
+      t,
+    ]
   );
 
   const enabledConfigs = React.useMemo(

app/hooks/useDebouncedCallback.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 
-export default function useDebouncedCallback(
-  callback: (arg0: any) => unknown,
+export default function useDebouncedCallback<T>(
+  callback: (...params: T[]) => unknown,
   wait: number
 ) {
   // track args & timeout handle between calls
-  const argsRef = React.useRef();
+  const argsRef = React.useRef<T[]>();
   const timeout = React.useRef<ReturnType<typeof setTimeout>>();
 
   function cleanup() {
@@ -16,12 +16,11 @@ export default function useDebouncedCallback(
 
   // make sure our timeout gets cleared if consuming component gets unmounted
   React.useEffect(() => cleanup, []);
-  return function (...args: any) {
+  return function (...args: T[]) {
     argsRef.current = args;
     cleanup();
     timeout.current = setTimeout(() => {
       if (argsRef.current) {
-        // @ts-expect-error ts-migrate(2556) FIXME: Expected 1 arguments, but got 0 or more.
         callback(...argsRef.current);
       }
     }, wait);

app/hooks/useDictionary.ts

@@ -18,6 +18,7 @@ export default function useDictionary() {
       codeBlock: t("Code block"),
       codeCopied: t("Copied to clipboard"),
       codeInline: t("Code"),
+      copy: t("Copy"),
       createLink: t("Create link"),
       createLinkError: t("Sorry, an error occurred creating the link"),
       createNewDoc: t("Create a new doc"),
@@ -52,6 +53,7 @@ export default function useDictionary() {
       noResults: t("No results"),
       openLink: t("Open link"),
       goToLink: t("Go to link"),
+      openLinkError: t("Sorry, that type of link is not supported"),
       orderedList: t("Ordered list"),
       pageBreak: t("Page break"),
       pasteLink: `${t("Paste a link")}…`,
@@ -69,6 +71,8 @@ export default function useDictionary() {
       table: t("Table"),
       tip: t("Tip"),
       tipNotice: t("Tip notice"),
+      showDiagram: t("Show diagram"),
+      showSource: t("Show source"),
       warning: t("Warning"),
       warningNotice: t("Warning notice"),
       insertDate: t("Current date"),

app/hooks/useEmbeds.ts

@@ -0,0 +1,48 @@
+import { find } from "lodash";
+import * as React from "react";
+import embeds, { EmbedDescriptor } from "@shared/editor/embeds";
+import { IntegrationType } from "@shared/types";
+import Integration from "~/models/Integration";
+import Logger from "~/utils/Logger";
+import useStores from "./useStores";
+
+/**
+ * Hook to get all embed configuration for the current team
+ *
+ * @param loadIfMissing Should we load integration settings if they are not
+ * locally available
+ * @returns A list of embed descriptors
+ */
+export default function useEmbeds(loadIfMissing = false) {
+  const { integrations } = useStores();
+
+  React.useEffect(() => {
+    async function fetchEmbedIntegrations() {
+      try {
+        await integrations.fetchPage({
+          limit: 100,
+          type: IntegrationType.Embed,
+        });
+      } catch (err) {
+        Logger.error("Failed to fetch embed integrations", err);
+      }
+    }
+
+    !integrations.isLoaded && loadIfMissing && fetchEmbedIntegrations();
+  }, [integrations, loadIfMissing]);
+
+  return React.useMemo(
+    () =>
+      embeds.map((e) => {
+        const em: Integration<IntegrationType.Embed> | undefined = find(
+          integrations.orderedData,
+          (i) => i.service === e.component.name.toLowerCase()
+        );
+        return new EmbedDescriptor({
+          ...e,
+          settings: em?.settings,
+        });
+      }),
+    [integrations.orderedData]
+  );
+}

app/hooks/usePersistedState.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Primitive } from "utility-types";
+import Logger from "~/utils/Logger";
 import Storage from "~/utils/Storage";
-import Logger from "~/utils/logger";
 import useEventListener from "./useEventListener";
 
 /**

app/hooks/usePolicy.ts

@@ -1,12 +1,34 @@
+import * as React from "react";
+import BaseModel from "~/models/BaseModel";
 import useStores from "./useStores";
 
 /**
- * Quick access to retrieve the abilities of a policy for a given entity
+ * Retrieve the abilities of a policy for a given entity, if the policy is not
+ * located in the store, it will be fetched from the server.
  *
- * @param entityId The entity id
- * @returns The available abilities
+ * @param entity The model or model id
+ * @returns The policy for the model
  */
-export default function usePolicy(entityId: string) {
+export default function usePolicy(entity: string | BaseModel | undefined) {
   const { policies } = useStores();
+  const triggered = React.useRef(false);
+  const entityId = entity
+    ? typeof entity === "string"
+      ? entity
+      : entity.id
+    : "";
+
+  React.useEffect(() => {
+    if (entity && typeof entity !== "string") {
+      // The policy for this model is missing and we haven't tried to fetch it
+      // yet, go ahead and do that now. The force flag is needed otherwise the
+      // network request will be skipped due to the model existing in the store
+      if (!policies.get(entity.id) && !triggered.current) {
+        triggered.current = true;
+        void entity.store.fetch(entity.id, { force: true });
+      }
+    }
+  }, [policies, entity]);
+
   return policies.abilities(entityId);
 }

app/hooks/useSessions.ts

@@ -8,7 +8,7 @@ type Session = {
   teamId: string;
 };
 
-function loadSessionsFromCookie(): Session[] {
+export function loadSessionsFromCookie(): Session[] {
   const sessions = JSON.parse(getCookie("sessions") || "{}");
   return Object.keys(sessions).map((teamId) => ({
     teamId,

app/index.tsx

@@ -15,9 +15,10 @@ import ScrollToTop from "~/components/ScrollToTop";
 import Theme from "~/components/Theme";
 import Toasts from "~/components/Toasts";
 import env from "~/env";
+import LazyPolyfill from "./components/LazyPolyfills";
 import Routes from "./routes";
+import Logger from "./utils/Logger";
 import history from "./utils/history";
-import Logger from "./utils/logger";
 import { initSentry } from "./utils/sentry";
 
 initI18n();
@@ -75,18 +76,20 @@ if (element) {
           <Theme>
             <ErrorBoundary>
               <KBarProvider actions={[]} options={commandBarOptions}>
-                <LazyMotion features={loadFeatures}>
-                  <Router history={history}>
-                    <>
-                      <PageTheme />
-                      <ScrollToTop>
-                        <Routes />
-                      </ScrollToTop>
-                      <Toasts />
-                      <Dialogs />
-                    </>
-                  </Router>
-                </LazyMotion>
+                <LazyPolyfill>
+                  <LazyMotion features={loadFeatures}>
+                    <Router history={history}>
+                      <>
+                        <PageTheme />
+                        <ScrollToTop>
+                          <Routes />
+                        </ScrollToTop>
+                        <Toasts />
+                        <Dialogs />
+                      </>
+                    </Router>
+                  </LazyMotion>
+                </LazyPolyfill>
               </KBarProvider>
             </ErrorBoundary>
           </Theme>

app/menus/CollectionMenu.tsx

@@ -16,16 +16,15 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { getEventFiles } from "@shared/utils/files";
 import Collection from "~/models/Collection";
-import CollectionDelete from "~/scenes/CollectionDelete";
 import CollectionEdit from "~/scenes/CollectionEdit";
 import CollectionExport from "~/scenes/CollectionExport";
 import CollectionPermissions from "~/scenes/CollectionPermissions";
+import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
 import ContextMenu, { Placement } from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Template from "~/components/ContextMenu/Template";
-import Modal from "~/components/Modal";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -54,27 +53,43 @@ function CollectionMenu({
     modal,
     placement,
   });
-  const [renderModals, setRenderModals] = React.useState(false);
   const team = useCurrentTeam();
   const { documents, dialogs } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
   const history = useHistory();
   const file = React.useRef<HTMLInputElement>(null);
-  const [
-    showCollectionPermissions,
-    setShowCollectionPermissions,
-  ] = React.useState(false);
-  const [showCollectionEdit, setShowCollectionEdit] = React.useState(false);
-  const [showCollectionExport, setShowCollectionExport] = React.useState(false);
 
-  const handleOpen = React.useCallback(() => {
-    setRenderModals(true);
+  const handlePermissions = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Collection permissions"),
+      content: <CollectionPermissions collection={collection} />,
+    });
+  }, [collection, dialogs, t]);
 
-    if (onOpen) {
-      onOpen();
-    }
-  }, [onOpen]);
+  const handleEdit = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Edit collection"),
+      content: (
+        <CollectionEdit
+          collectionId={collection.id}
+          onSubmit={dialogs.closeAllModals}
+        />
+      ),
+    });
+  }, [collection.id, dialogs, t]);
+
+  const handleExport = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Export collection"),
+      content: (
+        <CollectionExport
+          collection={collection}
+          onSubmit={dialogs.closeAllModals}
+        />
+      ),
+    });
+  }, [collection, dialogs, t]);
 
   const handleNewDocument = React.useCallback(
     (ev: React.SyntheticEvent) => {
@@ -102,8 +117,8 @@ function CollectionMenu({
   );
 
   const handleFilePicked = React.useCallback(
-    async (ev: React.FormEvent<HTMLInputElement>) => {
-      const files = getDataTransferFiles(ev);
+    async (ev: React.ChangeEvent<HTMLInputElement>) => {
+      const files = getEventFiles(ev);
 
       // Because this is the onChange handler it's possible for the change to be
       // from previously selecting a file to not selecting a file – aka empty
@@ -145,7 +160,7 @@ function CollectionMenu({
       isCentered: true,
       title: t("Delete collection"),
       content: (
-        <CollectionDelete
+        <CollectionDeleteDialog
           collection={collection}
           onSubmit={dialogs.closeAllModals}
         />
@@ -172,8 +187,8 @@ function CollectionMenu({
   );
 
   const alphabeticalSort = collection.sort.field === "title";
-  const can = usePolicy(collection.id);
-  const canUserInTeam = usePolicy(team.id);
+  const can = usePolicy(collection);
+  const canUserInTeam = usePolicy(team);
   const items: MenuItem[] = React.useMemo(
     () => [
       {
@@ -238,21 +253,21 @@ function CollectionMenu({
         type: "button",
         title: `${t("Edit")}…`,
         visible: can.update,
-        onClick: () => setShowCollectionEdit(true),
+        onClick: handleEdit,
         icon: <EditIcon />,
       },
       {
         type: "button",
         title: `${t("Permissions")}…`,
         visible: can.update,
-        onClick: () => setShowCollectionPermissions(true),
+        onClick: handlePermissions,
         icon: <PadlockIcon />,
       },
       {
         type: "button",
         title: `${t("Export")}…`,
-        visible: !!(collection && canUserInTeam.export),
-        onClick: () => setShowCollectionExport(true),
+        visible: !!(collection && canUserInTeam.createExport),
+        onClick: handleExport,
         icon: <ExportIcon />,
       },
       {
@@ -269,19 +284,22 @@ function CollectionMenu({
     ],
     [
       t,
+      handleUnstar,
+      collection,
+      can.unstar,
+      can.star,
       can.update,
       can.delete,
-      can.star,
-      can.unstar,
       handleStar,
-      handleUnstar,
-      alphabeticalSort,
-      handleChangeSort,
       handleNewDocument,
       handleImportDocument,
+      alphabeticalSort,
+      handleEdit,
+      handlePermissions,
+      canUserInTeam.createExport,
+      handleExport,
       handleDelete,
-      collection,
-      canUserInTeam.export,
+      handleChangeSort,
     ]
   );
 
@@ -311,43 +329,12 @@ function CollectionMenu({
       )}
       <ContextMenu
         {...menu}
-        onOpen={handleOpen}
+        onOpen={onOpen}
         onClose={onClose}
         aria-label={t("Collection")}
       >
         <Template {...menu} items={items} />
       </ContextMenu>
-      {renderModals && (
-        <>
-          <Modal
-            title={t("Collection permissions")}
-            onRequestClose={() => setShowCollectionPermissions(false)}
-            isOpen={showCollectionPermissions}
-          >
-            <CollectionPermissions collection={collection} />
-          </Modal>
-          <Modal
-            title={t("Edit collection")}
-            isOpen={showCollectionEdit}
-            onRequestClose={() => setShowCollectionEdit(false)}
-          >
-            <CollectionEdit
-              onSubmit={() => setShowCollectionEdit(false)}
-              collectionId={collection.id}
-            />
-          </Modal>
-          <Modal
-            title={t("Export collection")}
-            isOpen={showCollectionExport}
-            onRequestClose={() => setShowCollectionExport(false)}
-          >
-            <CollectionExport
-              onSubmit={() => setShowCollectionExport(false)}
-              collection={collection}
-            />
-          </Modal>
-        </>
-      )}
     </>
   );
 }

app/menus/DocumentMenu.tsx

@@ -1,20 +1,11 @@
 import { observer } from "mobx-react";
 import {
   EditIcon,
-  StarredIcon,
-  UnstarredIcon,
-  DuplicateIcon,
-  ArchiveIcon,
-  TrashIcon,
-  MoveIcon,
   HistoryIcon,
   UnpublishIcon,
   PrintIcon,
-  ImportIcon,
   NewDocumentIcon,
-  DownloadIcon,
   RestoreIcon,
-  CrossIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -23,21 +14,31 @@ import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { getEventFiles } from "@shared/utils/files";
 import Document from "~/models/Document";
-import DocumentDelete from "~/scenes/DocumentDelete";
-import DocumentMove from "~/scenes/DocumentMove";
-import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import CollectionIcon from "~/components/CollectionIcon";
 import ContextMenu from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Separator from "~/components/ContextMenu/Separator";
 import Template from "~/components/ContextMenu/Template";
 import Flex from "~/components/Flex";
-import Modal from "~/components/Modal";
 import Switch from "~/components/Switch";
 import { actionToMenuItem } from "~/actions";
-import { pinDocument, createTemplate } from "~/actions/definitions/documents";
+import {
+  pinDocument,
+  createTemplate,
+  subscribeDocument,
+  unsubscribeDocument,
+  moveDocument,
+  deleteDocument,
+  permanentlyDeleteDocument,
+  downloadDocument,
+  importDocument,
+  starDocument,
+  unstarDocument,
+  duplicateDocument,
+  archiveDocument,
+} from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useMobile from "~/hooks/useMobile";
@@ -94,39 +95,8 @@ function DocumentMenu({
   });
   const { t } = useTranslation();
   const isMobile = useMobile();
-  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 file = React.useRef<HTMLInputElement>(null);
 
-  const handleOpen = React.useCallback(() => {
-    setRenderModals(true);
-
-    if (onOpen) {
-      onOpen();
-    }
-  }, [onOpen]);
-
-  const handleDuplicate = React.useCallback(async () => {
-    const duped = await document.duplicate();
-    // when duplicating, go straight to the duplicated document content
-    history.push(duped.url);
-    showToast(t("Document duplicated"), {
-      type: "success",
-    });
-  }, [t, history, showToast, document]);
-
-  const handleArchive = React.useCallback(async () => {
-    await document.archive();
-    showToast(t("Document archived"), {
-      type: "success",
-    });
-  }, [showToast, t, document]);
-
   const handleRestore = React.useCallback(
     async (
       ev: React.SyntheticEvent,
@@ -154,26 +124,8 @@ function DocumentMenu({
     window.print();
   }, [menu]);
 
-  const handleStar = React.useCallback(
-    (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      document.star();
-    },
-    [document]
-  );
-
-  const handleUnstar = React.useCallback(
-    (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      document.unstar();
-    },
-    [document]
-  );
-
   const collection = collections.get(document.collectionId);
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
   const canViewHistory = can.read && !can.restore;
   const restoreItems = React.useMemo(
     () => [
@@ -205,22 +157,9 @@ function DocumentMenu({
     ev.stopPropagation();
   }, []);
 
-  const handleImportDocument = React.useCallback(
-    (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-
-      // simulate a click on the file upload input element
-      if (file.current) {
-        file.current.click();
-      }
-    },
-    [file]
-  );
-
   const handleFilePicked = React.useCallback(
-    async (ev: React.FormEvent<HTMLInputElement>) => {
-      const files = getDataTransferFiles(ev);
+    async (ev: React.ChangeEvent<HTMLInputElement>) => {
+      const files = getEventFiles(ev);
 
       // Because this is the onChange handler it's possible for the change to be
       // from previously selecting a file to not selecting a file – aka empty
@@ -280,7 +219,7 @@ function DocumentMenu({
       <ContextMenu
         {...menu}
         aria-label={t("Document options")}
-        onOpen={handleOpen}
+        onOpen={onOpen}
         onClose={onClose}
       >
         <Template
@@ -313,22 +252,10 @@ function DocumentMenu({
                 ...restoreItems,
               ],
             },
-            {
-              type: "button",
-              title: t("Unstar"),
-              onClick: handleUnstar,
-              visible: document.isStarred && !!can.unstar,
-              icon: <UnstarredIcon />,
-            },
-            {
-              type: "button",
-              title: t("Star"),
-              onClick: handleStar,
-              visible: !document.isStarred && !!can.star,
-              icon: <StarredIcon />,
-            },
-            // Pin document
-            actionToMenuItem(pinDocument, context),
+            actionToMenuItem(starDocument, context),
+            actionToMenuItem(unstarDocument, context),
+            actionToMenuItem(subscribeDocument, context),
+            actionToMenuItem(unsubscribeDocument, context),
             {
               type: "separator",
             },
@@ -348,22 +275,9 @@ function DocumentMenu({
               visible: !!can.createChildDocument,
               icon: <NewDocumentIcon />,
             },
-            {
-              type: "button",
-              title: t("Import document"),
-              visible: can.createChildDocument,
-              onClick: handleImportDocument,
-              icon: <ImportIcon />,
-            },
-            // Templatize document
+            actionToMenuItem(importDocument, context),
             actionToMenuItem(createTemplate, context),
-            {
-              type: "button",
-              title: t("Duplicate"),
-              onClick: handleDuplicate,
-              visible: !!can.update,
-              icon: <DuplicateIcon />,
-            },
+            actionToMenuItem(duplicateDocument, context),
             {
               type: "button",
               title: t("Unpublish"),
@@ -371,36 +285,14 @@ function DocumentMenu({
               visible: !!can.unpublish,
               icon: <UnpublishIcon />,
             },
+            actionToMenuItem(archiveDocument, context),
+            actionToMenuItem(moveDocument, context),
+            actionToMenuItem(pinDocument, context),
             {
-              type: "button",
-              title: t("Archive"),
-              onClick: handleArchive,
-              visible: !!can.archive,
-              icon: <ArchiveIcon />,
-            },
-            {
-              type: "button",
-              title: `${t("Move")}…`,
-              onClick: () => setShowMoveModal(true),
-              visible: !!can.move,
-              icon: <MoveIcon />,
-            },
-            {
-              type: "button",
-              title: `${t("Delete")}…`,
-              dangerous: true,
-              onClick: () => setShowDeleteModal(true),
-              visible: !!can.delete,
-              icon: <TrashIcon />,
-            },
-            {
-              type: "button",
-              title: `${t("Permanently delete")}…`,
-              dangerous: true,
-              onClick: () => setShowPermanentDeleteModal(true),
-              visible: can.permanentDelete,
-              icon: <CrossIcon />,
+              type: "separator",
             },
+            actionToMenuItem(deleteDocument, context),
+            actionToMenuItem(permanentlyDeleteDocument, context),
             {
               type: "separator",
             },
@@ -413,13 +305,7 @@ function DocumentMenu({
               visible: canViewHistory,
               icon: <HistoryIcon />,
             },
-            {
-              type: "button",
-              title: t("Download"),
-              onClick: document.download,
-              visible: !!can.download,
-              icon: <DownloadIcon />,
-            },
+            actionToMenuItem(downloadDocument, context),
             {
               type: "button",
               title: t("Print"),
@@ -447,7 +333,7 @@ function DocumentMenu({
                 />
               </Style>
             )}
-            {showDisplayOptions && !isMobile && (
+            {showDisplayOptions && !isMobile && can.update && (
               <Style>
                 <ToggleMenuItem
                   width={26}
@@ -464,54 +350,6 @@ function DocumentMenu({
           </>
         )}
       </ContextMenu>
-      {renderModals && (
-        <>
-          {can.move && (
-            <Modal
-              title={t("Move {{ documentName }}", {
-                documentName: document.noun,
-              })}
-              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}
-              isCentered
-            >
-              <DocumentDelete
-                document={document}
-                onSubmit={() => setShowDeleteModal(false)}
-              />
-            </Modal>
-          )}
-          {can.permanentDelete && (
-            <Modal
-              title={t("Permanently delete {{ documentName }}", {
-                documentName: document.noun,
-              })}
-              onRequestClose={() => setShowPermanentDeleteModal(false)}
-              isOpen={showPermanentDeleteModal}
-              isCentered
-            >
-              <DocumentPermanentDelete
-                document={document}
-                onSubmit={() => setShowPermanentDeleteModal(false)}
-              />
-            </Modal>
-          )}
-        </>
-      )}
     </>
   );
 }

app/menus/GroupMenu.tsx

@@ -24,7 +24,7 @@ function GroupMenu({ group, onMembers }: Props) {
   });
   const [editModalOpen, setEditModalOpen] = React.useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
-  const can = usePolicy(group.id);
+  const can = usePolicy(group);
 
   return (
     <>

app/menus/NewDocumentMenu.tsx

@@ -27,7 +27,7 @@ function NewDocumentMenu() {
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const { collections, policies } = useStores();
-  const can = usePolicy(team.id);
+  const can = usePolicy(team);
   const items = React.useMemo(
     () =>
       collections.orderedData.reduce<MenuItem[]>((filtered, collection) => {

app/menus/NewTemplateMenu.tsx

@@ -22,7 +22,7 @@ function NewTemplateMenu() {
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const { collections, policies } = useStores();
-  const can = usePolicy(team.id);
+  const can = usePolicy(team);
 
   const items = React.useMemo(
     () =>

app/menus/OrganizationMenu.tsx

@@ -2,11 +2,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
-import styled from "styled-components";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
-import { createAction } from "~/actions";
 import { navigateToSettings, logout } from "~/actions/definitions/navigation";
+import { changeTeam } from "~/actions/definitions/teams";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePrevious from "~/hooks/usePrevious";
 import useSessions from "~/hooks/useSessions";
@@ -32,32 +31,11 @@ const OrganizationMenu: React.FC = ({ children }) => {
     }
   }, [menu, theme, previousTheme]);
 
+  // NOTE: it's useful to memoize on the team id and session because the action
+  // menu is not cached at all.
   const actions = React.useMemo(() => {
-    const otherSessions = sessions.filter(
-      (session) => session.teamId !== team.id && session.url !== team.url
-    );
-
-    return [
-      navigateToSettings,
-      separator(),
-      ...(otherSessions.length
-        ? [
-            createAction({
-              name: t("Switch team"),
-              section: "account",
-              children: otherSessions.map((session) => ({
-                id: session.url,
-                name: session.name,
-                section: "account",
-                icon: <Logo alt={session.name} src={session.logoUrl} />,
-                perform: () => (window.location.href = session.url),
-              })),
-            }),
-          ]
-        : []),
-      logout,
-    ];
-  }, [team.id, team.url, sessions, t]);
+    return [navigateToSettings, separator(), changeTeam, logout];
+  }, [team.id, sessions]);
 
   return (
     <>
@@ -69,10 +47,4 @@ const OrganizationMenu: React.FC = ({ children }) => {
   );
 };
 
-const Logo = styled("img")`
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-`;
-
 export default observer(OrganizationMenu);

app/menus/UserMenu.tsx

@@ -108,9 +108,7 @@ function UserMenu({ user }: Props) {
   const handleRevoke = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
-      users.delete(user, {
-        confirmation: true,
-      });
+      users.delete(user);
     },
     [users, user]
   );

app/models/BaseModel.ts

@@ -20,7 +20,10 @@ export default abstract class BaseModel {
     this.store = store;
   }
 
-  save = async (params?: Record<string, any>) => {
+  save = async (
+    params?: Record<string, any>,
+    options?: Record<string, string | boolean | number | undefined>
+  ) => {
     this.isSaving = true;
 
     try {
@@ -29,7 +32,7 @@ export default abstract class BaseModel {
         params = this.toAPI();
       }
 
-      const model = await this.store.save({ ...params, id: this.id });
+      const model = await this.store.save({ ...params, id: this.id }, options);
 
       // if saving is successful set the new values on the model itself
       set(this, { ...params, ...model });