Merge branch 'main' of https://github.com/outline/outline into feat/undo-document-move

fix: delete moveWithUndo
Merge branch 'main' into feat/undo-document-move
2026-06-13 19:35:02 +03:00 · 2022-04-30 13:05:09 +05:30 · 2022-03-05 23:10:08 +05:30 · 2022-03-04 18:29:50 -08:00 · 2022-02-12 10:59:50 +05:30 · 2022-02-12 10:21:23 +05:30
659 changed files with 13138 additions and 26949 deletions
@@ -35,14 +35,6 @@
            "displayName": false
          }
        ]
-      ],
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    },
-    "development": {
-      "ignore": [
-        "**/*.test.ts"
      ]
    }
  }
@@ -70,15 +70,6 @@ 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:
@@ -90,7 +81,7 @@ jobs:
          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
      - run:
          name: test
-          command: yarn test:server --forceExit
+          command: yarn test:server
  bundle-size:
    <<: *defaults
    steps:
@@ -149,9 +140,6 @@ workflows:
      - test-server:
          requires:
            - build
-      - test-shared:
-          requires:
-            - build
      - test-app:
          requires:
            - build
@@ -161,7 +149,6 @@ workflows:
      - bundle-size:
          requires:
            - test-app
-            - test-shared
            - test-server

  build-docker:
@@ -1,7 +1,5 @@
 # –––––––––––––––– 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
@@ -18,15 +16,7 @@ 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.
@@ -67,8 +57,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_CLIENT_ID=get_a_key_from_slack
-SLACK_CLIENT_SECRET=get_the_secret_of_above_key
+SLACK_KEY=get_a_key_from_slack
+SLACK_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
@@ -139,6 +129,10 @@ 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
@@ -170,10 +164,3 @@ 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
@@ -12,6 +12,7 @@
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
+    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
@@ -20,12 +21,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",
@@ -1,11 +0,0 @@
-# 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"
@@ -0,0 +1,22 @@
+# 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
@@ -42,7 +42,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v1
      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@v2
+      uses: github/codeql-action/autobuild@v1

    # ℹ️ 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@v2
+      uses: github/codeql-action/analyze@v1
@@ -1,29 +0,0 @@
-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.*, ',') }}
@@ -3,7 +3,6 @@ build
 node_modules/*
 .env
 .log
-.vscode/*
 npm-debug.log
 stats.json
 .DS_Store
@@ -1,88 +0,0 @@
-{
-  "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"
-      }
-    }
-  ]
-}
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.64.0
+Licensed Work:        Outline 0.63.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-05-23
+Change Date:          2026-04-15

 Change License:       Apache License, Version 2.0

@@ -0,0 +1,17 @@
+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 });
+  };
+}
@@ -1 +1,2 @@
+// Mock for node-uuid
 global.console.warn = () => {};
@@ -43,6 +43,10 @@
      "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
@@ -102,11 +106,11 @@
      "value": "openid profile email",
      "required": false
    },
-    "SLACK_CLIENT_ID": {
+    "SLACK_KEY": {
      "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
      "required": false
    },
-    "SLACK_CLIENT_SECRET": {
+    "SLACK_SECRET": {
      "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
      "required": false
    },
@@ -205,4 +209,4 @@
      "required": false
    }
  }
-}
+}
@@ -1,10 +1,6 @@
 {
  "extends": [
-    "../.eslintrc",
-    "plugin:react-hooks/recommended",
-  ],
-  "plugins": [
-    "eslint-plugin-react-hooks",
+    "../.eslintrc"
  ],
  "env": {
    "jest": true,
@@ -0,0 +1,27 @@
+{
+  "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"
+}
@@ -0,0 +1,32 @@
+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];
@@ -1,50 +0,0 @@
-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];
@@ -11,18 +11,9 @@ import {
  ImportIcon,
  PinIcon,
  SearchIcon,
-  UnsubscribeIcon,
-  SubscribeIcon,
-  MoveIcon,
-  TrashIcon,
-  CrossIcon,
-  ArchiveIcon,
 } from "outline-icons";
 import * as React from "react";
-import { getEventFiles } from "@shared/utils/files";
-import DocumentDelete from "~/scenes/DocumentDelete";
-import DocumentMove from "~/scenes/DocumentMove";
-import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
+import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
@@ -117,111 +108,22 @@ 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 downloadDocumentAsHTML = createAction({
-  name: ({ t }) => t("HTML"),
-  section: DocumentSection,
-  keywords: "html export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.download("text/html");
-  },
-});
-
-export const downloadDocumentAsMarkdown = createAction({
-  name: ({ t }) => t("Markdown"),
-  section: DocumentSection,
-  keywords: "md markdown export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.download("text/markdown");
-  },
-});
-
 export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
  section: DocumentSection,
  icon: <DownloadIcon />,
  keywords: "export",
-  children: [downloadDocumentAsHTML, downloadDocumentAsMarkdown],
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.download();
+  },
 });

 export const duplicateDocument = createAction({
@@ -358,8 +260,8 @@ export const importDocument = createAction({
    input.type = "file";
    input.accept = documents.importFileTypes.join(", ");

-    input.onchange = async (ev) => {
-      const files = getEventFiles(ev);
+    input.onchange = async (ev: Event) => {
+      const files = getDataTransferFiles(ev);

      try {
        const file = files[0];
@@ -394,11 +296,10 @@ export const createTemplate = createAction({
      return false;
    }
    const document = stores.documents.get(activeDocumentId);
-    return !!(
+    return (
      !!activeCollectionId &&
      stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate &&
-      !document?.isDeleted
+      !document?.isTemplate
    );
  },
  perform: ({ activeDocumentId, stores, t, event }) => {
@@ -427,146 +328,15 @@ 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,
@@ -1,40 +0,0 @@
-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];
@@ -56,7 +56,6 @@ export function actionToMenuItem(
    title,
    icon,
    visible,
-    dangerous: action.dangerous,
    onClick: () => action.perform && action.perform(context),
    selected: action.selected ? action.selected(context) : undefined,
  };
@@ -1,9 +1,8 @@
 import { rootCollectionActions } from "./definitions/collections";
-import { rootDeveloperActions } from "./definitions/developer";
+import { rootDebugActions } from "./definitions/debug";
 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 [
@@ -12,6 +11,5 @@ export default [
  ...rootUserActions,
  ...rootNavigationActions,
  ...rootSettingsActions,
-  ...rootDeveloperActions,
-  ...rootTeamActions,
+  ...rootDebugActions,
 ];
@@ -2,7 +2,7 @@ import { ActionContext } from "~/types";

 export const CollectionSection = ({ t }: ActionContext) => t("Collection");

-export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
+export const DebugSection = ({ t }: ActionContext) => t("Debug");

 export const DocumentSection = ({ t }: ActionContext) => t("Document");

@@ -2,7 +2,9 @@ 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";

@@ -23,11 +25,29 @@ 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;
  }

@@ -37,7 +37,7 @@ function Breadcrumb({
  return (
    <Flex justify="flex-start" align="center">
      {topLevelItems.map((item, index) => (
-        <React.Fragment key={String(item.to) || index}>
+        <React.Fragment key={item.to || index}>
          {item.icon}
          {item.to ? (
            <Item
@@ -1,4 +1,3 @@
-import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
@@ -156,7 +155,7 @@ export type Props<T> = {
  primary?: boolean;
  fullwidth?: boolean;
  as?: T;
-  to?: LocationDescriptor;
+  to?: string;
  borderOnHover?: boolean;
  href?: string;
  "data-on"?: string;
@@ -1,6 +1,17 @@
+import * as React from "react";
 import styled from "styled-components";

-const ButtonLink = styled.button`
+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`
  margin: 0;
  padding: 0;
  border: 0;
@@ -12,7 +12,7 @@ const Container = styled.div<Props>`
  padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};

  ${breakpoint("tablet")`
-    padding: ${(props: Props) =>
+    padding: ${(props: any) =>
      props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
  `};
 `;
@@ -42,9 +42,8 @@ function Collaborators(props: Props) {
        filter(
          users.orderedData,
          (user) =>
-            (presentIds.includes(user.id) ||
-              document.collaboratorIds.includes(user.id)) &&
-            !user.isSuspended
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
        ),
        (user) => presentIds.includes(user.id)
      ),
@@ -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);
+  const can = usePolicy(collection.id);

  const handleStartEditing = React.useCallback(() => {
    setEditing(true);
@@ -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;
@@ -7,23 +7,20 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";

 type Props = {
-  /** Callback when the dialog is submitted */
-  onSubmit: () => Promise<void> | void;
-  /** Text to display on the submit button */
+  onSubmit: () => void;
+  children: JSX.Element;
  submitText?: string;
-  /** Text to display while the form is saving */
  savingText?: string;
-  /** If true, the submit button will be a dangerous red */
  danger?: boolean;
 };

-const ConfirmationDialog: React.FC<Props> = ({
+function ConfirmationDialog({
  onSubmit,
  children,
  submitText,
  savingText,
  danger,
-}) => {
+}: Props) {
  const [isSaving, setIsSaving] = React.useState(false);
  const { dialogs } = useStores();
  const { showToast } = useToasts();
@@ -56,6 +53,6 @@ const ConfirmationDialog: React.FC<Props> = ({
      </form>
    </Flex>
  );
-};
+}

 export default observer(ConfirmationDialog);
@@ -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?: LocationDescriptor;
+  to?: string;
  href?: string;
  target?: "_blank";
  as?: string | React.ComponentType<any>;
@@ -132,18 +132,16 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
      ? "pointer-events: none;"
      : `

-  @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;
+  &:${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};
    }
  }
  `};
@@ -2,7 +2,7 @@ import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";

-export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
+export default function Separator(rest: any) {
  return (
    <MenuSeparator {...rest}>
      {(props) => <HorizontalRule {...props} />}
@@ -69,27 +69,29 @@ const Submenu = React.forwardRef(
 );

 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  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;
-    });
+  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;
 }

 function Template({ items, actions, context, ...menu }: Props) {
@@ -1,4 +1,3 @@
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
@@ -93,19 +92,6 @@ 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;
@@ -115,7 +101,7 @@ const ContextMenu: React.FC<Props> = ({
  // trigger and the bottom of the window
  return (
    <>
-      <Menu hideOnClickOutside preventBodyScroll={false} {...rest}>
+      <Menu hideOnClickOutside preventBodyScroll {...rest}>
        {(props) => {
          // kind of hacky, but this is an effective way of telling which way
          // the menu will _actually_ be placed when taking into account screen
@@ -1,6 +1,5 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
-import env from "~/env";

 type Props = {
  text: string;
@@ -15,7 +14,7 @@ class CopyToClipboard extends React.PureComponent<Props> {
    const elem = React.Children.only(children);

    copy(text, {
-      debug: env.ENVIRONMENT !== "production",
+      debug: process.env.NODE_ENV !== "production",
      format: "text/plain",
    });

@@ -49,8 +49,8 @@ function DocumentListItem(
  ref: React.RefObject<HTMLAnchorElement>
 ) {
  const { t } = useTranslation();
-  const user = useCurrentUser();
-  const team = useCurrentTeam();
+  const currentUser = useCurrentUser();
+  const currentTeam = 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(team);
+  const can = usePolicy(currentTeam.id);
  const canCollection = usePolicy(document.collectionId);

  return (
@@ -96,7 +96,7 @@ function DocumentListItem(
            highlight={highlight}
            dir={document.dir}
          />
-          {document.isBadgedNew && document.createdBy.id !== user.id && (
+          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
          {canStar && (
@@ -1,4 +1,3 @@
-import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -36,7 +35,7 @@ type Props = {
  showLastViewed?: boolean;
  showParentDocuments?: boolean;
  document: Document;
-  to?: LocationDescriptor;
+  to?: string;
 };

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

@@ -84,4 +83,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
  }
 `;

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

-export default observer(DocumentTasks);
+export default DocumentTasks;
@@ -1,24 +1,20 @@
 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 { Heading } from "@shared/editor/lib/getHeadings";
-import { getDataTransferFiles } from "@shared/utils/files";
+import embeds from "@shared/editor/embeds";
+import { supportedImageMimeTypes } from "@shared/utils/files";
+import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 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";
@@ -49,22 +45,19 @@ 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> | null) {
-  const { id, shareId, onChange, onHeadingsChange } = props;
+function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
+  const { id, shareId } = 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);
@@ -172,7 +165,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  );

  const focusAtEnd = React.useCallback(() => {
-    ref?.current?.focusAtEnd();
+    ref.current?.focusAtEnd();
  }, [ref]);

  const handleDrop = React.useCallback(
@@ -180,41 +173,21 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      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) => !AttachmentValidation.imageContentTypes.includes(file.type)
+        (file) => !supportedImageMimeTypes.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,
@@ -243,43 +216,11 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    []
  );

-  // 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={mergeRefs([ref, handleRefChanged])}
+          ref={ref}
          uploadFile={onUploadFile}
          onShowToast={showToast}
          embeds={embeds}
@@ -288,7 +229,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
          onHoverLink={handleLinkActive}
          onClickLink={onClickLink}
          onSearchLink={handleSearchLink}
-          onChange={handleChange}
          placeholder={props.placeholder || ""}
          defaultValue={props.defaultValue || ""}
        />
@@ -312,4 +252,4 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  );
 }

-export default observer(React.forwardRef(Editor));
+export default React.forwardRef(Editor);
@@ -2,7 +2,6 @@ import styled from "styled-components";

 const Empty = styled.p`
  color: ${(props) => props.theme.textTertiary};
-  user-select: none;
 `;

 export default Empty;
@@ -9,8 +9,8 @@ import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
-import Logger from "~/utils/Logger";
-import isCloudHosted from "~/utils/isCloudHosted";
+import isHosted from "~/utils/isHosted";
+import Logger from "~/utils/logger";

 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 && isCloudHosted;
+      const isReported = !!env.SENTRY_DSN && isHosted;
      const isChunkError = this.error.message.match(/chunk/);

      if (isChunkError) {
@@ -5,7 +5,6 @@ import {
  PublishIcon,
  MoveIcon,
  CheckboxIcon,
-  UnpublishIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -33,7 +32,7 @@ type Props = {
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
  const { t } = useTranslation();
  const location = useLocation();
-  const can = usePolicy(document);
+  const can = usePolicy(document.id);
  const opts = {
    userName: event.actor.name,
  };
@@ -86,11 +85,6 @@ 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);
@@ -119,10 +113,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
        <Time
          dateTime={event.createdAt}
          tooltipDelay={500}
-          format={{
-            en_US: "MMM do, h:mm a",
-            fr_FR: "'Le 'd MMMM 'à' H:mm",
-          }}
+          format="MMM do, h:mm a"
          relative={false}
          addSuffix
          onClick={handleTimeClick}
@@ -11,19 +11,11 @@ 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, reverse }) =>
-    reverse
-      ? column
-        ? "column-reverse"
-        : "row-reverse"
-      : column
-      ? "column"
-      : "row"};
+  flex-direction: ${({ column }) => (column ? "column" : "row")};
  align-items: ${({ align }) => align};
  justify-content: ${({ justify }) => justify};
  flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
@@ -19,7 +19,7 @@ type Props = RootStore & {
  membership?: CollectionGroupMembership;
  showFacepile?: boolean;
  showAvatar?: boolean;
-  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
+  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
 };

@observer
@@ -40,7 +40,6 @@ 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";
@@ -201,7 +200,18 @@ 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;
@@ -262,7 +272,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
            <ColorPicker
              color={color}
              onChange={(color) => onChange(color.hex, icon)}
-              colors={colorPalette}
+              colors={colors}
              triangle="hide"
              styles={{
                default: {
@@ -38,13 +38,6 @@ 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;
  }
@@ -104,17 +97,30 @@ export const LabelText = styled.div`
  display: inline-block;
 `;

-export type Props = React.InputHTMLAttributes<
-  HTMLInputElement | HTMLTextAreaElement
-> & {
+export type Props = React.HTMLAttributes<HTMLInputElement> & {
  type?: "text" | "email" | "checkbox" | "search" | "textarea";
-  labelHidden?: boolean;
+  value?: string;
  label?: string;
+  className?: string;
+  labelHidden?: boolean;
  flex?: boolean;
  short?: boolean;
  margin?: string | number;
  icon?: React.ReactNode;
-  innerRef?: React.Ref<any>;
+  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;
  onFocus?: (ev: React.SyntheticEvent) => unknown;
  onBlur?: (ev: React.SyntheticEvent) => unknown;
 };
@@ -157,6 +163,8 @@ class Input extends React.Component<Props> {
      ...rest
    } = this.props;

+    const InputComponent: React.ComponentType =
+      type === "textarea" ? RealTextarea : RealInput;
    const wrappedLabel = <LabelText>{label}</LabelText>;

    return (
@@ -170,24 +178,15 @@ class Input extends React.Component<Props> {
            ))}
          <Outline focused={this.focused} margin={margin}>
            {icon && <IconWrapper>{icon}</IconWrapper>}
-            {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}
-              />
-            )}
+            <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}
+            />
          </Outline>
        </label>
      </Wrapper>
@@ -195,10 +194,4 @@ 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;
@@ -1,7 +1,6 @@
 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(
@@ -32,11 +31,11 @@ export default function InputSelectPermission(
      options={[
        {
          label: t("View and edit"),
-          value: CollectionPermission.ReadWrite,
+          value: "read_write",
        },
        {
          label: t("View only"),
-          value: CollectionPermission.Read,
+          value: "read",
        },
        {
          label: t("No access"),
@@ -1,23 +0,0 @@
-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;
@@ -1,53 +0,0 @@
-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;
-    }
-  }
-`;
@@ -69,11 +69,7 @@ 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) =>
@@ -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, locales } from "~/utils/i18n";
+import { dateLocale } from "~/utils/i18n";

 let callbacks: (() => void)[] = [];

@@ -26,7 +26,7 @@ type Props = {
  addSuffix?: boolean;
  shorten?: boolean;
  relative?: boolean;
-  format?: Partial<Record<keyof typeof locales, string>>;
+  format?: string;
 };

 const LocaleTime: React.FC<Props> = ({
@@ -38,13 +38,7 @@ const LocaleTime: React.FC<Props> = ({
  relative,
  tooltipDelay,
 }) => {
-  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 userLocale = useUserLocale();
  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
  const callback = React.useRef<() => void>();

@@ -72,13 +66,17 @@ const LocaleTime: React.FC<Props> = ({
      .replace("minute", "min");
  }

-  const tooltipContent = formatDate(Date.parse(dateTime), formatLocaleLong, {
-    locale,
-  });
+  const tooltipContent = formatDate(
+    Date.parse(dateTime),
+    "MMMM do, yyyy h:mm a",
+    {
+      locale,
+    }
+  );
  const content =
    relative !== false
      ? relativeContent
-      : formatDate(Date.parse(dateTime), formatLocale, {
+      : formatDate(Date.parse(dateTime), format || "MMMM do, yyyy h:mm a", {
          locale,
        });

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

 type Props = React.ComponentProps<typeof NavLink> & {
-  children?: (
-    match:
-      | match<{
-          [x: string]: string | undefined;
-        }>
-      | boolean
-      | null
-  ) => React.ReactNode;
+  children?: (match: any) => React.ReactNode;
  exact?: boolean;
  activeStyle?: React.CSSProperties;
  to: string;
@@ -2,7 +2,6 @@ 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 = {
@@ -41,7 +40,6 @@ 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}
@@ -34,19 +34,12 @@ 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;

@@ -87,7 +80,6 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
    this.isFetchingMore = false;
  };

-  @action
  fetchResults = async () => {
    if (!this.props.fetch) {
      return;
@@ -95,30 +87,25 @@ 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;

-    try {
-      const results = await this.props.fetch({
-        limit,
-        offset: this.offset,
-        ...this.props.options,
-      });
+    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;
-    } 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;
-      }
+    this.renderCount += limit;
+
+    // only the most recent fetch should end the loading state
+    if (counter >= this.fetchCounter) {
+      this.isFetching = false;
+      this.isFetchingMore = false;
    }
  };

@@ -132,7 +119,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 > 0) {
+    if (leftToRender > 1) {
      this.renderCount += DEFAULT_PAGINATION_LIMIT;
    }

@@ -151,9 +138,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 &&
@@ -171,10 +158,6 @@ 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;
    }

@@ -185,9 +168,8 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
          aria-label={this.props["aria-label"]}
          onEscape={onEscape}
        >
-          {(composite: CompositeStateReturn) => {
-            let previousHeading = "";
-            return items.slice(0, this.renderCount).map((item, index) => {
+          {(composite: CompositeStateReturn) =>
+            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
@@ -220,8 +202,8 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
              }

              return children;
-            });
-          }}
+            })
+          }
        </ArrowKeyNavigation>
        {this.allowLoadMore && (
          <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
@@ -14,7 +14,7 @@ type Props = {
  collection: Collection | null | undefined;
  onSuccess?: () => void;
  style?: React.CSSProperties;
-  ref?: (element: React.ElementRef<"div"> | null | undefined) => void;
+  ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void;
 };

@observer
@@ -10,7 +10,6 @@ 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";
@@ -35,15 +34,12 @@ function AppSidebar() {
  const { t } = useTranslation();
  const { documents } = useStores();
  const team = useCurrentTeam();
-  const user = useCurrentUser();
-  const can = usePolicy(team);
+  const can = usePolicy(team.id);

  React.useEffect(() => {
-    if (!user.isViewer) {
-      documents.fetchDrafts();
-      documents.fetchTemplates();
-    }
-  }, [documents, user.isViewer]);
+    documents.fetchDrafts();
+    documents.fetchTemplates();
+  }, [documents]);

  const [dndArea, setDndArea] = React.useState();
  const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);
@@ -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 isCloudHosted from "~/utils/isCloudHosted";
+import isHosted from "~/utils/isHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
@@ -51,7 +51,7 @@ function SettingsSidebar() {
              </Header>
            </Section>
          ))}
-          {!isCloudHosted && (
+          {!isHosted && (
            <Section>
              <Header title={t("Installation")} />
              <Version />
@@ -65,7 +65,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
    const handleStopDrag = React.useCallback(() => {
      setResizing(false);

-      if (document.activeElement instanceof HTMLElement) {
+      if (document.activeElement) {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
        document.activeElement.blur();
      }

@@ -16,6 +16,7 @@ import useActionContext from "~/hooks/useActionContext";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import CollectionMenu from "~/menus/CollectionMenu";
 import { NavigationNode } from "~/types";
 import DropToImport from "./DropToImport";
@@ -44,10 +45,11 @@ 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).update;
+  const canUpdate = usePolicy(collection.id).update;
  const { t } = useTranslation();
  const history = useHistory();
  const inStarredSection = useStarredContext();
+  const { showToast } = useToasts();

  const handleTitleChange = React.useCallback(
    async (name: string) => {
@@ -62,16 +64,17 @@ const CollectionLink: React.FC<Props> = ({
  // Drop to re-parent document
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: "document",
-    drop: (item: DragObject, monitor) => {
+    drop: async (item: DragObject, monitor) => {
      const { id, collectionId } = item;
+      const document = documents.get(id);
+
      if (monitor.didDrop()) {
        return;
      }
-      if (!collection) {
+      if (!collection || !document) {
        return;
      }

-      const document = documents.get(id);
      if (collection.id === collectionId && !document?.parentDocumentId) {
        return;
      }
@@ -97,7 +100,21 @@ const CollectionLink: React.FC<Props> = ({
          ),
        });
      } else {
-        documents.move(id, collection.id);
+        const undo = document.metaData;
+        await document.move(collection.id);
+        showToast(t("Document moved"), {
+          type: "info",
+          action: {
+            text: "undo",
+            onClick: async () => {
+              await document.move(
+                undo.collectionId,
+                undo.parentDocumentId,
+                undo.index
+              );
+            },
+          },
+        });
      }
    },
    canDrop: () => canUpdate,
@@ -25,7 +25,7 @@ function CollectionLinkChildren({
  expanded,
  prefetchDocument,
 }: Props) {
-  const can = usePolicy(collection);
+  const can = usePolicy(collection.id);
  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 && item.collectionId === collection?.id) {
+      if (!manualSort) {
        showToast(
          t(
            "You can't reorder documents in an alphabetically sorted collection"
@@ -3,13 +3,12 @@ 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";
@@ -19,10 +18,39 @@ 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,
@@ -43,46 +71,45 @@ 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>
-          <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>
+        <Relative>{isPreloaded ? content : <Fade>{content}</Fade>}</Relative>
      </Header>
    </Flex>
  );
 }

-const StyledError = styled(Error)`
-  font-size: 15px;
-  padding: 0 8px;
-`;
-
 export default observer(Collections);
@@ -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 (
@@ -178,10 +178,13 @@ function InnerDocumentLink(
      if (monitor.didDrop()) {
        return;
      }
+
      if (!collection) {
        return;
      }
-      documents.move(item.id, collection.id, node.id);
+
+      const document = documents.get(item.id);
+      document?.moveWithUndo(collection.id, node.id);
    },
    canDrop: (_item, monitor) =>
      !isDraft &&
@@ -213,7 +216,7 @@ function InnerDocumentLink(
      }
    },
    collect: (monitor) => ({
-      isOverReparent: monitor.isOver({
+      isOverReparent: !!monitor.isOver({
        shallow: true,
      }),
      canDropToReparent: monitor.canDrop(),
@@ -244,32 +247,35 @@ function InnerDocumentLink(
        return;
      }

-      if (expanded) {
-        documents.move(item.id, collection.id, node.id, 0);
-        return;
-      }
-
-      documents.move(item.id, collection.id, parentId, index + 1);
+      const parentDocumentId = expanded ? node.id : parentId;
+      const droppedDocumentIndex = expanded ? 0 : index + 1;
+      const document = documents.get(item.id);
+      document?.moveWithUndo(
+        collection.id,
+        parentDocumentId,
+        droppedDocumentIndex
+      );
    },
    collect: (monitor) => ({
-      isOverReorder: monitor.isOver(),
-      isDraggingAnyDocument: monitor.canDrop(),
+      isOverReorder: !!monitor.isOver(),
+      isDraggingAnyDocument: !!monitor.canDrop(),
    }),
  });

  const nodeChildren = React.useMemo(() => {
-    const insertDraftDocument =
+    if (
+      collection &&
      activeDocument?.isDraft &&
      activeDocument?.isActive &&
-      activeDocument?.parentDocumentId === node.id;
+      activeDocument?.parentDocumentId === node.id
+    ) {
+      return sortNavigationNodes(
+        [activeDocument?.asNavigationNode, ...node.children],
+        collection.sort
+      );
+    }

-    return collection && insertDraftDocument
-      ? sortNavigationNodes(
-          [activeDocument?.asNavigationNode, ...node.children],
-          collection.sort,
-          false
-        )
-      : node.children;
+    return node.children;
  }, [
    activeDocument?.isActive,
    activeDocument?.isDraft,
@@ -319,7 +325,7 @@ function InnerDocumentLink(
                    onSubmit={handleTitleChange}
                    onEditing={handleTitleEditing}
                    canUpdate={canUpdate}
-                    maxLength={DocumentValidation.maxTitleLength}
+                    maxLength={MAX_TITLE_LENGTH}
                  />
                }
                isActive={(match, location: Location<{ starred?: boolean }>) =>
@@ -39,7 +39,7 @@ function DraggableCollectionLink({
  const [expanded, setExpanded] = React.useState(
    collection.id === ui.activeCollectionId && !locationStateStarred
  );
-  const can = usePolicy(collection);
+  const can = usePolicy(collection.id);
  const belowCollectionIndex = belowCollection ? belowCollection.index : null;

  // Drop to reorder collection
@@ -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, LocationDescriptor } from "history";
+import { Location, createLocation } 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: LocationDescriptor | ((location: Location) => LocationDescriptor),
+  to: string | Record<string, any>,
  currentLocation: Location
 ) => (typeof to === "function" ? to(currentLocation) : to);

 const normalizeToLocation = (
-  to: LocationDescriptor,
+  to: string | Record<string, any>,
  currentLocation: Location
 ) => {
  return typeof to === "string"
@@ -30,15 +30,17 @@ const joinClassnames = (...classnames: (string | undefined)[]) => {
  return classnames.filter((i) => i).join(" ");
 };

-export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type Props = React.HTMLAttributes<HTMLAnchorElement> & {
  activeClassName?: string;
  activeStyle?: React.CSSProperties;
+  className?: string;
  scrollIntoViewIfNeeded?: boolean;
  exact?: boolean;
  isActive?: (match: match | null, location: Location) => boolean;
  location?: Location;
  strict?: boolean;
-  to: LocationDescriptor;
+  style?: React.CSSProperties;
+  to: string | Record<string, any>;
 };

 /**
@@ -1,4 +1,3 @@
-import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -15,7 +14,8 @@ export type DragObject = NavigationNode & {
 };

 type Props = Omit<NavLinkProps, "to"> & {
-  to?: LocationDescriptor;
+  to?: string | Record<string, any>;
+  href?: string | Record<string, any>;
  innerRef?: (ref: HTMLElement | null | undefined) => void;
  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
  onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
@@ -1,5 +1,4 @@
 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";
@@ -7,7 +6,6 @@ import SidebarLink from "./SidebarLink";

 export default function Version() {
  const [releasesBehind, setReleasesBehind] = React.useState(0);
-  const { t } = useTranslation();

  React.useEffect(() => {
    async function loadReleases() {
@@ -32,7 +30,6 @@ export default function Version() {

  return (
    <SidebarLink
-      target="_blank"
      href="https://github.com/outline/outline/releases"
      label={
        <>
@@ -40,11 +37,10 @@ export default function Version() {
          <br />
          <LilBadge>
            {releasesBehind === 0
-              ? t("Up to date")
-              : t(`{{ releasesBehind }} versions behind`, {
-                  releasesBehind,
-                  count: releasesBehind,
-                })}
+              ? "Up to date"
+              : `${releasesBehind} version${
+                  releasesBehind === 1 ? "" : "s"
+                } behind`}
          </LilBadge>
        </>
      }
@@ -12,19 +12,19 @@ export default function useCollectionDocuments(
      return [];
    }

-    const insertDraftDocument =
+    if (
      activeDocument?.isActive &&
      activeDocument?.isDraft &&
      activeDocument?.collectionId === collection.id &&
-      !activeDocument?.parentDocumentId;
+      !activeDocument?.parentDocumentId
+    ) {
+      return sortNavigationNodes(
+        [activeDocument.asNavigationNode, ...collection.documents],
+        collection.sort
+      );
+    }

-    return insertDraftDocument
-      ? sortNavigationNodes(
-          [activeDocument.asNavigationNode, ...collection.sortedDocuments],
-          collection.sort,
-          false
-        )
-      : collection.sortedDocuments;
+    return collection.documents;
  }, [
    activeDocument?.isActive,
    activeDocument?.isDraft,
@@ -32,7 +32,7 @@ export default function useCollectionDocuments(
    activeDocument?.parentDocumentId,
    activeDocument?.asNavigationNode,
    collection,
-    collection?.sortedDocuments,
+    collection?.documents,
    collection?.id,
    collection?.sort,
  ]);
@@ -0,0 +1,387 @@
+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);
@@ -1,14 +1,17 @@
 import { m } from "framer-motion";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import NavLink from "~/components/NavLink";
+import NavLinkWithChildrenFunc from "~/components/NavLink";

-type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
+type Props = Omit<
+  React.ComponentProps<typeof NavLinkWithChildrenFunc>,
+  "children"
+> & {
  to: string;
  exact?: boolean;
 };

-const TabLink = styled(NavLink)`
+const TabLink = styled(NavLinkWithChildrenFunc)`
  position: relative;
  display: inline-flex;
  align-items: center;
@@ -1,4 +1,3 @@
-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";
@@ -73,4 +72,4 @@ const TableFromParams = (
  );
 };

-export default observer(TableFromParams);
+export default TableFromParams;
@@ -2,10 +2,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { breakpoints } from "@shared/styles";
-import GlobalStyles from "@shared/styles/globals";
 import { dark, light, lightMobile, darkMobile } from "@shared/styles/theme";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useStores from "~/hooks/useStores";
+import GlobalStyles from "~/styles/globals";

 const Theme: React.FC = ({ children }) => {
  const { ui } = useStores();
@@ -1,5 +1,5 @@
 import { CheckboxIcon, InfoIcon, WarningIcon } from "outline-icons";
-import { darken } from "polished";
+import { darken, lighten } from "polished";
 import * as React from "react";
 import styled, { css } from "styled-components";
 import { fadeAndScaleIn, pulse } from "~/styles/animations";
@@ -69,17 +69,17 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {

 const Action = styled.span`
  display: inline-block;
-  padding: 10px 12px;
+  padding: 6px 12px;
+  margin-left: 8px;
  height: 100%;
  text-transform: uppercase;
  font-size: 12px;
  color: ${(props) => props.theme.toastText};
  background: ${(props) => darken(0.05, props.theme.toastBackground)};
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-radius: 5px;

  &:hover {
-    background: ${(props) => darken(0.1, props.theme.toastBackground)};
+    background: ${(props) => lighten(0.1, props.theme.toastBackground)};
  }
 `;

@@ -1,448 +0,0 @@
-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);
@@ -6,13 +6,15 @@ import useStores from "~/hooks/useStores";
 type StoreProps = keyof RootStore;

 function withStores<
-  P extends React.ComponentType<ResolvedProps & RootStore>,
+  P extends React.ComponentType<React.ComponentProps<P> & RootStore>,
  ResolvedProps = JSX.LibraryManagedAttributes<
    P,
    Omit<React.ComponentProps<P>, StoreProps>
  >
->(WrappedComponent: P): React.FC<ResolvedProps> {
-  const ComponentWithStore = (props: ResolvedProps) => {
+>(WrappedComponent: P): React.FC<Omit<ResolvedProps, StoreProps>> {
+  const ComponentWithStore = (
+    props: Omit<React.ComponentProps<P>, StoreProps>
+  ) => {
    const stores = useStores();
    return <WrappedComponent {...(props as any)} {...stores} />;
  };
@@ -7,13 +7,12 @@ 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 { MenuItem } from "@shared/editor/types";
+import { EmbedDescriptor, MenuItem } from "@shared/editor/types";
 import { depths } from "@shared/styles";
-import { getEventFiles } from "@shared/utils/files";
-import { AttachmentValidation } from "@shared/validations";
+import { supportedImageMimeTypes } from "@shared/utils/files";
+import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 import Scrollable from "~/components/Scrollable";
 import { Dictionary } from "~/hooks/useDictionary";
 import Input from "./Input";
@@ -37,7 +36,7 @@ export type Props<T extends MenuItem = MenuItem> = {
  onFileUploadStop?: () => void;
  onShowToast: (message: string) => void;
  onLinkToolbarOpen?: () => void;
-  onClose: (insertNewLine?: boolean) => void;
+  onClose: () => void;
  onClearSearch: () => void;
  embeds?: EmbedDescriptor[];
  renderMenuItem: (
@@ -124,7 +123,7 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
      if (item) {
        this.insertItem(item);
      } else {
-        this.props.onClose(true);
+        this.props.onClose();
      }
    }

@@ -183,9 +182,7 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
  insertItem = (item: any) => {
    switch (item.name) {
      case "image":
-        return this.triggerFilePick(
-          AttachmentValidation.imageContentTypes.join(", ")
-        );
+        return this.triggerFilePick(supportedImageMimeTypes.join(", "));
      case "attachment":
        return this.triggerFilePick("*");
      case "embed":
@@ -278,7 +275,7 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
  };

  handleFilePicked = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = getEventFiles(event);
+    const files = getDataTransferFiles(event);

    const {
      view,
@@ -427,13 +424,11 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
    const embedItems: EmbedDescriptor[] = [];

    for (const embed of embeds) {
-      if (embed.title) {
-        embedItems.push(
-          new EmbedDescriptor({
-            ...embed,
-            name: "embed",
-          })
-        );
+      if (embed.title && embed.icon) {
+        embedItems.push({
+          ...embed,
+          name: "embed",
+        });
      }
    }

@@ -21,7 +21,7 @@ const searcher = new FuzzySearch<{
  sort: true,
 });

-class EmojiMenu extends React.PureComponent<
+class EmojiMenu extends React.Component<
  Omit<
    Props<Emoji>,
    | "renderMenuItem"
@@ -11,7 +11,8 @@ import { setTextSelection } from "prosemirror-utils";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import styled from "styled-components";
-import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
+import isUrl from "@shared/editor/lib/isUrl";
+import { isInternalUrl } from "@shared/utils/urls";
 import Flex from "~/components/Flex";
 import { Dictionary } from "~/hooks/useDictionary";
 import { ToastOptions } from "~/types";
@@ -44,7 +45,7 @@ type Props = {
    href: string,
    event: React.MouseEvent<HTMLButtonElement>
  ) => void;
-  onShowToast: (message: string, options?: ToastOptions) => void;
+  onShowToast: (message: string, options: ToastOptions) => void;
  view: EditorView;
 };

@@ -70,7 +71,7 @@ class LinkEditor extends React.Component<Props, State> {
  };

  get href(): string {
-    return sanitizeUrl(this.props.mark?.attrs.href) ?? "";
+    return this.props.mark ? this.props.mark.attrs.href : "";
  }

  get suggestedLinkTitle(): string {
@@ -113,7 +114,17 @@ class LinkEditor extends React.Component<Props, State> {

    this.discardInputValue = true;
    const { from, to } = this.props;
-    href = sanitizeUrl(href) ?? "";
+
+    // 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}`;
+    }

    this.props.onSelectLink({ href, title, from, to });
  };
@@ -229,12 +240,7 @@ class LinkEditor extends React.Component<Props, State> {

  handleOpenLink = (event: React.MouseEvent<HTMLButtonElement>): void => {
    event.preventDefault();
-
-    try {
-      this.props.onClickLink(this.href, event);
-    } catch (err) {
-      this.props.onShowToast(this.props.dictionary.openLinkError);
-    }
+    this.props.onClickLink(this.href, event);
  };

  handleCreateLink = async (value: string) => {
@@ -42,7 +42,7 @@ type Props = {

 function isVisible(props: Props) {
  const { view } = props;
-  const { selection, doc } = view.state;
+  const { selection } = view.state;

  if (isMarkActive(view.state.schema.marks.link)(view.state)) {
    return true;
@@ -63,11 +63,6 @@ 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;
@@ -197,6 +192,7 @@ 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) {
@@ -211,6 +207,7 @@ 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
@@ -229,6 +226,15 @@ 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}
@@ -16,24 +16,19 @@ 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 EditorContainer from "@shared/editor/components/Styles";
-import { EmbedDescriptor } from "@shared/editor/embeds";
 import Extension, { CommandFactory } from "@shared/editor/lib/Extension";
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
-import getHeadings from "@shared/editor/lib/getHeadings";
-import getTasks from "@shared/editor/lib/getTasks";
+import headingToSlug from "@shared/editor/lib/headingToSlug";
 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 { EventType } from "@shared/editor/types";
-import { IntegrationType } from "@shared/types";
+import { EmbedDescriptor, EventType } from "@shared/editor/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";
@@ -41,6 +36,7 @@ import EmojiMenu from "./components/EmojiMenu";
 import { SearchResult } from "./components/LinkEditor";
 import LinkToolbar from "./components/LinkToolbar";
 import SelectionToolbar from "./components/SelectionToolbar";
+import EditorContainer from "./components/Styles";
 import WithTheme from "./components/WithTheme";

 export { default as Extension } from "@shared/editor/lib/Extension";
@@ -113,8 +109,6 @@ export type Props = {
  onShowToast: (message: string) => void;
  className?: string;
  style?: React.CSSProperties;
-
-  embedIntegrations?: Integration<IntegrationType.Embed>[];
 };

 type State = {
@@ -435,7 +429,7 @@ export class Editor extends React.PureComponent<
      state: this.createState(this.props.value),
      editable: () => !this.props.readOnly,
      nodeViews: this.nodeViews,
-      dispatchTransaction(transaction) {
+      dispatchTransaction: function (transaction) {
        // callback is bound to have the view instance as its this binding
        const { state, transactions } = this.state.applyTransaction(
          transaction
@@ -477,7 +471,7 @@ export class Editor extends React.PureComponent<
    try {
      const element = document.querySelector(hash);
      if (element) {
-        setTimeout(() => element.scrollIntoView({ behavior: "smooth" }), 0);
+        element.scrollIntoView({ behavior: "smooth" });
      }
    } catch (err) {
      // querySelector will throw an error if the hash begins with a number
@@ -559,14 +553,7 @@ export class Editor extends React.PureComponent<
    this.setState({ blockMenuOpen: true, blockMenuSearch: search });
  };

-  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();
-    }
+  private handleCloseBlockMenu = () => {
    if (!this.state.blockMenuOpen) {
      return;
    }
@@ -588,11 +575,34 @@ export class Editor extends React.PureComponent<
  };

  public getHeadings = () => {
-    return getHeadings(this.view.state.doc);
-  };
+    const headings: { title: string; level: number; id: string }[] = [];
+    const previouslySeen = {};

-  public getTasks = () => {
-    return getTasks(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 render() {
@@ -14,7 +14,6 @@ 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";
@@ -29,7 +28,6 @@ export default function formattingMenuItems(
  const { schema } = state;
  const isTable = isInTable(state);
  const isList = isInList(state);
-  const isCode = isInCode(state);
  const allowBlocks = !isTable && !isList;

  return [
@@ -49,21 +47,19 @@ 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 && !isCode,
+      visible: !isTemplate,
    },
    {
      name: "code_inline",
@@ -73,7 +69,7 @@ export default function formattingMenuItems(
    },
    {
      name: "separator",
-      visible: allowBlocks && !isCode,
+      visible: allowBlocks,
    },
    {
      name: "heading",
@@ -81,7 +77,7 @@ export default function formattingMenuItems(
      icon: Heading1Icon,
      active: isNodeActive(schema.nodes.heading, { level: 1 }),
      attrs: { level: 1 },
-      visible: allowBlocks && !isCode,
+      visible: allowBlocks,
    },
    {
      name: "heading",
@@ -89,7 +85,7 @@ export default function formattingMenuItems(
      icon: Heading2Icon,
      active: isNodeActive(schema.nodes.heading, { level: 2 }),
      attrs: { level: 2 },
-      visible: allowBlocks && !isCode,
+      visible: allowBlocks,
    },
    {
      name: "blockquote",
@@ -97,11 +93,11 @@ export default function formattingMenuItems(
      icon: BlockQuoteIcon,
      active: isNodeActive(schema.nodes.blockquote),
      attrs: { level: 2 },
-      visible: allowBlocks && !isCode,
+      visible: allowBlocks,
    },
    {
      name: "separator",
-      visible: (allowBlocks || isList) && !isCode,
+      visible: allowBlocks || isList,
    },
    {
      name: "checkbox_list",
@@ -109,25 +105,24 @@ export default function formattingMenuItems(
      icon: TodoListIcon,
      keywords: "checklist checkbox task",
      active: isNodeActive(schema.nodes.checkbox_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: allowBlocks || isList,
    },
    {
      name: "bullet_list",
      tooltip: dictionary.bulletList,
      icon: BulletedListIcon,
      active: isNodeActive(schema.nodes.bullet_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: allowBlocks || isList,
    },
    {
      name: "ordered_list",
      tooltip: dictionary.orderedList,
      icon: OrderedListIcon,
      active: isNodeActive(schema.nodes.ordered_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: allowBlocks || isList,
    },
    {
      name: "separator",
-      visible: !isCode,
    },
    {
      name: "link",
@@ -135,7 +130,6 @@ export default function formattingMenuItems(
      icon: LinkIcon,
      active: isMarkActive(schema.marks.link),
      attrs: { href: "" },
-      visible: !isCode,
    },
  ];
 }
@@ -9,14 +9,11 @@ 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";
@@ -28,12 +25,11 @@ 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 isCloudHosted from "~/utils/isCloudHosted";
+import isHosted from "~/utils/isHosted";
 import useCurrentTeam from "./useCurrentTeam";
 import usePolicy from "./usePolicy";

@@ -50,7 +46,6 @@ type SettingsPage =
  | "Shares"
  | "Import"
  | "Export"
-  | "Webhooks"
  | "Slack"
  | "Zapier";

@@ -69,7 +64,7 @@ type ConfigType = {

 const useAuthorizedSettingsConfig = () => {
  const team = useCurrentTeam();
-  const can = usePolicy(team);
+  const can = usePolicy(team.id);
  const { t } = useTranslation();

  const config: ConfigType = React.useMemo(
@@ -151,7 +146,7 @@ const useAuthorizedSettingsConfig = () => {
        name: t("Import"),
        path: "/settings/import",
        component: Import,
-        enabled: can.createImport,
+        enabled: can.manage,
        group: t("Team"),
        icon: NewDocumentIcon,
      },
@@ -159,32 +154,16 @@ const useAuthorizedSettingsConfig = () => {
        name: t("Export"),
        path: "/settings/export",
        component: Export,
-        enabled: can.createExport,
+        enabled: can.export,
        group: t("Team"),
        icon: DownloadIcon,
      },
-      // 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,
-      },
+      // Intergrations
      Slack: {
        name: "Slack",
        path: "/settings/integrations/slack",
        component: Slack,
-        enabled: can.update && (!!env.SLACK_CLIENT_ID || isCloudHosted),
+        enabled: can.update && (!!env.SLACK_KEY || isHosted),
        group: t("Integrations"),
        icon: SlackIcon,
      },
@@ -192,19 +171,12 @@ const useAuthorizedSettingsConfig = () => {
        name: "Zapier",
        path: "/settings/integrations/zapier",
        component: Zapier,
-        enabled: can.update && isCloudHosted,
+        enabled: can.update && isHosted,
        group: t("Integrations"),
        icon: ZapierIcon,
      },
    }),
-    [
-      can.createApiKey,
-      can.createWebhookSubscription,
-      can.createExport,
-      can.createImport,
-      can.update,
-      t,
-    ]
+    [can.createApiKey, can.export, can.manage, can.update, t]
  );

  const enabledConfigs = React.useMemo(
@@ -1,11 +1,11 @@
 import * as React from "react";

-export default function useDebouncedCallback<T>(
-  callback: (...params: T[]) => unknown,
+export default function useDebouncedCallback(
+  callback: (arg0: any) => unknown,
  wait: number
 ) {
  // track args & timeout handle between calls
-  const argsRef = React.useRef<T[]>();
+  const argsRef = React.useRef();
  const timeout = React.useRef<ReturnType<typeof setTimeout>>();

  function cleanup() {
@@ -16,11 +16,12 @@ export default function useDebouncedCallback<T>(

  // make sure our timeout gets cleared if consuming component gets unmounted
  React.useEffect(() => cleanup, []);
-  return function (...args: T[]) {
+  return function (...args: any) {
    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);
@@ -18,7 +18,6 @@ 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"),
@@ -53,7 +52,6 @@ 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")}…`,
@@ -71,8 +69,6 @@ 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"),
@@ -1,48 +0,0 @@
-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]
-  );
-}
@@ -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";

 /**
@@ -1,34 +1,12 @@
-import * as React from "react";
-import BaseModel from "~/models/BaseModel";
 import useStores from "./useStores";

 /**
- * 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.
+ * Quick access to retrieve the abilities of a policy for a given entity
 *
- * @param entity The model or model id
- * @returns The policy for the model
+ * @param entityId The entity id
+ * @returns The available abilities
 */
-export default function usePolicy(entity: string | BaseModel | undefined) {
+export default function usePolicy(entityId: string) {
  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);
 }
@@ -8,7 +8,7 @@ type Session = {
  teamId: string;
 };

-export function loadSessionsFromCookie(): Session[] {
+function loadSessionsFromCookie(): Session[] {
  const sessions = JSON.parse(getCookie("sessions") || "{}");
  return Object.keys(sessions).map((teamId) => ({
    teamId,
@@ -15,10 +15,9 @@ 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();
@@ -76,20 +75,18 @@ if (element) {
          <Theme>
            <ErrorBoundary>
              <KBarProvider actions={[]} options={commandBarOptions}>
-                <LazyPolyfill>
-                  <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>
              </KBarProvider>
            </ErrorBoundary>
          </Theme>
@@ -16,15 +16,16 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
-import { getEventFiles } from "@shared/utils/files";
+import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 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";
@@ -53,43 +54,27 @@ 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 handlePermissions = React.useCallback(() => {
-    dialogs.openModal({
-      title: t("Collection permissions"),
-      content: <CollectionPermissions collection={collection} />,
-    });
-  }, [collection, dialogs, t]);
+  const handleOpen = React.useCallback(() => {
+    setRenderModals(true);

-  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]);
+    if (onOpen) {
+      onOpen();
+    }
+  }, [onOpen]);

  const handleNewDocument = React.useCallback(
    (ev: React.SyntheticEvent) => {
@@ -117,8 +102,8 @@ function CollectionMenu({
  );

  const handleFilePicked = React.useCallback(
-    async (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const files = getEventFiles(ev);
+    async (ev: React.FormEvent<HTMLInputElement>) => {
+      const files = getDataTransferFiles(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
@@ -160,7 +145,7 @@ function CollectionMenu({
      isCentered: true,
      title: t("Delete collection"),
      content: (
-        <CollectionDeleteDialog
+        <CollectionDelete
          collection={collection}
          onSubmit={dialogs.closeAllModals}
        />
@@ -187,8 +172,8 @@ function CollectionMenu({
  );

  const alphabeticalSort = collection.sort.field === "title";
-  const can = usePolicy(collection);
-  const canUserInTeam = usePolicy(team);
+  const can = usePolicy(collection.id);
+  const canUserInTeam = usePolicy(team.id);
  const items: MenuItem[] = React.useMemo(
    () => [
      {
@@ -253,21 +238,21 @@ function CollectionMenu({
        type: "button",
        title: `${t("Edit")}…`,
        visible: can.update,
-        onClick: handleEdit,
+        onClick: () => setShowCollectionEdit(true),
        icon: <EditIcon />,
      },
      {
        type: "button",
        title: `${t("Permissions")}…`,
        visible: can.update,
-        onClick: handlePermissions,
+        onClick: () => setShowCollectionPermissions(true),
        icon: <PadlockIcon />,
      },
      {
        type: "button",
        title: `${t("Export")}…`,
-        visible: !!(collection && canUserInTeam.createExport),
-        onClick: handleExport,
+        visible: !!(collection && canUserInTeam.export),
+        onClick: () => setShowCollectionExport(true),
        icon: <ExportIcon />,
      },
      {
@@ -284,22 +269,19 @@ 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,
-      handleChangeSort,
+      collection,
+      canUserInTeam.export,
    ]
  );

@@ -329,12 +311,43 @@ function CollectionMenu({
      )}
      <ContextMenu
        {...menu}
-        onOpen={onOpen}
+        onOpen={handleOpen}
        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>
+        </>
+      )}
    </>
  );
 }
@@ -1,11 +1,20 @@
 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";
@@ -14,31 +23,21 @@ import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { getEventFiles } from "@shared/utils/files";
+import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 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,
-  subscribeDocument,
-  unsubscribeDocument,
-  moveDocument,
-  deleteDocument,
-  permanentlyDeleteDocument,
-  downloadDocument,
-  importDocument,
-  starDocument,
-  unstarDocument,
-  duplicateDocument,
-  archiveDocument,
-} from "~/actions/definitions/documents";
+import { pinDocument, createTemplate } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useMobile from "~/hooks/useMobile";
@@ -95,8 +94,39 @@ 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,
@@ -124,8 +154,26 @@ 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);
+  const can = usePolicy(document.id);
  const canViewHistory = can.read && !can.restore;
  const restoreItems = React.useMemo(
    () => [
@@ -157,9 +205,22 @@ 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.ChangeEvent<HTMLInputElement>) => {
-      const files = getEventFiles(ev);
+    async (ev: React.FormEvent<HTMLInputElement>) => {
+      const files = getDataTransferFiles(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
@@ -219,7 +280,7 @@ function DocumentMenu({
      <ContextMenu
        {...menu}
        aria-label={t("Document options")}
-        onOpen={onOpen}
+        onOpen={handleOpen}
        onClose={onClose}
      >
        <Template
@@ -252,10 +313,22 @@ function DocumentMenu({
                ...restoreItems,
              ],
            },
-            actionToMenuItem(starDocument, context),
-            actionToMenuItem(unstarDocument, context),
-            actionToMenuItem(subscribeDocument, context),
-            actionToMenuItem(unsubscribeDocument, context),
+            {
+              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),
            {
              type: "separator",
            },
@@ -275,9 +348,22 @@ function DocumentMenu({
              visible: !!can.createChildDocument,
              icon: <NewDocumentIcon />,
            },
-            actionToMenuItem(importDocument, context),
+            {
+              type: "button",
+              title: t("Import document"),
+              visible: can.createChildDocument,
+              onClick: handleImportDocument,
+              icon: <ImportIcon />,
+            },
+            // Templatize document
            actionToMenuItem(createTemplate, context),
-            actionToMenuItem(duplicateDocument, context),
+            {
+              type: "button",
+              title: t("Duplicate"),
+              onClick: handleDuplicate,
+              visible: !!can.update,
+              icon: <DuplicateIcon />,
+            },
            {
              type: "button",
              title: t("Unpublish"),
@@ -285,18 +371,39 @@ 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",
-            },
-            actionToMenuItem(downloadDocument, context),
            {
              type: "route",
              title: t("History"),
@@ -306,6 +413,13 @@ function DocumentMenu({
              visible: canViewHistory,
              icon: <HistoryIcon />,
            },
+            {
+              type: "button",
+              title: t("Download"),
+              onClick: document.download,
+              visible: !!can.download,
+              icon: <DownloadIcon />,
+            },
            {
              type: "button",
              title: t("Print"),
@@ -333,7 +447,7 @@ function DocumentMenu({
                />
              </Style>
            )}
-            {showDisplayOptions && !isMobile && can.update && (
+            {showDisplayOptions && !isMobile && (
              <Style>
                <ToggleMenuItem
                  width={26}
@@ -350,6 +464,54 @@ 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>
+          )}
+        </>
+      )}
    </>
  );
 }
@@ -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);
+  const can = usePolicy(group.id);

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

  const items = React.useMemo(
    () =>
@@ -2,10 +2,11 @@ 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";
@@ -31,11 +32,32 @@ 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(() => {
-    return [navigateToSettings, separator(), changeTeam, logout];
-  }, [team.id, sessions]);
+    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 (
    <>
@@ -47,4 +69,10 @@ const OrganizationMenu: React.FC = ({ children }) => {
  );
 };

+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+`;
+
 export default observer(OrganizationMenu);
@@ -108,7 +108,9 @@ function UserMenu({ user }: Props) {
  const handleRevoke = React.useCallback(
    (ev: React.SyntheticEvent) => {
      ev.preventDefault();
-      users.delete(user);
+      users.delete(user, {
+        confirmation: true,
+      });
    },
    [users, user]
  );
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Saumya Pandey	c584096d59	Merge branch 'main' of https://github.com/outline/outline into feat/undo-document-move	2022-04-30 13:05:09 +05:30
Saumya Pandey	5a3d55bc58	fix: delete moveWithUndo	2022-03-05 23:10:08 +05:30
Tom Moor	eaff7d933e	Merge branch 'main' into feat/undo-document-move	2022-03-04 18:29:50 -08:00
Saumya Pandey	21b378b80d	style action in toast	2022-02-12 10:59:50 +05:30
Saumya Pandey	c143036374	remove async	2022-02-12 10:21:23 +05:30
Saumya Pandey	a773516e01	lighten up DragObject	2022-02-12 10:18:51 +05:30
Saumya Pandey	c7045b0c00	create moveWithUndo inside document model	2022-02-12 10:02:24 +05:30
Saumya Pandey	53d0cdd151	fix: remove undo state from server	2022-02-10 01:24:56 +05:30
Saumya Pandey	a22e50cd3d	fix: move to client side	2022-02-10 00:42:27 +05:30
Saumya Pandey	00f65ce29d	fix: undo handling for all the documents.move op	2022-02-07 23:33:03 +05:30
Saumya Pandey	da8936e9d8	fix: return undo state in response	2022-02-06 14:30:16 +05:30