Clarify invite

* Removing user.documentIds usage #1

* refactor

* Refactor all search queries to orm

* Remove user.documentIds()

* Filter deleted documents

* Remove unneccessary clause, add test for draft with permission

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 defaults: &defaults
   working_directory: ~/outline
   docker:
-    - image: cimg/node:18.12
+    - image: cimg/node:20.10
     - image: cimg/redis:5.0
     - image: cimg/postgres:14.2
       environment:
@@ -36,12 +36,12 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: install-deps
           command: yarn install --frozen-lockfile
       - save_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
           paths:
             - ./node_modules
   lint:
@@ -49,7 +49,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: lint
           command: yarn lint
@@ -58,7 +58,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: typescript
           command: yarn tsc
@@ -67,7 +67,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: test
           command: yarn test:app
@@ -76,22 +76,25 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: test
           command: yarn test:shared
   test-server:
     <<: *defaults
+    parallelism: 3
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: migrate
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: test
-          command: yarn test:server --forceExit
+          command: |
+            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
+            yarn test --maxWorkers=2 $TESTFILES
   bundle-size:
     <<: *defaults
     environment:
@@ -99,7 +102,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: build-vite
           command: yarn vite:build
@@ -142,7 +145,12 @@ jobs:
           command: docker push $BASE_IMAGE_NAME:latest
       - run:
           name: Build and push Docker image
-          command: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+          command: |
+            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
+              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            else
+              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            fi
 
 workflows:
   version: 2
@@ -166,9 +174,8 @@ workflows:
             - build
       - bundle-size:
           requires:
-            - test-app
-            - test-shared
-            - test-server
+            - build
+            - types
 
   build-docker:
     jobs:

.dockerignore

@@ -13,5 +13,4 @@ app.json
 crowdin.yml
 build
 docker-compose.yml
-fakes3
 node_modules

.env.sample

@@ -30,7 +30,7 @@ REDIS_URL=redis://localhost:6379
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
-URL=http://localhost:3000
+URL=https://app.outline.dev:3000
 PORT=3000
 
 # See [documentation](docs/SERVICES.md) on running a separate collaboration
@@ -51,10 +51,20 @@ AWS_REGION=xx-xxxx-x
 AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
-AWS_S3_UPLOAD_MAX_SIZE=26214400
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private
 
+# Specify what storage system to use. Possible value is one of "s3" or "local".
+# For "local", the avatar images and document attachments will be saved on local disk. 
+FILE_STORAGE=local
+
+# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
+# which all attachments/images go. Make sure that the process has permissions to create
+# this path and also to write files to it.
+FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
+
+# Maximum allowed size for the uploaded attachment.
+FILE_STORAGE_UPLOAD_MAX_SIZE=26214400
 
 # –––––––––––––– AUTHENTICATION ––––––––––––––
 
@@ -183,5 +193,10 @@ RATE_LIMITER_REQUESTS=1000
 RATE_LIMITER_DURATION_WINDOW=60
 
 # Iframely API config
-IFRAMELY_URL=
-IFRAMELY_API_KEY=
+# IFRAMELY_URL=
+# IFRAMELY_API_KEY=
+
+# Enable unsafe-inline in script-src CSP directive
+# Setting it to true allows React dev tools add-on in
+# Firefox to successfully detect the project
+DEVELOPMENT_UNSAFE_INLINE_CSP=false

.eslintrc

@@ -21,7 +21,7 @@
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "import"
+    "eslint-plugin-lodash"
   ],
   "rules": {
     "eqeqeq": 2,
@@ -37,6 +37,7 @@
       "component": true,
       "html": true
     }],
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-floating-promises": "error",
     "@typescript-eslint/await-thenable": "error",
     "@typescript-eslint/no-misused-promises": [
@@ -55,6 +56,7 @@
     ],
     "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
     "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "lodash/import-scope": ["warn", "method"],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,

.gitignore

@@ -7,7 +7,7 @@ node_modules/*
 npm-debug.log
 stats.json
 .DS_Store
-fakes3/*
+data/*
 .idea
 *.pem
 *.key

.jestconfig.json

@@ -1,5 +1,6 @@
 {
   "workerIdleMemoryLimit": "0.75",
+  "maxWorkers": "50%",
   "projects": [
     {
       "displayName": "server",
@@ -8,13 +9,11 @@
         "^@server/(.*)$": "<rootDir>/server/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1"
       },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js",
-        "<rootDir>/server/test/env.ts"
-      ],
+      "setupFiles": ["<rootDir>/__mocks__/console.js", "<rootDir>/server/test/env.ts"],
       "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "testEnvironment": "node",
-      "runner": "@getoutline/jest-runner-serial"
+      "globalSetup": "<rootDir>/server/test/globalSetup.js",
+      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
+      "testEnvironment": "node"
     },
     {
       "displayName": "app",

Dockerfile

@@ -5,7 +5,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 
 RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
 
@@ -24,7 +24,16 @@ COPY --from=base $APP_PATH/package.json ./package.json
 
 RUN addgroup -g 1001 -S nodejs && \
   adduser -S nodejs -u 1001 && \
-  chown -R nodejs:nodejs $APP_PATH/build
+  chown -R nodejs:nodejs $APP_PATH/build && \
+  mkdir -p /var/lib/outline && \
+	chown -R nodejs:nodejs /var/lib/outline
+
+ENV FILE_STORAGE_LOCAL_ROOT_DIR /var/lib/outline/data
+RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
+  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
+  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
+
+VOLUME /var/lib/outline/data
 
 USER nodejs
 

Dockerfile.base

@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:18-alpine AS deps
+FROM node:20-alpine AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.64.0
+Licensed Work:        Outline 0.71.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:          2027-08-18
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -1,5 +1,6 @@
 up:
-	docker-compose up -d redis postgres s3
+	docker-compose up -d redis postgres
+	yarn install-local-ssl
 	yarn install --pure-lockfile
 	yarn dev:watch
 
@@ -7,17 +8,17 @@ build:
 	docker-compose build --pull outline
 
 test:
-	docker-compose up -d redis postgres s3
+	docker-compose up -d redis postgres
 	yarn sequelize db:drop --env=test
 	yarn sequelize db:create --env=test
-	yarn sequelize db:migrate --env=test
+	NODE_ENV=test yarn sequelize db:migrate --env=test
 	yarn test
 
 watch:
-	docker-compose up -d redis postgres s3
+	docker-compose up -d redis postgres
 	yarn sequelize db:drop --env=test
 	yarn sequelize db:create --env=test
-	yarn sequelize db:migrate --env=test
+	NODE_ENV=test yarn sequelize db:migrate --env=test
 	yarn test:watch
 
 destroy:

README.md

@@ -96,6 +96,10 @@ Or to run migrations on test database:
 yarn sequelize db:migrate --env test
 ```
 
-## License
+# Activity
+
+![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
+
+# License
 
 Outline is [BSL 1.1 licensed](LICENSE).

app.json

@@ -128,11 +128,6 @@
       "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
       "required": false
     },
-    "AWS_S3_UPLOAD_MAX_SIZE": {
-      "description": "Maximum file upload size in bytes",
-      "value": "26214400",
-      "required": false
-    },
     "AWS_S3_FORCE_PATH_STYLE": {
       "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
       "value": "true",
@@ -148,6 +143,11 @@
       "description": "S3 canned ACL for document attachments",
       "required": false
     },
+    "FILE_STORAGE_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
     "SMTP_HOST": {
       "description": "smtp.example.com (optional)",
       "required": false

app/.eslintrc

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

app/actions/definitions/developer.tsx

@@ -1,6 +1,7 @@
-import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import copy from "copy-to-clipboard";
+import { CopyIcon, ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
 import * as React from "react";
-import stores from "~/stores";
+import { toast } from "sonner";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
 import env from "~/env";
@@ -8,6 +9,71 @@ import { client } from "~/utils/ApiClient";
 import Logger from "~/utils/Logger";
 import { deleteAllDatabases } from "~/utils/developer";
 
+export const copyId = createAction({
+  name: ({ t }) => t("Copy ID"),
+  icon: <CopyIcon />,
+  keywords: "uuid",
+  section: DeveloperSection,
+  children: ({
+    currentTeamId,
+    currentUserId,
+    activeCollectionId,
+    activeDocumentId,
+  }) => {
+    function copyAndToast(text: string | null | undefined) {
+      if (text) {
+        copy(text);
+        toast.success("Copied to clipboard");
+      }
+    }
+
+    return [
+      createAction({
+        name: "Copy User ID",
+        section: DeveloperSection,
+        icon: <CopyIcon />,
+        visible: () => !!currentUserId,
+        perform: () => copyAndToast(currentUserId),
+      }),
+      createAction({
+        name: "Copy Team ID",
+        section: DeveloperSection,
+        icon: <CopyIcon />,
+        visible: () => !!currentTeamId,
+        perform: () => copyAndToast(currentTeamId),
+      }),
+      createAction({
+        name: "Copy Collection ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!activeCollectionId,
+        perform: () => copyAndToast(activeCollectionId),
+      }),
+      createAction({
+        name: "Copy Document ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!activeDocumentId,
+        perform: () => copyAndToast(activeDocumentId),
+      }),
+      createAction({
+        name: "Copy Team ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!currentTeamId,
+        perform: () => copyAndToast(currentTeamId),
+      }),
+      createAction({
+        name: "Copy Release ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!env.RELEASE,
+        perform: () => copyAndToast(env.RELEASE),
+      }),
+    ];
+  },
+});
+
 export const clearIndexedDB = createAction({
   name: ({ t }) => t("Delete IndexedDB cache"),
   icon: <TrashIcon />,
@@ -15,7 +81,7 @@ export const clearIndexedDB = createAction({
   section: DeveloperSection,
   perform: async ({ t }) => {
     await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
+    toast.message(t("IndexedDB cache deleted"));
   },
 });
 
@@ -29,20 +95,31 @@ export const createTestUsers = createAction({
 
     try {
       await client.post("/developer.create_test_users", { count });
-      stores.toasts.showToast(`${count} test users created`);
+      toast.message(`${count} test users created`);
     } catch (err) {
-      stores.toasts.showToast(err.message, { type: "error" });
+      toast.error(err.message);
     }
   },
 });
 
+export const createToast = createAction({
+  name: "Create toast",
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: async () => {
+    toast.message("Hello world", {
+      duration: 30000,
+    });
+  },
+});
+
 export const toggleDebugLogging = createAction({
   name: ({ t }) => t("Toggle debug logging"),
   icon: <ToolsIcon />,
   section: DeveloperSection,
   perform: async ({ t }) => {
     Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    stores.toasts.showToast(
+    toast.message(
       Logger.debugLoggingEnabled
         ? t("Debug logging enabled")
         : t("Debug logging disabled")
@@ -56,7 +133,13 @@ export const developer = createAction({
   icon: <ToolsIcon />,
   iconInContextMenu: false,
   section: DeveloperSection,
-  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
+  children: [
+    copyId,
+    clearIndexedDB,
+    toggleDebugLogging,
+    createToast,
+    createTestUsers,
+  ],
 });
 
 export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -1,3 +1,4 @@
+import copy from "copy-to-clipboard";
 import invariant from "invariant";
 import {
   DownloadIcon,
@@ -19,19 +20,25 @@ import {
   ArchiveIcon,
   ShuffleIcon,
   HistoryIcon,
-  LightBulbIcon,
+  GraphIcon,
   UnpublishIcon,
   PublishIcon,
   CommentIcon,
+  GlobeIcon,
+  CopyIcon,
 } from "outline-icons";
 import * as React from "react";
+import { toast } from "sonner";
 import { ExportContentType, TeamPreference } from "@shared/types";
+import MarkdownHelper from "@shared/utils/MarkdownHelper";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import DuplicateDialog from "~/components/DuplicateDialog";
+import SharePopover from "~/components/Sharing";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
 import env from "~/env";
@@ -42,6 +49,8 @@ import {
   homePath,
   newDocumentPath,
   searchPath,
+  documentPath,
+  urlify,
 } from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
@@ -86,6 +95,48 @@ export const createDocument = createAction({
     }),
 });
 
+export const createDocumentFromTemplate = createAction({
+  name: ({ t }) => t("New from template"),
+  analyticsName: "New document",
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    !!stores.documents.get(activeDocumentId)?.template &&
+    stores.policies.abilities(currentTeamId).createDocument,
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
+      {
+        starred: inStarredSection,
+      }
+    ),
+});
+
+export const createNestedDocument = createAction({
+  name: ({ t }) => t("New nested document"),
+  analyticsName: "New document",
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    stores.policies.abilities(currentTeamId).createDocument &&
+    stores.policies.abilities(activeDocumentId).createChildDocument,
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, {
+        parentDocumentId: activeDocumentId,
+      }),
+      {
+        starred: inStarredSection,
+      }
+    ),
+});
+
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
@@ -148,7 +199,7 @@ export const publishDocument = createAction({
     }
     const document = stores.documents.get(activeDocumentId);
     return (
-      !!document?.isDraft && stores.policies.abilities(activeDocumentId).update
+      !!document?.isDraft && stores.policies.abilities(activeDocumentId).publish
     );
   },
   perform: async ({ activeDocumentId, stores, t }) => {
@@ -165,9 +216,11 @@ export const publishDocument = createAction({
       await document.save(undefined, {
         publish: true,
       });
-      stores.toasts.showToast(t("Document published"), {
-        type: "success",
-      });
+      toast.success(
+        t("Published {{ documentName }}", {
+          documentName: document.noun,
+        })
+      );
     } else if (document) {
       stores.dialogs.openModal({
         title: t("Publish document"),
@@ -195,12 +248,21 @@ export const unpublishDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
 
-    await document?.unpublish();
+    try {
+      await document.unpublish();
 
-    stores.toasts.showToast(t("Document unpublished"), {
-      type: "success",
-    });
+      toast.success(
+        t("Unpublished {{ documentName }}", {
+          documentName: document.noun,
+        })
+      );
+    } catch (err) {
+      toast.error(err.message);
+    }
   },
 });
 
@@ -230,9 +292,7 @@ export const subscribeDocument = createAction({
 
     await document?.subscribe();
 
-    stores.toasts.showToast(t("Subscribed to document notifications"), {
-      type: "success",
-    });
+    toast.success(t("Subscribed to document notifications"));
   },
 });
 
@@ -262,8 +322,39 @@ export const unsubscribeDocument = createAction({
 
     await document?.unsubscribe(currentUserId);
 
-    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
-      type: "success",
+    toast.success(t("Unsubscribed from document notifications"));
+  },
+});
+
+export const shareDocument = createAction({
+  name: ({ t }) => t("Share"),
+  analyticsName: "Share document",
+  section: DocumentSection,
+  icon: <GlobeIcon />,
+  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
+    if (!activeDocumentId || !currentUserId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    const share = stores.shares.getByDocumentId(activeDocumentId);
+    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Share this document"),
+      isCentered: true,
+      content: (
+        <SharePopover
+          document={document}
+          share={share}
+          sharedParent={sharedParent}
+          onRequestClose={stores.dialogs.closeAllModals}
+          visible
+        />
+      ),
     });
   },
 });
@@ -303,15 +394,11 @@ export const downloadDocumentAsPDF = createAction({
       return;
     }
 
-    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
-      type: "loading",
-      timeout: 30 * 1000,
-    });
-
+    const id = toast.loading(`${t("Exporting")}…`);
     const document = stores.documents.get(activeDocumentId);
-    document
+    return document
       ?.download(ExportContentType.Pdf)
-      .finally(() => id && stores.toasts.hideToast(id));
+      .finally(() => id && toast.dismiss(id));
   },
 });
 
@@ -348,6 +435,47 @@ export const downloadDocument = createAction({
   ],
 });
 
+export const copyDocumentAsMarkdown = createAction({
+  name: ({ t }) => t("Copy as Markdown"),
+  section: DocumentSection,
+  keywords: "clipboard",
+  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  perform: ({ stores, activeDocumentId, t }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (document) {
+      copy(MarkdownHelper.toMarkdown(document));
+      toast.success(t("Markdown copied to clipboard"));
+    }
+  },
+});
+
+export const copyDocumentLink = createAction({
+  name: ({ t }) => t("Copy link"),
+  section: DocumentSection,
+  keywords: "clipboard",
+  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  perform: ({ stores, activeDocumentId, t }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (document) {
+      copy(urlify(documentPath(document)));
+      toast.success(t("Link copied to clipboard"));
+    }
+  },
+});
+
+export const copyDocument = createAction({
+  name: ({ t }) => t("Copy"),
+  analyticsName: "Copy document",
+  section: DocumentSection,
+  icon: <CopyIcon />,
+  keywords: "clipboard",
+  children: [copyDocumentLink, copyDocumentAsMarkdown],
+});
+
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
@@ -356,7 +484,7 @@ export const duplicateDocument = createAction({
   icon: <DuplicateIcon />,
   keywords: "copy",
   visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).duplicate,
   perform: async ({ activeDocumentId, t, stores }) => {
     if (!activeDocumentId) {
       return;
@@ -364,11 +492,19 @@ export const duplicateDocument = createAction({
 
     const document = stores.documents.get(activeDocumentId);
     invariant(document, "Document must exist");
-    const duped = await document.duplicate();
-    // when duplicating, go straight to the duplicated document content
-    history.push(duped.url);
-    stores.toasts.showToast(t("Document duplicated"), {
-      type: "success",
+
+    stores.dialogs.openModal({
+      title: t("Copy document"),
+      isCentered: true,
+      content: (
+        <DuplicateDialog
+          document={document}
+          onSubmit={(response) => {
+            stores.dialogs.closeAllModals();
+            history.push(documentPath(response[0]));
+          }}
+        />
+      ),
     });
   },
 });
@@ -414,12 +550,10 @@ export const pinDocumentToCollection = createAction({
       const collection = stores.collections.get(activeCollectionId);
 
       if (!collection || !location.pathname.startsWith(collection?.url)) {
-        stores.toasts.showToast(t("Pinned to collection"));
+        toast.success(t("Pinned to collection"));
       }
     } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     }
   },
 });
@@ -456,12 +590,10 @@ export const pinDocumentToHome = createAction({
       await document?.pin();
 
       if (location.pathname !== homePath()) {
-        stores.toasts.showToast(t("Pinned to team home"));
+        toast.success(t("Pinned to home"));
       }
     } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     }
   },
 });
@@ -504,7 +636,7 @@ export const importDocument = createAction({
     return false;
   },
   perform: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const { documents, toasts } = stores;
+    const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
@@ -524,9 +656,7 @@ export const importDocument = createAction({
         );
         history.push(document.url);
       } catch (err) {
-        toasts.showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
         throw err;
       }
     };
@@ -647,15 +777,13 @@ export const archiveDocument = createAction({
       }
 
       await document.archive();
-      stores.toasts.showToast(t("Document archived"), {
-        type: "success",
-      });
+      toast.success(t("Document archived"));
     }
   },
 });
 
 export const deleteDocument = createAction({
-  name: ({ t }) => t("Delete"),
+  name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete document",
   section: DocumentSection,
   icon: <TrashIcon />,
@@ -733,8 +861,7 @@ export const openDocumentComments = createAction({
     const can = stores.policies.abilities(activeDocumentId ?? "");
     return (
       !!activeDocumentId &&
-      can.read &&
-      !can.restore &&
+      can.comment &&
       !!stores.auth.team?.getPreference(TeamPreference.Commenting)
     );
   },
@@ -772,10 +899,19 @@ export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
   section: DocumentSection,
-  icon: <LightBulbIcon />,
+  icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
-    return !!activeDocumentId && can.read;
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+
+    return (
+      !!activeDocumentId &&
+      can.read &&
+      !document?.isTemplate &&
+      !document?.isDeleted
+    );
   },
   perform: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -797,6 +933,8 @@ export const rootDocumentActions = [
   deleteDocument,
   importDocument,
   downloadDocument,
+  copyDocumentLink,
+  copyDocumentAsMarkdown,
   starDocument,
   unstarDocument,
   publishDocument,
@@ -813,4 +951,5 @@ export const rootDocumentActions = [
   openDocumentComments,
   openDocumentHistory,
   openDocumentInsights,
+  shareDocument,
 ];

app/actions/definitions/navigation.tsx

@@ -6,14 +6,15 @@ import {
   EditIcon,
   OpenIcon,
   SettingsIcon,
-  ShapesIcon,
   KeyboardIcon,
   EmailIcon,
   LogoutIcon,
   ProfileIcon,
   BrowserIcon,
+  ShapesIcon,
 } from "outline-icons";
 import * as React from "react";
+import { isMac } from "@shared/utils/browser";
 import {
   developersUrl,
   changelogUrl,
@@ -26,14 +27,12 @@ import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
 import Desktop from "~/utils/Desktop";
-import { isMac } from "~/utils/browser";
 import history from "~/utils/history";
 import isCloudHosted from "~/utils/isCloudHosted";
 import {
   homePath,
   searchPath,
   draftsPath,
-  templatesPath,
   archivePath,
   trashPath,
   settingsPath,
@@ -67,15 +66,6 @@ export const navigateToDrafts = createAction({
   visible: ({ location }) => location.pathname !== draftsPath(),
 });
 
-export const navigateToTemplates = createAction({
-  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to templates",
-  section: NavigationSection,
-  icon: <ShapesIcon />,
-  perform: () => history.push(templatesPath()),
-  visible: ({ location }) => location.pathname !== templatesPath(),
-});
-
 export const navigateToArchive = createAction({
   name: ({ t }) => t("Archive"),
   analyticsName: "Navigate to archive",
@@ -103,7 +93,7 @@ export const navigateToSettings = createAction({
   icon: <SettingsIcon />,
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
+  perform: () => history.push(settingsPath()),
 });
 
 export const navigateToProfileSettings = createAction({
@@ -115,6 +105,15 @@ export const navigateToProfileSettings = createAction({
   perform: () => history.push(settingsPath()),
 });
 
+export const navigateToTemplateSettings = createAction({
+  name: ({ t }) => t("Templates"),
+  analyticsName: "Navigate to template settings",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <ShapesIcon />,
+  perform: () => history.push(settingsPath("templates")),
+});
+
 export const navigateToNotificationSettings = createAction({
   name: ({ t }) => t("Notifications"),
   analyticsName: "Navigate to notification settings",
@@ -216,7 +215,6 @@ export const logout = createAction({
 export const rootNavigationActions = [
   navigateToHome,
   navigateToDrafts,
-  navigateToTemplates,
   navigateToArchive,
   navigateToTrash,
   downloadApp,

app/actions/definitions/revisions.tsx

@@ -2,6 +2,7 @@ import copy from "copy-to-clipboard";
 import { LinkIcon, RestoreIcon } from "outline-icons";
 import * as React from "react";
 import { matchPath } from "react-router-dom";
+import { toast } from "sonner";
 import stores from "~/stores";
 import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
@@ -68,9 +69,7 @@ export const copyLinkToRevision = createAction({
     copy(url, {
       format: "text/plain",
       onCopy: () => {
-        stores.toasts.showToast(t("Link copied"), {
-          type: "info",
-        });
+        toast.message(t("Link copied"));
       },
     });
   },

app/actions/index.ts

@@ -1,5 +1,6 @@
-import { flattenDeep } from "lodash";
+import flattenDeep from "lodash/flattenDeep";
 import * as React from "react";
+import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
@@ -77,9 +78,7 @@ export function actionToMenuItem(
       try {
         action.perform?.(context);
       } catch (err) {
-        context.stores.toasts.showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       }
     },
     selected: action.selected?.(context),
@@ -117,6 +116,8 @@ export function actionToKBar(
       icon: resolvedIcon,
       perform: action.perform ? () => action.perform?.(context) : undefined,
     },
+  ].concat(
     // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-  ].concat(children.map((child) => ({ ...child, parent: action.id })));
+    children.map((child) => ({ ...child, parent: child.parent ?? action.id }))
+  );
 }

app/components/Analytics.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-rest-params */
 /* global ga */
-import { escape } from "lodash";
+import escape from "lodash/escape";
 import * as React from "react";
 import { IntegrationService } from "@shared/types";
 import env from "~/env";

app/components/AuthLogo/SlackLogo.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 34 34"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <g stroke="none" strokeWidth="1" fillRule="evenodd">
-        <g transform="translate(0.000000, 17.822581)">
-          <path d="M7.23870968,3.61935484 C7.23870968,5.56612903 5.6483871,7.15645161 3.7016129,7.15645161 C1.75483871,7.15645161 0.164516129,5.56612903 0.164516129,3.61935484 C0.164516129,1.67258065 1.75483871,0.0822580645 3.7016129,0.0822580645 L7.23870968,0.0822580645 L7.23870968,3.61935484 Z" />
-          <path d="M9.02096774,3.61935484 C9.02096774,1.67258065 10.6112903,0.0822580645 12.5580645,0.0822580645 C14.5048387,0.0822580645 16.0951613,1.67258065 16.0951613,3.61935484 L16.0951613,12.4758065 C16.0951613,14.4225806 14.5048387,16.0129032 12.5580645,16.0129032 C10.6112903,16.0129032 9.02096774,14.4225806 9.02096774,12.4758065 C9.02096774,12.4758065 9.02096774,3.61935484 9.02096774,3.61935484 Z" />
-        </g>
-        <g>
-          <path d="M12.5580645,7.23870968 C10.6112903,7.23870968 9.02096774,5.6483871 9.02096774,3.7016129 C9.02096774,1.75483871 10.6112903,0.164516129 12.5580645,0.164516129 C14.5048387,0.164516129 16.0951613,1.75483871 16.0951613,3.7016129 L16.0951613,7.23870968 L12.5580645,7.23870968 Z" />
-          <path d="M12.5580645,9.02096774 C14.5048387,9.02096774 16.0951613,10.6112903 16.0951613,12.5580645 C16.0951613,14.5048387 14.5048387,16.0951613 12.5580645,16.0951613 L3.7016129,16.0951613 C1.75483871,16.0951613 0.164516129,14.5048387 0.164516129,12.5580645 C0.164516129,10.6112903 1.75483871,9.02096774 3.7016129,9.02096774 C3.7016129,9.02096774 12.5580645,9.02096774 12.5580645,9.02096774 Z" />
-        </g>
-        <g transform="translate(17.822581, 0.000000)">
-          <path d="M8.93870968,12.5580645 C8.93870968,10.6112903 10.5290323,9.02096774 12.4758065,9.02096774 C14.4225806,9.02096774 16.0129032,10.6112903 16.0129032,12.5580645 C16.0129032,14.5048387 14.4225806,16.0951613 12.4758065,16.0951613 L8.93870968,16.0951613 L8.93870968,12.5580645 Z" />
-          <path d="M7.15645161,12.5580645 C7.15645161,14.5048387 5.56612903,16.0951613 3.61935484,16.0951613 C1.67258065,16.0951613 0.0822580645,14.5048387 0.0822580645,12.5580645 L0.0822580645,3.7016129 C0.0822580645,1.75483871 1.67258065,0.164516129 3.61935484,0.164516129 C5.56612903,0.164516129 7.15645161,1.75483871 7.15645161,3.7016129 L7.15645161,12.5580645 Z" />
-        </g>
-        <g transform="translate(17.822581, 17.822581)">
-          <path d="M3.61935484,8.93870968 C5.56612903,8.93870968 7.15645161,10.5290323 7.15645161,12.4758065 C7.15645161,14.4225806 5.56612903,16.0129032 3.61935484,16.0129032 C1.67258065,16.0129032 0.0822580645,14.4225806 0.0822580645,12.4758065 L0.0822580645,8.93870968 L3.61935484,8.93870968 Z" />
-          <path d="M3.61935484,7.15645161 C1.67258065,7.15645161 0.0822580645,5.56612903 0.0822580645,3.61935484 C0.0822580645,1.67258065 1.67258065,0.0822580645 3.61935484,0.0822580645 L12.4758065,0.0822580645 C14.4225806,0.0822580645 16.0129032,1.67258065 16.0129032,3.61935484 C16.0129032,5.56612903 14.4225806,7.15645161 12.4758065,7.15645161 L3.61935484,7.15645161 Z" />
-        </g>
-      </g>
-    </svg>
-  );
-}
-
-export default SlackLogo;

app/components/Authenticated.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 import LoadingIndicator from "./LoadingIndicator";
@@ -13,10 +14,11 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
   const { auth } = useStores();
   const { i18n } = useTranslation();
-  const language = auth.user?.language;
+  const user = useCurrentUser({ rejectOnEmpty: false });
+  const language = user?.language;
 
-  // Watching for language changes here as this is the earliest point we have
-  // the user available and means we can start loading translations faster
+  // Watching for language changes here as this is the earliest point we might have the user
+  // available and means we can start loading translations faster
   React.useEffect(() => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);

app/components/AuthenticatedLayout.tsx

@@ -12,6 +12,7 @@ import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
 import type { Editor as TEditor } from "~/editor";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -25,6 +26,7 @@ import {
   matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
+import { PortalContext } from "./Portal";
 
 const DocumentComments = lazyWithRetry(
   () => import("~/scenes/Document/components/Comments")
@@ -44,8 +46,9 @@ type Props = {
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
   const location = useLocation();
+  const layoutRef = React.useRef<HTMLDivElement>(null);
   const can = usePolicy(ui.activeCollectionId);
-  const { user, team } = auth;
+  const team = useCurrentTeam();
   const documentContext = useLocalStore<DocumentContextValue>(() => ({
     editor: null,
     setEditor: (editor: TEditor) => {
@@ -76,16 +79,14 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     return <ErrorSuspended />;
   }
 
-  const showSidebar = auth.authenticated && user && team;
-
-  const sidebar = showSidebar ? (
+  const sidebar = (
     <Fade>
       <Switch>
         <Route path={settingsPath()} component={SettingsSidebar} />
         <Route component={Sidebar} />
       </Switch>
     </Fade>
-  ) : undefined;
+  );
 
   const showHistory = !!matchPath(location.pathname, {
     path: matchDocumentHistory,
@@ -98,7 +99,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     !showHistory &&
     ui.activeDocumentId &&
     ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team?.getPreference(TeamPreference.Commenting);
+    team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence
@@ -121,15 +122,22 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
 
   return (
     <DocumentContext.Provider value={documentContext}>
-      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
-        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={goToSearch} />
-        <RegisterKeyDown trigger="/" handler={goToSearch} />
-        {children}
-        <React.Suspense fallback={null}>
-          <CommandBar />
-        </React.Suspense>
-      </Layout>
+      <PortalContext.Provider value={layoutRef.current}>
+        <Layout
+          title={team.name}
+          sidebar={sidebar}
+          sidebarRight={sidebarRight}
+          ref={layoutRef}
+        >
+          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+          <RegisterKeyDown trigger="t" handler={goToSearch} />
+          <RegisterKeyDown trigger="/" handler={goToSearch} />
+          {children}
+          <React.Suspense fallback={null}>
+            <CommandBar />
+          </React.Suspense>
+        </Layout>
+      </PortalContext.Provider>
     </DocumentContext.Provider>
   );
 };

app/components/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import Initials from "./Initials";
 
 export enum AvatarSize {
   Small = 16,
+  Toast = 18,
   Medium = 24,
   Large = 32,
   XLarge = 48,
@@ -23,6 +24,7 @@ type Props = {
   src?: string;
   model?: IAvatar;
   alt?: string;
+  shape?: "square";
   showBorder?: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
   className?: string;
@@ -64,11 +66,15 @@ const Relative = styled.div`
   flex-shrink: 0;
 `;
 
-const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
+const CircleImg = styled.img<{
+  size: number;
+  shape?: "square";
+  $showBorder?: boolean;
+}>`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
-  border-radius: 50%;
+  border-radius: ${(props) => (props.shape === "square" ? 4 : props.size)}px;
   border: ${(props) =>
     props.$showBorder === false
       ? "none"

app/components/Avatar/Initials.tsx

@@ -3,19 +3,17 @@ import Flex from "~/components/Flex";
 
 const Initials = styled(Flex)<{
   color?: string;
+  shape?: "square";
   size: number;
   $showBorder?: boolean;
 }>`
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
+  border-radius: ${(props) => (props.shape === "square" ? 4 : props.size)}px;
   color: #fff;
   background-color: ${(props) => props.color};
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
-  border-radius: 50%;
   border: 2px solid
     ${(props) =>
       props.$showBorder === false ? "transparent" : props.theme.background};

app/components/Button.tsx

@@ -171,7 +171,7 @@ const Button = <T extends React.ElementType = "button">(
     danger,
     ...rest
   } = props;
-  const hasText = children !== undefined || value !== undefined;
+  const hasText = !!children || value !== undefined;
   const ic = hideIcon ? undefined : action?.icon ?? icon;
   const hasIcon = ic !== undefined;
 

app/components/CenteredContent.tsx

@@ -4,6 +4,7 @@ import breakpoint from "styled-components-breakpoint";
 
 type Props = {
   children?: React.ReactNode;
+  maxWidth?: string;
   withStickyHeader?: boolean;
 };
 
@@ -18,18 +19,24 @@ const Container = styled.div<Props>`
   `};
 `;
 
-const Content = styled.div`
-  max-width: 46em;
+type ContentProps = { $maxWidth?: string };
+
+const Content = styled.div<ContentProps>`
+  max-width: ${(props) => props.$maxWidth ?? "46em"};
   margin: 0 auto;
 
   ${breakpoint("desktopLarge")`
-    max-width: 52em;
+    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
   `};
 `;
 
-const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
+const CenteredContent: React.FC<Props> = ({
+  children,
+  maxWidth,
+  ...rest
+}: Props) => (
   <Container {...rest}>
-    <Content>{children}</Content>
+    <Content $maxWidth={maxWidth}>{children}</Content>
   </Container>
 );
 

app/components/ChangeLanguage.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { changeLanguage } from "~/utils/language";
+
+type Props = {
+  locale: string;
+};
+
+export default function ChangeLanguage({ locale }: Props) {
+  const { i18n } = useTranslation();
+
+  React.useEffect(() => {
+    void changeLanguage(locale, i18n);
+  }, [locale, i18n]);
+
+  return null;
+}

app/components/Collaborators.tsx

@@ -1,4 +1,7 @@
-import { sortBy, filter, uniq, isEqual } from "lodash";
+import filter from "lodash/filter";
+import isEqual from "lodash/isEqual";
+import sortBy from "lodash/sortBy";
+import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";

app/components/CollectionDeleteDialog.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
@@ -22,11 +23,14 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
 
   const handleSubmit = async () => {
     const redirect = collection.id === ui.activeCollectionId;
-    await collection.delete();
-    onSubmit();
+
     if (redirect) {
       history.push(homePath());
     }
+
+    await collection.delete();
+    onSubmit();
+    toast.success(t("Collection deleted"));
   };
 
   return (

app/components/CollectionDescription.tsx

@@ -3,7 +3,9 @@ import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
+import { richExtensions } from "@shared/editor/nodes";
 import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Arrow from "~/components/Arrow";
@@ -11,9 +13,18 @@ import ButtonLink from "~/components/ButtonLink";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
+import BlockMenuExtension from "~/editor/extensions/BlockMenu";
+import EmojiMenuExtension from "~/editor/extensions/EmojiMenu";
+import HoverPreviewsExtension from "~/editor/extensions/HoverPreviews";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
+
+const extensions = [
+  ...richExtensions,
+  BlockMenuExtension,
+  EmojiMenuExtension,
+  HoverPreviewsExtension,
+];
 
 type Props = {
   collection: Collection;
@@ -21,7 +32,6 @@ type Props = {
 
 function CollectionDescription({ collection }: Props) {
   const { collections } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
@@ -59,15 +69,11 @@ function CollectionDescription({ collection }: Props) {
           });
           setDirty(false);
         } catch (err) {
-          showToast(
-            t("Sorry, an error occurred saving the collection", {
-              type: "error",
-            })
-          );
+          toast.error(t("Sorry, an error occurred saving the collection"));
           throw err;
         }
       }, 1000),
-    [collection, showToast, t]
+    [collection, t]
   );
 
   const handleChange = React.useCallback(
@@ -109,6 +115,7 @@ function CollectionDescription({ collection }: Props) {
                 readOnly={!isEditing}
                 autoFocus={isEditing}
                 onBlur={handleStopEditing}
+                extensions={extensions}
                 maxLength={1000}
                 embedsDisabled
                 canUpdate
@@ -170,7 +177,7 @@ const MaxHeight = styled.div`
   position: relative;
   max-height: 25vh;
   overflow: hidden;
-  margin: -12px -8px -8px;
+  margin: 8px -8px -8px;
   padding: 8px;
 
   &[data-editing="true"],

app/components/CommandBar.tsx

@@ -11,39 +11,26 @@ import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useSettingsActions from "~/hooks/useSettingsActions";
-import { CommandBarAction } from "~/types";
+import useTemplateActions from "~/hooks/useTemplateActions";
 
 function CommandBar() {
   const { t } = useTranslation();
   const settingsActions = useSettingsActions();
+  const templateActions = useTemplateActions();
   const commandBarActions = React.useMemo(
-    () => [...rootActions, settingsActions],
-    [settingsActions]
+    () => [...rootActions, templateActions, settingsActions],
+    [settingsActions, templateActions]
   );
 
   useCommandBarActions(commandBarActions);
 
-  const { rootAction } = useKBar((state) => ({
-    rootAction: state.currentRootActionId
-      ? (state.actions[
-          state.currentRootActionId
-        ] as unknown as CommandBarAction)
-      : undefined,
-  }));
-
   return (
     <>
       <KBarPortal>
         <Positioner>
           <Animator>
             <SearchActions />
-            <SearchInput
-              placeholder={`${
-                rootAction?.placeholder ||
-                rootAction?.name ||
-                t("Type a command or search")
-              }…`}
-            />
+            <SearchInput defaultPlaceholder={t("Type a command or search")} />
             <CommandBarResults />
           </Animator>
         </Positioner>
@@ -83,6 +70,7 @@ const SearchInput = styled(KBarSearch)`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 

app/components/CommentDeleteDialog.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import Comment from "~/models/Comment";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   comment: Comment;
@@ -14,7 +14,6 @@ type Props = {
 
 function CommentDeleteDialog({ comment, onSubmit }: Props) {
   const { comments } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const hasChildComments = comments.inThread(comment.id).length > 1;
 
@@ -23,7 +22,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
       await comment.delete();
       onSubmit?.();
     } catch (err) {
-      showToast(err.message, { type: "error" });
+      toast.error(err.message);
     }
   };
 

app/components/ConfirmationDialog.tsx

@@ -1,10 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   /** Callback when the dialog is submitted */
@@ -29,8 +30,8 @@ const ConfirmationDialog: React.FC<Props> = ({
   disabled = false,
 }: Props) => {
   const [isSaving, setIsSaving] = React.useState(false);
+  const { t } = useTranslation();
   const { dialogs } = useStores();
-  const { showToast } = useToasts();
 
   const handleSubmit = React.useCallback(
     async (ev: React.SyntheticEvent) => {
@@ -40,30 +41,29 @@ const ConfirmationDialog: React.FC<Props> = ({
         await onSubmit();
         dialogs.closeAllModals();
       } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       } finally {
         setIsSaving(false);
       }
     },
-    [onSubmit, dialogs, showToast]
+    [onSubmit, dialogs]
   );
 
   return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
-        <Text type="secondary">{children}</Text>
+    <form onSubmit={handleSubmit}>
+      <Text type="secondary">{children}</Text>
+
+      <Flex justify="flex-end">
         <Button
           type="submit"
           disabled={isSaving || disabled}
           danger={danger}
           autoFocus
         >
-          {isSaving && savingText ? savingText : submitText}
+          {isSaving && savingText ? savingText : submitText ?? t("Confirm")}
         </Button>
-      </form>
-    </Flex>
+      </Flex>
+    </form>
   );
 };
 

app/components/ConnectionStatus.tsx

@@ -14,15 +14,48 @@ function ConnectionStatus() {
   const theme = useTheme();
   const { t } = useTranslation();
 
+  const codeToMessage = {
+    1009: {
+      title: t("Document is too large"),
+      body: t(
+        "This document has reached the maximum size and can no longer be edited"
+      ),
+    },
+    4401: {
+      title: t("Authentication failed"),
+      body: t("Please try logging out and back in again"),
+    },
+    4403: {
+      title: t("Authorization failed"),
+      body: t("You may have lost access to this document, try reloading"),
+    },
+    4503: {
+      title: t("Too many users connected to document"),
+      body: t("Your edits will sync once other users leave the document"),
+    },
+  };
+
+  const message = ui.multiplayerErrorCode
+    ? codeToMessage[ui.multiplayerErrorCode]
+    : undefined;
+
   return ui.multiplayerStatus === "connecting" ||
     ui.multiplayerStatus === "disconnected" ? (
     <Tooltip
       tooltip={
-        <Centered>
-          <strong>{t("Server connection lost")}</strong>
-          <br />
-          {t("Edits you make will sync once you’re online")}
-        </Centered>
+        message ? (
+          <Centered>
+            <strong>{message.title}</strong>
+            <br />
+            {message.body}
+          </Centered>
+        ) : (
+          <Centered>
+            <strong>{t("Server connection lost")}</strong>
+            <br />
+            {t("Edits you make will sync once you’re online")}
+          </Centered>
+        )
       }
       placement="bottom"
     >

app/components/ContentEditable.tsx

@@ -9,6 +9,7 @@ type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
   readOnly?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onChange?: (text: string) => void;
+  onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
   onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
@@ -35,6 +36,7 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
     disabled,
     onChange,
     onInput,
+    onFocus,
     onBlur,
     onKeyDown,
     value,
@@ -143,11 +145,13 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
   );
 
   return (
-    <div className={className} dir={dir} onClick={onClick}>
+    <div className={className} dir={dir} onClick={onClick} tabIndex={-1}>
+      {children}
       <Content
         ref={contentRef}
         contentEditable={!disabled && !readOnly}
         onInput={wrappedEvent(onInput)}
+        onFocus={wrappedEvent(onFocus)}
         onBlur={wrappedEvent(onBlur)}
         onKeyDown={wrappedEvent(onKeyDown)}
         onPaste={handlePaste}
@@ -158,7 +162,6 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
       >
         {innerValue}
       </Content>
-      {children}
     </div>
   );
 });

app/components/ContextMenu/MenuIconWrapper.ts

@@ -1,11 +1,13 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const MenuIconWrapper = styled.span`
   width: 24px;
   height: 24px;
   margin-right: 6px;
   margin-left: -4px;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${s("textSecondary")};
+  flex-shrink: 0;
 `;
 
 export default MenuIconWrapper;

app/components/ContextMenu/MenuItem.tsx

@@ -5,7 +5,7 @@ import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import MenuIconWrapper from "../MenuIconWrapper";
+import MenuIconWrapper from "./MenuIconWrapper";
 
 type Props = {
   id?: string;

app/components/ContextMenu/MouseSafeArea.tsx

@@ -2,17 +2,17 @@ import * as React from "react";
 import { useMousePosition } from "~/hooks/useMousePosition";
 
 type Positions = {
-  /* Sub-menu x */
+  /** Sub-menu x */
   x: number;
-  /* Sub-menu y */
+  /** Sub-menu y */
   y: number;
-  /* Sub-menu height */
+  /** Sub-menu height */
   h: number;
-  /* Sub-menu width */
+  /** Sub-menu width */
   w: number;
-  /* Mouse x */
+  /** Mouse x */
   mouseX: number;
-  /* Mouse y */
+  /** Mouse y */
   mouseY: number;
 };
 

app/components/ContextMenu/Template.tsx

@@ -9,8 +9,8 @@ import {
   MenuStateReturn,
 } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
+import MenuIconWrapper from "~/components/ContextMenu/MenuIconWrapper";
 import Flex from "~/components/Flex";
-import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import {
@@ -201,7 +201,7 @@ function Template({ items, actions, context, ...menu }: Props) {
         }
 
         if (item.type === "heading") {
-          return <Header>{item.title}</Header>;
+          return <Header key={index}>{item.title}</Header>;
         }
 
         const _exhaustiveCheck: never = item;

app/components/ContextMenu/index.tsx

@@ -46,6 +46,8 @@ type Props = MenuStateReturn & {
   onClose?: () => void;
   /** Called when the context menu is clicked. */
   onClick?: (ev: React.MouseEvent) => void;
+  /** The maximum width of the context menu. */
+  maxWidth?: number;
   children?: React.ReactNode;
 };
 
@@ -57,11 +59,6 @@ const ContextMenu: React.FC<Props> = ({
   ...rest
 }: Props) => {
   const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight({
-    visible: rest.visible,
-    elementRef: rest.unstable_disclosureRef,
-  });
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
   const { ui } = useStores();
   const { t } = useTranslation();
   const { setIsMenuOpen } = useMenuContext();
@@ -99,21 +96,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 && !isSubMenu) {
-      disableBodyScroll(scrollElement, {
-        reserveScrollBarGap: true,
-      });
-    }
-    return () => {
-      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
-    };
-  }, [isSubMenu, rest.visible]);
-
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -124,51 +106,98 @@ const ContextMenu: React.FC<Props> = ({
   return (
     <>
       <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...rest}>
-        {(props) => {
-          // kind of hacky, but this is an effective way of telling which way
-          // the menu will _actually_ be placed when taking into account screen
-          // positioning.
-          const topAnchor = props.style?.top === "0";
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <>
-              {isMobile && (
-                <Backdrop
-                  onClick={(ev) => {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    rest.hide?.();
-                  }}
-                />
-              )}
-              <Position {...props}>
-                <Background
-                  dir="auto"
-                  topAnchor={topAnchor}
-                  rightAnchor={rightAnchor}
-                  ref={backgroundRef}
-                  hiddenScrollbars
-                  style={
-                    topAnchor
-                      ? {
-                          maxHeight,
-                        }
-                      : undefined
-                  }
-                >
-                  {rest.visible || rest.animating ? children : null}
-                </Background>
-              </Position>
-            </>
-          );
-        }}
+        {(props) => (
+          <InnerContextMenu
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuProps={props as any}
+            {...rest}
+            isSubMenu={isSubMenu}
+          >
+            {children}
+          </InnerContextMenu>
+        )}
       </Menu>
     </>
   );
 };
 
+type InnerContextMenuProps = MenuStateReturn & {
+  isSubMenu: boolean;
+  menuProps: { style?: React.CSSProperties; placement: string };
+  children: React.ReactNode;
+  maxWidth?: number;
+};
+
+/**
+ * Inner context menu allows deferring expensive window measurement hooks etc
+ * until the menu is actually opened.
+ */
+const InnerContextMenu = (props: InnerContextMenuProps) => {
+  const { menuProps } = props;
+  // kind of hacky, but this is an effective way of telling which way
+  // the menu will _actually_ be placed when taking into account screen
+  // positioning.
+  const topAnchor =
+    menuProps.style?.top === "0" || menuProps.style?.position === "fixed";
+  const rightAnchor = menuProps.placement === "bottom-end";
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
+  const isMobile = useMobile();
+
+  const maxHeight = useMenuHeight({
+    visible: props.visible,
+    elementRef: props.unstable_disclosureRef,
+  });
+
+  // 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 (props.visible && scrollElement && !props.isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
+    }
+    return () => {
+      scrollElement && !props.isSubMenu && enableBodyScroll(scrollElement);
+    };
+  }, [props.isSubMenu, props.visible]);
+
+  const style =
+    topAnchor && !isMobile
+      ? {
+          maxHeight,
+        }
+      : undefined;
+
+  return (
+    <>
+      {isMobile && (
+        <Backdrop
+          onClick={(ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            props.hide?.();
+          }}
+        />
+      )}
+      <Position {...menuProps}>
+        <Background
+          dir="auto"
+          maxWidth={props.maxWidth}
+          topAnchor={topAnchor}
+          rightAnchor={rightAnchor}
+          ref={backgroundRef}
+          hiddenScrollbars
+          style={style}
+        >
+          {props.visible || props.animating ? props.children : null}
+        </Background>
+      </Position>
+    </>
+  );
+};
+
 export default ContextMenu;
 
 export const Backdrop = styled.div`
@@ -203,6 +232,7 @@ export const Position = styled.div`
 type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
+  maxWidth?: number;
   theme: DefaultTheme;
 };
 
@@ -228,7 +258,8 @@ export const Background = styled(Scrollable)<BackgroundProps>`
       props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
     transform-origin: ${(props: BackgroundProps) =>
       props.rightAnchor ? "75%" : "25%"} 0;
-    max-width: 276px;
+    max-width: ${(props: BackgroundProps) => props.maxWidth ?? 276}px;
+    max-height: 100vh;
     background: ${(props: BackgroundProps) => props.theme.menuBackground};
     box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
   `};

app/components/CopyToClipboard.ts

@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import env from "~/env";
 
 type Props = {
@@ -9,32 +10,40 @@ type Props = {
   onCopy?: () => void;
 };
 
-class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: React.SyntheticEvent) => {
-    const { text, onCopy, children } = this.props;
-    const elem = React.Children.only(children);
+function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
+  const { text, onCopy, children, ...rest } = props;
 
-    copy(text, {
-      debug: env.ENVIRONMENT !== "production",
-      format: "text/plain",
-    });
+  const onClick = React.useCallback(
+    (ev: React.MouseEvent<HTMLElement>) => {
+      const elem = React.Children.only(children);
 
-    onCopy?.();
+      copy(text, {
+        debug: env.ENVIRONMENT !== "production",
+        format: "text/plain",
+      });
 
-    if (elem && elem.props && typeof elem.props.onClick === "function") {
-      elem.props.onClick(ev);
-    }
-  };
+      onCopy?.();
 
-  render() {
-    const { text, onCopy, children, ...rest } = this.props;
-    const elem = React.Children.only(children);
-    if (!elem) {
-      return null;
-    }
+      if (elem && elem.props && typeof elem.props.onClick === "function") {
+        elem.props.onClick(ev);
+      }
+    },
+    [children, onCopy, text]
+  );
 
-    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
+  const elem = React.Children.only(children);
+  if (!elem) {
+    return null;
   }
+
+  return React.cloneElement(elem, {
+    ...rest,
+    ref:
+      "ref" in elem
+        ? mergeRefs([elem.ref as React.MutableRefObject<HTMLElement>, ref])
+        : ref,
+    onClick,
+  });
 }
 
-export default CopyToClipboard;
+export default React.forwardRef(CopyToClipboard);

app/components/DefaultCollectionInputSelect.tsx

@@ -1,13 +1,13 @@
 import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { Optional } from "utility-types";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSelect from "~/components/InputSelect";
 import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type DefaultCollectionInputSelectProps = Optional<
   React.ComponentProps<typeof InputSelect>
@@ -25,7 +25,6 @@ const DefaultCollectionInputSelect = ({
   const { collections } = useStores();
   const [fetching, setFetching] = useState(false);
   const [fetchError, setFetchError] = useState();
-  const { showToast } = useToasts();
 
   React.useEffect(() => {
     async function fetchData() {
@@ -36,11 +35,8 @@ const DefaultCollectionInputSelect = ({
             limit: 100,
           });
         } catch (error) {
-          showToast(
-            t("Collections could not be loaded, please reload the app"),
-            {
-              type: "error",
-            }
+          toast.error(
+            t("Collections could not be loaded, please reload the app")
           );
           setFetchError(error);
         } finally {
@@ -49,7 +45,7 @@ const DefaultCollectionInputSelect = ({
       }
     }
     void fetchData();
-  }, [showToast, fetchError, t, fetching, collections]);
+  }, [fetchError, t, fetching, collections]);
 
   const options = React.useMemo(
     () =>

app/components/DesktopEventHandler.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { useDesktopTitlebar } from "~/hooks/useDesktopTitlebar";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import Desktop from "~/utils/Desktop";
 
 export default function DesktopEventHandler() {
@@ -12,7 +12,7 @@ export default function DesktopEventHandler() {
   const { t } = useTranslation();
   const history = useHistory();
   const { dialogs } = useStores();
-  const { showToast } = useToasts();
+  const hasDisabledUpdateMessage = React.useRef(false);
 
   React.useEffect(() => {
     Desktop.bridge?.redirect((path: string, replace = false) => {
@@ -24,11 +24,16 @@ export default function DesktopEventHandler() {
     });
 
     Desktop.bridge?.updateDownloaded(() => {
-      showToast("An update is ready to install.", {
-        type: "info",
-        timeout: Infinity,
+      if (hasDisabledUpdateMessage.current) {
+        return;
+      }
+
+      hasDisabledUpdateMessage.current = true;
+      toast.message("An update is ready to install.", {
+        duration: Infinity,
+        dismissible: true,
         action: {
-          text: "Install now",
+          label: t("Install now"),
           onClick: () => {
             void Desktop.bridge?.restartAndInstall();
           },
@@ -50,7 +55,7 @@ export default function DesktopEventHandler() {
         content: <KeyboardShortcuts />,
       });
     });
-  }, [t, history, dialogs, showToast]);
+  }, [t, history, dialogs]);
 
   return null;
 }

app/components/DocumentBreadcrumb.tsx

@@ -12,9 +12,10 @@ import { MenuInternalLink } from "~/types";
 import {
   archivePath,
   collectionPath,
-  templatesPath,
+  settingsPath,
   trashPath,
 } from "~/utils/routeHelpers";
+import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   children?: React.ReactNode;
@@ -43,12 +44,12 @@ function useCategory(document: Document): MenuInternalLink | null {
     };
   }
 
-  if (document.isTemplate) {
+  if (document.template) {
     return {
       type: "route",
       icon: <ShapesIcon />,
       title: t("Templates"),
-      to: templatesPath(),
+      to: settingsPath("templates"),
     };
   }
 
@@ -67,6 +68,10 @@ const DocumentBreadcrumb: React.FC<Props> = ({
     ? collections.get(document.collectionId)
     : undefined;
 
+  React.useEffect(() => {
+    void document.loadRelations();
+  }, [document]);
+
   let collectionNode: MenuInternalLink | undefined;
 
   if (collection) {
@@ -76,20 +81,16 @@ const DocumentBreadcrumb: React.FC<Props> = ({
       icon: <CollectionIcon collection={collection} expanded />,
       to: collectionPath(collection.url),
     };
-  } else if (document.collectionId && !collection) {
+  } else if (document.isCollectionDeleted) {
     collectionNode = {
       type: "route",
       title: t("Deleted Collection"),
       icon: undefined,
-      to: collectionPath("deleted-collection"),
+      to: "",
     };
   }
 
-  const path = React.useMemo(
-    () => collection?.pathToDocument(document.id).slice(0, -1) || [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [collection, document, document.collectionId, document.parentDocumentId]
-  );
+  const path = document.pathTo;
 
   const items = React.useMemo(() => {
     const output = [];
@@ -102,10 +103,16 @@ const DocumentBreadcrumb: React.FC<Props> = ({
       output.push(collectionNode);
     }
 
-    path.forEach((node: NavigationNode) => {
+    path.slice(0, -1).forEach((node: NavigationNode) => {
       output.push({
         type: "route",
-        title: node.title,
+        title: node.emoji ? (
+          <>
+            <EmojiIcon emoji={node.emoji} /> {node.title}
+          </>
+        ) : (
+          node.title
+        ),
         to: node.url,
       });
     });
@@ -120,7 +127,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
     return (
       <>
         {collection?.name}
-        {path.map((node: NavigationNode) => (
+        {path.slice(0, -1).map((node: NavigationNode) => (
           <React.Fragment key={node.id}>
             <SmallSlash />
             {node.title}

app/components/DocumentCard.tsx

@@ -111,11 +111,12 @@ function DocumentCard(props: Props) {
 
             {document.emoji ? (
               <Squircle color={theme.slateLight}>
-                <EmojiIcon emoji={document.emoji} size={26} />
+                <EmojiIcon emoji={document.emoji} size={24} />
               </Squircle>
             ) : (
               <Squircle color={collection?.color}>
                 {collection?.icon &&
+                collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
                 !pin?.collectionId ? (
                   <CollectionIcon collection={collection} color="white" />
@@ -279,8 +280,8 @@ const Heading = styled.h3`
   overflow: hidden;
 
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 export default observer(DocumentCard);

app/components/DocumentContext.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
 
 export type DocumentContextValue = {
   /** The current editor instance for this document. */
@@ -16,4 +17,21 @@ const DocumentContext = React.createContext<DocumentContextValue>({
 
 export const useDocumentContext = () => React.useContext(DocumentContext);
 
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
 export default DocumentContext;

app/components/DocumentExplorer.tsx

@@ -1,5 +1,10 @@
 import FuzzySearch from "fuzzy-search";
-import { includes, difference, concat, filter, map, fill } from "lodash";
+import concat from "lodash/concat";
+import difference from "lodash/difference";
+import fill from "lodash/fill";
+import filter from "lodash/filter";
+import includes from "lodash/includes";
+import map from "lodash/map";
 import { observer } from "mobx-react";
 import { StarredIcon, DocumentIcon } from "outline-icons";
 import * as React from "react";
@@ -10,7 +15,6 @@ import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";
-import parseTitle from "@shared/utils/parseTitle";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
@@ -200,84 +204,86 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
     }
   };
 
-  const ListItem = ({
-    index,
-    data,
-    style,
-  }: {
-    index: number;
-    data: NavigationNode[];
-    style: React.CSSProperties;
-  }) => {
-    const node = data[index];
-    const isCollection = node.type === "collection";
-    let icon, title, path;
+  const ListItem = observer(
+    ({
+      index,
+      data,
+      style,
+    }: {
+      index: number;
+      data: NavigationNode[];
+      style: React.CSSProperties;
+    }) => {
+      const node = data[index];
+      const isCollection = node.type === "collection";
+      let icon, title: string, emoji: string | undefined, path;
 
-    if (isCollection) {
-      const col = collections.get(node.collectionId as string);
-      icon = col && (
-        <CollectionIcon collection={col} expanded={isExpanded(index)} />
-      );
-      title = node.title;
-    } else {
-      const doc = documents.get(node.id);
-      const { strippedTitle, emoji } = parseTitle(node.title);
-      title = strippedTitle;
-
-      if (emoji) {
-        icon = <EmojiIcon emoji={emoji} />;
-      } else if (doc?.isStarred) {
-        icon = <StarredIcon color={theme.yellow} />;
+      if (isCollection) {
+        const col = collections.get(node.collectionId as string);
+        icon = col && (
+          <CollectionIcon collection={col} expanded={isExpanded(index)} />
+        );
+        title = node.title;
       } else {
-        icon = <DocumentIcon color={theme.textSecondary} />;
+        const doc = documents.get(node.id);
+        emoji = doc?.emoji ?? node.emoji;
+        title = doc?.title ?? node.title;
+
+        if (emoji) {
+          icon = <EmojiIcon emoji={emoji} />;
+        } else if (doc?.isStarred) {
+          icon = <StarredIcon color={theme.yellow} />;
+        } else {
+          icon = <DocumentIcon color={theme.textSecondary} />;
+        }
+
+        path = ancestors(node)
+          .map((a) => a.title)
+          .join(" / ");
       }
 
-      path = ancestors(node)
-        .map((a) => parseTitle(a.title).strippedTitle)
-        .join(" / ");
+      return searchTerm ? (
+        <DocumentExplorerSearchResult
+          selected={isSelected(index)}
+          active={activeNode === index}
+          style={{
+            ...style,
+            top: (style.top as number) + VERTICAL_PADDING,
+            left: (style.left as number) + HORIZONTAL_PADDING,
+            width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+          }}
+          onPointerMove={() => setActiveNode(index)}
+          onClick={() => toggleSelect(index)}
+          icon={icon}
+          title={title}
+          path={path}
+        />
+      ) : (
+        <DocumentExplorerNode
+          style={{
+            ...style,
+            top: (style.top as number) + VERTICAL_PADDING,
+            left: (style.left as number) + HORIZONTAL_PADDING,
+            width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+          }}
+          onPointerMove={() => setActiveNode(index)}
+          onClick={() => toggleSelect(index)}
+          onDisclosureClick={(ev) => {
+            ev.stopPropagation();
+            toggleCollapse(index);
+          }}
+          selected={isSelected(index)}
+          active={activeNode === index}
+          expanded={isExpanded(index)}
+          icon={icon}
+          title={title}
+          depth={node.depth as number}
+          hasChildren={hasChildren(index)}
+          ref={itemRefs[index]}
+        />
+      );
     }
-
-    return searchTerm ? (
-      <DocumentExplorerSearchResult
-        selected={isSelected(index)}
-        active={activeNode === index}
-        style={{
-          ...style,
-          top: (style.top as number) + VERTICAL_PADDING,
-          left: (style.left as number) + HORIZONTAL_PADDING,
-          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-        }}
-        onPointerMove={() => setActiveNode(index)}
-        onClick={() => toggleSelect(index)}
-        icon={icon}
-        title={title}
-        path={path}
-      />
-    ) : (
-      <DocumentExplorerNode
-        style={{
-          ...style,
-          top: (style.top as number) + VERTICAL_PADDING,
-          left: (style.left as number) + HORIZONTAL_PADDING,
-          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-        }}
-        onPointerMove={() => setActiveNode(index)}
-        onClick={() => toggleSelect(index)}
-        onDisclosureClick={(ev) => {
-          ev.stopPropagation();
-          toggleCollapse(index);
-        }}
-        selected={isSelected(index)}
-        active={activeNode === index}
-        expanded={isExpanded(index)}
-        icon={icon}
-        title={title}
-        depth={node.depth as number}
-        hasChildren={hasChildren(index)}
-        ref={itemRefs[index]}
-      />
-    );
-  };
+  );
 
   const focusSearchInput = () => {
     inputSearchRef.current?.focus();

app/components/DocumentListItem.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -9,7 +8,6 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
-import Button from "~/components/Button";
 import DocumentMeta from "~/components/DocumentMeta";
 import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
@@ -18,12 +16,11 @@ import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
-import { newDocumentPath } from "~/utils/routeHelpers";
+import { documentPath } from "~/utils/routeHelpers";
+import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   document: Document;
@@ -51,7 +48,6 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -71,8 +67,6 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(team);
-  const canCollection = usePolicy(document.collectionId);
 
   return (
     <CompositeItem
@@ -83,7 +77,7 @@ function DocumentListItem(
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
-        pathname: document.url,
+        pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
         },
@@ -92,6 +86,12 @@ function DocumentListItem(
     >
       <Content>
         <Heading dir={document.dir}>
+          {document.emoji && (
+            <>
+              <EmojiIcon emoji={document.emoji} size={24} />
+              &nbsp;
+            </>
+          )}
           <Title
             text={document.titleWithDefault}
             highlight={highlight}
@@ -135,25 +135,6 @@ function DocumentListItem(
         />
       </Content>
       <Actions>
-        {document.isTemplate &&
-          !document.isArchived &&
-          !document.isDeleted &&
-          can.createDocument &&
-          canCollection.update && (
-            <>
-              <Button
-                as={Link}
-                to={newDocumentPath(document.collectionId, {
-                  templateId: document.id,
-                })}
-                icon={<PlusIcon />}
-                neutral
-              >
-                {t("New doc")}
-              </Button>
-              &nbsp;
-            </>
-          )}
         <DocumentMenu
           document={document}
           showPin={showPin}
@@ -262,8 +243,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   white-space: nowrap;
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 const StarPositioner = styled(Flex)`
@@ -279,8 +260,8 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${s("textTertiary")};
-  font-size: 14px;
+  color: ${s("textSecondary")};
+  font-size: 15px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;
 `;

app/components/DocumentTemplatizeDialog.tsx

@@ -3,9 +3,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { documentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -14,7 +14,6 @@ type Props = {
 
 function DocumentTemplatizeDialog({ documentId }: Props) {
   const history = useHistory();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const { documents } = useStores();
   const document = documents.get(documentId);
@@ -24,11 +23,9 @@ function DocumentTemplatizeDialog({ documentId }: Props) {
     const template = await document?.templatize();
     if (template) {
       history.push(documentPath(template));
-      showToast(t("Template created, go ahead and customize it"), {
-        type: "info",
-      });
+      toast.success(t("Template created, go ahead and customize it"));
     }
-  }, [document, showToast, history, t]);
+  }, [document, history, t]);
 
   return (
     <ConfirmationDialog

app/components/DocumentViews.tsx

@@ -1,13 +1,15 @@
-import { sortBy } from "lodash";
+import compact from "lodash/compact";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { dateToRelative } from "@shared/utils/date";
+import { dateLocale, dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -18,6 +20,9 @@ type Props = {
 function DocumentViews({ document, isOpen }: Props) {
   const { t } = useTranslation();
   const { views, presence } = useStores();
+  const user = useCurrentUser();
+  const locale = dateLocale(user.language);
+
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
     ? Array.from(documentPresence.values())
@@ -31,10 +36,10 @@ function DocumentViews({ document, isOpen }: Props) {
   const documentViews = views.inDocument(document.id);
   const sortedViews = sortBy(
     documentViews,
-    (view) => !presentIds.includes(view.user.id)
+    (view) => !presentIds.includes(view.userId)
   );
   const users = React.useMemo(
-    () => sortedViews.map((v) => v.user),
+    () => compact(sortedViews.map((v) => v.user)),
     [sortedViews]
   );
 
@@ -45,16 +50,20 @@ function DocumentViews({ document, isOpen }: Props) {
           aria-label={t("Viewers")}
           items={users}
           renderItem={(model: User) => {
-            const view = documentViews.find((v) => v.user.id === model.id);
+            const view = documentViews.find((v) => v.userId === model.id);
             const isPresent = presentIds.includes(model.id);
             const isEditing = editingIds.includes(model.id);
             const subtitle = isPresent
               ? isEditing
                 ? t("Currently editing")
                 : t("Currently viewing")
-              : t("Viewed {{ timeAgo }} ago", {
+              : t("Viewed {{ timeAgo }}", {
                   timeAgo: dateToRelative(
-                    view ? Date.parse(view.lastViewedAt) : new Date()
+                    view ? Date.parse(view.lastViewedAt) : new Date(),
+                    {
+                      addSuffix: true,
+                      locale,
+                    }
                   ),
                 });
             return (

app/components/DuplicateDialog.tsx

@@ -0,0 +1,74 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { DocumentValidation } from "@shared/validations";
+import Document from "~/models/Document";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input from "./Input";
+import Text from "./Text";
+
+type Props = {
+  /** The original document to duplicate */
+  document: Document;
+  onSubmit: (documents: Document[]) => void;
+};
+
+function DuplicateDialog({ document, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const defaultTitle = t(`Copy of {{ documentName }}`, {
+    documentName: document.title,
+  });
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [title, setTitle] = React.useState<string>(defaultTitle);
+
+  const handleRecursiveChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setRecursive(ev.target.checked);
+    },
+    []
+  );
+
+  const handleTitleChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setTitle(ev.target.value);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    const result = await document.duplicate({
+      recursive,
+      title,
+    });
+    onSubmit(result);
+  };
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
+      <Input
+        autoFocus
+        autoSelect
+        name="title"
+        label={t("Title")}
+        onChange={handleTitleChange}
+        maxLength={DocumentValidation.maxTitleLength}
+        defaultValue={defaultTitle}
+      />
+      {document.publishedAt && !document.isTemplate && (
+        <label>
+          <Text size="small">
+            <input
+              type="checkbox"
+              name="recursive"
+              checked={recursive}
+              onChange={handleRecursiveChange}
+            />{" "}
+            {t("Include nested documents")}
+          </Text>
+        </label>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);

app/components/Editor.tsx

@@ -1,10 +1,11 @@
-import { deburr, difference, sortBy } from "lodash";
+import deburr from "lodash/deburr";
+import difference from "lodash/difference";
+import sortBy from "lodash/sortBy";
 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 { useHistory } from "react-router-dom";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
@@ -14,22 +15,18 @@ import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isInternalUrl } from "@shared/utils/urls";
 import { AttachmentValidation } from "@shared/validations";
-import Document from "~/models/Document";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
-import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useDictionary from "~/hooks/useDictionary";
+import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import useUserLocale from "~/hooks/useUserLocale";
 import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
-import { isModKey } from "~/utils/keyboard";
 import lazyWithRetry from "~/utils/lazyWithRetry";
-import { sharedDocumentPath } from "~/utils/routeHelpers";
-import { isHash } from "~/utils/urls";
 import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
@@ -41,14 +38,13 @@ export type Props = Optional<
   | "onClickLink"
   | "embeds"
   | "dictionary"
-  | "onShowToast"
   | "extensions"
 > & {
   shareId?: string | undefined;
   embedsDisabled?: boolean;
   onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
-  onPublish?: (event: React.MouseEvent) => any;
+  onPublish?: (event: React.MouseEvent) => void;
   editorStyle?: React.CSSProperties;
 };
 
@@ -63,27 +59,14 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   } = props;
   const userLocale = useUserLocale();
   const locale = dateLocale(userLocale);
-  const { auth, comments, documents } = useStores();
-  const { showToast } = useToasts();
+  const { comments, documents } = useStores();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
-  const history = useHistory();
   const localRef = React.useRef<SharedEditor>();
-  const preferences = auth.user?.preferences;
+  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
   const previousHeadings = React.useRef<Heading[] | null>(null);
-  const [activeLinkElement, setActiveLink] =
-    React.useState<HTMLAnchorElement | null>(null);
   const previousCommentIds = React.useRef<string[]>();
 
-  const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {
-    setActiveLink(element);
-    return false;
-  }, []);
-
-  const handleLinkInactive = React.useCallback(() => {
-    setActiveLink(null);
-  }, []);
-
   const handleSearchLink = React.useCallback(
     async (term: string) => {
       if (isInternalUrl(term)) {
@@ -120,7 +103,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       const results = await documents.searchTitles(term);
 
       return sortBy(
-        results.map((document: Document) => ({
+        results.map(({ document }) => ({
           title: document.title,
           subtitle: <DocumentBreadcrumb document={document} onlyText />,
           url: document.url,
@@ -133,7 +116,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
             : 1
       );
     },
-    [documents]
+    [locale, documents]
   );
 
   const handleUploadFile = React.useCallback(
@@ -147,47 +130,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     [id]
   );
 
-  const handleClickLink = React.useCallback(
-    (href: string, event: MouseEvent) => {
-      // on page hash
-      if (isHash(href)) {
-        window.location.href = href;
-        return;
-      }
-
-      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
-        // relative
-        let navigateTo = href;
-
-        // probably absolute
-        if (href[0] !== "/") {
-          try {
-            const url = new URL(href);
-            navigateTo = url.pathname + url.hash;
-          } catch (err) {
-            navigateTo = href;
-          }
-        }
-
-        // Link to our own API should be opened in a new tab, not in the app
-        if (navigateTo.startsWith("/api/")) {
-          window.open(href, "_blank");
-          return;
-        }
-
-        // If we're navigating to an internal document link then prepend the
-        // share route to the URL so that the document is loaded in context
-        if (shareId && navigateTo.includes("/doc/")) {
-          navigateTo = sharedDocumentPath(shareId, navigateTo);
-        }
-
-        history.push(navigateTo);
-      } else if (href) {
-        window.open(href, "_blank");
-      }
-    },
-    [history, shareId]
-  );
+  const { handleClickLink } = useEditorClickHandlers({ shareId });
 
   const focusAtEnd = React.useCallback(() => {
     localRef?.current?.focusAtEnd();
@@ -233,11 +176,10 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
       );
 
-      insertFiles(view, event, pos, files, {
+      return insertFiles(view, event, pos, files, {
         uploadFile: handleUploadFile,
         onFileUploadStart: props.onFileUploadStart,
         onFileUploadStop: props.onFileUploadStop,
-        onShowToast: showToast,
         dictionary,
         isAttachment,
       });
@@ -248,7 +190,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       props.onFileUploadStop,
       dictionary,
       handleUploadFile,
-      showToast,
     ]
   );
 
@@ -332,12 +273,10 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         <LazyLoadedEditor
           ref={mergeRefs([ref, localRef, handleRefChanged])}
           uploadFile={handleUploadFile}
-          onShowToast={showToast}
           embeds={embeds}
           userPreferences={preferences}
           dictionary={dictionary}
           {...props}
-          onHoverLink={handleLinkActive}
           onClickLink={handleClickLink}
           onSearchLink={handleSearchLink}
           onChange={handleChange}
@@ -352,12 +291,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
             minHeight={props.editorStyle.paddingBottom}
           />
         )}
-        {activeLinkElement && !shareId && (
-          <HoverPreview
-            element={activeLinkElement}
-            onClose={handleLinkInactive}
-          />
-        )}
       </>
     </ErrorBoundary>
   );

app/components/EmojiPicker/components.tsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import Button from "~/components/Button";
+import { hover } from "~/styles";
+import Flex from "../Flex";
+
+export const EmojiButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+
+  &: ${hover},
+  &:active,
+  &[aria-expanded= "true"] {
+    opacity: 1 !important;
+  }
+`;
+
+export const Emoji = styled(Flex)<{ size?: number }>`
+  line-height: 1.6;
+  ${(props) => (props.size ? `font-size: ${props.size}px` : "")}
+`;

app/components/EmojiPicker/index.tsx

@@ -0,0 +1,269 @@
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { SmileyIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled, { useTheme } from "styled-components";
+import { depths, s } from "@shared/styles";
+import { toRGB } from "@shared/utils/color";
+import Button from "~/components/Button";
+import Popover from "~/components/Popover";
+import useStores from "~/hooks/useStores";
+import useUserLocale from "~/hooks/useUserLocale";
+import { Emoji, EmojiButton } from "./components";
+
+/* Locales supported by emoji-mart */
+const supportedLocales = [
+  "en",
+  "ar",
+  "be",
+  "cs",
+  "de",
+  "es",
+  "fa",
+  "fi",
+  "fr",
+  "hi",
+  "it",
+  "ja",
+  "kr",
+  "nl",
+  "pl",
+  "pt",
+  "ru",
+  "sa",
+  "tr",
+  "uk",
+  "vi",
+  "zh",
+];
+
+/**
+ * React hook to derive emoji picker's theme from UI theme
+ *
+ * @returns {string} Theme to use for emoji picker
+ */
+function usePickerTheme(): string {
+  const { ui } = useStores();
+  const { theme } = ui;
+
+  if (theme === "system") {
+    return "auto";
+  }
+
+  return theme;
+}
+
+type Props = {
+  /** The selected emoji, if any */
+  value?: string | null;
+  /** Callback when an emoji is selected */
+  onChange: (emoji: string | null) => void | Promise<void>;
+  /** Callback when the picker is opened */
+  onOpen?: () => void;
+  /** Callback when the picker is closed */
+  onClose?: () => void;
+  /** Callback when the picker is clicked outside of */
+  onClickOutside: () => void;
+  /** Whether to auto focus the search input on open */
+  autoFocus?: boolean;
+  /** Class name to apply to the trigger button */
+  className?: string;
+};
+
+function EmojiPicker({
+  value,
+  onOpen,
+  onClose,
+  onChange,
+  onClickOutside,
+  autoFocus,
+  className,
+}: Props) {
+  const { t } = useTranslation();
+  const pickerTheme = usePickerTheme();
+  const theme = useTheme();
+  const locale = useUserLocale(true) ?? "en";
+
+  const popover = usePopoverState({
+    placement: "bottom-start",
+    modal: true,
+    unstable_offset: [0, 0],
+  });
+
+  const [emojisPerLine, setEmojisPerLine] = React.useState(9);
+
+  const pickerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [popover.visible, onOpen, onClose]);
+
+  React.useEffect(() => {
+    if (popover.visible && pickerRef.current) {
+      // 28 is picker's observed width when perLine is set to 0
+      // and 36 is the default emojiButtonSize
+      // Ref: https://github.com/missive/emoji-mart#options--props
+      setEmojisPerLine(Math.floor((pickerRef.current.clientWidth - 28) / 36));
+    }
+  }, [popover.visible]);
+
+  const handleEmojiChange = React.useCallback(
+    async (emoji) => {
+      popover.hide();
+      await onChange(emoji ? emoji.native : null);
+    },
+    [popover, onChange]
+  );
+
+  const handleClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      if (popover.visible) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    [popover]
+  );
+
+  const handleClickOutside = React.useCallback(() => {
+    // It was observed that onClickOutside got triggered
+    // even when the picker wasn't open or opened at all.
+    // Hence, this guard here...
+    if (popover.visible) {
+      onClickOutside();
+    }
+  }, [popover.visible, onClickOutside]);
+
+  // Auto focus search input when picker is opened
+  React.useLayoutEffect(() => {
+    if (autoFocus && popover.visible) {
+      requestAnimationFrame(() => {
+        const searchInput = pickerRef.current
+          ?.querySelector("em-emoji-picker")
+          ?.shadowRoot?.querySelector(
+            "input[type=search]"
+          ) as HTMLInputElement | null;
+        searchInput?.focus();
+      });
+    }
+  }, [autoFocus, popover.visible]);
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <EmojiButton
+            {...props}
+            className={className}
+            onClick={handleClick}
+            icon={
+              value ? (
+                <Emoji size={32} align="center" justify="center">
+                  {value}
+                </Emoji>
+              ) : (
+                <StyledSmileyIcon size={32} color={theme.textTertiary} />
+              )
+            }
+            neutral
+            borderOnHover
+          />
+        )}
+      </PopoverDisclosure>
+      <PickerPopover
+        {...popover}
+        tabIndex={0}
+        // This prevents picker from closing when any of its
+        // children are focused, e.g, clicking on search bar or
+        // a click on skin tone button
+        onClick={(e) => e.stopPropagation()}
+        width={352}
+        aria-label={t("Emoji Picker")}
+      >
+        {popover.visible && (
+          <>
+            {value && (
+              <RemoveButton neutral onClick={() => handleEmojiChange(null)}>
+                {t("Remove")}
+              </RemoveButton>
+            )}
+            <PickerStyles ref={pickerRef}>
+              <Picker
+                // https://github.com/missive/emoji-mart/issues/800
+                locale={
+                  locale === "ko"
+                    ? "kr"
+                    : supportedLocales.includes(locale)
+                    ? locale
+                    : "en"
+                }
+                data={data}
+                onEmojiSelect={handleEmojiChange}
+                theme={pickerTheme}
+                previewPosition="none"
+                perLine={emojisPerLine}
+                onClickOutside={handleClickOutside}
+              />
+            </PickerStyles>
+          </>
+        )}
+      </PickerPopover>
+    </>
+  );
+}
+
+const StyledSmileyIcon = styled(SmileyIcon)`
+  flex-shrink: 0;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const RemoveButton = styled(Button)`
+  margin-left: -12px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  height: 24px;
+  font-size: 13px;
+
+  > :first-child {
+    min-height: unset;
+    line-height: unset;
+  }
+`;
+
+const PickerPopover = styled(Popover)`
+  z-index: ${depths.popover};
+  > :first-child {
+    padding-top: 8px;
+    padding-bottom: 0;
+    max-height: 488px;
+    overflow: unset;
+  }
+`;
+
+const PickerStyles = styled.div`
+  margin-left: -24px;
+  margin-right: -24px;
+  em-emoji-picker {
+    --shadow: none;
+    --font-family: ${s("fontFamily")};
+    --rgb-background: ${(props) => toRGB(props.theme.menuBackground)};
+    --rgb-accent: ${(props) => toRGB(props.theme.accent)};
+    --border-radius: 6px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 443px;
+  }
+`;
+
+export default EmojiPicker;

app/components/ErrorBoundary.tsx

@@ -121,11 +121,11 @@ class ErrorBoundary extends React.Component<Props> {
             <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
             {this.showDetails ? (
               <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a Bug</Trans>…
+                <Trans>Report a bug</Trans>…
               </Button>
             ) : (
               <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show Detail</Trans>…
+                <Trans>Show detail</Trans>…
               </Button>
             )}
           </p>

app/components/ExportDialog.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { FileOperationFormat, NotificationEventType } from "@shared/types";
 import Collection from "~/models/Collection";
@@ -10,7 +11,8 @@ import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
+import history from "~/utils/history";
+import { settingsPath } from "~/utils/routeHelpers";
 
 type Props = {
   collection?: Collection;
@@ -24,7 +26,6 @@ function ExportDialog({ collection, onSubmit }: Props) {
   const [includeAttachments, setIncludeAttachments] =
     React.useState<boolean>(true);
   const user = useCurrentUser();
-  const { showToast } = useToasts();
   const { collections } = useStores();
   const { t } = useTranslation();
   const appName = env.APP_NAME;
@@ -46,11 +47,22 @@ function ExportDialog({ collection, onSubmit }: Props) {
   const handleSubmit = async () => {
     if (collection) {
       await collection.export(format, includeAttachments);
+      toast.success(t("Export started"), {
+        description: t(`Your file will be available in {{ location }} soon`, {
+          location: `"${t("Settings")} > ${t("Export")}"`,
+        }),
+        action: {
+          label: t("View"),
+          onClick: () => {
+            history.push(settingsPath("export"));
+          },
+        },
+      });
     } else {
       await collections.export(format, includeAttachments);
+      toast.success(t("Export started"));
     }
     onSubmit();
-    showToast(t("Export started"), { type: "success" });
   };
 
   const items = [

app/components/Facepile.tsx

@@ -32,9 +32,12 @@ function Facepile({
           </span>
         </More>
       )}
-      {users.slice(0, limit).map((user) => (
-        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
-      ))}
+      {users
+        .filter(Boolean)
+        .slice(0, limit)
+        .map((user) => (
+          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+        ))}
     </Avatars>
   );
 }

app/components/FilterOptions.tsx

@@ -80,7 +80,7 @@ const Note = styled(Text)`
   margin-bottom: 0;
   line-height: 1.2em;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
   color: ${s("textTertiary")};
 `;
 

app/components/Header.tsx

@@ -1,4 +1,4 @@
-import { throttle } from "lodash";
+import throttle from "lodash/throttle";
 import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
@@ -6,6 +6,7 @@ import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
@@ -14,16 +15,16 @@ import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";
-import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
   actions?: React.ReactNode;
   hasSidebar?: boolean;
+  className?: string;
 };
 
-function Header({ left, title, actions, hasSidebar }: Props) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
   const hasMobileSidebar = hasSidebar && isMobile;
@@ -54,6 +55,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
     <Wrapper
       align="center"
       shrink={false}
+      className={className}
       $passThrough={passThrough}
       $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >

app/components/Heading.ts

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 
-const Heading = styled.h1<{ centered?: boolean }>`
+const Heading = styled.h1<{ as?: string; centered?: boolean }>`
   display: flex;
   align-items: center;
   user-select: none;
+  ${(props) => (props.as ? "" : "margin-top: 6vh; font-weight: 600;")}
   ${(props) => (props.centered ? "text-align: center;" : "")}
 `;
 

app/components/Highlight.tsx

@@ -1,8 +1,7 @@
-import { escapeRegExp } from "lodash";
+import escapeRegExp from "lodash/escapeRegExp";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
   highlight: (string | null | undefined) | RegExp;
@@ -44,9 +43,9 @@ function Highlight({
 }
 
 export const Mark = styled.mark`
-  background: ${s("searchHighlight")};
-  border-radius: 2px;
-  padding: 0 2px;
+  color: inherit;
+  background: transparent;
+  font-weight: 600;
 `;
 
 export default Highlight;

app/components/HoverPreview/Components.tsx

@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Text from "~/components/Text";
 
-export const CARD_MARGIN = 16;
+export const CARD_MARGIN = 10;
 
 const NUMBER_OF_LINES = 10;
 
@@ -17,7 +17,7 @@ const StyledText = styled(Text)`
 `;
 
 export const Preview = styled(Link)`
-  cursor: ${(props: any) =>
+  cursor: ${(props: { as?: string }) =>
     props.as === "div" ? "default" : "var(--pointer)"};
   border-radius: 4px;
   box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),

app/components/HoverPreview/HoverPreview.tsx

@@ -2,13 +2,14 @@ import { m } from "framer-motion";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths, s } from "@shared/styles";
+import { depths } from "@shared/styles";
 import { UnfurlType } from "@shared/types";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useEventListener from "~/hooks/useEventListener";
 import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
+import usePrevious from "~/hooks/usePrevious";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
@@ -17,131 +18,77 @@ import HoverPreviewDocument from "./HoverPreviewDocument";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
 
-const DELAY_OPEN = 300;
 const DELAY_CLOSE = 600;
+const POINTER_HEIGHT = 22;
+const POINTER_WIDTH = 22;
 
 type Props = {
-  /* The HTML element that is being hovered over */
-  element: HTMLAnchorElement;
-  /* A callback on close of the hover preview */
+  /** The HTML element that is being hovered over, or null if none. */
+  element: HTMLElement | null;
+  /** A callback on close of the hover preview. */
   onClose: () => void;
 };
 
-function HoverPreviewInternal({ element, onClose }: Props) {
-  const url = element.href || element.dataset.url;
+enum Direction {
+  UP,
+  DOWN,
+}
+
+function HoverPreviewDesktop({ element, onClose }: Props) {
+  const url = element?.getAttribute("href") || element?.dataset.url;
+  const previousUrl = usePrevious(url, true);
   const [isVisible, setVisible] = React.useState(false);
   const timerClose = React.useRef<ReturnType<typeof setTimeout>>();
-  const timerOpen = React.useRef<ReturnType<typeof setTimeout>>();
   const cardRef = React.useRef<HTMLDivElement>(null);
-  const stores = useStores();
-  const [cardLeft, setCardLeft] = React.useState(0);
-  const [cardTop, setCardTop] = React.useState(0);
-  const [pointerOffset, setPointerOffset] = React.useState(0);
-
-  React.useLayoutEffect(() => {
-    if (isVisible && cardRef.current) {
-      const elem = element.getBoundingClientRect();
-      const card = cardRef.current.getBoundingClientRect();
-
-      const top = elem.bottom + window.scrollY;
-      setCardTop(top);
-
-      let left = elem.left;
-      let pointerOffset = elem.width / 2;
-      if (left + card.width > window.innerWidth) {
-        // shift card leftwards by the amount it went out of screen
-        let shiftBy = left + card.width - window.innerWidth;
-        // shift a littler further to leave some margin between card and window boundary
-        shiftBy += CARD_MARGIN;
-        left -= shiftBy;
-
-        // shift pointer rightwards by same amount so as to position it back correctly
-        pointerOffset += shiftBy;
-      }
-      setCardLeft(left);
-
-      setPointerOffset(pointerOffset);
-    }
-  }, [isVisible, element]);
-
-  const { data, request, loading } = useRequest(
-    React.useCallback(
-      () =>
-        client.post("/urls.unfurl", {
-          url,
-          documentId: stores.ui.activeDocumentId,
-        }),
-      [url, stores.ui.activeDocumentId]
-    )
-  );
-
-  React.useEffect(() => {
-    if (url) {
-      stopOpenTimer();
-      setVisible(false);
-
-      void request();
-    }
-  }, [url, request]);
-
-  const stopOpenTimer = () => {
-    if (timerOpen.current) {
-      clearTimeout(timerOpen.current);
-      timerOpen.current = undefined;
-    }
-  };
+  const { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir } =
+    useHoverPosition({
+      cardRef,
+      element,
+      isVisible,
+    });
 
   const closePreview = React.useCallback(() => {
-    if (isVisible) {
-      stopOpenTimer();
-      setVisible(false);
-      onClose();
-    }
-  }, [isVisible, onClose]);
+    setVisible(false);
+    onClose();
+  }, [onClose]);
 
-  useOnClickOutside(cardRef, closePreview);
-  useKeyDown("Escape", closePreview);
-  useEventListener("scroll", closePreview, window, { capture: true });
-
-  const stopCloseTimer = () => {
+  const stopCloseTimer = React.useCallback(() => {
     if (timerClose.current) {
       clearTimeout(timerClose.current);
       timerClose.current = undefined;
     }
-  };
-
-  const startOpenTimer = () => {
-    if (!timerOpen.current) {
-      timerOpen.current = setTimeout(() => setVisible(true), DELAY_OPEN);
-    }
-  };
+  }, []);
 
   const startCloseTimer = React.useCallback(() => {
-    stopOpenTimer();
     timerClose.current = setTimeout(closePreview, DELAY_CLOSE);
   }, [closePreview]);
 
+  // Open and close the preview when the element changes.
+  React.useEffect(() => {
+    if (element) {
+      setVisible(true);
+    } else {
+      startCloseTimer();
+    }
+  }, [startCloseTimer, element]);
+
+  // Close the preview on Escape, scroll, or click outside.
+  useOnClickOutside(cardRef, closePreview);
+  useKeyDown("Escape", closePreview);
+  useEventListener("scroll", closePreview, window, { capture: true });
+
+  // Ensure that the preview stays open while the user is hovering over the card.
   React.useEffect(() => {
     const card = cardRef.current;
 
-    if (data) {
-      startOpenTimer();
-
+    if (isVisible) {
       if (card) {
         card.addEventListener("mouseenter", stopCloseTimer);
         card.addEventListener("mouseleave", startCloseTimer);
       }
-
-      element.addEventListener("mouseout", startCloseTimer);
-      element.addEventListener("mouseover", stopCloseTimer);
-      element.addEventListener("mouseover", startOpenTimer);
     }
 
     return () => {
-      element.removeEventListener("mouseout", startCloseTimer);
-      element.removeEventListener("mouseover", stopCloseTimer);
-      element.removeEventListener("mouseover", startOpenTimer);
-
       if (card) {
         card.removeEventListener("mouseenter", stopCloseTimer);
         card.removeEventListener("mouseleave", startCloseTimer);
@@ -149,7 +96,83 @@ function HoverPreviewInternal({ element, onClose }: Props) {
 
       stopCloseTimer();
     };
-  }, [element, startCloseTimer, data]);
+  }, [element, startCloseTimer, isVisible, stopCloseTimer]);
+
+  const displayUrl = url ?? previousUrl;
+
+  if (!isVisible || !displayUrl) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <Position top={cardTop} left={cardLeft} ref={cardRef} aria-hidden>
+        <DataLoader url={displayUrl}>
+          {(data) => (
+            <Animate
+              initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
+              animate={{ opacity: 1, y: 0, pointerEvents: "auto" }}
+            >
+              {data.type === UnfurlType.Mention ? (
+                <HoverPreviewMention
+                  url={data.thumbnailUrl}
+                  title={data.title}
+                  info={data.meta.info}
+                  color={data.meta.color}
+                />
+              ) : data.type === UnfurlType.Document ? (
+                <HoverPreviewDocument
+                  id={data.meta.id}
+                  url={data.url}
+                  title={data.title}
+                  description={data.description}
+                  info={data.meta.info}
+                />
+              ) : (
+                <HoverPreviewLink
+                  url={data.url}
+                  thumbnailUrl={data.thumbnailUrl}
+                  title={data.title}
+                  description={data.description}
+                />
+              )}
+              <Pointer
+                top={pointerTop}
+                left={pointerLeft}
+                direction={pointerDir}
+              />
+            </Animate>
+          )}
+        </DataLoader>
+      </Position>
+    </Portal>
+  );
+}
+
+function DataLoader({
+  url,
+  children,
+}: {
+  url: string;
+  children: (data: any) => React.ReactNode;
+}) {
+  const { ui } = useStores();
+  const { data, request, loading } = useRequest(
+    React.useCallback(
+      () =>
+        client.post("/urls.unfurl", {
+          url,
+          documentId: ui.activeDocumentId,
+        }),
+      [url, ui.activeDocumentId]
+    )
+  );
+
+  React.useEffect(() => {
+    if (url) {
+      void request();
+    }
+  }, [url, request]);
 
   if (loading) {
     return <LoadingIndicator />;
@@ -159,46 +182,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
     return null;
   }
 
-  return (
-    <Portal>
-      <Position top={cardTop} left={cardLeft} aria-hidden>
-        {isVisible ? (
-          <Animate
-            initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
-            animate={{ opacity: 1, y: 0, pointerEvents: "auto" }}
-          >
-            {data.type === UnfurlType.Mention ? (
-              <HoverPreviewMention
-                ref={cardRef}
-                url={data.thumbnailUrl}
-                title={data.title}
-                info={data.meta.info}
-                color={data.meta.color}
-              />
-            ) : data.type === UnfurlType.Document ? (
-              <HoverPreviewDocument
-                ref={cardRef}
-                id={data.meta.id}
-                url={data.url}
-                title={data.title}
-                description={data.description}
-                info={data.meta.info}
-              />
-            ) : (
-              <HoverPreviewLink
-                ref={cardRef}
-                url={data.url}
-                thumbnailUrl={data.thumbnailUrl}
-                title={data.title}
-                description={data.description}
-              />
-            )}
-            <Pointer offset={pointerOffset} />
-          </Animate>
-        ) : null}
-      </Position>
-    </Portal>
-  );
+  return <>{children(data)}</>;
 }
 
 function HoverPreview({ element, ...rest }: Props) {
@@ -207,7 +191,64 @@ function HoverPreview({ element, ...rest }: Props) {
     return null;
   }
 
-  return <HoverPreviewInternal {...rest} element={element} />;
+  return <HoverPreviewDesktop {...rest} element={element} />;
+}
+
+function useHoverPosition({
+  cardRef,
+  element,
+  isVisible,
+}: {
+  cardRef: React.RefObject<HTMLDivElement>;
+  element: HTMLElement | null;
+  isVisible: boolean;
+}) {
+  const [cardLeft, setCardLeft] = React.useState(0);
+  const [cardTop, setCardTop] = React.useState(0);
+  const [pointerLeft, setPointerLeft] = React.useState(0);
+  const [pointerTop, setPointerTop] = React.useState(0);
+  const [pointerDir, setPointerDir] = React.useState(Direction.UP);
+
+  React.useLayoutEffect(() => {
+    if (isVisible && element && cardRef.current) {
+      const elem = element.getBoundingClientRect();
+      const card = cardRef.current.getBoundingClientRect();
+
+      let cTop = elem.bottom + window.scrollY + CARD_MARGIN;
+      let pTop = -POINTER_HEIGHT;
+      let pDir = Direction.UP;
+      if (cTop + card.height > window.innerHeight + window.scrollY) {
+        // shift card upwards if it goes out of screen
+        const bottom = elem.top + window.scrollY;
+        cTop = bottom - card.height;
+        // shift a little further to leave some margin between card and element boundary
+        cTop -= CARD_MARGIN;
+        // pointer should be shifted downwards to align with card's bottom
+        pTop = card.height;
+        pDir = Direction.DOWN;
+      }
+      setCardTop(cTop);
+      setPointerTop(pTop);
+      setPointerDir(pDir);
+
+      let cLeft = elem.left;
+      let pLeft = elem.width / 2;
+      if (cLeft + card.width > window.innerWidth) {
+        // shift card leftwards by the amount it went out of screen
+        let shiftBy = cLeft + card.width - window.innerWidth;
+        // shift a little further to leave some margin between card and window boundary
+        shiftBy += CARD_MARGIN;
+        cLeft -= shiftBy;
+
+        // shift pointer rightwards by same amount so as to position it back correctly
+        pLeft += shiftBy;
+      }
+      setCardLeft(cLeft);
+      setPointerLeft(pLeft);
+    }
+  }, [isVisible, cardRef, element]);
+
+  return { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir };
 }
 
 const Animate = styled(m.div)`
@@ -217,7 +258,6 @@ const Animate = styled(m.div)`
 `;
 
 const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
-  margin-top: 10px;
   position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
   z-index: ${depths.hoverPreview};
   display: flex;
@@ -227,11 +267,11 @@ const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
   ${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
 `;
 
-const Pointer = styled.div<{ offset: number }>`
-  top: -22px;
-  left: ${(props) => props.offset}px;
-  width: 22px;
-  height: 22px;
+const Pointer = styled.div<{ top: number; left: number; direction: Direction }>`
+  top: ${(props) => props.top}px;
+  left: ${(props) => props.left}px;
+  width: ${POINTER_WIDTH}px;
+  height: ${POINTER_HEIGHT}px;
   position: absolute;
   transform: translateX(-50%);
   pointer-events: none;
@@ -241,20 +281,26 @@ const Pointer = styled.div<{ offset: number }>`
     content: "";
     display: inline-block;
     position: absolute;
-    bottom: 0;
-    right: 0;
+    ${({ direction }) => (direction === Direction.UP ? "bottom: 0" : "top: 0")};
+    ${({ direction }) => (direction === Direction.UP ? "right: 0" : "left: 0")};
   }
 
   &:before {
     border: 8px solid transparent;
-    border-bottom-color: ${(props) =>
-      props.theme.menuBorder || "rgba(0, 0, 0, 0.1)"};
-    right: -1px;
+    ${({ direction, theme }) =>
+      direction === Direction.UP
+        ? `border-bottom-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`
+        : `border-top-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`};
+    ${({ direction }) =>
+      direction === Direction.UP ? "right: -1px" : "left: -1px"};
   }
 
   &:after {
     border: 7px solid transparent;
-    border-bottom-color: ${s("menuBackground")};
+    ${({ direction, theme }) =>
+      direction === Direction.UP
+        ? `border-bottom-color: ${theme.menuBackground}`
+        : `border-top-color: ${theme.menuBackground}`};
   }
 `;
 

app/components/HoverPreview/HoverPreviewLink.tsx

@@ -26,9 +26,9 @@ const HoverPreviewLink = React.forwardRef(function _HoverPreviewLink(
 ) {
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
-      <Flex column>
+      <Flex column ref={ref}>
         {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt={""} /> : null}
-        <Card ref={ref}>
+        <Card>
           <CardContent>
             <Flex column>
               <Title>{title}</Title>

app/components/IconPicker.tsx

@@ -49,11 +49,7 @@ import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import DelayedMount from "./DelayedMount";
-
-const style = {
-  width: 30,
-  height: 30,
-};
+import LetterIcon from "./Icons/LetterIcon";
 
 const TwitterPicker = lazyWithRetry(
   () => import("react-color/lib/components/twitter/Twitter")
@@ -136,6 +132,10 @@ export const icons = {
     component: LightningIcon,
     keywords: "lightning fast zap",
   },
+  letter: {
+    component: LetterIcon,
+    keywords: "letter",
+  },
   math: {
     component: MathIcon,
     keywords: "math formula",
@@ -206,11 +206,19 @@ type Props = {
   onOpen?: () => void;
   onClose?: () => void;
   onChange: (color: string, icon: string) => void;
+  initial: string;
   icon: string;
   color: string;
 };
 
-function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
+function IconPicker({
+  onOpen,
+  onClose,
+  icon,
+  initial,
+  color,
+  onChange,
+}: Props) {
   const { t } = useTranslation();
   const theme = useTheme();
   const menu = useMenuState({
@@ -230,7 +238,9 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
               as={icons[icon || "collection"].component}
               color={color}
               size={30}
-            />
+            >
+              {initial}
+            </Icon>
           </Button>
         )}
       </MenuButton>
@@ -238,6 +248,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
         {...menu}
         onOpen={onOpen}
         onClose={onClose}
+        maxWidth={308}
         aria-label={t("Choose icon")}
       >
         <Icons>
@@ -251,13 +262,14 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
                 <IconButton
                   style={
                     {
-                      ...style,
                       "--delay": `${index * 8}ms`,
                     } as React.CSSProperties
                   }
                   {...props}
                 >
-                  <Icon as={icons[name].component} color={color} size={30} />
+                  <Icon as={icons[name].component} color={color} size={30}>
+                    {initial}
+                  </Icon>
                 </IconButton>
               )}
             </MenuItem>
@@ -318,7 +330,7 @@ const Icons = styled.div`
   padding: 8px;
 
   ${breakpoint("tablet")`
-    width: 276px;
+    width: 304px;
   `};
 `;
 
@@ -329,6 +341,7 @@ const Button = styled(NudeButton)`
 `;
 
 const IconButton = styled(NudeButton)`
+  vertical-align: top;
   border-radius: 4px;
   margin: 0px 6px 6px 0px;
   width: 30px;

app/components/Icons/CollectionIcon.tsx

@@ -39,7 +39,11 @@ function ResolvedCollectionIcon({
   if (collection.icon && collection.icon !== "collection") {
     try {
       const Component = icons[collection.icon].component;
-      return <Component color={color} size={size} />;
+      return (
+        <Component color={color} size={size}>
+          {collection.initial}
+        </Component>
+      );
     } catch (error) {
       Logger.warn("Failed to render custom icon", {
         icon: collection.icon,

app/components/Icons/EmojiIcon.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import styled from "styled-components";
 
 type Props = {
-  /* The emoji to render */
+  /** The emoji to render */
   emoji: string;
-  /* The size of the emoji, 24px is default to match standard icons */
+  /** The size of the emoji, 24px is default to match standard icons */
   size?: number;
 };
 
@@ -29,5 +29,5 @@ const Span = styled.span<{ $size: number }>`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
   text-indent: -0.15em;
-  font-size: 14px;
+  font-size: ${(props) => props.$size - 10}px;
 `;

app/components/Icons/LetterIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Squircle from "../Squircle";
+
+type Props = {
+  /** The width and height of the icon, including standard padding. */
+  size?: number;
+  children: React.ReactNode;
+};
+
+/**
+ * A squircle shaped icon with a letter inside, used for collections.
+ */
+const LetterIcon = ({ children, size = 24, ...rest }: Props) => (
+  <LetterIconWrapper $size={size}>
+    <Squircle size={Math.round(size * 0.66)} {...rest}>
+      {children}
+    </Squircle>
+  </LetterIconWrapper>
+);
+
+const LetterIconWrapper = styled.div<{ $size: number }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+
+  font-weight: 700;
+  font-size: ${({ $size }) => $size / 2}px;
+  color: ${s("background")};
+`;
+
+export default LetterIcon;

app/components/Icons/OutlineIcon.tsx

@@ -5,7 +5,7 @@ type Props = {
   size?: number;
   /** The color of the icon, defaults to the current text color */
   color?: string;
-  /* Whether the safe area should be removed and have graphic across full size */
+  /** Whether the safe area should be removed and have graphic across full size */
   cover?: boolean;
 };
 

app/components/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -7,7 +8,7 @@ import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
-const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
+export const NativeTextarea = styled.textarea<{ hasIcon?: boolean }>`
   border: 0;
   flex: 1;
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
@@ -18,10 +19,11 @@ const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 
-const RealInput = styled.input<{ hasIcon?: boolean }>`
+export const NativeInput = styled.input<{ hasIcon?: boolean }>`
   border: 0;
   flex: 1;
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
@@ -38,6 +40,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 
   &:-webkit-autofill,
@@ -55,7 +58,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   `};
 `;
 
-const Wrapper = styled.div<{
+export const Wrapper = styled.div<{
   flex?: boolean;
   short?: boolean;
   minHeight?: number;
@@ -110,9 +113,11 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = React.InputHTMLAttributes<
-  HTMLInputElement | HTMLTextAreaElement
-> & {
+export interface Props
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
+    "prefix"
+  > {
   type?: "text" | "email" | "checkbox" | "search" | "textarea";
   labelHidden?: boolean;
   label?: string;
@@ -120,19 +125,25 @@ export type Props = React.InputHTMLAttributes<
   short?: boolean;
   margin?: string | number;
   error?: string;
+  /** Optional component that appears inside the input before the textarea and any icon */
+  prefix?: React.ReactNode;
+  /** Optional icon that appears inside the input before the textarea */
   icon?: React.ReactNode;
-  /* Callback is triggered with the CMD+Enter keyboard combo */
+  /** Like autoFocus, but also select any text in the input */
+  autoSelect?: boolean;
+  /** Callback is triggered with the CMD+Enter keyboard combo */
   onRequestSubmit?: (
     ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => unknown;
   onFocus?: (ev: React.SyntheticEvent) => unknown;
   onBlur?: (ev: React.SyntheticEvent) => unknown;
-};
+}
 
 function Input(
   props: Props,
   ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
 ) {
+  const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>();
   const [focused, setFocused] = React.useState(false);
 
   const handleBlur = (ev: React.SyntheticEvent) => {
@@ -165,6 +176,12 @@ function Input(
     }
   };
 
+  React.useEffect(() => {
+    if (props.autoSelect && internalRef.current) {
+      internalRef.current.select();
+    }
+  }, [props.autoSelect, internalRef]);
+
   const {
     type = "text",
     icon,
@@ -174,6 +191,7 @@ function Input(
     className,
     short,
     flex,
+    prefix,
     labelHidden,
     onFocus,
     onBlur,
@@ -194,10 +212,14 @@ function Input(
             wrappedLabel
           ))}
         <Outline focused={focused} margin={margin}>
+          {prefix}
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
-            <RealTextarea
-              ref={ref as React.RefObject<HTMLTextAreaElement>}
+            <NativeTextarea
+              ref={mergeRefs([
+                internalRef,
+                ref as React.RefObject<HTMLTextAreaElement>,
+              ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}
@@ -205,8 +227,11 @@ function Input(
               {...rest}
             />
           ) : (
-            <RealInput
-              ref={ref as React.RefObject<HTMLInputElement>}
+            <NativeInput
+              ref={mergeRefs([
+                internalRef,
+                ref as React.RefObject<HTMLInputElement>,
+              ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}

app/components/InputMemberPermissionSelect.tsx

@@ -2,31 +2,18 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { CollectionPermission } from "@shared/types";
 import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
+import { Permission } from "~/types";
 
 export default function InputMemberPermissionSelect(
-  props: Partial<SelectProps>
+  props: Partial<SelectProps> & { permissions: Permission[] }
 ) {
   const { t } = useTranslation();
 
   return (
     <Select
       label={t("Permissions")}
-      options={[
-        {
-          label: t("View only"),
-          value: CollectionPermission.Read,
-        },
-        {
-          label: t("View and edit"),
-          value: CollectionPermission.ReadWrite,
-        },
-        {
-          label: t("Admin"),
-          value: CollectionPermission.Admin,
-        },
-      ]}
+      options={props.permissions}
       ariaLabel={t("Permissions")}
       labelHidden
       nude

app/components/InputRich.tsx

@@ -1,63 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans } from "react-i18next";
-import styled from "styled-components";
-import Editor from "~/components/Editor";
-import { LabelText, Outline } from "~/components/Input";
-import Text from "~/components/Text";
-
-type Props = {
-  label: string;
-  minHeight?: number;
-  maxHeight?: number;
-  readOnly?: boolean;
-};
-
-function InputRich({ label, minHeight, maxHeight, ...rest }: Props) {
-  const [focused, setFocused] = React.useState<boolean>(false);
-  const handleBlur = React.useCallback(() => {
-    setFocused(false);
-  }, []);
-  const handleFocus = React.useCallback(() => {
-    setFocused(true);
-  }, []);
-
-  return (
-    <>
-      <LabelText>{label}</LabelText>
-      <StyledOutline
-        maxHeight={maxHeight}
-        minHeight={minHeight}
-        focused={focused}
-      >
-        <React.Suspense
-          fallback={
-            <Text type="secondary">
-              <Trans>Loading editor</Trans>…
-            </Text>
-          }
-        >
-          <Editor onBlur={handleBlur} onFocus={handleFocus} grow {...rest} />
-        </React.Suspense>
-      </StyledOutline>
-    </>
-  );
-}
-
-const StyledOutline = styled(Outline)<{
-  minHeight?: number;
-  maxHeight?: number;
-  focused?: boolean;
-}>`
-  display: block;
-  padding: 8px 12px;
-  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
-  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "auto")};
-  overflow-y: auto;
-
-  > * {
-    display: block;
-  }
-`;
-
-export default observer(InputRich);

app/components/InputSelect.tsx

@@ -46,6 +46,10 @@ export type Props = {
   onChange?: (value: string | null) => void;
 };
 
+interface InnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  placement: Placement;
+}
+
 const getOptionFromValue = (options: Option[], value: string | null) =>
   options.find((option) => option.value === value);
 
@@ -102,6 +106,10 @@ const InputSelect = (props: Props) => {
     (option) => option.value === select.selectedValue
   );
 
+  React.useEffect(() => {
+    select.setSelectedValue(value);
+  }, [value]);
+
   React.useEffect(() => {
     if (previousValue.current === select.selectedValue) {
       return;
@@ -147,11 +155,7 @@ const InputSelect = (props: Props) => {
           )}
         </Select>
         <SelectPopover {...select} {...popOver} aria-label={ariaLabel}>
-          {(
-            props: React.HTMLAttributes<HTMLDivElement> & {
-              placement: Placement;
-            }
-          ) => {
+          {(props: InnerProps) => {
             const topAnchor = props.style?.top === "0";
             const rightAnchor = props.placement === "bottom-end";
 
@@ -163,6 +167,7 @@ const InputSelect = (props: Props) => {
                   topAnchor={topAnchor}
                   rightAnchor={rightAnchor}
                   hiddenScrollbars
+                  maxWidth={400}
                   style={
                     maxHeight && topAnchor
                       ? {
@@ -244,8 +249,8 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
 
   ${Inner} {
     line-height: 28px;
-    padding-left: 16px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 4px;
   }
 
   svg {
@@ -267,7 +272,7 @@ const Wrapper = styled.label<{ short?: boolean }>`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-const Positioner = styled(Position)`
+export const Positioner = styled(Position)`
   &.focus-visible {
     ${StyledSelectOption} {
       &[aria-selected="true"] {

app/components/InputSelectPermission.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { $Diff } from "utility-types";
 import { CollectionPermission } from "@shared/types";
+import { EmptySelectValue } from "~/types";
 import InputSelect, { Props, Option } from "./InputSelect";
 
 export default function InputSelectPermission(
@@ -17,8 +18,8 @@ export default function InputSelectPermission(
   const { t } = useTranslation();
   const handleChange = React.useCallback(
     (value) => {
-      if (value === "no_access") {
-        value = "";
+      if (value === EmptySelectValue) {
+        value = null;
       }
 
       onChange?.(value);
@@ -31,7 +32,7 @@ export default function InputSelectPermission(
       label={t("Default access")}
       options={[
         {
-          label: t("View and edit"),
+          label: t("Can edit"),
           value: CollectionPermission.ReadWrite,
         },
         {
@@ -40,11 +41,11 @@ export default function InputSelectPermission(
         },
         {
           label: t("No access"),
-          value: "no_access",
+          value: EmptySelectValue,
         },
       ]}
       ariaLabel={t("Default access")}
-      value={value || "no_access"}
+      value={value || EmptySelectValue}
       onChange={handleChange}
       {...rest}
     />

app/components/InputSelectRole.tsx

@@ -18,7 +18,7 @@ const InputSelectRole = (
       label={t("Role")}
       options={[
         {
-          label: t("Member"),
+          label: t("Editor"),
           value: "member",
         },
         {

app/components/Key.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 type Props = {
-  /* Set to true if displaying a single symbol character to disable monospace */
+  /** Set to true if displaying a single symbol character to disable monospace */
   symbol?: boolean;
 };
 

app/components/LanguagePrompt.tsx

@@ -1,4 +1,4 @@
-import { find } from "lodash";
+import find from "lodash/find";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -42,7 +42,7 @@ function Icon({ className }: { className?: string }) {
 }
 
 export default function LanguagePrompt() {
-  const { auth, ui } = useStores();
+  const { ui } = useStores();
   const { t } = useTranslation();
   const user = useCurrentUser();
   const language = detectLanguage();
@@ -75,9 +75,7 @@ export default function LanguagePrompt() {
           <Link
             onClick={async () => {
               ui.setLanguagePromptDismissed();
-              await auth.updateUser({
-                language,
-              });
+              await user.save({ language });
             }}
           >
             {t("Change Language")}

app/components/Layout.tsx

@@ -22,12 +22,10 @@ type Props = {
   sidebarRight?: React.ReactNode;
 };
 
-const Layout: React.FC<Props> = ({
-  title,
-  children,
-  sidebar,
-  sidebarRight,
-}: Props) => {
+const Layout = React.forwardRef(function Layout_(
+  { title, children, sidebar, sidebarRight }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
 
@@ -40,7 +38,7 @@ const Layout: React.FC<Props> = ({
   });
 
   return (
-    <Container column auto>
+    <Container column auto ref={ref}>
       <Helmet>
         <title>{title ? title : env.APP_NAME}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -75,7 +73,7 @@ const Layout: React.FC<Props> = ({
       </Container>
     </Container>
   );
-};
+});
 
 const Container = styled(Flex)`
   background: ${s("background")};

app/components/List/Item.tsx

@@ -12,6 +12,7 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   title: React.ReactNode;
   subtitle?: React.ReactNode;
   actions?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   border?: boolean;
   small?: boolean;
 };
@@ -74,10 +75,12 @@ const ListItem = (
 const Wrapper = styled.a<{
   $small?: boolean;
   $border?: boolean;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   to?: LocationDescriptor;
 }>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
+  min-height: 32px;
   margin: ${(props) =>
     props.$border === false ? (props.$small ? "8px 0" : "16px 0") : 0};
   border-bottom: 1px solid
@@ -88,7 +91,13 @@ const Wrapper = styled.a<{
     border-bottom: 0;
   }
 
-  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
+  &:hover {
+    background: ${(props) =>
+      props.onClick ? props.theme.secondaryBackground : "inherit"};
+  }
+
+  cursor: ${(props) =>
+    props.to || props.onClick ? "var(--pointer)" : "default"};
 `;
 
 const Image = styled(Flex)`
@@ -126,6 +135,7 @@ const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
 export const Actions = styled(Flex)<{ $selected?: boolean }>`
   align-self: center;
   justify-content: center;
+  flex-shrink: 0;
   color: ${(props) =>
     props.$selected ? props.theme.white : props.theme.textSecondary};
 `;

app/components/List/Placeholder.tsx

@@ -1,4 +1,4 @@
-import { times } from "lodash";
+import times from "lodash/times";
 import * as React from "react";
 import styled from "styled-components";
 import Fade from "~/components/Fade";

app/components/LocaleTime.tsx

@@ -20,7 +20,7 @@ function eachMinute(fn: () => void) {
   };
 }
 
-type Props = {
+export type Props = {
   children?: React.ReactNode;
   dateTime: string;
   tooltipDelay?: number;

app/components/MobileScrollWrapper.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import styled from "styled-components";
+import useMobile from "~/hooks/useMobile";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const MobileWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+
+const MobileScrollWrapper = ({ children }: Props) => {
+  const isMobile = useMobile();
+  return isMobile ? <MobileWrapper>{children}</MobileWrapper> : <>{children}</>;
+};
+
+export default MobileScrollWrapper;

app/components/Modal.tsx

@@ -94,11 +94,9 @@ const Modal: React.FC<Props> = ({
                           {title}
                         </Text>
                       )}
-                      <Text as="span" size="large">
-                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon />
-                        </NudeButton>
-                      </Text>
+                      <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
+                      </NudeButton>
                     </Header>
                   </Centered>
                 </Small>
@@ -259,7 +257,7 @@ const Small = styled.div`
   margin: auto auto;
   width: 30vw;
   min-width: 350px;
-  max-width: 500px;
+  max-width: 450px;
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;

app/components/NavLink.tsx

@@ -1,4 +1,4 @@
-import { LocationDescriptor } from "history";
+import { LocationDescriptor, LocationDescriptorObject } from "history";
 import * as React from "react";
 import { match, NavLink, Route } from "react-router-dom";
 
@@ -9,10 +9,20 @@ type Props = React.ComponentProps<typeof NavLink> & {
           [x: string]: string | undefined;
         }>
       | boolean
-      | null
+      | null,
+    location: LocationDescriptorObject
   ) => React.ReactNode;
+  /**
+   * If true, the tab will only be active if the path matches exactly.
+   */
   exact?: boolean;
+  /**
+   * CSS properties to apply to the link when it is active.
+   */
   activeStyle?: React.CSSProperties;
+  /**
+   * The path to match against the current location.
+   */
   to: LocationDescriptor;
 };
 
@@ -25,7 +35,10 @@ function NavLinkWithChildrenFunc(
       {({ match, location }) => (
         <NavLink {...rest} to={to} exact={exact} ref={ref}>
           {children
-            ? children(rest.isActive ? rest.isActive(match, location) : match)
+            ? children(
+                rest.isActive ? rest.isActive(match, location) : match,
+                location
+              )
             : null}
         </NavLink>
       )}

app/components/Notifications/NotificationIcon.tsx

@@ -1,19 +1,18 @@
 import { observer } from "mobx-react";
 import { SubscribeIcon } from "outline-icons";
 import * as React from "react";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 import { s } from "@shared/styles";
 import useStores from "~/hooks/useStores";
 import Relative from "../Sidebar/components/Relative";
 
 const NotificationIcon = () => {
   const { notifications } = useStores();
-  const theme = useTheme();
   const count = notifications.approximateUnreadCount;
 
   return (
     <Relative style={{ height: 24 }}>
-      <SubscribeIcon color={theme.textTertiary} />
+      <SubscribeIcon />
       {count > 0 && <Badge />}
     </Relative>
   );

app/components/Notifications/NotificationListItem.tsx

@@ -40,7 +40,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
   };
 
   return (
-    <Link to={notification.path} onClick={handleClick}>
+    <Link to={notification.path ?? ""} onClick={handleClick}>
       <Container gap={8} $unread={!notification.viewedAt}>
         <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
         <Flex column>
@@ -87,6 +87,7 @@ const StyledAvatar = styled(Avatar)`
 const Container = styled(Flex)<{ $unread: boolean }>`
   position: relative;
   padding: 8px 12px;
+  padding-right: 40px;
   margin: 0 8px;
   border-radius: 4px;
 

app/components/Notifications/Notifications.tsx

@@ -22,7 +22,7 @@ import Tooltip from "../Tooltip";
 import NotificationListItem from "./NotificationListItem";
 
 type Props = {
-  /* Callback when the notification panel wants to close. */
+  /** Callback when the notification panel wants to close. */
   onRequestClose: () => void;
 };
 

app/components/NudeButton.tsx

@@ -1,8 +1,9 @@
+import { darken } from "polished";
 import styled from "styled-components";
 import ActionButton, {
   Props as ActionButtonProps,
 } from "~/components/ActionButton";
-import { undraggableOnDesktop } from "~/styles";
+import { hover, undraggableOnDesktop } from "~/styles";
 
 type Props = ActionButtonProps & {
   width?: number | string;
@@ -32,6 +33,11 @@ const NudeButton = styled(ActionButton).attrs((props: Props) => ({
   user-select: none;
   color: inherit;
   ${undraggableOnDesktop()}
+
+  &:${hover}, 
+  &[aria-expanded="true"] {
+    background: ${(props) => darken(0.05, props.theme.buttonNeutralBackground)};
+  }
 `;
 
 export default NudeButton;

app/components/PaginatedList.test.tsx

@@ -3,8 +3,7 @@ import { shallow } from "enzyme";
 import { TFunction } from "i18next";
 import * as React from "react";
 import { getI18n } from "react-i18next";
-import { DEFAULT_PAGINATION_LIMIT } from "~/stores/BaseStore";
-import RootStore from "~/stores/RootStore";
+import { Pagination } from "@shared/constants";
 import { runAllPromises } from "~/test/support";
 import { Component as PaginatedList } from "./PaginatedList";
 
@@ -12,17 +11,12 @@ describe("PaginatedList", () => {
   const render = () => null;
 
   const i18n = getI18n();
-  const { logout, ...store } = new RootStore();
 
   const props = {
     i18n,
     tReady: true,
     t: ((key: string) => key) as TFunction,
-    logout: () => {
-      //
-    },
-    ...store,
-  };
+  } as any;
 
   it("with no items renders nothing", () => {
     const list = shallow(
@@ -59,13 +53,13 @@ describe("PaginatedList", () => {
     );
     expect(fetch).toHaveBeenCalledWith({
       ...options,
-      limit: DEFAULT_PAGINATION_LIMIT,
+      limit: Pagination.defaultLimit,
       offset: 0,
     });
   });
 
   it("calls fetch when options prop changes", async () => {
-    const fetchedItems = Array(DEFAULT_PAGINATION_LIMIT).fill(undefined);
+    const fetchedItems = Array(Pagination.defaultLimit).fill(undefined);
     const fetch = jest.fn().mockReturnValue(Promise.resolve(fetchedItems));
     const list = shallow(
       <PaginatedList
@@ -81,7 +75,7 @@ describe("PaginatedList", () => {
     await runAllPromises();
     expect(fetch).toHaveBeenCalledWith({
       id: "one",
-      limit: DEFAULT_PAGINATION_LIMIT,
+      limit: Pagination.defaultLimit,
       offset: 0,
     });
     fetch.mockReset();
@@ -95,7 +89,7 @@ describe("PaginatedList", () => {
     await runAllPromises();
     expect(fetch).toHaveBeenCalledWith({
       id: "two",
-      limit: DEFAULT_PAGINATION_LIMIT,
+      limit: Pagination.defaultLimit,
       offset: 0,
     });
   });

app/components/PaginatedList.tsx

@@ -1,11 +1,11 @@
-import { isEqual } from "lodash";
+import isEqual from "lodash/isEqual";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
 import { CompositeStateReturn } from "reakit/Composite";
-import { DEFAULT_PAGINATION_LIMIT } from "~/stores/BaseStore";
+import { Pagination } from "@shared/constants";
 import RootStore from "~/stores/RootStore";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DelayedMount from "~/components/DelayedMount";
@@ -86,7 +86,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
   reset = () => {
     this.offset = 0;
     this.allowLoadMore = true;
-    this.renderCount = DEFAULT_PAGINATION_LIMIT;
+    this.renderCount = Pagination.defaultLimit;
     this.isFetching = false;
     this.isFetchingInitial = false;
     this.isFetchingMore = false;
@@ -99,7 +99,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     }
     this.isFetching = true;
     const counter = ++this.fetchCounter;
-    const limit = this.props.options?.limit ?? DEFAULT_PAGINATION_LIMIT;
+    const limit = this.props.options?.limit ?? Pagination.defaultLimit;
     this.error = undefined;
 
     try {
@@ -139,12 +139,12 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
 
     if (leftToRender > 0) {
-      this.renderCount += DEFAULT_PAGINATION_LIMIT;
+      this.renderCount += Pagination.defaultLimit;
     }
 
     // If there are less than a pages results in the cache go ahead and fetch
     // another page from the server
-    if (leftToRender <= DEFAULT_PAGINATION_LIMIT) {
+    if (leftToRender <= Pagination.defaultLimit) {
       this.isFetchingMore = true;
       await this.fetchResults();
     }

app/components/PlaceholderDocument.tsx

@@ -51,5 +51,6 @@ export default function PlaceholderDocument({
 
 const Wrapper = styled(Fade)`
   display: block;
-  margin: 40px 0;
+  margin: 6vh 0;
+  padding: 12px 0;
 `;

app/components/Popover.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { Dialog } from "reakit/Dialog";
 import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
@@ -15,6 +16,8 @@ type Props = PopoverProps & {
   tabIndex?: number;
   scrollable?: boolean;
   mobilePosition?: "top" | "bottom";
+  show: () => void;
+  hide: () => void;
 };
 
 const Popover: React.FC<Props> = ({
@@ -28,6 +31,21 @@ const Popover: React.FC<Props> = ({
 }: Props) => {
   const isMobile = useMobile();
 
+  // Custom Escape handler rather than using hideOnEsc from reakit so we can
+  // prevent default behavior of exiting fullscreen.
+  useKeyDown(
+    "Escape",
+    (event) => {
+      if (rest.visible && rest.hideOnEsc !== false) {
+        event.preventDefault();
+        rest.hide();
+      }
+    },
+    {
+      allowInInput: true,
+    }
+  );
+
   if (isMobile) {
     return (
       <Dialog {...rest} modal>
@@ -44,7 +62,7 @@ const Popover: React.FC<Props> = ({
   }
 
   return (
-    <ReakitPopover {...rest}>
+    <ReakitPopover {...rest} hideOnEsc={false}>
       <Contents
         $shrink={shrink}
         $width={width}
@@ -77,10 +95,13 @@ const Contents = styled.div<ContentsProps>`
   width: ${(props) => props.$width}px;
 
   ${(props) =>
-    props.$scrollable &&
-    css`
+    props.$scrollable
+      ? `
       overflow-x: hidden;
       overflow-y: auto;
+    `
+      : `
+      overflow: hidden;
     `}
 
   ${breakpoint("mobile", "tablet")`

app/components/Scene.tsx

@@ -5,12 +5,21 @@ import Header from "~/components/Header";
 import PageTitle from "~/components/PageTitle";
 
 type Props = {
+  /** An icon to display in the header when content has scrolled past the title */
   icon?: React.ReactNode;
+  /** The title of the scene */
   title?: React.ReactNode;
+  /** The title of the scene, as text – only required if the title prop is not plain text */
   textTitle?: string;
+  /** A component to display on the left side of the header */
   left?: React.ReactNode;
+  /** A component to display on the right side of the header */
   actions?: React.ReactNode;
+  /** Whether to center the content horizontally with the standard maximum width (default: true) */
   centered?: boolean;
+  /** Whether to use the full width of the screen (default: false) */
+  wide?: boolean;
+  /** The content of the scene */
   children?: React.ReactNode;
 };
 
@@ -22,6 +31,7 @@ const Scene: React.FC<Props> = ({
   left,
   children,
   centered,
+  wide,
 }: Props) => (
   <FillWidth>
     <PageTitle title={textTitle || title} />
@@ -40,7 +50,9 @@ const Scene: React.FC<Props> = ({
       left={left}
     />
     {centered !== false ? (
-      <CenteredContent withStickyHeader>{children}</CenteredContent>
+      <CenteredContent maxWidth={wide ? "100vw" : undefined} withStickyHeader>
+        {children}
+      </CenteredContent>
     ) : (
       children
     )}

app/components/SearchActions.ts

@@ -11,7 +11,9 @@ export default function SearchActions() {
 
   React.useEffect(() => {
     if (!searches.isLoaded) {
-      void searches.fetchPage({});
+      void searches.fetchPage({
+        source: "app",
+      });
     }
   }, [searches]);
 

app/components/SearchListItem.tsx

@@ -116,7 +116,7 @@ const Heading = styled.h4<{ rtl?: boolean }>`
   display: flex;
   justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   align-items: center;
-  height: 18px;
+  height: 22px;
   margin-top: 0;
   margin-bottom: 0.25em;
   overflow: hidden;
@@ -138,7 +138,7 @@ const ResultContext = styled(Highlight)`
   color: ${s("textTertiary")};
   font-size: 14px;
   margin-top: -0.25em;
-  margin-bottom: 0.25em;
+  margin-bottom: 0;
   ${ellipsis()}
 
   ${Mark} {

app/components/SearchPopover.tsx

@@ -1,4 +1,4 @@
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -17,7 +17,9 @@ import useStores from "~/hooks/useStores";
 import { SearchResult } from "~/types";
 import SearchListItem from "./SearchListItem";
 
-type Props = React.HTMLAttributes<HTMLInputElement> & { shareId: string };
+interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  shareId: string;
+}
 
 function SearchPopover({ shareId }: Props) {
   const { t } = useTranslation();
@@ -31,9 +33,11 @@ function SearchPopover({ shareId }: Props) {
   });
 
   const [query, setQuery] = React.useState("");
-  const searchResults = documents.searchResults(query);
   const { show, hide } = popover;
 
+  const [searchResults, setSearchResults] = React.useState<
+    PaginatedItem[] | undefined
+  >();
   const [cachedQuery, setCachedQuery] = React.useState(query);
   const [cachedSearchResults, setCachedSearchResults] = React.useState<
     PaginatedItem[] | undefined
@@ -50,7 +54,16 @@ function SearchPopover({ shareId }: Props) {
   const performSearch = React.useCallback(
     async ({ query, ...options }) => {
       if (query?.length > 0) {
-        return await documents.search(query, { shareId, ...options });
+        const response: PaginatedItem[] = await documents.search(query, {
+          shareId,
+          ...options,
+        });
+
+        if (response.length) {
+          setSearchResults(response);
+        }
+
+        return response;
       }
       return undefined;
     },

app/components/Sharing/DocumentMemberList.tsx

@@ -0,0 +1,141 @@
+import { t } from "i18next";
+import orderBy from "lodash/orderBy";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
+import { Pagination } from "@shared/constants";
+import Document from "~/models/Document";
+import UserMembership from "~/models/UserMembership";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import usePolicy from "~/hooks/usePolicy";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import { homePath } from "~/utils/routeHelpers";
+import MemberListItem from "./MemberListItem";
+
+type Props = {
+  /** Document to which team members are supposed to be invited */
+  document: Document;
+  /** Children to be rendered before the list of members */
+  children?: React.ReactNode;
+  /** List of users that have been invited to the document during the current editing session */
+  invitedInSession: string[];
+};
+
+function DocumentMembersList({ document, invitedInSession }: Props) {
+  const { users, userMemberships } = useStores();
+  const user = useCurrentUser();
+  const history = useHistory();
+  const can = usePolicy(document);
+
+  const { loading: loadingTeamMembers, request: fetchTeamMembers } = useRequest(
+    React.useCallback(
+      () => users.fetchPage({ limit: Pagination.defaultLimit }),
+      [users]
+    )
+  );
+
+  const { loading: loadingDocumentMembers, request: fetchDocumentMembers } =
+    useRequest(
+      React.useCallback(
+        () =>
+          userMemberships.fetchDocumentMemberships({
+            id: document.id,
+            limit: Pagination.defaultLimit,
+          }),
+        [userMemberships, document.id]
+      )
+    );
+
+  React.useEffect(() => {
+    void fetchTeamMembers();
+    void fetchDocumentMembers();
+  }, [fetchTeamMembers, fetchDocumentMembers]);
+
+  const handleRemoveUser = React.useCallback(
+    async (item) => {
+      try {
+        await userMemberships.delete({
+          documentId: document.id,
+          userId: item.id,
+        } as UserMembership);
+
+        if (item.id === user.id) {
+          history.push(homePath());
+        } else {
+          toast.success(
+            t(`{{ userName }} was removed from the document`, {
+              userName: item.name,
+            })
+          );
+        }
+      } catch (err) {
+        toast.error(t("Could not remove user"));
+      }
+    },
+    [history, userMemberships, user, document]
+  );
+
+  const handleUpdateUser = React.useCallback(
+    async (user, permission) => {
+      try {
+        await userMemberships.create({
+          documentId: document.id,
+          userId: user.id,
+          permission,
+        });
+        toast.success(
+          t(`Permissions for {{ userName }} updated`, {
+            userName: user.name,
+          })
+        );
+      } catch (err) {
+        toast.error(t("Could not update user"));
+      }
+    },
+    [userMemberships, document]
+  );
+
+  // Order newly added users first during the current editing session, on reload members are
+  // ordered by name
+  const members = React.useMemo(
+    () =>
+      orderBy(
+        document.members,
+        (user) =>
+          (invitedInSession.includes(user.id) ? "_" : "") +
+          user.name.toLowerCase(),
+        "asc"
+      ),
+    [document.members, invitedInSession]
+  );
+
+  if (loadingTeamMembers || loadingDocumentMembers) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <>
+      {members.map((item) => (
+        <MemberListItem
+          key={item.id}
+          user={item}
+          membership={item.getMembership(document)}
+          onRemove={() => handleRemoveUser(item)}
+          onUpdate={
+            can.manageUsers
+              ? (permission) => handleUpdateUser(item, permission)
+              : undefined
+          }
+          onLeave={
+            item.id === user.id ? () => handleRemoveUser(item) : undefined
+          }
+        />
+      ))}
+    </>
+  );
+}
+
+export default observer(DocumentMembersList);

app/components/Sharing/MemberListItem.tsx

@@ -0,0 +1,128 @@
+import { observer } from "mobx-react";
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { DocumentPermission } from "@shared/types";
+import User from "~/models/User";
+import UserMembership from "~/models/UserMembership";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
+import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
+import ListItem from "~/components/List/Item";
+import { EmptySelectValue, Permission } from "~/types";
+
+type Props = {
+  user: User;
+  membership?: UserMembership | undefined;
+  onAdd?: () => void;
+  onRemove?: () => void;
+  onLeave?: () => void;
+  onUpdate?: (permission: DocumentPermission) => void;
+};
+
+const MemberListItem = ({
+  user,
+  membership,
+  onRemove,
+  onLeave,
+  onUpdate,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const handleChange = React.useCallback(
+    (permission: DocumentPermission | typeof EmptySelectValue) => {
+      if (permission === EmptySelectValue) {
+        onRemove?.();
+      } else {
+        onUpdate?.(permission);
+      }
+    },
+    [onRemove, onUpdate]
+  );
+
+  const permissions: Permission[] = [
+    {
+      label: t("View only"),
+      value: DocumentPermission.Read,
+    },
+    {
+      label: t("Can edit"),
+      value: DocumentPermission.ReadWrite,
+    },
+    {
+      label: t("No access"),
+      value: EmptySelectValue,
+    },
+  ];
+
+  const currentPermission = permissions.find(
+    (p) => p.value === membership?.permission
+  );
+  if (!currentPermission) {
+    return null;
+  }
+  const disabled = !onUpdate && !onLeave;
+
+  return (
+    <StyledListItem
+      title={user.name}
+      image={
+        <Avatar model={user} size={AvatarSize.Medium} showBorder={false} />
+      }
+      subtitle={
+        membership?.sourceId
+          ? t("Has access through parent")
+          : user.isSuspended
+          ? t("Suspended")
+          : user.isInvited
+          ? t("Invited")
+          : user.isViewer
+          ? t("Viewer")
+          : user.email
+          ? user.email
+          : t("Member")
+      }
+      actions={
+        disabled ? null : (
+          <div style={{ marginRight: -8 }}>
+            <InputMemberPermissionSelect
+              permissions={
+                onLeave
+                  ? [
+                      currentPermission,
+                      {
+                        label: `${t("Leave")}…`,
+                        value: EmptySelectValue,
+                      },
+                    ]
+                  : permissions
+              }
+              value={membership?.permission}
+              onChange={handleChange}
+            />
+          </div>
+        )
+      }
+    />
+  );
+};
+
+export const InviteIcon = styled(PlusIcon)`
+  opacity: 0;
+`;
+
+export const StyledListItem = styled(ListItem).attrs({
+  small: true,
+  border: false,
+})`
+  margin: 0 -16px;
+  padding: 6px 16px;
+  border-radius: 8px;
+
+  &:hover ${InviteIcon} {
+    opacity: 1;
+  }
+`;
+
+export default observer(MemberListItem);

app/components/Sharing/PublicAccess.tsx

@@ -0,0 +1,216 @@
+import invariant from "invariant";
+import debounce from "lodash/debounce";
+import isEmpty from "lodash/isEmpty";
+import { observer } from "mobx-react";
+import { CopyIcon, GlobeIcon } from "outline-icons";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { toast } from "sonner";
+import styled, { useTheme } from "styled-components";
+import { s } from "@shared/styles";
+import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
+import Document from "~/models/Document";
+import Share from "~/models/Share";
+import Input, { NativeInput } from "~/components/Input";
+import Switch from "~/components/Switch";
+import env from "~/env";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import { AvatarSize } from "../Avatar/Avatar";
+import CopyToClipboard from "../CopyToClipboard";
+import NudeButton from "../NudeButton";
+import { ResizingHeightContainer } from "../ResizingHeightContainer";
+import Squircle from "../Squircle";
+import Tooltip from "../Tooltip";
+import { StyledListItem } from "./MemberListItem";
+
+type Props = {
+  /** The document to share. */
+  document: Document;
+  /** The existing share model, if any. */
+  share: Share | null | undefined;
+  /** The existing share parent model, if any. */
+  sharedParent: Share | null | undefined;
+  /** Ref to the Copy Link button */
+  copyButtonRef?: React.RefObject<HTMLButtonElement>;
+  onRequestClose?: () => void;
+};
+
+function PublicAccess({ document, share, sharedParent }: Props) {
+  const { shares } = useStores();
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const [slugValidationError, setSlugValidationError] = React.useState("");
+  const [urlSlug, setUrlSlug] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const can = usePolicy(share);
+  const documentAbilities = usePolicy(document);
+  const canPublish = can.update && documentAbilities.share;
+
+  const handlePublishedChange = React.useCallback(
+    async (event) => {
+      const share = shares.getByDocumentId(document.id);
+      invariant(share, "Share must exist");
+
+      try {
+        await share.save({
+          published: event.currentTarget.checked,
+        });
+      } catch (err) {
+        toast.error(err.message);
+      }
+    },
+    [document.id, shares]
+  );
+
+  const handleUrlSlugChange = React.useMemo(
+    () =>
+      debounce(async (ev) => {
+        if (!share) {
+          return;
+        }
+
+        const val = ev.target.value;
+        setUrlSlug(val);
+        if (val && !SHARE_URL_SLUG_REGEX.test(val)) {
+          setSlugValidationError(
+            t("Only lowercase letters, digits and dashes allowed")
+          );
+        } else {
+          setSlugValidationError("");
+          if (share.urlId !== val) {
+            try {
+              await share.save({
+                urlId: isEmpty(val) ? null : val,
+              });
+            } catch (err) {
+              if (err.message.includes("must be unique")) {
+                setSlugValidationError(
+                  t("Sorry, this link has already been used")
+                );
+              }
+            }
+          }
+        }
+      }, 500),
+    [t, share]
+  );
+
+  const handleCopied = React.useCallback(() => {
+    toast.success(t("Public link copied to clipboard"));
+  }, [t]);
+
+  const documentTitle = sharedParent?.documentTitle;
+
+  const shareUrl = sharedParent?.url
+    ? `${sharedParent.url}${document.url}`
+    : share?.url ?? "";
+
+  const copyButton = (
+    <Tooltip tooltip={t("Copy public link")} delay={500} placement="top">
+      <CopyToClipboard text={shareUrl} onCopy={handleCopied}>
+        <NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}>
+          <CopyIcon color={theme.placeholder} size={18} />
+        </NudeButton>
+      </CopyToClipboard>
+    </Tooltip>
+  );
+
+  return (
+    <Wrapper>
+      <StyledListItem
+        title={t("Web")}
+        subtitle={
+          <>
+            {sharedParent && !document.isDraft ? (
+              <Trans>
+                Anyone with the link can access because the parent document,{" "}
+                <StyledLink to={`/doc/${sharedParent.documentId}`}>
+                  {documentTitle}
+                </StyledLink>
+                , is shared
+              </Trans>
+            ) : (
+              t("Anyone with the link can access")
+            )}
+            .
+          </>
+        }
+        image={
+          <Squircle color={theme.text} size={AvatarSize.Medium}>
+            <GlobeIcon color={theme.background} size={18} />
+          </Squircle>
+        }
+        actions={
+          sharedParent && !document.isDraft ? null : (
+            <Switch
+              aria-label={t("Publish to internet")}
+              checked={share?.published ?? false}
+              onChange={handlePublishedChange}
+              disabled={!canPublish}
+              width={26}
+              height={14}
+            />
+          )
+        }
+      />
+
+      <ResizingHeightContainer>
+        {sharedParent?.published ? (
+          <ShareLinkInput type="text" disabled defaultValue={shareUrl}>
+            {copyButton}
+          </ShareLinkInput>
+        ) : share?.published ? (
+          <ShareLinkInput
+            type="text"
+            ref={inputRef}
+            placeholder={share?.id}
+            onChange={handleUrlSlugChange}
+            error={slugValidationError}
+            defaultValue={urlSlug}
+            prefix={
+              <DomainPrefix
+                readOnly
+                onClick={() => inputRef.current?.focus()}
+                value={env.URL.replace(/https?:\/\//, "") + "/s/"}
+              />
+            }
+          >
+            {copyButton}
+          </ShareLinkInput>
+        ) : null}
+      </ResizingHeightContainer>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin-bottom: 8px;
+`;
+
+const DomainPrefix = styled(NativeInput)`
+  flex: 0 1 auto;
+  padding-right: 0 !important;
+  margin-right: -10px;
+  cursor: text;
+  color: ${s("placeholder")};
+  user-select: none;
+`;
+
+const ShareLinkInput = styled(Input)`
+  margin-top: 12px;
+  min-width: 100px;
+  flex: 1;
+
+  ${NativeInput} {
+    padding: 4px 8px;
+  }
+`;
+
+const StyledLink = styled(Link)`
+  color: ${s("textSecondary")};
+  text-decoration: underline;
+`;
+
+export default observer(PublicAccess);

app/components/Sharing/SharePopover.tsx

@@ -0,0 +1,494 @@
+import { AnimatePresence, m } from "framer-motion";
+import { observer } from "mobx-react";
+import {
+  BackIcon,
+  LinkIcon,
+  MoreIcon,
+  QuestionMarkIcon,
+  UserIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import styled, { useTheme } from "styled-components";
+import { s } from "@shared/styles";
+import { CollectionPermission } from "@shared/types";
+import Collection from "~/models/Collection";
+import Document from "~/models/Document";
+import Share from "~/models/Share";
+import User from "~/models/User";
+import CopyToClipboard from "~/components/CopyToClipboard";
+import Flex from "~/components/Flex";
+import Text from "~/components/Text";
+import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useKeyDown from "~/hooks/useKeyDown";
+import useMobile from "~/hooks/useMobile";
+import usePolicy from "~/hooks/usePolicy";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import useThrottledCallback from "~/hooks/useThrottledCallback";
+import { documentPath, urlify } from "~/utils/routeHelpers";
+import Avatar from "../Avatar";
+import { AvatarSize } from "../Avatar/Avatar";
+import ButtonSmall from "../ButtonSmall";
+import Empty from "../Empty";
+import CollectionIcon from "../Icons/CollectionIcon";
+import Input, { NativeInput } from "../Input";
+import NudeButton from "../NudeButton";
+import Squircle from "../Squircle";
+import Tooltip from "../Tooltip";
+import DocumentMembersList from "./DocumentMemberList";
+import { InviteIcon, StyledListItem } from "./MemberListItem";
+import PublicAccess from "./PublicAccess";
+
+type Props = {
+  /** The document to share. */
+  document: Document;
+  /** The existing share model, if any. */
+  share: Share | null | undefined;
+  /** The existing share parent model, if any. */
+  sharedParent: Share | null | undefined;
+  /** Callback fired when the popover requests to be closed. */
+  onRequestClose: () => void;
+  /** Whether the popover is visible. */
+  visible: boolean;
+};
+
+const presence = {
+  initial: {
+    opacity: 0,
+    width: 0,
+    marginRight: 0,
+  },
+  animate: {
+    opacity: 1,
+    width: "auto",
+    marginRight: 8,
+    transition: {
+      type: "spring",
+      duration: 0.2,
+      bounce: 0,
+    },
+  },
+  exit: {
+    opacity: 0,
+    width: 0,
+    marginRight: 0,
+  },
+};
+
+function useUsersInCollection(collection?: Collection) {
+  const { users, memberships } = useStores();
+  const { request } = useRequest(() =>
+    memberships.fetchPage({ limit: 1, id: collection!.id })
+  );
+
+  React.useEffect(() => {
+    if (collection && !collection.permission) {
+      void request();
+    }
+  }, [collection]);
+
+  return collection
+    ? collection.permission
+      ? true
+      : users.inCollection(collection.id).length > 1
+    : false;
+}
+
+function SharePopover({
+  document,
+  share,
+  sharedParent,
+  onRequestClose,
+  visible,
+}: Props) {
+  const team = useCurrentTeam();
+  const { t } = useTranslation();
+  const can = usePolicy(document);
+  const { userMemberships } = useStores();
+  const isMobile = useMobile();
+  const [query, setQuery] = React.useState("");
+  const [picker, showPicker, hidePicker] = useBoolean();
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const linkButtonRef = React.useRef<HTMLButtonElement>(null);
+  const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
+  const collectionSharingDisabled = document.collection?.sharing === false;
+
+  useKeyDown(
+    "Escape",
+    (ev) => {
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+
+      if (picker) {
+        hidePicker();
+      } else {
+        onRequestClose();
+      }
+    },
+    {
+      allowInInput: true,
+    }
+  );
+
+  // Fetch sharefocus the link button when the popover is opened
+  React.useEffect(() => {
+    if (visible) {
+      void document.share();
+      linkButtonRef.current?.focus();
+    }
+  }, [document, hidePicker, visible]);
+
+  // Hide the picker when the popover is closed
+  React.useEffect(() => {
+    if (visible) {
+      hidePicker();
+    }
+  }, [hidePicker, visible]);
+
+  // Clear the query when picker is closed
+  React.useEffect(() => {
+    if (!picker) {
+      setQuery("");
+    }
+  }, [picker]);
+
+  const handleCopied = React.useCallback(() => {
+    onRequestClose();
+
+    timeout.current = setTimeout(() => {
+      toast.message(t("Link copied to clipboard"));
+    }, 100);
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [onRequestClose, t]);
+
+  const handleInvite = React.useCallback(
+    async (user: User) => {
+      setInvitedInSession((prev) => [...prev, user.id]);
+      await userMemberships.create({
+        documentId: document.id,
+        userId: user.id,
+      });
+      toast.message(
+        t("{{ userName }} was invited to the document", { userName: user.name })
+      );
+    },
+    [t, userMemberships, document.id]
+  );
+
+  const handleQuery = React.useCallback(
+    (event) => {
+      showPicker();
+      setQuery(event.target.value);
+    },
+    [showPicker, setQuery]
+  );
+
+  const backButton = (
+    <>
+      {picker && (
+        <NudeButton key="back" as={m.button} {...presence} onClick={hidePicker}>
+          <BackIcon />
+        </NudeButton>
+      )}
+    </>
+  );
+
+  const doneButton = picker ? (
+    invitedInSession.length ? (
+      <ButtonSmall onClick={hidePicker} neutral>
+        {t("Done")}
+      </ButtonSmall>
+    ) : null
+  ) : (
+    <CopyToClipboard
+      text={urlify(documentPath(document))}
+      onCopy={handleCopied}
+    >
+      <NudeButton type="button" disabled={!share} ref={linkButtonRef}>
+        <LinkIcon size={20} />
+      </NudeButton>
+    </CopyToClipboard>
+  );
+
+  return (
+    <>
+      {can.manageUsers &&
+        (isMobile ? (
+          <Flex align="center" style={{ marginBottom: 12 }} auto>
+            {backButton}
+            <Input
+              key="input"
+              placeholder={`${t("Invite by name")}…`}
+              value={query}
+              onChange={handleQuery}
+              onClick={showPicker}
+              margin={0}
+              flex
+            >
+              {doneButton}
+            </Input>
+          </Flex>
+        ) : (
+          <HeaderInput align="center">
+            <AnimatePresence initial={false}>
+              {backButton}
+              <NativeInput
+                key="input"
+                placeholder={`${t("Invite by name")}…`}
+                value={query}
+                onChange={handleQuery}
+                onClick={showPicker}
+                style={{ padding: "6px 0" }}
+              />
+              {doneButton}
+            </AnimatePresence>
+          </HeaderInput>
+        ))}
+
+      {picker && (
+        <div>
+          <Picker document={document} query={query} onInvite={handleInvite} />
+        </div>
+      )}
+
+      <div style={{ display: picker ? "none" : "block" }}>
+        <DocumentOtherAccessList document={document}>
+          <DocumentMembersList
+            document={document}
+            invitedInSession={invitedInSession}
+          />
+        </DocumentOtherAccessList>
+
+        {team.sharing && can.share && !collectionSharingDisabled && (
+          <>
+            {document.members.length ? <Separator /> : null}
+            <PublicAccess
+              document={document}
+              share={share}
+              sharedParent={sharedParent}
+              onRequestClose={onRequestClose}
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+const Picker = observer(
+  ({
+    document,
+    query,
+    onInvite,
+  }: {
+    document: Document;
+    query: string;
+    onInvite: (user: User) => Promise<void>;
+  }) => {
+    const { users } = useStores();
+    const { t } = useTranslation();
+    const user = useCurrentUser();
+
+    const fetchUsersByQuery = useThrottledCallback(
+      (query) => users.fetchPage({ query }),
+      250
+    );
+
+    const suggestions = React.useMemo(
+      () =>
+        users.notInDocument(document.id, query).filter((u) => u.id !== user.id),
+      [users, users.orderedData, document.id, document.members, user.id, query]
+    );
+
+    React.useEffect(() => {
+      if (query) {
+        void fetchUsersByQuery(query);
+      }
+    }, [query, fetchUsersByQuery]);
+
+    return suggestions.length ? (
+      <>
+        {suggestions.map((suggestion) => (
+          <StyledListItem
+            key={suggestion.id}
+            onClick={() => onInvite(suggestion)}
+            title={suggestion.name}
+            subtitle={
+              suggestion.isSuspended
+                ? t("Suspended")
+                : suggestion.isInvited
+                ? t("Invited")
+                : suggestion.isViewer
+                ? t("Viewer")
+                : suggestion.email
+                ? suggestion.email
+                : t("Member")
+            }
+            image={
+              <Avatar
+                model={suggestion}
+                size={AvatarSize.Medium}
+                showBorder={false}
+              />
+            }
+            actions={<InviteIcon />}
+          />
+        ))}
+      </>
+    ) : (
+      <Empty>{t("No matches")}</Empty>
+    );
+  }
+);
+
+const DocumentOtherAccessList = observer(
+  ({
+    document,
+    children,
+  }: {
+    document: Document;
+    children: React.ReactNode;
+  }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const collection = document.collection;
+    const usersInCollection = useUsersInCollection(collection);
+    const user = useCurrentUser();
+
+    return (
+      <>
+        {collection ? (
+          <>
+            {collection.permission ? (
+              <StyledListItem
+                image={
+                  <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                    <UserIcon color={theme.accentText} size={16} />
+                  </Squircle>
+                }
+                title={t("All members")}
+                subtitle={t("Everyone in the workspace")}
+                actions={
+                  <AccessTooltip>
+                    {collection?.permission === CollectionPermission.ReadWrite
+                      ? t("Can edit")
+                      : t("Can view")}
+                  </AccessTooltip>
+                }
+              />
+            ) : usersInCollection ? (
+              <StyledListItem
+                image={<CollectionIcon collection={collection} />}
+                title={collection.name}
+                subtitle={t("Everyone in the collection")}
+                actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
+              />
+            ) : (
+              <StyledListItem
+                image={<Avatar model={user} showBorder={false} />}
+                title={user.name}
+                subtitle={t("You have full access")}
+                actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
+              />
+            )}
+            {children}
+          </>
+        ) : document.isDraft ? (
+          <>
+            <StyledListItem
+              image={<Avatar model={document.createdBy} showBorder={false} />}
+              title={document.createdBy.name}
+              actions={
+                <AccessTooltip tooltip={t("Created the document")}>
+                  {t("Can edit")}
+                </AccessTooltip>
+              }
+            />
+            {children}
+          </>
+        ) : (
+          <>
+            {children}
+            <StyledListItem
+              image={
+                <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                  <MoreIcon color={theme.accentText} size={16} />
+                </Squircle>
+              }
+              title={t("Other members")}
+              subtitle={t("Other workspace members may have access")}
+              actions={
+                <AccessTooltip
+                  tooltip={t(
+                    "This document may be shared with more workspace members through a parent document or collection you do not have access to"
+                  )}
+                />
+              }
+            />
+          </>
+        )}
+      </>
+    );
+  }
+);
+
+const AccessTooltip = ({
+  children,
+  tooltip,
+}: {
+  children?: React.ReactNode;
+  tooltip?: string;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex align="center" gap={2}>
+      <Text type="secondary" size="small" as="span">
+        {children}
+      </Text>
+      <Tooltip tooltip={tooltip ?? t("Access inherited from collection")}>
+        <QuestionMarkIcon size={18} />
+      </Tooltip>
+    </Flex>
+  );
+};
+
+const Separator = styled.div`
+  border-top: 1px dashed ${s("divider")};
+  margin: 12px 0;
+`;
+
+const HeaderInput = styled(Flex)`
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  background: ${s("menuBackground")};
+  color: ${s("textTertiary")};
+  border-bottom: 1px solid ${s("inputBorder")};
+  padding: 0 24px 8px 24px;
+  margin-top: 0;
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-bottom: 12px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -20px;
+    height: 20px;
+    background: ${s("menuBackground")};
+  }
+`;
+
+export default observer(SharePopover);