restore withoutState scope

.env.development

@@ -1,8 +1,5 @@
 URL=https://local.outline.dev:3000
 
-DATABASE_URL=postgres://user:pass@127.0.0.1:5432/outline
-REDIS_URL=redis://127.0.0.1:6379
-
 SMTP_FROM_EMAIL=hello@example.com
 
 # Enable unsafe-inline in script-src CSP directive

.env.sample

@@ -12,14 +12,14 @@ UTILS_SECRET=generate_a_new_key
 
 # For production point these at your databases, in development the default
 # should work out of the box.
-DATABASE_URL=postgres://user:pass@postgres:5432/outline
+DATABASE_URL=postgres://user:pass@localhost:5432/outline
 DATABASE_CONNECTION_POOL_MIN=
 DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
 
 # For redis you can either specify an ioredis compatible url like this
-REDIS_URL=redis://redis:6379
+REDIS_URL=redis://localhost:6379
 # or alternatively, if you would like to provide additional connection options,
 # use a base64 encoded JSON connection option object. Refer to the ioredis documentation
 # for a list of available options.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots or videos to help explain your problem.
+
+**Outline (please complete the following information):**
+- Install: [getoutline.com or self hosted]
+- Version: [commit sha if self hosted]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Mobile (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,63 +0,0 @@
-name: Bug report
-description: File a bug to help us improve
-labels: ["bug"]
-body:
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
-    options:
-    - label: I have searched the existing issues
-      required: true
-- type: checkboxes
-  attributes:
-    label: This is not related to configuring Outline
-    description: I understand that questions related to configuring self-hosted Outline should be asked in the [community forum](https://github.com/outline/outline/discussions/categories/self-hosting).
-    options:
-    - label: The issue is not related to self-hosting config
-      required: true
-- type: textarea
-  attributes:
-    label: Current Behavior
-    description: A concise description of what you're experiencing.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Expected Behavior
-    description: A concise description of what you expected to happen.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the behavior.
-    placeholder: |
-      1. In this environment...
-      1. With this config...
-      1. Run '...'
-      1. See error...
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Environment
-    description: |
-      examples:
-        - **Outline**: Outline 0.80.0
-        - **Browser**: Safari
-    value: |
-        - Outline:
-        - Browser:
-    render: markdown
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Anything else?
-    description: |
-      Links? References? Anything that will give us more context about the issue you are encountering!
-
-      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  validations:
-    required: false

.github/dependabot.yml

@@ -13,16 +13,3 @@ updates:
         update-types: ["version-update:semver-major"]
     schedule:
       interval: "weekly"
-    groups:
-      babel:
-        patterns:
-          - "@babel/*"
-      sentry:
-        patterns:
-          - "@sentry/*"
-      fortawesome:
-        patterns:
-          - "@fortawesome/*"
-      aws:
-        patterns:
-          - "@aws-sdk/*"

app/actions/definitions/documents.tsx

@@ -32,7 +32,6 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import Icon from "@shared/components/Icon";
 import {
   ExportContentType,
   TeamPreference,
@@ -47,6 +46,7 @@ import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import DocumentCopy from "~/components/DocumentCopy";
+import Icon from "~/components/Icon";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -732,6 +732,7 @@ export const importDocument = createAction({
         history.push(document.url);
       } catch (err) {
         toast.error(err.message);
+        throw err;
       }
     };
 

app/actions/sections.ts

@@ -13,8 +13,6 @@ export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 
-export const DocumentsSection = ({ t }: ActionContext) => t("Documents");
-
 export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
   const activeDocument = stores.documents.active;
   return `${t("Document")} · ${activeDocument?.titleWithDefault}`;
@@ -36,8 +34,6 @@ export const NotificationSection = ({ t }: ActionContext) => t("Notification");
 
 export const UserSection = ({ t }: ActionContext) => t("People");
 
-UserSection.priority = 0.5;
-
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>

app/components/Avatar/Avatar.tsx

@@ -7,10 +7,9 @@ export enum AvatarSize {
   Small = 16,
   Toast = 18,
   Medium = 24,
-  Large = 28,
-  XLarge = 32,
-  XXLarge = 48,
-  Upload = 64,
+  Large = 32,
+  XLarge = 48,
+  XXLarge = 64,
 }
 
 export interface IAvatar {
@@ -21,37 +20,36 @@ export interface IAvatar {
 }
 
 type Props = {
-  /** The size of the avatar */
   size: AvatarSize;
-  /** The source of the avatar image, if not passing a model. */
   src?: string;
-  /** The avatar model, if not passing a source. */
   model?: IAvatar;
-  /** The alt text for the image */
   alt?: string;
-  /** Optional click handler */
+  showBorder?: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
-  /** Optional class name */
   className?: string;
-  /** Optional style */
   style?: React.CSSProperties;
 };
 
 function Avatar(props: Props) {
-  const { model, style, ...rest } = props;
+  const { showBorder, model, style, ...rest } = props;
   const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
 
   return (
     <Relative style={style}>
       {src && !error ? (
-        <CircleImg onError={handleError} src={src} {...rest} />
+        <CircleImg
+          onError={handleError}
+          src={src}
+          $showBorder={showBorder}
+          {...rest}
+        />
       ) : model ? (
-        <Initials color={model.color} {...rest}>
+        <Initials color={model.color} $showBorder={showBorder} {...rest}>
           {model.initial}
         </Initials>
       ) : (
-        <Initials {...rest} />
+        <Initials $showBorder={showBorder} {...rest} />
       )}
     </Relative>
   );
@@ -67,11 +65,15 @@ const Relative = styled.div`
   flex-shrink: 0;
 `;
 
-const CircleImg = styled.img<{ size: number }>`
+const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 50%;
+  border: ${(props) =>
+    props.$showBorder === false
+      ? "none"
+      : `2px solid ${props.theme.background}`};
   flex-shrink: 0;
   overflow: hidden;
 `;

app/components/Avatar/AvatarWithPresence.tsx

@@ -5,7 +5,7 @@ import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
 import Tooltip from "~/components/Tooltip";
-import Avatar, { AvatarSize } from "./Avatar";
+import Avatar from "./Avatar";
 
 type Props = {
   user: User;
@@ -14,8 +14,6 @@ type Props = {
   isObserving: boolean;
   isCurrentUser: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
-  size?: AvatarSize;
-  style?: React.CSSProperties;
 };
 
 function AvatarWithPresence({
@@ -25,8 +23,6 @@ function AvatarWithPresence({
   isEditing,
   isObserving,
   isCurrentUser,
-  size = AvatarSize.Large,
-  style,
 }: Props) {
   const { t } = useTranslation();
   const status = isPresent
@@ -51,14 +47,13 @@ function AvatarWithPresence({
         }
         placement="bottom"
       >
-        <AvatarPresence
+        <AvatarWrapper
           $isPresent={isPresent}
           $isObserving={isObserving}
           $color={user.color}
-          style={style}
         >
-          <Avatar model={user} onClick={onClick} size={size} />
-        </AvatarPresence>
+          <Avatar model={user} onClick={onClick} size={32} />
+        </AvatarWrapper>
       </Tooltip>
     </>
   );
@@ -74,7 +69,7 @@ type AvatarWrapperProps = {
   $color: string;
 };
 
-const AvatarPresence = styled.div<AvatarWrapperProps>`
+const AvatarWrapper = styled.div<AvatarWrapperProps>`
   opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
   transition: opacity 250ms ease-in-out;
   border-radius: 50%;

app/components/Avatar/Initials.tsx

@@ -3,12 +3,9 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 const Initials = styled(Flex)<{
-  /** The color of the background, defaults to textTertiary. */
   color?: string;
-  /** Content is only used to calculate font size, use children to render. */
-  content?: string;
-  /** The size of the avatar */
   size: number;
+  $showBorder?: boolean;
 }>`
   align-items: center;
   justify-content: center;
@@ -16,14 +13,15 @@ const Initials = styled(Flex)<{
   width: 100%;
   height: 100%;
   color: ${s("white75")};
-  background-color: ${(props) => props.color ?? props.theme.textTertiary};
+  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};
   flex-shrink: 0;
-
-  // adjust font size down for each additional character
-  font-size: ${(props) => props.size / 2 - (props.content?.length ?? 0)}px;
+  font-size: ${(props) => props.size / 2}px;
   font-weight: 500;
 `;
 

app/components/Breadcrumb.tsx

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

app/components/Collaborators.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarSize, AvatarWithPresence } from "~/components/Avatar";
+import { AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
@@ -78,56 +78,49 @@ function Collaborators(props: Props) {
     placement: "bottom-end",
   });
 
-  const renderAvatar = React.useCallback(
-    ({ model: collaborator, ...rest }) => {
-      const isPresent = presentIds.includes(collaborator.id);
-      const isEditing = editingIds.includes(collaborator.id);
-      const isObserving = ui.observingUserId === collaborator.id;
-      const isObservable = collaborator.id !== currentUserId;
-
-      return (
-        <AvatarWithPresence
-          {...rest}
-          key={collaborator.id}
-          user={collaborator}
-          isPresent={isPresent}
-          isEditing={isEditing}
-          isObserving={isObserving}
-          isCurrentUser={currentUserId === collaborator.id}
-          onClick={
-            isObservable
-              ? (ev) => {
-                  if (isPresent) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ui.setObservingUser(
-                      isObserving ? undefined : collaborator.id
-                    );
-                  }
-                }
-              : undefined
-          }
-        />
-      );
-    },
-    [presentIds, ui, currentUserId, editingIds]
-  );
-
   return (
     <>
       <PopoverDisclosure {...popover}>
         {(popoverProps) => (
           <NudeButton
-            width={Math.min(collaborators.length, limit) * AvatarSize.Large}
-            height={AvatarSize.Large}
+            width={Math.min(collaborators.length, limit) * 32}
+            height={32}
             {...popoverProps}
           >
             <Facepile
-              size={AvatarSize.Large}
               limit={limit}
-              overflow={Math.max(0, collaborators.length - limit)}
+              overflow={collaborators.length - limit}
               users={collaborators}
-              renderAvatar={renderAvatar}
+              renderAvatar={(collaborator) => {
+                const isPresent = presentIds.includes(collaborator.id);
+                const isEditing = editingIds.includes(collaborator.id);
+                const isObserving = ui.observingUserId === collaborator.id;
+                const isObservable = collaborator.id !== user.id;
+
+                return (
+                  <AvatarWithPresence
+                    key={collaborator.id}
+                    user={collaborator}
+                    isPresent={isPresent}
+                    isEditing={isEditing}
+                    isObserving={isObserving}
+                    isCurrentUser={currentUserId === collaborator.id}
+                    onClick={
+                      isObservable
+                        ? (ev) => {
+                            if (isPresent) {
+                              ev.preventDefault();
+                              ev.stopPropagation();
+                              ui.setObservingUser(
+                                isObserving ? undefined : collaborator.id
+                              );
+                            }
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              }}
             />
           </NudeButton>
         )}

app/components/Collection/CollectionForm.tsx

@@ -3,7 +3,6 @@ import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
 import { CollectionPermission } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
@@ -12,6 +11,7 @@ import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
 import Switch from "~/components/Switch";

app/components/CollectionDescription.tsx

@@ -1,5 +1,6 @@
 import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
+import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -7,14 +8,23 @@ 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";
+import ButtonLink from "~/components/ButtonLink";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import { withUIExtensions } from "~/editor/extensions";
+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 Text from "./Text";
 
-const extensions = withUIExtensions(richExtensions);
+const extensions = [
+  ...richExtensions,
+  BlockMenuExtension,
+  EmojiMenuExtension,
+  HoverPreviewsExtension,
+];
 
 type Props = {
   collection: Collection;
@@ -23,8 +33,33 @@ type Props = {
 function CollectionDescription({ collection }: Props) {
   const { collections } = useStores();
   const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(false);
+  const [isEditing, setEditing] = React.useState(false);
+  const [isDirty, setDirty] = React.useState(false);
   const can = usePolicy(collection);
 
+  const handleStartEditing = React.useCallback(() => {
+    setEditing(true);
+  }, []);
+
+  const handleStopEditing = React.useCallback(() => {
+    setEditing(false);
+  }, []);
+
+  const handleClickDisclosure = React.useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (isExpanded && document.activeElement) {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
+        document.activeElement.blur();
+      }
+
+      setExpanded(!isExpanded);
+    },
+    [isExpanded]
+  );
+
   const handleSave = React.useMemo(
     () =>
       debounce(async (getValue) => {
@@ -32,6 +67,7 @@ function CollectionDescription({ collection }: Props) {
           await collection.save({
             data: getValue(false),
           });
+          setDirty(false);
         } catch (err) {
           toast.error(t("Sorry, an error occurred saving the collection"));
           throw err;
@@ -40,44 +76,162 @@ function CollectionDescription({ collection }: Props) {
     [collection, t]
   );
 
-  const childRef = React.useRef<HTMLDivElement>(null);
-  const childOffsetHeight = childRef.current?.offsetHeight || 0;
-  const editorStyle = React.useMemo(
-    () => ({
-      padding: "0 32px",
-      margin: "0 -32px",
-      paddingBottom: `calc(50vh - ${childOffsetHeight}px)`,
-    }),
-    [childOffsetHeight]
+  const handleChange = React.useCallback(
+    async (getValue) => {
+      setDirty(true);
+      await handleSave(getValue);
+    },
+    [handleSave]
   );
 
+  React.useEffect(() => {
+    setEditing(false);
+  }, [collection.id]);
+  const placeholder = `${t("Add a description")}…`;
+  const key = isEditing || isDirty ? "draft" : collection.updatedAt;
+
   return (
-    <>
-      {collections.isSaving && <LoadingIndicator />}
-      {(collection.hasDescription || can.update) && (
-        <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
-          <Editor
-            defaultValue={collection.data}
-            onChange={handleSave}
-            placeholder={`${t("Add a description")}…`}
-            extensions={extensions}
-            maxLength={1000}
-            canUpdate={can.update}
-            readOnly={!can.update}
-            editorStyle={editorStyle}
-            embedsDisabled
-          />
-          <div ref={childRef} />
-        </React.Suspense>
+    <MaxHeight data-editing={isEditing} data-expanded={isExpanded}>
+      <Input data-editing={isEditing} data-expanded={isExpanded}>
+        <span onClick={can.update ? handleStartEditing : undefined}>
+          {collections.isSaving && <LoadingIndicator />}
+          {collection.hasDescription || isEditing || isDirty ? (
+            <React.Suspense
+              fallback={
+                <Placeholder
+                  onClick={() => {
+                    //
+                  }}
+                >
+                  Loading…
+                </Placeholder>
+              }
+            >
+              <Editor
+                key={key}
+                defaultValue={collection.data}
+                onChange={handleChange}
+                placeholder={placeholder}
+                readOnly={!isEditing}
+                autoFocus={isEditing}
+                onBlur={handleStopEditing}
+                extensions={extensions}
+                maxLength={1000}
+                embedsDisabled
+                canUpdate
+              />
+            </React.Suspense>
+          ) : (
+            can.update && (
+              <Placeholder
+                onClick={() => {
+                  //
+                }}
+              >
+                {placeholder}
+              </Placeholder>
+            )
+          )}
+        </span>
+      </Input>
+      {!isEditing && (
+        <Disclosure
+          onClick={handleClickDisclosure}
+          aria-label={isExpanded ? t("Collapse") : t("Expand")}
+          size={30}
+        >
+          <Arrow />
+        </Disclosure>
       )}
-    </>
+    </MaxHeight>
   );
 }
 
-const Placeholder = styled(Text)`
+const Disclosure = styled(NudeButton)`
+  opacity: 0;
+  color: ${s("divider")};
+  position: absolute;
+  top: calc(25vh - 50px);
+  left: 50%;
+  z-index: 1;
+  transform: rotate(-90deg) translateX(-50%);
+  transition: opacity 100ms ease-in-out;
+
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    color: ${s("sidebarText")};
+  }
+`;
+
+const Placeholder = styled(ButtonLink)`
   color: ${s("placeholder")};
   cursor: text;
   min-height: 27px;
 `;
 
+const MaxHeight = styled.div`
+  position: relative;
+  max-height: 25vh;
+  overflow: hidden;
+  margin: 8px -8px -8px;
+  padding: 8px;
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    max-height: initial;
+    overflow: initial;
+
+    ${Disclosure} {
+      top: initial;
+      bottom: 0;
+      transform: rotate(90deg) translateX(-50%);
+    }
+  }
+
+  &:hover ${Disclosure} {
+    opacity: 1;
+  }
+`;
+
+const Input = styled.div`
+  margin: -8px;
+  padding: 8px;
+  border-radius: 8px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: calc(25vh - 50px);
+    left: 0;
+    right: 0;
+    height: 50px;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      ${(props) => transparentize(1, props.theme.background)} 0%,
+      ${s("background")} 100%
+    );
+  }
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    &:after {
+      background: transparent;
+    }
+  }
+
+  &[data-editing="true"] {
+    background: ${s("backgroundSecondary")};
+  }
+
+  .block-menu-trigger,
+  .heading-anchor {
+    display: none !important;
+  }
+`;
+
 export default observer(CollectionDescription);

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -1,6 +1,6 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
 import useStores from "~/hooks/useStores";

app/components/CommandBar/useTemplatesAction.tsx

@@ -1,6 +1,6 @@
 import { NewDocumentIcon, ShapesIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
 import {
   ActiveCollectionSection,

app/components/ConfirmMoveDialog.tsx

@@ -1,12 +1,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import { CollectionPermission, NavigationNode } from "@shared/types";
 import type Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import useStores from "~/hooks/useStores";
-import { AuthorizationError } from "~/utils/errors";
 
 type Props = {
   /** The navigation node to move, must represent a document. */
@@ -32,29 +30,12 @@ function ConfirmMoveDialog({ collection, item, ...rest }: Props) {
     };
 
   const handleSubmit = async () => {
-    try {
-      await documents.move({
-        documentId: item.id,
-        collectionId: collection.id,
-        ...rest,
-      });
-    } catch (err) {
-      if (err instanceof AuthorizationError) {
-        toast.error(
-          t(
-            "You do not have permission to move {{ documentName }} to the {{ collectionName }} collection",
-            {
-              documentName: item.title,
-              collectionName: collection.name,
-            }
-          )
-        );
-      } else {
-        toast.error(err.message);
-      }
-    } finally {
-      dialogs.closeAllModals();
-    }
+    await documents.move({
+      documentId: item.id,
+      collectionId: collection.id,
+      ...rest,
+    });
+    dialogs.closeAllModals();
   };
 
   return (

app/components/ConfirmationDialog.tsx

@@ -8,8 +8,8 @@ import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 
 type Props = {
-  /** Callback when the dialog is submitted. Return false to prevent closing. */
-  onSubmit: () => Promise<void | boolean> | void;
+  /** Callback when the dialog is submitted */
+  onSubmit: () => Promise<void> | void;
   /** Text to display on the submit button */
   submitText?: string;
   /** Text to display while the form is saving */
@@ -38,10 +38,7 @@ const ConfirmationDialog: React.FC<Props> = ({
       ev.preventDefault();
       setIsSaving(true);
       try {
-        const res = await onSubmit();
-        if (res === false) {
-          return;
-        }
+        await onSubmit();
         dialogs.closeAllModals();
       } catch (err) {
         toast.error(err.message);

app/components/ContextMenu/MenuItem.tsx

@@ -23,7 +23,7 @@ type Props = {
   as?: string | React.ComponentType<any>;
   hide?: () => void;
   level?: number;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
   children?: React.ReactNode;
   ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };

app/components/DocumentBreadcrumb.tsx

@@ -3,10 +3,10 @@ import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
@@ -105,15 +105,14 @@ function DocumentBreadcrumb(
     }
 
     path.slice(0, -1).forEach((node: NavigationNode) => {
-      const title = node.title || t("Untitled");
       output.push({
         type: "route",
         title: node.icon ? (
           <>
-            <StyledIcon value={node.icon} color={node.color} /> {title}
+            <StyledIcon value={node.icon} color={node.color} /> {node.title}
           </>
         ) : (
-          title
+          node.title
         ),
         to: {
           pathname: node.url,
@@ -122,7 +121,7 @@ function DocumentBreadcrumb(
       });
     });
     return output;
-  }, [t, path, category, sidebarContext, collectionNode]);
+  }, [path, category, sidebarContext, collectionNode]);
 
   if (!collections.isLoaded) {
     return null;
@@ -135,7 +134,7 @@ function DocumentBreadcrumb(
         {path.slice(0, -1).map((node: NavigationNode) => (
           <React.Fragment key={node.id}>
             <SmallSlash />
-            {node.title || t("Untitled")}
+            {node.title}
           </React.Fragment>
         ))}
       </>

app/components/DocumentCard.tsx

@@ -1,25 +1,24 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { subDays } from "date-fns";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
-import { CloseIcon, DocumentIcon, ClockIcon, EyeIcon } from "outline-icons";
+import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import Icon from "@shared/components/Icon";
 import Squircle from "@shared/components/Squircle";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import { useTextStats } from "~/hooks/useTextStats";
+import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
@@ -72,10 +71,6 @@ function DocumentCard(props: Props) {
     [pin]
   );
 
-  // If the document was updated within the last 7 days, show a timestamp instead of reading time
-  const isRecentlyUpdated =
-    new Date(document.updatedAt) > subDays(new Date(), 7);
-
   return (
     <Reorderable
       ref={setNodeRef}
@@ -148,14 +143,8 @@ function DocumentCard(props: Props) {
                   : document.titleWithDefault}
               </Heading>
               <DocumentMeta size="xsmall">
-                {isRecentlyUpdated ? (
-                  <>
-                    <Clock size={18} />
-                    <Time dateTime={document.updatedAt} addSuffix shorten />
-                  </>
-                ) : (
-                  <ReadingTime document={document} />
-                )}
+                <Clock size={18} />
+                <Time dateTime={document.updatedAt} addSuffix shorten />
               </DocumentMeta>
             </div>
           </Content>
@@ -176,21 +165,6 @@ function DocumentCard(props: Props) {
   );
 }
 
-const ReadingTime = ({ document }: { document: Document }) => {
-  const { t } = useTranslation();
-  const markdown = React.useMemo(() => document.toMarkdown(), [document]);
-  const stats = useTextStats(markdown);
-
-  return (
-    <>
-      <EyeIcon size={18} />
-      {t(`{{ minutes }}m read`, {
-        minutes: stats.total.readingTime,
-      })}
-    </>
-  );
-};
-
 const DocumentSquircle = ({
   icon,
   color,

app/components/DocumentExplorer.tsx

@@ -14,12 +14,12 @@ import { FixedSizeList as List } from "react-window";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";

app/components/DocumentListItem.tsx

@@ -9,13 +9,13 @@ import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import DocumentMeta from "~/components/DocumentMeta";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
@@ -23,6 +23,7 @@ import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
+import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
 import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
 

app/components/DocumentViews.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import { Avatar } from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
 import useCurrentUser from "~/hooks/useCurrentUser";
@@ -71,13 +71,7 @@ function DocumentViews({ document, isOpen }: Props) {
                 key={model.id}
                 title={model.name}
                 subtitle={subtitle}
-                image={
-                  <Avatar
-                    key={model.id}
-                    model={model}
-                    size={AvatarSize.Large}
-                  />
-                }
+                image={<Avatar key={model.id} model={model} size={32} />}
                 border={false}
                 small
               />

app/components/Editor.tsx

@@ -1,4 +1,6 @@
+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";
@@ -7,7 +9,10 @@ import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+import { dateLocale, dateToRelative } from "@shared/utils/date";
 import { getDataTransferFiles } from "@shared/utils/files";
+import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
+import { isInternalUrl } from "@shared/utils/urls";
 import { AttachmentValidation } from "@shared/validations";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
@@ -17,8 +22,12 @@ import useDictionary from "~/hooks/useDictionary";
 import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
-import { uploadFile, uploadFileFromUrl } from "~/utils/files";
+import useUserLocale from "~/hooks/useUserLocale";
+import { NotFoundError } from "~/utils/errors";
+import { uploadFile } from "~/utils/files";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import DocumentBreadcrumb from "./DocumentBreadcrumb";
+import Icon from "./Icon";
 
 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
 
@@ -41,23 +50,82 @@ export type Props = Optional<
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
     props;
-  const { comments } = useStores();
+  const userLocale = useUserLocale();
+  const locale = dateLocale(userLocale);
+  const { comments, documents } = useStores();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
   const localRef = React.useRef<SharedEditor>();
   const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
   const previousCommentIds = React.useRef<string[]>();
 
+  const handleSearchLink = React.useCallback(
+    async (term: string) => {
+      if (isInternalUrl(term)) {
+        // search for exact internal document
+        const slug = parseDocumentSlug(term);
+        if (!slug) {
+          return [];
+        }
+
+        try {
+          const document = await documents.fetch(slug);
+          const time = dateToRelative(Date.parse(document.updatedAt), {
+            addSuffix: true,
+            shorten: true,
+            locale,
+          });
+
+          return [
+            {
+              title: document.title,
+              subtitle: `Updated ${time}`,
+              url: document.url,
+              icon: document.icon ? (
+                <Icon
+                  value={document.icon}
+                  color={document.color ?? undefined}
+                />
+              ) : undefined,
+            },
+          ];
+        } catch (error) {
+          // NotFoundError could not find document for slug
+          if (!(error instanceof NotFoundError)) {
+            throw error;
+          }
+        }
+      }
+
+      // default search for anything that doesn't look like a URL
+      const results = await documents.searchTitles({ query: term });
+
+      return sortBy(
+        results.map(({ document }) => ({
+          title: document.title,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
+          url: document.url,
+          icon: document.icon ? (
+            <Icon value={document.icon} color={document.color ?? undefined} />
+          ) : undefined,
+        })),
+        (document) =>
+          deburr(document.title)
+            .toLowerCase()
+            .startsWith(deburr(term).toLowerCase())
+            ? -1
+            : 1
+      );
+    },
+    [locale, documents]
+  );
+
   const handleUploadFile = React.useCallback(
-    async (file: File | string) => {
-      const options = {
+    async (file: File) => {
+      const result = await uploadFile(file, {
         documentId: id,
         preset: AttachmentPreset.DocumentAttachment,
-      };
-      const result =
-        file instanceof File
-          ? await uploadFile(file, options)
-          : await uploadFileFromUrl(file, options);
+      });
       return result.url;
     },
     [id]
@@ -195,6 +263,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           dictionary={dictionary}
           {...props}
           onClickLink={handleClickLink}
+          onSearchLink={handleSearchLink}
           onChange={handleChange}
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}

app/components/EventListItem.tsx

@@ -13,15 +13,16 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
 import EventBoundary from "@shared/components/EventBoundary";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import { Avatar } from "~/components/Avatar";
 import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
 import Time from "~/components/Time";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
+import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { documentHistoryPath } from "~/utils/routeHelpers";
 
@@ -153,7 +154,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
           onClick={handleTimeClick}
         />
       }
-      image={<Avatar model={event.actor} size={AvatarSize.Large} />}
+      image={<Avatar model={event.actor} size={32} />}
       subtitle={
         <Subtitle>
           {icon}

app/components/Facepile.tsx

@@ -1,26 +1,17 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import Initials from "./Avatar/Initials";
 
 type Props = {
-  /** The users to display */
   users: User[];
-  /** The size of the avatars, defaults to AvatarSize.Large */
   size?: number;
-  /** A number to show as the number of additional users */
   overflow?: number;
-  /** The maximum number of users to display, defaults to 8 */
   limit?: number;
-  /** A component to render the avatar, defaults to Avatar. */
-  renderAvatar?: React.ComponentType<
-    React.ComponentProps<typeof Avatar> & {
-      model: User;
-    }
-  >;
+  renderAvatar?: (user: User) => React.ReactNode;
 };
 
 function Facepile({
@@ -28,70 +19,55 @@ function Facepile({
   overflow = 0,
   size = AvatarSize.Large,
   limit = 8,
-  renderAvatar = Avatar,
+  renderAvatar = DefaultAvatar,
   ...rest
 }: Props) {
-  const filtered = users.filter(Boolean).slice(-limit);
-  const Component = renderAvatar;
-
   return (
     <Avatars {...rest}>
       {overflow > 0 && (
-        <Initials size={size} content={String(overflow)}>
-          {users.length ? "+" : ""}
-          {overflow}
-        </Initials>
+        <More size={size}>
+          <span>
+            {users.length ? "+" : ""}
+            {overflow}
+          </span>
+        </More>
       )}
-      {filtered.map((model, index) => {
-        const lastChild = index === 0 && overflow <= 0;
-        return (
-          <Component
-            key={model.id}
-            {...{
-              model,
-              size,
-              style: {
-                marginRight: lastChild ? 0 : -4,
-                ...(lastChild || filtered.length === 1
-                  ? {}
-                  : { clipPath: `url(#${clipPathId(size)})` }),
-              },
-            }}
-          />
-        );
-      })}
-      <FacepileClip size={size} />
+      {users
+        .filter(Boolean)
+        .slice(0, limit)
+        .map((user) => (
+          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+        ))}
     </Avatars>
   );
 }
 
-function FacepileClip({ size }: { size: number }) {
-  return (
-    <SVG
-      width="25"
-      height="28"
-      viewBox="0 0 25 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <clipPath id={clipPathId(size)}>
-        <path
-          transform={size !== 28 ? `scale(${size / 28})` : ""}
-          d="M14.0633 0.5C18.1978 0.5 21.8994 2.34071 24.3876 5.24462C22.8709 7.81315 22.0012 10.8061 22.0012 14C22.0012 17.1939 22.8709 20.1868 24.3876 22.7554C21.8994 25.6593 18.1978 27.5 14.0633 27.5C6.57035 27.5 0.5 21.4537 0.5 14C0.5 6.54628 6.57035 0.5 14.0633 0.5Z"
-        />
-      </clipPath>
-    </SVG>
-  );
+function DefaultAvatar(user: User) {
+  return <Avatar model={user} size={AvatarSize.Large} />;
 }
 
-function clipPathId(size: number) {
-  return `facepile-${size}`;
-}
+const AvatarWrapper = styled.div`
+  margin-right: -8px;
 
-const SVG = styled.svg`
-  position: absolute;
-  top: 0;
-  left: 0;
+  &:first-child {
+    margin-right: 0;
+  }
+`;
+
+const More = styled.div<{ size: number }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 100%;
+  background: ${(props) => props.theme.textTertiary};
+  color: ${s("white")};
+  border: 2px solid ${s("background")};
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
 `;
 
 const Avatars = styled(Flex)`

app/components/FilterOptions.tsx

@@ -46,7 +46,7 @@ const FilterOptions = ({
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const listRef = React.useRef<HTMLDivElement | null>(null);
   const menu = useMenuState({
-    modal: false,
+    modal: true,
   });
   const selectedItems = options.filter((option) =>
     selectedKeys.includes(option.key)
@@ -229,7 +229,7 @@ const SearchInput = styled(Input)`
   ${Outline} {
     border: none;
     border-radius: 0;
-    border-bottom: 1px solid ${s("divider")};
+    border-bottom: 1px solid rgb(34 40 52);
     background: ${s("menuBackground")};
   }
 

app/components/GroupListItem.tsx

@@ -0,0 +1,89 @@
+import { observer } from "mobx-react";
+import { GroupIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { MAX_AVATAR_DISPLAY } from "@shared/constants";
+import { s } from "@shared/styles";
+import Group from "~/models/Group";
+import GroupMembership from "~/models/GroupMembership";
+import GroupMembers from "~/scenes/GroupMembers";
+import Facepile from "~/components/Facepile";
+import Flex from "~/components/Flex";
+import ListItem from "~/components/List/Item";
+import Modal from "~/components/Modal";
+import useBoolean from "~/hooks/useBoolean";
+import { hover } from "~/styles";
+import NudeButton from "./NudeButton";
+
+type Props = {
+  group: Group;
+  membership?: GroupMembership;
+  showFacepile?: boolean;
+  showAvatar?: boolean;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
+};
+
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { t } = useTranslation();
+  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
+    useBoolean();
+  const memberCount = group.memberCount;
+  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
+  const overflow = memberCount - users.length;
+
+  return (
+    <>
+      <ListItem
+        image={
+          <Image>
+            <GroupIcon size={24} />
+          </Image>
+        }
+        title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
+        subtitle={t("{{ count }} member", { count: memberCount })}
+        actions={
+          <Flex align="center" gap={8}>
+            {showFacepile && (
+              <NudeButton
+                width="auto"
+                height="auto"
+                onClick={setMembersModalOpen}
+              >
+                <Facepile users={users} overflow={overflow} />
+              </NudeButton>
+            )}
+            {renderActions({
+              openMembersModal: setMembersModalOpen,
+            })}
+          </Flex>
+        }
+      />
+      <Modal
+        title={t("Group members")}
+        onRequestClose={setMembersModalClosed}
+        isOpen={membersModalOpen}
+      >
+        <GroupMembers group={group} />
+      </Modal>
+    </>
+  );
+}
+
+const Image = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: ${s("backgroundSecondary")};
+  border-radius: 32px;
+`;
+
+const Title = styled.span`
+  &: ${hover} {
+    text-decoration: underline;
+    cursor: var(--pointer);
+  }
+`;
+
+export default observer(GroupListItem);

app/components/Header.tsx

@@ -6,12 +6,12 @@ import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
 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";
+import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";

app/components/Icon.tsx

@@ -2,13 +2,13 @@ import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import useStores from "../hooks/useStores";
-import { IconType } from "../types";
-import { IconLibrary } from "../utils/IconLibrary";
-import { colorPalette } from "../utils/collections";
-import { determineIconType } from "../utils/icon";
-import EmojiIcon from "./EmojiIcon";
-// import Logger from "~/utils/Logger";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import { determineIconType } from "@shared/utils/icon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
 import Flex from "./Flex";
 
 export type Props = {
@@ -40,9 +40,9 @@ const Icon = ({
   const iconType = determineIconType(icon);
 
   if (!iconType) {
-    // Logger.warn("Failed to determine icon type", {
-    //   icon,
-    // });
+    Logger.warn("Failed to determine icon type", {
+      icon,
+    });
     return null;
   }
 
@@ -62,9 +62,9 @@ const Icon = ({
 
     return <EmojiIcon emoji={icon} size={size} className={className} />;
   } catch (err) {
-    // Logger.warn("Failed to render icon", {
-    //   icon,
-    // });
+    Logger.warn("Failed to render icon", {
+      icon,
+    });
   }
 
   return null;
@@ -80,6 +80,7 @@ const SVGIcon = observer(
     forceColor,
   }: Props) => {
     const { ui } = useStores();
+
     let color = inputColor ?? colorPalette[0];
 
     // If the chosen icon color is very dark then we invert it in dark mode

app/components/IconPicker/components/ColorPicker.tsx

@@ -1,12 +1,13 @@
 import { BackIcon } from "outline-icons";
 import React from "react";
 import styled from "styled-components";
-import { breakpoints, s, hover } from "@shared/styles";
+import { breakpoints, s } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
 import { validateColorHex } from "@shared/utils/color";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
+import { hover } from "~/styles";
 
 enum Panel {
   Builtin,

app/components/IconPicker/components/IconButton.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 export const IconButton = styled(NudeButton)<{ delay?: number }>`
   width: 32px;

app/components/IconPicker/components/PopoverButton.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
   &: ${hover},

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
 import styled from "styled-components";
-import { depths, s, hover } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
 import { getEmojiVariants } from "@shared/utils/emoji";
 import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 import { IconButton } from "./IconButton";
 
 const SkinTonePicker = ({

app/components/IconPicker/index.tsx

@@ -10,18 +10,19 @@ import {
   useTabState,
 } from "reakit";
 import styled, { css } from "styled-components";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import theme from "@shared/styles/theme";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Popover from "~/components/Popover";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePrevious from "~/hooks/usePrevious";
 import useWindowSize from "~/hooks/useWindowSize";
+import { hover } from "~/styles";
 import EmojiPanel from "./components/EmojiPanel";
 import IconPanel from "./components/IconPanel";
 import { PopoverButton } from "./components/PopoverButton";

app/components/Icons/CollectionIcon.tsx

@@ -2,9 +2,9 @@ import { observer } from "mobx-react";
 import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
 import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 
 type Props = {

app/components/Icons/EmojiIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "../styles";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The emoji to render */

app/components/List/Item.tsx

@@ -6,9 +6,10 @@ import { LocationDescriptor } from "history";
 import * as React from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   /** An icon or image to display to the left of the list item */

app/components/Notifications/NotificationListItem.tsx

@@ -4,10 +4,11 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s, hover, truncateMultiline } from "@shared/styles";
+import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
+import { hover, truncateMultiline } from "~/styles";
 import { Avatar, AvatarSize } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";

app/components/Notifications/Notifications.tsx

@@ -3,12 +3,13 @@ import { MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useActionContext from "~/hooks/useActionContext";
 import useStores from "~/hooks/useStores";
 import NotificationMenu from "~/menus/NotificationMenu";
+import { hover } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
 import ErrorBoundary from "../ErrorBoundary";

app/components/Reactions/Reaction.tsx

@@ -3,7 +3,7 @@ import { transparentize } from "polished";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import type { ReactionSummary } from "@shared/types";
 import { getEmojiId } from "@shared/utils/emoji";
 import User from "~/models/User";
@@ -13,6 +13,7 @@ import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
 import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import { hover } from "~/styles";
 
 type Props = {
   /** Thin reaction data - contains the emoji & active user ids for this reaction. */

app/components/Reactions/ViewReactionsDialog.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Tab, TabPanel, useTabState } from "reakit";
 import { toast } from "sonner";
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Comment from "~/models/Comment";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import { Emoji } from "~/components/Emoji";
@@ -13,6 +13,7 @@ import Flex from "~/components/Flex";
 import PlaceholderText from "~/components/PlaceholderText";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 
 type Props = {
   /** Model for which to show the reactions. */

app/components/ResizingHeightContainer.tsx

@@ -1,7 +1,7 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
+import useComponentSize from "~/hooks/useComponentSize";
 
 type Props = {
   /** The children to render */

app/components/SearchListItem.tsx

@@ -7,9 +7,10 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
+import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {

app/components/Sharing/Collection/AccessControlList.tsx

@@ -201,7 +201,11 @@ export const AccessControlList = observer(
                 <ListItem
                   key={membership.id}
                   image={
-                    <Avatar model={membership.user} size={AvatarSize.Medium} />
+                    <Avatar
+                      model={membership.user}
+                      size={AvatarSize.Medium}
+                      showBorder={false}
+                    />
                   }
                   title={membership.user.name}
                   subtitle={membership.user.email}

app/components/Sharing/Document/AccessControlList.tsx

@@ -146,7 +146,7 @@ export const AccessControlList = observer(
                   />
                 ) : (
                   <ListItem
-                    image={<Avatar model={user} />}
+                    image={<Avatar model={user} showBorder={false} />}
                     title={user.name}
                     subtitle={t("You have full access")}
                     actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
@@ -160,7 +160,9 @@ export const AccessControlList = observer(
             ) : document.isDraft ? (
               <>
                 <ListItem
-                  image={<Avatar model={document.createdBy} />}
+                  image={
+                    <Avatar model={document.createdBy} showBorder={false} />
+                  }
                   title={document.createdBy?.name}
                   actions={
                     <AccessTooltip content={t("Created the document")}>

app/components/Sharing/Document/DocumentMemberListItem.tsx

@@ -73,7 +73,9 @@ const DocumentMemberListItem = ({
   return (
     <ListItem
       title={user.name}
-      image={<Avatar model={user} size={AvatarSize.Medium} />}
+      image={
+        <Avatar model={user} size={AvatarSize.Medium} showBorder={false} />
+      }
       subtitle={
         membership?.sourceId ? (
           <Trans>

app/components/Sharing/components/ListItem.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "outline-icons";
 import styled from "styled-components";
-import { hover } from "@shared/styles";
 import BaseListItem from "~/components/List/Item";
+import { hover } from "~/styles";
 
 export const InviteIcon = styled(PlusIcon)`
   opacity: 0;

app/components/Sharing/components/Suggestions.tsx

@@ -5,7 +5,7 @@ import { CheckmarkIcon, CloseIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import { stringToColor } from "@shared/utils/color";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -20,6 +20,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
+import { hover } from "~/styles";
 import { InviteIcon, ListItem } from "./ListItem";
 
 type Suggestion = IAvatar & {
@@ -158,7 +159,13 @@ export const Suggestions = observer(
           : suggestion.isViewer
           ? t("Viewer")
           : t("Editor"),
-        image: <Avatar model={suggestion} size={AvatarSize.Medium} />,
+        image: (
+          <Avatar
+            model={suggestion}
+            size={AvatarSize.Medium}
+            showBorder={false}
+          />
+        ),
       };
     }
 

app/components/Sharing/components/index.tsx

@@ -1,8 +1,9 @@
 import { darken } from "polished";
 import styled from "styled-components";
 import Flex from "@shared/components/Flex";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 // TODO: Temp until Button/NudeButton styles are normalized
 export const Wrapper = styled.div`

app/components/Sidebar/Shared.tsx

@@ -3,7 +3,6 @@ import { SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { hover } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
@@ -12,9 +11,9 @@ import SearchPopover from "~/components/SearchPopover";
 import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import history from "~/utils/history";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
-import { AvatarSize } from "../Avatar";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
@@ -41,9 +40,7 @@ function SharedSidebar({ rootNode, shareId }: Props) {
       {teamAvailable && (
         <SidebarButton
           title={team.name}
-          image={
-            <TeamLogo model={team} size={AvatarSize.XLarge} alt={t("Logo")} />
-          }
+          image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
           onClick={() =>
             history.push(
               user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
@@ -70,7 +67,6 @@ function SharedSidebar({ rootNode, shareId }: Props) {
             depth={0}
             shareId={shareId}
             node={rootNode}
-            prefetchDocument={documents.prefetchDocument}
             activeDocumentId={ui.activeDocumentId}
             activeDocument={documents.active}
           />

app/components/Sidebar/Sidebar.tsx

@@ -197,7 +197,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   return (
     <TooltipProvider>
       <Container
-        id="sidebar"
         ref={ref}
         style={style}
         $hidden={hidden}
@@ -228,6 +227,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
                     alt={user.name}
                     model={user}
                     size={24}
+                    showBorder={false}
                     style={{ marginLeft: 4 }}
                   />
                 }

app/components/Sidebar/components/CollectionLink.tsx

@@ -2,29 +2,26 @@ import { Location } from "history";
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { mergeRefs } from "react-merge-refs";
-import { useHistory } from "react-router-dom";
-import { UserPreference } from "@shared/types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
-import { CollectionValidation, DocumentValidation } from "@shared/validations";
+import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
+import { createDocument } from "~/actions/definitions/documents";
+import useActionContext from "~/hooks/useActionContext";
 import useBoolean from "~/hooks/useBoolean";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import CollectionMenu from "~/menus/CollectionMenu";
-import { documentEditPath } from "~/utils/routeHelpers";
-import { useDropToChangeCollection } from "../hooks/useDragAndDrop";
 import DropToImport from "./DropToImport";
 import EditableTitle, { RefHandle } from "./EditableTitle";
 import Relative from "./Relative";
 import { SidebarContextType, useSidebarContext } from "./SidebarContext";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";
 
 type Props = {
   collection: Collection;
@@ -44,14 +41,12 @@ const CollectionLink: React.FC<Props> = ({
   depth,
   onClick,
 }: Props) => {
+  const { dialogs, documents, collections } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
-  const { documents } = useStores();
-  const history = useHistory();
   const can = usePolicy(collection);
   const { t } = useTranslation();
   const sidebarContext = useSidebarContext();
-  const user = useCurrentUser();
   const editableTitleRef = React.useRef<RefHandle>(null);
 
   const handleTitleChange = React.useCallback(
@@ -63,127 +58,119 @@ const CollectionLink: React.FC<Props> = ({
     [collection]
   );
 
-  const handleExpand = React.useCallback(() => {
-    if (!expanded) {
-      onDisclosureClick();
-    }
-  }, [expanded, onDisclosureClick]);
+  // Drop to re-parent document
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: "document",
+    drop: async (item: DragObject, monitor) => {
+      const { id, collectionId } = item;
+      if (monitor.didDrop()) {
+        return;
+      }
+      if (!collection) {
+        return;
+      }
 
-  const parentRef = React.useRef<HTMLDivElement>(null);
-  const [{ isOver, canDrop }, dropRef] = useDropToChangeCollection(
-    collection,
-    handleExpand,
-    parentRef
-  );
+      const document = documents.get(id);
+      if (collection.id === collectionId && !document?.parentDocumentId) {
+        return;
+      }
+
+      const prevCollection = collections.get(collectionId);
+
+      if (
+        prevCollection &&
+        prevCollection.permission !== collection.permission &&
+        !document?.isDraft
+      ) {
+        dialogs.openModal({
+          title: t("Change permissions?"),
+          content: <ConfirmMoveDialog item={item} collection={collection} />,
+        });
+      } else {
+        await documents.move({ documentId: id, collectionId: collection.id });
+
+        if (!expanded) {
+          onDisclosureClick();
+        }
+      }
+    },
+    canDrop: () => can.createDocument,
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver({
+        shallow: true,
+      }),
+      canDrop: monitor.canDrop(),
+    }),
+  });
 
   const handlePrefetch = React.useCallback(() => {
     void collection.fetchDocuments();
   }, [collection]);
 
+  const context = useActionContext({
+    activeCollectionId: collection.id,
+    sidebarContext,
+  });
+
   const handleRename = React.useCallback(() => {
     editableTitleRef.current?.setIsEditing(true);
   }, [editableTitleRef]);
 
-  const [isAddingNewChild, setIsAddingNewChild, closeAddingNewChild] =
-    useBoolean();
-
-  const handleNewDoc = React.useCallback(
-    async (input) => {
-      const newDocument = await documents.create(
-        {
-          collectionId: collection.id,
-          title: input,
-          fullWidth: user.getPreference(UserPreference.FullWidthDocuments),
-          data: ProsemirrorHelper.getEmptyDocument(),
-        },
-        { publish: true }
-      );
-      collection?.addDocument(newDocument);
-
-      closeAddingNewChild();
-      history.replace(documentEditPath(newDocument));
-    },
-    [user, closeAddingNewChild, history, collection, documents]
-  );
-
   return (
-    <>
-      <Relative ref={mergeRefs([parentRef, dropRef])}>
-        <DropToImport collectionId={collection.id}>
-          <SidebarLink
-            onClick={onClick}
-            to={{
-              pathname: collection.path,
-              state: { sidebarContext },
-            }}
-            expanded={expanded}
-            onDisclosureClick={onDisclosureClick}
-            onClickIntent={handlePrefetch}
-            icon={
-              <CollectionIcon collection={collection} expanded={expanded} />
-            }
-            showActions={menuOpen}
-            isActiveDrop={isOver && canDrop}
-            isActive={(
-              match,
-              location: Location<{ sidebarContext?: SidebarContextType }>
-            ) => !!match && location.state?.sidebarContext === sidebarContext}
-            label={
-              <EditableTitle
-                title={collection.name}
-                onSubmit={handleTitleChange}
-                onEditing={setIsEditing}
-                canUpdate={can.update}
-                maxLength={CollectionValidation.maxNameLength}
-                ref={editableTitleRef}
-              />
-            }
-            exact={false}
-            depth={depth ? depth : 0}
-            menu={
-              !isEditing &&
-              !isDraggingAnyCollection && (
-                <Fade>
-                  <NudeButton
-                    tooltip={{ content: t("New doc"), delay: 500 }}
-                    onClick={(ev) => {
-                      ev.preventDefault();
-                      setIsAddingNewChild();
-                      handleExpand();
-                    }}
-                  >
-                    <PlusIcon />
-                  </NudeButton>
-                  <CollectionMenu
-                    collection={collection}
-                    onRename={handleRename}
-                    onOpen={handleMenuOpen}
-                    onClose={handleMenuClose}
-                  />
-                </Fade>
-              )
-            }
-          />
-        </DropToImport>
-      </Relative>
-      {isAddingNewChild && (
+    <Relative ref={drop}>
+      <DropToImport collectionId={collection.id}>
         <SidebarLink
-          depth={2}
-          isActive={() => true}
+          onClick={onClick}
+          to={{
+            pathname: collection.path,
+            state: { sidebarContext },
+          }}
+          expanded={expanded}
+          onDisclosureClick={onDisclosureClick}
+          onClickIntent={handlePrefetch}
+          icon={<CollectionIcon collection={collection} expanded={expanded} />}
+          showActions={menuOpen}
+          isActiveDrop={isOver && canDrop}
+          isActive={(
+            match,
+            location: Location<{ sidebarContext?: SidebarContextType }>
+          ) => !!match && location.state?.sidebarContext === sidebarContext}
           label={
             <EditableTitle
-              title=""
-              canUpdate
-              isEditing
-              placeholder={`${t("New doc")}…`}
-              onCancel={closeAddingNewChild}
-              onSubmit={handleNewDoc}
-              maxLength={DocumentValidation.maxTitleLength}
+              title={collection.name}
+              onSubmit={handleTitleChange}
+              onEditing={setIsEditing}
+              canUpdate={can.update}
+              maxLength={CollectionValidation.maxNameLength}
+              ref={editableTitleRef}
             />
           }
+          exact={false}
+          depth={depth ? depth : 0}
+          menu={
+            !isEditing &&
+            !isDraggingAnyCollection && (
+              <Fade>
+                <NudeButton
+                  tooltip={{ content: t("New doc"), delay: 500 }}
+                  action={createDocument}
+                  context={context}
+                  hideOnActionDisabled
+                >
+                  <PlusIcon />
+                </NudeButton>
+                <CollectionMenu
+                  collection={collection}
+                  onRename={handleRename}
+                  onOpen={handleMenuOpen}
+                  onClose={handleMenuClose}
+                />
+              </Fade>
+            )
+          }
         />
-      )}
-    </>
+      </DropToImport>
+    </Relative>
   );
 };
 

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -1,23 +1,25 @@
-import noop from "lodash/noop";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
+import { toast } from "sonner";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import DocumentsLoader from "~/components/DocumentsLoader";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Text from "~/components/Text";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import useCollectionDocuments from "../hooks/useCollectionDocuments";
-import { useDropToChangeCollection } from "../hooks/useDragAndDrop";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import Folder from "./Folder";
 import PlaceholderCollections from "./PlaceholderCollections";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";
 
 type Props = {
   /** The collection to render the children of. */
@@ -34,17 +36,55 @@ function CollectionLinkChildren({
   prefetchDocument,
 }: Props) {
   const pageSize = 250;
-  const { documents } = useStores();
+  const can = usePolicy(collection);
+  const manualSort = collection.sort.field === "index";
+  const { documents, dialogs, collections } = useStores();
   const { t } = useTranslation();
   const childDocuments = useCollectionDocuments(collection, documents.active);
   const [showing, setShowing] = React.useState(pageSize);
-  const dummyRef = React.useRef<HTMLDivElement>(null);
 
-  const [{ isOver, canDrop }, dropRef] = useDropToChangeCollection(
-    collection,
-    noop,
-    dummyRef
-  );
+  // Drop to reorder document
+  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: (item: DragObject) => {
+      if (!manualSort && item.collectionId === collection?.id) {
+        toast.message(
+          t(
+            "You can't reorder documents in an alphabetically sorted collection"
+          )
+        );
+        return;
+      }
+
+      if (!collection) {
+        return;
+      }
+
+      const prevCollection = collections.get(item.collectionId);
+
+      if (
+        prevCollection &&
+        prevCollection.permission !== collection.permission
+      ) {
+        dialogs.openModal({
+          title: t("Change permissions?"),
+          content: (
+            <ConfirmMoveDialog item={item} collection={collection} index={0} />
+          ),
+        });
+      } else {
+        void documents.move({
+          documentId: item.id,
+          collectionId: collection.id,
+          index: 0,
+        });
+      }
+    },
+    collect: (monitor) => ({
+      isOverReorder: !!monitor.isOver(),
+      isDraggingAnyDocument: !!monitor.canDrop(),
+    }),
+  });
 
   React.useEffect(() => {
     if (!expanded) {
@@ -60,8 +100,12 @@ function CollectionLinkChildren({
 
   return (
     <Folder expanded={expanded}>
-      {canDrop && collection.isManualSort && (
-        <DropCursor isActiveDrop={isOver} innerRef={dropRef} position="top" />
+      {isDraggingAnyDocument && can.createDocument && manualSort && (
+        <DropCursor
+          isActiveDrop={isOverReorder}
+          innerRef={dropToReorder}
+          position="top"
+        />
       )}
       <DocumentsLoader collection={collection} enabled={expanded}>
         {!childDocuments && (

app/components/Sidebar/components/Collections.tsx

@@ -10,7 +10,6 @@ import Error from "~/components/List/Error";
 import PaginatedList from "~/components/PaginatedList";
 import { createCollection } from "~/actions/definitions/collections";
 import useStores from "~/hooks/useStores";
-import { DragObject } from "../hooks/useDragAndDrop";
 import DraggableCollectionLink from "./DraggableCollectionLink";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
@@ -18,6 +17,7 @@ import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
 import SidebarAction from "./SidebarAction";
 import SidebarContext from "./SidebarContext";
+import { DragObject } from "./SidebarLink";
 
 function Collections() {
   const { documents, collections } = useStores();

app/components/Sidebar/components/DocumentLink.tsx

@@ -3,24 +3,22 @@ import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
-import { NavigationNode, UserPreference } from "@shared/types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
+import { NavigationNode } from "@shared/types";
 import { sortNavigationNodes } from "@shared/utils/collections";
 import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
-import { documentEditPath } from "~/utils/routeHelpers";
+import { newNestedDocumentPath } from "~/utils/routeHelpers";
 import {
   useDragDocument,
   useDropToReorderDocument,
@@ -60,7 +58,6 @@ function InnerDocumentLink(
 ) {
   const { documents, policies } = useStores();
   const { t } = useTranslation();
-  const history = useHistory();
   const canUpdate = usePolicy(node.id).update;
   const isActiveDocument = activeDocument && activeDocument.id === node.id;
   const hasChildDocuments =
@@ -70,7 +67,6 @@ function InnerDocumentLink(
   const [isEditing, setIsEditing] = React.useState(false);
   const editableTitleRef = React.useRef<RefHandle>(null);
   const sidebarContext = useSidebarContext();
-  const user = useCurrentUser();
 
   React.useEffect(() => {
     if (
@@ -220,31 +216,6 @@ function InnerDocumentLink(
     [setExpanded, setCollapsed, hasChildren, expanded]
   );
 
-  const [isAddingNewChild, setIsAddingNewChild, closeAddingNewChild] =
-    useBoolean();
-
-  const handleNewDoc = React.useCallback(
-    async (input) => {
-      const newDocument = await documents.create(
-        {
-          collectionId: collection?.id,
-          parentDocumentId: node.id,
-          fullWidth:
-            doc?.fullWidth ??
-            user.getPreference(UserPreference.FullWidthDocuments),
-          title: input,
-          data: ProsemirrorHelper.getEmptyDocument(),
-        },
-        { publish: true }
-      );
-      collection?.addDocument(newDocument, node.id);
-
-      closeAddingNewChild();
-      history.replace(documentEditPath(newDocument));
-    },
-    [documents, collection, user, node, doc, history, closeAddingNewChild]
-  );
-
   return (
     <>
       <Relative ref={parentRef}>
@@ -311,11 +282,8 @@ function InnerDocumentLink(
                           <NudeButton
                             type={undefined}
                             aria-label={t("New nested document")}
-                            onClick={(ev) => {
-                              ev.preventDefault();
-                              setIsAddingNewChild();
-                              setExpanded();
-                            }}
+                            as={Link}
+                            to={newNestedDocumentPath(document.id)}
                           >
                             <PlusIcon />
                           </NudeButton>
@@ -340,25 +308,8 @@ function InnerDocumentLink(
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
       </Relative>
-      {isAddingNewChild && (
-        <SidebarLink
-          isActive={() => true}
-          depth={depth + 1}
-          label={
-            <EditableTitle
-              title=""
-              canUpdate
-              isEditing
-              placeholder={`${t("New doc")}…`}
-              onCancel={closeAddingNewChild}
-              onSubmit={handleNewDoc}
-              maxLength={DocumentValidation.maxTitleLength}
-            />
-          }
-        />
-      )}
       <Folder expanded={expanded && !isDragging}>
-        {nodeChildren.map((childNode, childIndex) => (
+        {nodeChildren.map((childNode, index) => (
           <DocumentLink
             key={childNode.id}
             collection={collection}
@@ -367,7 +318,7 @@ function InnerDocumentLink(
             prefetchDocument={prefetchDocument}
             isDraft={childNode.isDraft}
             depth={depth + 1}
-            index={childIndex}
+            index={index}
             parentId={node.id}
           />
         ))}

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -9,12 +9,12 @@ import Document from "~/models/Document";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
-import { DragObject } from "../hooks/useDragAndDrop";
 import CollectionLink from "./CollectionLink";
 import CollectionLinkChildren from "./CollectionLinkChildren";
 import DropCursor from "./DropCursor";
 import Relative from "./Relative";
 import { useSidebarContext } from "./SidebarContext";
+import { DragObject } from "./SidebarLink";
 
 type Props = {
   collection: Collection;

app/components/Sidebar/components/EditableTitle.tsx

@@ -3,33 +3,23 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 
-type Props = Omit<React.HTMLAttributes<HTMLInputElement>, "onSubmit"> & {
-  /** A callback when the title is submitted. */
-  onSubmit: (title: string) => Promise<void> | void;
-  /** A callback when the editing status changes. */
+type Props = {
+  onSubmit: (title: string) => Promise<void>;
   onEditing?: (isEditing: boolean) => void;
-  /** A callback when editing is canceled. */
-  onCancel?: () => void;
-  /** The default title. */
   title: string;
-  /** Whether the user can update the title. */
   canUpdate: boolean;
-  /** The maximum length of the title. */
   maxLength?: number;
-  /** The default editing state. */
-  isEditing?: boolean;
 };
 
 export type RefHandle = {
-  /** A function to set the editing state. */
   setIsEditing: (isEditing: boolean) => void;
 };
 
 function EditableTitle(
-  { title, onSubmit, canUpdate, onEditing, onCancel, ...rest }: Props,
+  { title, onSubmit, canUpdate, onEditing, ...rest }: Props,
   ref: React.RefObject<RefHandle>
 ) {
-  const [isEditing, setIsEditing] = React.useState(rest.isEditing || false);
+  const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
 
@@ -69,7 +59,6 @@ function EditableTitle(
 
       if (trimmedValue === originalValue || trimmedValue.length === 0) {
         setValue(originalValue);
-        onCancel?.();
         return;
       }
 
@@ -84,7 +73,7 @@ function EditableTitle(
         }
       }
     },
-    [originalValue, value, onCancel, onSubmit]
+    [originalValue, value, onSubmit]
   );
 
   const handleKeyDown = React.useCallback(
@@ -94,14 +83,13 @@ function EditableTitle(
       }
       if (ev.key === "Escape") {
         setIsEditing(false);
-        onCancel?.();
         setValue(originalValue);
       }
       if (ev.key === "Enter") {
         await handleSave(ev);
       }
     },
-    [handleSave, onCancel, originalValue]
+    [handleSave, originalValue]
   );
 
   React.useEffect(() => {

app/components/Sidebar/components/NavLink.tsx

@@ -93,11 +93,15 @@ const NavLink = ({
 
   React.useLayoutEffect(() => {
     if (isActive && linkRef.current && scrollIntoViewIfNeeded !== false) {
-      scrollIntoView(linkRef.current, {
-        scrollMode: "if-needed",
-        behavior: "auto",
-        boundary: (parent) => parent.id !== "sidebar",
-      });
+      // If the page has an anchor hash then this means we're linking to an
+      // anchor in the document – smooth scrolling the sidebar may the scrolling
+      // to the anchor of the document so we must avoid it.
+      if (!window.location.hash) {
+        scrollIntoView(linkRef.current, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+        });
+      }
     }
   }, [linkRef, scrollIntoViewIfNeeded, isActive]);
 

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -2,10 +2,10 @@ import includes from "lodash/includes";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { descendants } from "~/utils/tree";
@@ -16,7 +16,6 @@ type Props = {
   collection?: Collection;
   activeDocumentId?: string;
   activeDocument?: Document;
-  prefetchDocument?: (documentId: string) => Promise<Document | void>;
   isDraft?: boolean;
   depth: number;
   index: number;
@@ -30,7 +29,6 @@ function DocumentLink(
     collection,
     activeDocument,
     activeDocumentId,
-    prefetchDocument,
     isDraft,
     depth,
     shareId,
@@ -99,10 +97,6 @@ function DocumentLink(
     node,
   ]);
 
-  const handlePrefetch = React.useCallback(() => {
-    void prefetchDocument?.(node.id);
-  }, [prefetchDocument, node]);
-
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
@@ -120,7 +114,6 @@ function DocumentLink(
         }}
         expanded={hasChildDocuments && depth !== 0 ? expanded : undefined}
         onDisclosureClick={handleDisclosureClick}
-        onClickIntent={handlePrefetch}
         icon={icon && <Icon value={icon} color={node.color} />}
         label={title}
         depth={depth}
@@ -139,7 +132,6 @@ function DocumentLink(
             node={childNode}
             activeDocumentId={activeDocumentId}
             activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
             isDraft={childNode.isDraft}
             depth={depth + 1}
             index={index}

app/components/Sidebar/components/SidebarLink.tsx

@@ -4,6 +4,7 @@ import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
+import { NavigationNode } from "@shared/types";
 import NudeButton from "~/components/NudeButton";
 import { UnreadBadge } from "~/components/UnreadBadge";
 import useUnmount from "~/hooks/useUnmount";
@@ -11,6 +12,11 @@ import { undraggableOnDesktop } from "~/styles";
 import Disclosure from "./Disclosure";
 import NavLink, { Props as NavLinkProps } from "./NavLink";
 
+export type DragObject = NavigationNode & {
+  depth: number;
+  collectionId: string;
+};
+
 type Props = Omit<NavLinkProps, "to"> & {
   to?: LocationDescriptor;
   innerRef?: (ref: HTMLElement | null | undefined) => void;

app/components/Sidebar/components/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { hover } from "@shared/styles";
+import { hover } from "~/styles";
 import SidebarButton from "./SidebarButton";
 
 const ToggleButton = styled(SidebarButton)`

app/components/Sidebar/components/TrashLink.tsx

@@ -6,8 +6,7 @@ import { useTranslation } from "react-i18next";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import useStores from "~/hooks/useStores";
 import { trashPath } from "~/utils/routeHelpers";
-import { DragObject } from "../hooks/useDragAndDrop";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";
 
 function TrashLink() {
   const { policies, dialogs, documents } = useStores();

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -6,7 +6,6 @@ import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useTheme } from "styled-components";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -14,50 +13,12 @@ import GroupMembership from "~/models/GroupMembership";
 import Star from "~/models/Star";
 import UserMembership from "~/models/UserMembership";
 import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
+import Icon from "~/components/Icon";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { AuthorizationError } from "~/utils/errors";
+import { DragObject } from "../components/SidebarLink";
 import { useSidebarLabelAndIcon } from "./useSidebarLabelAndIcon";
 
-export type DragObject = NavigationNode & {
-  depth: number;
-  collectionId: string;
-};
-
-function useHover(
-  elementRef: React.RefObject<HTMLDivElement>,
-  callback: () => void
-) {
-  const hoverTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
-
-  const startHover = React.useCallback(() => {
-    if (!hoverTimeoutRef.current) {
-      hoverTimeoutRef.current = setTimeout(() => {
-        hoverTimeoutRef.current = undefined;
-        callback();
-      }, 500);
-    }
-  }, [callback]);
-
-  const unsetHover = React.useCallback(() => {
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = undefined;
-    }
-  }, []);
-
-  // We set a timeout when the user first starts hovering over the document link,
-  // to trigger expansion of children. Clear this timeout when they stop hovering.
-  React.useEffect(() => {
-    const element = elementRef.current;
-    element?.addEventListener("dragleave", unsetHover);
-    return () => element?.removeEventListener("dragleave", unsetHover);
-  }, [elementRef, unsetHover]);
-
-  return startHover;
-}
-
 /**
  * Hook for shared logic that allows dragging a Starred item
  *
@@ -201,84 +162,6 @@ export function useDragDocument(
   return [{ isDragging }, draggableRef] as const;
 }
 
-export function useDropToChangeCollection(
-  collection: Collection,
-  expandNode: () => void,
-  parentRef: React.RefObject<HTMLDivElement>
-) {
-  const { t } = useTranslation();
-  const { documents, collections, dialogs } = useStores();
-  const can = usePolicy(collection);
-  const startHover = useHover(parentRef, expandNode);
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOver: boolean; canDrop: boolean }
-  >({
-    accept: "document",
-    drop: async (item, monitor) => {
-      if (monitor.didDrop()) {
-        return;
-      }
-
-      const { id, collectionId } = item;
-      const prevCollection = collections.get(collectionId);
-      const document = documents.get(id);
-
-      if (
-        prevCollection &&
-        prevCollection.permission !== collection.permission &&
-        !document?.isDraft
-      ) {
-        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: (
-            <ConfirmMoveDialog item={item} collection={collection} index={0} />
-          ),
-        });
-      } else {
-        try {
-          await documents.move({
-            documentId: id,
-            collectionId: collection.id,
-            index: 0,
-          });
-          expandNode();
-        } catch (err) {
-          if (err instanceof AuthorizationError) {
-            toast.error(
-              t(
-                "You do not have permission to move {{ documentName }} to the {{ collectionName }} collection",
-                {
-                  documentName: item.title,
-                  collectionName: collection.name,
-                }
-              )
-            );
-          } else {
-            toast.error(err.message);
-          }
-        }
-      }
-    },
-    canDrop: () => can.createDocument,
-    hover: (_, monitor) => {
-      if (
-        collection.hasDocuments &&
-        monitor.canDrop() &&
-        monitor.isOver({ shallow: true })
-      ) {
-        startHover();
-      }
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver({ shallow: true }),
-      canDrop: monitor.canDrop(),
-    }),
-  });
-}
-
 /**
  * Hook for shared logic that allows dropping documents to reparent
  *
@@ -292,7 +175,7 @@ export function useDropToReparentDocument(
   parentRef: React.RefObject<HTMLDivElement>
 ) {
   const { t } = useTranslation();
-  const { documents, collections, dialogs } = useStores();
+  const { documents, collections, dialogs, policies } = useStores();
   const hasChildDocuments = !!node?.children.length;
   const document = node ? documents.get(node.id) : undefined;
   const pathToNode = React.useMemo(
@@ -300,7 +183,25 @@ export function useDropToReparentDocument(
     [document]
   );
 
-  const startHover = useHover(parentRef, setExpanded);
+  const hoverExpanding = React.useRef<ReturnType<typeof setTimeout>>();
+
+  // We set a timeout when the user first starts hovering over the document link,
+  // to trigger expansion of children. Clear this timeout when they stop hovering.
+  React.useEffect(() => {
+    const resetHoverExpanding = () => {
+      if (hoverExpanding.current) {
+        clearTimeout(hoverExpanding.current);
+        hoverExpanding.current = undefined;
+      }
+    };
+
+    const element = parentRef.current;
+    element?.addEventListener("dragleave", resetHoverExpanding);
+
+    return () => {
+      element?.removeEventListener("dragleave", resetHoverExpanding);
+    };
+  }, [parentRef]);
 
   return useDrop<
     DragObject,
@@ -313,9 +214,7 @@ export function useDropToReparentDocument(
         return;
       }
 
-      const collection = node.collectionId
-        ? collections.get(node.collectionId)
-        : undefined;
+      const collection = documents.get(node.id)?.collection;
       const prevCollection = collections.get(item.collectionId);
 
       if (
@@ -334,40 +233,22 @@ export function useDropToReparentDocument(
           ),
         });
       } else {
-        try {
-          await documents.move({
-            documentId: item.id,
-            parentDocumentId: node.id,
-          });
-          setExpanded();
-        } catch (err) {
-          if (err instanceof AuthorizationError) {
-            toast.error(
-              t(
-                "{{ documentName }} cannot be moved within {{ parentDocumentName }}",
-                {
-                  documentName: item.title,
-                  parentDocumentName: node.title,
-                }
-              )
-            );
-          } else {
-            toast.error(err.message);
-          }
-        }
-      }
-    },
-    canDrop: (item) => {
-      if (!node || item.id === node.id) {
-        return false;
+        await documents.move({
+          documentId: item.id,
+          parentDocumentId: node.id,
+        });
       }
 
-      if (!document) {
-        return true; // optimistic, in case the document is not loaded yet; server will check for permissions before performing the move.
-      }
-
-      return document.isActive && !!pathToNode && !pathToNode.includes(item.id);
+      setExpanded();
     },
+    canDrop: (item, monitor) =>
+      !!node &&
+      !!pathToNode &&
+      !pathToNode.includes(monitor.getItem().id) &&
+      item.id !== node.id &&
+      !!document?.isActive &&
+      policies.abilities(node.id).update &&
+      policies.abilities(item.id).move,
     hover: (_item, monitor) => {
       // Enables expansion of document children when hovering over the document
       // for more than half a second.
@@ -378,7 +259,15 @@ export function useDropToReparentDocument(
           shallow: true,
         })
       ) {
-        startHover();
+        if (!hoverExpanding.current) {
+          hoverExpanding.current = setTimeout(() => {
+            hoverExpanding.current = undefined;
+
+            if (monitor.isOver({ shallow: true })) {
+              setExpanded();
+            }
+          }, 500);
+        }
       }
     },
     collect: (monitor) => ({
@@ -408,7 +297,7 @@ export function useDropToReorderDocument(
       }
 ) {
   const { t } = useTranslation();
-  const { documents, collections, dialogs } = useStores();
+  const { documents, collections, dialogs, policies } = useStores();
 
   const document = documents.get(node.id);
 
@@ -419,9 +308,22 @@ export function useDropToReorderDocument(
   >({
     accept: "document",
     canDrop: (item: DragObject) => {
-      if (item.id === node.id || (document && !document.isActive)) {
+      if (
+        item.id === node.id ||
+        !policies.abilities(item.id)?.move ||
+        !document?.isActive
+      ) {
         return false;
       }
+
+      const params = getMoveParams(item);
+      if (params?.collectionId) {
+        return policies.abilities(params.collectionId)?.updateDocument;
+      }
+      if (params?.parentDocumentId) {
+        return policies.abilities(params.parentDocumentId)?.update;
+      }
+
       return true;
     },
     drop: async (item) => {
@@ -455,19 +357,7 @@ export function useDropToReorderDocument(
             ),
           });
         } else {
-          try {
-            await documents.move(params);
-          } catch (err) {
-            if (err instanceof AuthorizationError) {
-              toast.error(
-                t("The {{ documentName }} cannot be moved here", {
-                  documentName: item.title,
-                })
-              );
-            } else {
-              toast.error(err.message);
-            }
-          }
+          void documents.move(params);
         }
       }
     },

app/components/Sidebar/hooks/useSidebarLabelAndIcon.tsx

@@ -1,6 +1,6 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useStores from "~/hooks/useStores";
 

app/components/SortableTable.tsx

@@ -1,31 +0,0 @@
-import { ColumnSort } from "@tanstack/react-table";
-import * as React from "react";
-import { useHistory, useLocation } from "react-router-dom";
-import useQuery from "~/hooks/useQuery";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-import type { Props as TableProps } from "./Table";
-
-const Table = lazyWithRetry(() => import("~/components/Table"));
-
-export type Props<T> = Omit<TableProps<T>, "onChangeSort">;
-
-export function SortableTable<T>(props: Props<T>) {
-  const location = useLocation();
-  const history = useHistory();
-  const params = useQuery();
-
-  const handleChangeSort = React.useCallback(
-    (sort: ColumnSort) => {
-      params.set("sort", sort.id);
-      params.set("direction", sort.desc ? "desc" : "asc");
-
-      history.replace({
-        pathname: location.pathname,
-        search: params.toString(),
-      });
-    },
-    [params, history, location.pathname]
-  );
-
-  return <Table onChangeSort={handleChangeSort} {...props} />;
-}

app/components/Star.tsx

@@ -3,7 +3,6 @@ import { StarredIcon, UnstarredIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
-import { hover } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import {
@@ -12,6 +11,7 @@ import {
 } from "~/actions/definitions/collections";
 import { starDocument, unstarDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
+import { hover } from "~/styles";
 import NudeButton from "./NudeButton";
 
 type Props = {

app/components/Tab.tsx

@@ -4,8 +4,9 @@ import isEqual from "lodash/isEqual";
 import queryString from "query-string";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
   /**

app/components/Table.tsx

@@ -1,283 +1,231 @@
-import {
-  useReactTable,
-  getCoreRowModel,
-  SortingState,
-  flexRender,
-  ColumnSort,
-  functionalUpdate,
-  Row as TRow,
-  createColumnHelper,
-  AccessorFn,
-  CellContext,
-} from "@tanstack/react-table";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Waypoint } from "react-waypoint";
+import { useTable, useSortBy, usePagination } from "react-table";
 import styled from "styled-components";
 import { s } from "@shared/styles";
+import Button from "~/components/Button";
 import DelayedMount from "~/components/DelayedMount";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
-import usePrevious from "~/hooks/usePrevious";
 
-const HEADER_HEIGHT = 40;
-
-type DataColumn<TData> = {
-  type: "data";
-  header: string;
-  accessor: AccessorFn<TData>;
-  sortable?: boolean;
+export type Props = {
+  data: any[];
+  offset?: number;
+  isLoading: boolean;
+  empty?: React.ReactNode;
+  currentPage?: number;
+  page: number;
+  pageSize?: number;
+  totalPages?: number;
+  defaultSort?: string;
+  topRef?: React.Ref<any>;
+  onChangePage: (index: number) => void;
+  onChangeSort: (
+    sort: string | null | undefined,
+    direction: "ASC" | "DESC"
+  ) => void;
+  columns: any;
+  defaultSortDirection: "ASC" | "DESC";
 };
 
-type ActionColumn = {
-  type: "action";
-  header?: string;
-};
-
-export type Column<TData> = {
-  id: string;
-  component: (data: TData) => React.ReactNode;
-  width: string;
-} & (DataColumn<TData> | ActionColumn);
-
-export type Props<TData> = {
-  data: TData[];
-  columns: Column<TData>[];
-  sort: ColumnSort;
-  onChangeSort: (sort: ColumnSort) => void;
-  loading: boolean;
-  page: {
-    hasNext: boolean;
-    fetchNext?: () => void;
-  };
-  rowHeight: number;
-  stickyOffset?: number;
-};
-
-function Table<TData>({
+function Table({
   data,
+  isLoading,
+  totalPages,
+  empty,
   columns,
-  sort,
-  onChangeSort,
-  loading,
   page,
-  rowHeight,
-  stickyOffset = 0,
-}: Props<TData>) {
+  pageSize = 50,
+  defaultSort = "name",
+  topRef,
+  onChangeSort,
+  onChangePage,
+  defaultSortDirection,
+}: Props) {
   const { t } = useTranslation();
-  const virtualContainerRef = React.useRef<HTMLDivElement>(null);
-  const [virtualContainerTop, setVirtualContainerTop] =
-    React.useState<number>();
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    canNextPage,
+    nextPage,
+    canPreviousPage,
+    previousPage,
+    state: { pageIndex, sortBy },
+  } = useTable(
+    {
+      columns,
+      data,
+      manualPagination: true,
+      manualSortBy: true,
+      autoResetSortBy: false,
+      autoResetPage: false,
+      pageCount: totalPages,
+      initialState: {
+        sortBy: [
+          {
+            id: defaultSort,
+            desc: defaultSortDirection === "DESC" ? true : false,
+          },
+        ],
+        pageSize,
+        pageIndex: page,
+      },
+      stateReducer: (newState, action, prevState) => {
+        if (!isEqual(newState.sortBy, prevState.sortBy)) {
+          return { ...newState, pageIndex: 0 };
+        }
 
-  const columnHelper = React.useMemo(() => createColumnHelper<TData>(), []);
-  const observedColumns = React.useMemo(
-    () =>
-      columns.map((column) => {
-        const cell = ({ row }: CellContext<TData, unknown>) => (
-          <ObservedCell data={row.original} render={column.component} />
-        );
-
-        return column.type === "data"
-          ? columnHelper.accessor(column.accessor, {
-              id: column.id,
-              header: column.header,
-              enableSorting: column.sortable ?? true,
-              cell,
-            })
-          : columnHelper.display({
-              id: column.id,
-              header: column.header ?? "",
-              cell,
-            });
-      }),
-    [columns, columnHelper]
-  );
-
-  const gridColumns = React.useMemo(
-    () => columns.map((column) => column.width).join(" "),
-    [columns]
-  );
-
-  const handleChangeSort = React.useCallback(
-    (sortState: SortingState) => {
-      const newState = functionalUpdate(sortState, [sort]);
-      const newSort = newState[0];
-      onChangeSort(newSort);
+        return newState;
+      },
     },
-    [sort, onChangeSort]
+    useSortBy,
+    usePagination
   );
-
-  const prevSort = usePrevious(sort);
-  const sortChanged = sort !== prevSort;
-
-  const isEmpty = !loading && data.length === 0;
-  const showPlaceholder = loading && data.length === 0;
-
-  const table = useReactTable({
-    data,
-    columns: observedColumns,
-    getCoreRowModel: getCoreRowModel(),
-    manualSorting: true,
-    enableMultiSort: false,
-    enableSortingRemoval: false,
-    state: {
-      sorting: [sort],
-    },
-    onSortingChange: handleChangeSort,
-  });
-
-  const { rows } = table.getRowModel();
-
-  const rowVirtualizer = useWindowVirtualizer({
-    count: rows.length,
-    estimateSize: () => rowHeight,
-    scrollMargin: virtualContainerTop,
-    overscan: 5,
-  });
+  const prevSortBy = React.useRef(sortBy);
 
   React.useEffect(() => {
-    if (!sortChanged || !virtualContainerTop) {
-      return;
-    }
-
-    const scrollThreshold =
-      virtualContainerTop - (stickyOffset + HEADER_HEIGHT);
-    const reset = window.scrollY > scrollThreshold;
-
-    if (reset) {
-      rowVirtualizer.scrollToOffset(scrollThreshold, {
-        behavior: "smooth",
-      });
-    }
-  }, [rowVirtualizer, sortChanged, virtualContainerTop, stickyOffset]);
-
-  React.useLayoutEffect(() => {
-    if (virtualContainerRef.current) {
-      // determine the scrollable virtual container offsetTop on mount
-      setVirtualContainerTop(
-        virtualContainerRef.current.getBoundingClientRect().top
+    if (!isEqual(sortBy, prevSortBy.current)) {
+      prevSortBy.current = sortBy;
+      onChangePage(0);
+      onChangeSort(
+        sortBy.length ? sortBy[0].id : undefined,
+        !sortBy.length ? defaultSortDirection : sortBy[0].desc ? "DESC" : "ASC"
       );
     }
-  }, []);
+  }, [defaultSortDirection, onChangePage, onChangeSort, sortBy]);
+
+  const handleNextPage = () => {
+    nextPage();
+    onChangePage(pageIndex + 1);
+  };
+
+  const handlePreviousPage = () => {
+    previousPage();
+    onChangePage(pageIndex - 1);
+  };
+
+  const isEmpty = !isLoading && data.length === 0;
+  const showPlaceholder = isLoading && data.length === 0;
 
   return (
-    <>
-      <InnerTable role="table">
-        <THead role="rowgroup" $topPos={stickyOffset}>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TR role="row" key={headerGroup.id} $columns={gridColumns}>
-              {headerGroup.headers.map((header) => (
-                <TH role="columnheader" key={header.id}>
-                  <SortWrapper
-                    align="center"
-                    gap={4}
-                    onClick={header.column.getToggleSortingHandler()}
-                    $sortable={header.column.getCanSort()}
-                  >
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getIsSorted() === "asc" ? (
-                      <AscSortIcon />
-                    ) : header.column.getIsSorted() === "desc" ? (
-                      <DescSortIcon />
-                    ) : (
-                      <div />
-                    )}
-                  </SortWrapper>
-                </TH>
-              ))}
-            </TR>
-          ))}
-        </THead>
-
-        <TBody
-          ref={virtualContainerRef}
-          role="rowgroup"
-          $height={rowVirtualizer.getTotalSize()}
-        >
-          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-            const row = rows[virtualRow.index] as TRow<TData>;
+    <div style={{ overflowX: "auto" }}>
+      <Anchor ref={topRef} />
+      <InnerTable {...getTableProps()}>
+        <thead>
+          {headerGroups.map((headerGroup) => {
+            const groupProps = headerGroup.getHeaderGroupProps();
             return (
-              <TR
-                role="row"
-                key={row.id}
-                data-index={virtualRow.index}
-                style={{
-                  position: "absolute",
-                  transform: `translateY(${
-                    virtualRow.start - rowVirtualizer.options.scrollMargin
-                  }px)`,
-                  height: `${virtualRow.size}px`,
-                }}
-                $columns={gridColumns}
-              >
-                {row.getAllCells().map((cell) => (
-                  <TD role="cell" key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TD>
+              <tr {...groupProps} key={groupProps.key}>
+                {headerGroup.headers.map((column) => (
+                  <Head
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
+                    key={column.id}
+                  >
+                    <SortWrapper
+                      align="center"
+                      $sortable={!column.disableSortBy}
+                      gap={4}
+                    >
+                      {column.render("Header")}
+                      {column.isSorted &&
+                        (column.isSortedDesc ? (
+                          <DescSortIcon />
+                        ) : (
+                          <AscSortIcon />
+                        ))}
+                    </SortWrapper>
+                  </Head>
                 ))}
-              </TR>
+              </tr>
             );
           })}
-        </TBody>
-        {showPlaceholder && (
-          <Placeholder columns={columns.length} gridColumns={gridColumns} />
-        )}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+            return (
+              <Row {...row.getRowProps()} key={row.id}>
+                {row.cells.map((cell) => (
+                  <Cell
+                    {...cell.getCellProps([
+                      {
+                        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Colum... Remove this comment to see the full error message
+                        className: cell.column.className,
+                      },
+                    ])}
+                    key={cell.column.id}
+                  >
+                    {cell.render("Cell")}
+                  </Cell>
+                ))}
+              </Row>
+            );
+          })}
+        </tbody>
+        {showPlaceholder && <Placeholder columns={columns.length} />}
       </InnerTable>
-      {page.hasNext && (
-        <Waypoint
-          key={data?.length}
-          onEnter={page.fetchNext}
-          bottomOffset={-rowHeight * 5}
-        />
+      {isEmpty ? (
+        empty || <Empty>{t("No results")}</Empty>
+      ) : (
+        <Pagination
+          justify={canPreviousPage ? "space-between" : "flex-end"}
+          gap={8}
+        >
+          {/* Note: the page > 0 check shouldn't be needed here but is */}
+          {canPreviousPage && page > 0 && (
+            <Button onClick={handlePreviousPage} neutral>
+              {t("Previous page")}
+            </Button>
+          )}
+          {canNextPage && (
+            <Button onClick={handleNextPage} neutral>
+              {t("Next page")}
+            </Button>
+          )}
+        </Pagination>
       )}
-      {isEmpty && <Empty>{t("No results")}</Empty>}
-    </>
+    </div>
   );
 }
 
-const ObservedCell = observer(function <TData>({
-  data,
-  render,
-}: {
-  data: TData;
-  render: (data: TData) => React.ReactNode;
-}) {
-  return <>{render(data)}</>;
-});
-
-function Placeholder({
+export const Placeholder = ({
   columns,
   rows = 3,
-  gridColumns,
 }: {
   columns: number;
   rows?: number;
-  gridColumns: string;
-}) {
-  return (
-    <DelayedMount>
-      <TBody $height={150}>
-        {new Array(rows).fill(1).map((_r, row) => (
-          <TR key={row} $columns={gridColumns}>
-            {new Array(columns).fill(1).map((_c, col) => (
-              <TD key={col}>
-                <PlaceholderText minWidth={25} maxWidth={75} />
-              </TD>
-            ))}
-          </TR>
-        ))}
-      </TBody>
-    </DelayedMount>
-  );
-}
+}) => (
+  <DelayedMount>
+    <tbody>
+      {new Array(rows).fill(1).map((_, row) => (
+        <Row key={row}>
+          {new Array(columns).fill(1).map((_, col) => (
+            <Cell key={col}>
+              <PlaceholderText minWidth={25} maxWidth={75} />
+            </Cell>
+          ))}
+        </Row>
+      ))}
+    </tbody>
+  </DelayedMount>
+);
+
+const Anchor = styled.div`
+  top: -32px;
+  position: relative;
+`;
+
+const Pagination = styled(Flex)`
+  margin: 0 0 32px;
+`;
 
 const DescSortIcon = styled(CollapsedIcon)`
   margin-left: -2px;
@@ -291,6 +239,12 @@ const AscSortIcon = styled(DescSortIcon)`
   transform: rotate(180deg);
 `;
 
+const InnerTable = styled.table`
+  border-collapse: collapse;
+  margin: 16px 0;
+  min-width: 100%;
+`;
+
 const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   display: inline-flex;
   height: 24px;
@@ -307,66 +261,15 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   }
 `;
 
-const InnerTable = styled.div`
-  width: 100%;
-`;
-
-const THead = styled.div<{ $topPos: number }>`
-  position: sticky;
-  top: ${({ $topPos }) => `${$topPos}px`};
-  height: ${HEADER_HEIGHT}px;
-  z-index: 1;
-  font-size: 14px;
-  color: ${s("textSecondary")};
-  font-weight: 500;
-
-  border-bottom: 1px solid ${s("divider")};
-  background: ${s("background")};
-`;
-
-const TBody = styled.div<{ $height: number }>`
-  position: relative;
-  height: ${({ $height }) => `${$height}px`};
-`;
-
-const TR = styled.div<{ $columns: string }>`
-  width: 100%;
-  display: grid;
-  grid-template-columns: ${({ $columns }) => `${$columns}`};
-  align-items: center;
-  border-bottom: 1px solid ${s("divider")};
-
-  &:last-child {
-    border-bottom: 0;
-  }
-`;
-
-const TH = styled.span`
-  padding: 6px 6px 2px;
-
-  &:first-child {
-    padding-left: 0;
-  }
-
-  &:last-child {
-    padding-right: 0;
-  }
-`;
-
-const TD = styled.span`
+const Cell = styled.td`
   padding: 10px 6px;
+  border-bottom: 1px solid ${s("divider")};
   font-size: 14px;
-  text-wrap: wrap;
-  word-break: break-word;
+  text-wrap: nowrap;
 
   &:first-child {
     font-size: 15px;
     font-weight: 500;
-    padding-left: 0;
-  }
-
-  &:last-child {
-    padding-right: 0;
   }
 
   &.actions,
@@ -389,4 +292,39 @@ const TD = styled.span`
   }
 `;
 
+const Row = styled.tr`
+  ${Cell} {
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+  &:last-child {
+    ${Cell} {
+      border-bottom: 0;
+    }
+  }
+`;
+
+const Head = styled.th`
+  text-align: left;
+  padding: 6px 6px 2px;
+  border-bottom: 1px solid ${s("divider")};
+  background: ${s("background")};
+  font-size: 14px;
+  color: ${s("textSecondary")};
+  font-weight: 500;
+  z-index: 1;
+
+  :first-child {
+    padding-left: 0;
+  }
+
+  :last-child {
+    padding-right: 0;
+  }
+`;
+
 export default observer(Table);

app/components/TableFromParams.tsx

@@ -0,0 +1,71 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import scrollIntoView from "scroll-into-view-if-needed";
+import useQuery from "~/hooks/useQuery";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+import type { Props } from "./Table";
+
+const Table = lazyWithRetry(() => import("~/components/Table"));
+
+const TableFromParams = (
+  props: Omit<Props, "onChangeSort" | "onChangePage" | "topRef">
+) => {
+  const topRef = React.useRef();
+  const location = useLocation();
+  const history = useHistory();
+  const params = useQuery();
+
+  const handleChangeSort = React.useCallback(
+    (sort, direction) => {
+      if (sort) {
+        params.set("sort", sort);
+      } else {
+        params.delete("sort");
+      }
+
+      params.set("direction", direction.toLowerCase());
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+    },
+    [params, history, location.pathname]
+  );
+
+  const handleChangePage = React.useCallback(
+    (page) => {
+      if (page) {
+        params.set("page", page.toString());
+      } else {
+        params.delete("page");
+      }
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+
+      if (topRef.current) {
+        scrollIntoView(topRef.current, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+          block: "start",
+        });
+      }
+    },
+    [params, history, location.pathname]
+  );
+
+  return (
+    <Table
+      topRef={topRef}
+      onChangeSort={handleChangeSort}
+      onChangePage={handleChangePage}
+      {...props}
+    />
+  );
+};
+
+export default observer(TableFromParams);

app/components/UserDialogs.tsx

@@ -1,14 +1,10 @@
 import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
 import { UserRole } from "@shared/types";
 import User from "~/models/User";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Input from "~/components/Input";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { client } from "~/utils/ApiClient";
-import Text from "./Text";
 
 type Props = {
   user: User;
@@ -89,11 +85,7 @@ export function UserSuspendDialog({ user, onSubmit }: Props) {
   };
 
   return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      savingText={`${t("Saving")}…`}
-      danger
-    >
+    <ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
       {t(
         "Are you sure you want to suspend {{ userName }}? Suspended users will be prevented from logging in.",
         {
@@ -131,68 +123,6 @@ export function UserChangeNameDialog({ user, onSubmit }: Props) {
         onChange={handleChange}
         error={!name ? t("Name can't be empty") : undefined}
         value={name}
-        autoSelect
-        required
-        flex
-      />
-    </ConfirmationDialog>
-  );
-}
-
-export function UserChangeEmailDialog({ user, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const actor = useCurrentUser();
-  const [email, setEmail] = React.useState<string>(user.email);
-  const [error, setError] = React.useState<string | undefined>();
-
-  const handleSubmit = async () => {
-    try {
-      await client.post(`/users.updateEmail`, { id: user.id, email });
-      onSubmit();
-      toast.info(
-        actor.id === user.id
-          ? t("Check your email to verify the new address.")
-          : t("The email will be changed once verified.")
-      );
-      return true;
-    } catch (err) {
-      setError(err.message);
-      return false;
-    }
-  };
-
-  const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setEmail(ev.target.value);
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Save")}
-      savingText={`${t("Saving")}…`}
-      disabled={!email || email === user.email}
-    >
-      <Text as="p">
-        {actor.id === user.id ? (
-          <Trans>
-            You will receive an email to verify your new address. It must be
-            unique in the workspace.
-          </Trans>
-        ) : (
-          <Trans>
-            A confirmation email will be sent to the new address before it is
-            changed.
-          </Trans>
-        )}
-      </Text>
-      <Input
-        type="email"
-        name="email"
-        label={t("New email")}
-        onChange={handleChange}
-        error={!email ? t("Email can't be empty") : error}
-        value={email}
-        autoSelect
         required
         flex
       />

app/components/WebsocketProvider.tsx

@@ -190,7 +190,7 @@ class WebsocketProvider extends React.Component<Props> {
             if (collection?.updatedAt === collectionDescriptor.updatedAt) {
               continue;
             }
-            if (!collection?.documents && !event.fetchIfMissing) {
+            if (!collection?.documents?.length && !event.fetchIfMissing) {
               continue;
             }
 

app/editor/components/BlockMenu.tsx

@@ -6,7 +6,10 @@ import SuggestionsMenu, {
 } from "./SuggestionsMenu";
 import SuggestionsMenuItem from "./SuggestionsMenuItem";
 
-type Props = Omit<SuggestionsMenuProps, "renderMenuItem" | "items"> &
+type Props = Omit<
+  SuggestionsMenuProps,
+  "renderMenuItem" | "items" | "trigger"
+> &
   Required<Pick<SuggestionsMenuProps, "embeds">>;
 
 function BlockMenu(props: Props) {

app/editor/components/EmojiMenu.tsx

@@ -17,7 +17,7 @@ type Emoji = {
 
 type Props = Omit<
   SuggestionsMenuProps<Emoji>,
-  "renderMenuItem" | "items" | "embeds"
+  "renderMenuItem" | "items" | "embeds" | "trigger"
 >;
 
 const EmojiMenu = (props: Props) => {
@@ -48,6 +48,7 @@ const EmojiMenu = (props: Props) => {
   return (
     <SuggestionsMenu
       {...props}
+      trigger=":"
       filterable={false}
       renderMenuItem={(item, _index, options) => (
         <EmojiMenuItem

app/editor/components/FloatingToolbar.tsx

@@ -6,10 +6,10 @@ import styled, { css } from "styled-components";
 import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
 import { depths, s } from "@shared/styles";
 import { HEADER_HEIGHT } from "~/components/Header";
 import { Portal } from "~/components/Portal";
+import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useWindowSize from "~/hooks/useWindowSize";
@@ -184,10 +184,10 @@ function usePosition({
   // of the selection still
   const offset = left - (centerOfSelection - menuWidth / 2);
   return {
-    left: Math.max(margin, Math.round(left - offsetParent.left)),
+    left: Math.round(left - offsetParent.left),
     top: Math.round(top - offsetParent.top),
     offset: Math.round(offset),
-    maxWidth: Math.min(window.innerWidth, offsetParent.width) - margin * 2,
+    maxWidth: Math.min(window.innerWidth - margin * 2, offsetParent.width),
     blockSelection: codeBlock || isColSelection || isRowSelection,
     visible: true,
   };

app/editor/components/LinkEditor.tsx

@@ -1,24 +1,43 @@
-import { ArrowIcon, CloseIcon, OpenIcon } from "outline-icons";
+import {
+  ArrowIcon,
+  DocumentIcon,
+  CloseIcon,
+  PlusIcon,
+  OpenIcon,
+} from "outline-icons";
 import { Mark } from "prosemirror-model";
 import { Selection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import { toast } from "sonner";
 import styled from "styled-components";
+import { s, hideScrollbars } from "@shared/styles";
 import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
 import Flex from "~/components/Flex";
+import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
+import Scrollable from "~/components/Scrollable";
 import { Dictionary } from "~/hooks/useDictionary";
 import Logger from "~/utils/Logger";
 import Input from "./Input";
+import LinkSearchResult from "./LinkSearchResult";
 import ToolbarButton from "./ToolbarButton";
 import Tooltip from "./Tooltip";
 
+export type SearchResult = {
+  title: string;
+  subtitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  url: string;
+};
+
 type Props = {
   mark?: Mark;
   from: number;
   to: number;
   dictionary: Dictionary;
   onRemoveLink?: () => void;
+  onCreateLink?: (title: string, nested?: boolean) => Promise<void>;
+  onSearchLink?: (term: string) => Promise<SearchResult[]>;
   onSelectLink: (options: {
     href: string;
     title?: string;
@@ -33,25 +52,46 @@ type Props = {
 };
 
 type State = {
+  results: {
+    [keyword: string]: SearchResult[];
+  };
   value: string;
   previousValue: string;
+  selectedIndex: number;
 };
 
 class LinkEditor extends React.Component<Props, State> {
   discardInputValue = false;
   initialValue = this.href;
   initialSelectionLength = this.props.to - this.props.from;
+  resultsRef = React.createRef<HTMLDivElement>();
   inputRef = React.createRef<HTMLInputElement>();
 
   state: State = {
+    selectedIndex: -1,
     value: this.href,
     previousValue: "",
+    results: {},
   };
 
   get href(): string {
     return sanitizeUrl(this.props.mark?.attrs.href) ?? "";
   }
 
+  get selectedText(): string {
+    const { state } = this.props.view;
+    const selectionText = state.doc.cut(
+      state.selection.from,
+      state.selection.to
+    ).textContent;
+
+    return selectionText.trim();
+  }
+
+  get suggestedLinkTitle(): string {
+    return this.state.value.trim() || this.selectedText;
+  }
+
   componentDidMount(): void {
     window.addEventListener("keydown", this.handleGlobalKeyDown);
   }
@@ -99,12 +139,25 @@ class LinkEditor extends React.Component<Props, State> {
   };
 
   handleKeyDown = (event: React.KeyboardEvent): void => {
+    const results = this.results;
+
     switch (event.key) {
       case "Enter": {
         event.preventDefault();
-        const { value } = this.state;
+        const { selectedIndex, value } = this.state;
+        const { onCreateLink } = this.props;
 
-        this.save(value, value);
+        if (selectedIndex >= 0) {
+          const result = results[selectedIndex];
+          if (result) {
+            this.save(result.url, result.title);
+          } else if (onCreateLink && selectedIndex === results.length) {
+            void this.handleCreateLink(this.suggestedLinkTitle);
+          }
+        } else {
+          // saves the raw input as href
+          this.save(value, value);
+        }
 
         if (this.initialSelectionLength) {
           this.moveSelectionToEnd();
@@ -123,9 +176,45 @@ class LinkEditor extends React.Component<Props, State> {
         }
         return;
       }
+
+      case "ArrowUp": {
+        if (event.shiftKey) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const prevIndex = this.state.selectedIndex - 1;
+
+        this.setState({
+          selectedIndex: Math.max(-1, prevIndex),
+        });
+        return;
+      }
+
+      case "ArrowDown":
+      case "Tab": {
+        if (event.shiftKey) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        const { selectedIndex } = this.state;
+        const total = results.length + 1;
+        const nextIndex = selectedIndex + 1;
+
+        this.setState({
+          selectedIndex: Math.min(nextIndex, total),
+        });
+        return;
+      }
     }
   };
 
+  handleFocusLink = (selectedIndex: number) => {
+    this.setState({ selectedIndex });
+  };
+
   handleSearch = async (
     event: React.ChangeEvent<HTMLInputElement>
   ): Promise<void> => {
@@ -133,15 +222,21 @@ class LinkEditor extends React.Component<Props, State> {
 
     this.setState({
       value,
+      selectedIndex: -1,
     });
 
-    const trimmedValue = value.trim();
+    const trimmedValue = value.trim() || this.selectedText;
 
-    if (trimmedValue) {
+    if (trimmedValue && this.props.onSearchLink) {
       try {
-        this.setState({
+        const results = await this.props.onSearchLink(trimmedValue);
+        this.setState((state) => ({
+          results: {
+            ...state.results,
+            [trimmedValue]: results,
+          },
           previousValue: trimmedValue,
-        });
+        }));
       } catch (err) {
         Logger.error("Error searching for link", err);
       }
@@ -162,6 +257,20 @@ class LinkEditor extends React.Component<Props, State> {
     }
   };
 
+  handleCreateLink = async (title: string, nested?: boolean) => {
+    this.discardInputValue = true;
+    const { onCreateLink } = this.props;
+
+    title = title.trim();
+    if (title.length === 0) {
+      return;
+    }
+
+    if (onCreateLink) {
+      return onCreateLink(title, nested);
+    }
+  };
+
   handleRemoveLink = (): void => {
     this.discardInputValue = true;
 
@@ -176,6 +285,16 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
+  handleSelectLink =
+    (url: string, title: string) => (event: React.MouseEvent) => {
+      event.preventDefault();
+      this.save(url, title);
+
+      if (this.initialSelectionLength) {
+        this.moveSelectionToEnd();
+      }
+    };
+
   moveSelectionToEnd = () => {
     const { to, view } = this.props;
     const { state, dispatch } = view;
@@ -186,23 +305,47 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
-  render() {
-    const { view, dictionary } = this.props;
+  get results() {
     const { value } = this.state;
+    return (
+      this.state.results[value.trim()] ||
+      this.state.results[this.state.previousValue] ||
+      []
+    );
+  }
+
+  render() {
+    const { dictionary } = this.props;
+    const { value, selectedIndex } = this.state;
+    const results = this.results;
+    const looksLikeUrl = value.match(/^https?:\/\//i);
+    const suggestedLinkTitle = this.suggestedLinkTitle;
     const isInternal = isInternalUrl(value);
 
+    const showCreateLink =
+      !!this.props.onCreateLink &&
+      !(suggestedLinkTitle === this.initialValue) &&
+      suggestedLinkTitle.length > 0 &&
+      !looksLikeUrl;
+
+    const hasResults =
+      !!suggestedLinkTitle && (showCreateLink || results.length > 0);
+
     return (
       <Wrapper>
         <Input
           ref={this.inputRef}
           value={value}
-          placeholder={dictionary.enterLink}
+          placeholder={
+            showCreateLink
+              ? dictionary.findOrCreateDoc
+              : dictionary.searchOrPasteLink
+          }
           onKeyDown={this.handleKeyDown}
           onPaste={this.handlePaste}
           onChange={this.handleSearch}
           onFocus={this.handleSearch}
           autoFocus={this.href === ""}
-          readOnly={!view.editable}
         />
 
         <Tooltip
@@ -212,13 +355,75 @@ class LinkEditor extends React.Component<Props, State> {
             {isInternal ? <ArrowIcon /> : <OpenIcon />}
           </ToolbarButton>
         </Tooltip>
-        {view.editable && (
-          <Tooltip content={dictionary.removeLink}>
-            <ToolbarButton onClick={this.handleRemoveLink}>
-              <CloseIcon />
-            </ToolbarButton>
-          </Tooltip>
-        )}
+        <Tooltip content={dictionary.removeLink}>
+          <ToolbarButton onClick={this.handleRemoveLink}>
+            <CloseIcon />
+          </ToolbarButton>
+        </Tooltip>
+
+        <SearchResults
+          ref={this.resultsRef}
+          $hasResults={hasResults}
+          role="menu"
+        >
+          <ResizingHeightContainer>
+            {hasResults && (
+              <>
+                {results.map((result, index) => (
+                  <LinkSearchResult
+                    key={result.url}
+                    title={result.title}
+                    subtitle={result.subtitle}
+                    icon={result.icon ?? <DocumentIcon />}
+                    onPointerMove={() => this.handleFocusLink(index)}
+                    onClick={this.handleSelectLink(result.url, result.title)}
+                    selected={index === selectedIndex}
+                    containerRef={this.resultsRef}
+                  />
+                ))}
+
+                {showCreateLink && (
+                  <>
+                    <LinkSearchResult
+                      key="create"
+                      containerRef={this.resultsRef}
+                      title={suggestedLinkTitle}
+                      subtitle={dictionary.createNewDoc}
+                      icon={<PlusIcon />}
+                      onPointerMove={() => this.handleFocusLink(results.length)}
+                      onClick={async () => {
+                        await this.handleCreateLink(suggestedLinkTitle);
+
+                        if (this.initialSelectionLength) {
+                          this.moveSelectionToEnd();
+                        }
+                      }}
+                      selected={results.length === selectedIndex}
+                    />
+                    <LinkSearchResult
+                      key="create-nested"
+                      containerRef={this.resultsRef}
+                      title={suggestedLinkTitle}
+                      subtitle={dictionary.createNewChildDoc}
+                      icon={<PlusIcon />}
+                      onPointerMove={() =>
+                        this.handleFocusLink(results.length + 1)
+                      }
+                      onClick={async () => {
+                        await this.handleCreateLink(suggestedLinkTitle, true);
+
+                        if (this.initialSelectionLength) {
+                          this.moveSelectionToEnd();
+                        }
+                      }}
+                      selected={results.length + 1 === selectedIndex}
+                    />
+                  </>
+                )}
+              </>
+            )}
+          </ResizingHeightContainer>
+        </SearchResults>
       </Wrapper>
     );
   }
@@ -229,4 +434,29 @@ const Wrapper = styled(Flex)`
   gap: 8px;
 `;
 
+const SearchResults = styled(Scrollable)<{ $hasResults: boolean }>`
+  background: ${s("menuBackground")};
+  box-shadow: ${(props) => (props.$hasResults ? s("menuShadow") : "none")};
+  clip-path: inset(0px -100px -100px -100px);
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: auto;
+  left: 0;
+  margin-top: -6px;
+  border-radius: 0 0 4px 4px;
+  padding: ${(props) => (props.$hasResults ? "8px 0" : "0")};
+  max-height: 240px;
+  ${hideScrollbars()}
+
+  @media (hover: none) and (pointer: coarse) {
+    position: fixed;
+    top: auto;
+    bottom: 40px;
+    border-radius: 0;
+    max-height: 50vh;
+    padding: 8px 8px 4px;
+  }
+`;
+
 export default LinkEditor;

app/editor/components/LinkSearchResult.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import styled, { css } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
+
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+  icon: React.ReactNode;
+  selected: boolean;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  containerRef: React.RefObject<HTMLDivElement>;
+};
+
+function LinkSearchResult({
+  title,
+  subtitle,
+  containerRef,
+  selected,
+  icon,
+  ...rest
+}: Props) {
+  const ref = React.useCallback(
+    (node: HTMLElement | null) => {
+      if (selected && node) {
+        scrollIntoView(node, {
+          scrollMode: "if-needed",
+          block: "center",
+          boundary: (parent) =>
+            // Prevents body and other parent elements from being scrolled
+            parent !== containerRef.current,
+        });
+      }
+    },
+    [containerRef, selected]
+  );
+
+  return (
+    <ListItem
+      ref={ref}
+      compact={!subtitle}
+      selected={selected}
+      role="menuitem"
+      {...rest}
+    >
+      <IconWrapper selected={selected}>{icon}</IconWrapper>
+      <Content>
+        <Title title={title}>{title}</Title>
+        {subtitle ? <Subtitle selected={selected}>{subtitle}</Subtitle> : null}
+      </Content>
+    </ListItem>
+  );
+}
+
+const Content = styled.div`
+  overflow: hidden;
+`;
+
+const IconWrapper = styled.span<{ selected: boolean }>`
+  flex-shrink: 0;
+  margin-right: 4px;
+  height: 24px;
+  opacity: 0.8;
+
+  ${(props) =>
+    props.selected &&
+    css`
+      svg {
+        fill: ${s("accentText")};
+        color: ${s("accentText")};
+      }
+    `};
+`;
+
+const ListItem = styled.div<{
+  selected: boolean;
+  compact: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: 4px;
+  margin: 0 6px;
+  color: ${(props) => (props.selected ? s("accentText") : s("textSecondary"))};
+  background: ${(props) => (props.selected ? s("accent") : "transparent")};
+  font-family: ${s("fontFamily")};
+  text-decoration: none;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: var(--pointer);
+  user-select: none;
+  line-height: ${(props) => (props.compact ? "inherit" : "1.2")};
+  height: ${(props) => (props.compact ? "28px" : "auto")};
+`;
+
+const Title = styled.div`
+  ${ellipsis()}
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const Subtitle = styled.div<{
+  selected: boolean;
+}>`
+  ${ellipsis()}
+  font-size: 13px;
+  opacity: ${(props) => (props.selected ? 0.75 : 0.5)};
+`;
+
+export default LinkSearchResult;

app/editor/components/LinkToolbar.tsx

@@ -0,0 +1,146 @@
+import { EditorView } from "prosemirror-view";
+import * as React from "react";
+import createAndInsertLink from "@shared/editor/commands/createAndInsertLink";
+import { creatingUrlPrefix } from "@shared/utils/urls";
+import useDictionary from "~/hooks/useDictionary";
+import useEventListener from "~/hooks/useEventListener";
+import { useEditor } from "./EditorContext";
+import FloatingToolbar from "./FloatingToolbar";
+import LinkEditor, { SearchResult } from "./LinkEditor";
+
+type Props = {
+  isActive: boolean;
+  onCreateLink?: (title: string) => Promise<string>;
+  onSearchLink?: (term: string) => Promise<SearchResult[]>;
+  onClickLink: (
+    href: string,
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => void;
+  onClose: () => void;
+};
+
+function isActive(view: EditorView, active: boolean): boolean {
+  try {
+    const { selection } = view.state;
+    const paragraph = view.domAtPos(selection.from);
+    return active && !!paragraph.node;
+  } catch (err) {
+    return false;
+  }
+}
+
+export default function LinkToolbar({
+  onCreateLink,
+  onSearchLink,
+  onClickLink,
+  onClose,
+  ...rest
+}: Props) {
+  const dictionary = useDictionary();
+  const { view } = useEditor();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  useEventListener("mousedown", (event: Event) => {
+    if (
+      event.target instanceof HTMLElement &&
+      menuRef.current &&
+      menuRef.current.contains(event.target)
+    ) {
+      return;
+    }
+    onClose();
+  });
+
+  const handleOnCreateLink = React.useCallback(
+    async (title: string, nested?: boolean) => {
+      onClose();
+      view.focus();
+
+      if (!onCreateLink) {
+        return;
+      }
+
+      const { dispatch, state } = view;
+      const { from, to } = state.selection;
+      if (from !== to) {
+        // selection must be collapsed
+        return;
+      }
+
+      const href = `${creatingUrlPrefix}#${title}…`;
+
+      // Insert a placeholder link
+      dispatch(
+        view.state.tr
+          .insertText(title, from, to)
+          .addMark(
+            from,
+            to + title.length,
+            state.schema.marks.link.create({ href })
+          )
+      );
+
+      return createAndInsertLink(view, title, href, {
+        nested,
+        onCreateLink,
+        dictionary,
+      });
+    },
+    [onCreateLink, onClose, view, dictionary]
+  );
+
+  const handleOnSelectLink = React.useCallback(
+    ({
+      href,
+      title,
+    }: {
+      href: string;
+      title: string;
+      from: number;
+      to: number;
+    }) => {
+      onClose();
+      view.focus();
+
+      const { dispatch, state } = view;
+      const { from, to } = state.selection;
+      if (from !== to) {
+        // selection must be collapsed
+        return;
+      }
+
+      dispatch(
+        view.state.tr
+          .insertText(title, from, to)
+          .addMark(
+            from,
+            to + title.length,
+            state.schema.marks.link.create({ href })
+          )
+      );
+    },
+    [onClose, view]
+  );
+
+  const { selection } = view.state;
+  const active = isActive(view, rest.isActive);
+
+  return (
+    <FloatingToolbar ref={menuRef} active={active} width={336}>
+      {active && (
+        <LinkEditor
+          key={`${selection.from}-${selection.to}`}
+          from={selection.from}
+          to={selection.to}
+          onCreateLink={onCreateLink ? handleOnCreateLink : undefined}
+          onSelectLink={handleOnSelectLink}
+          onRemoveLink={onClose}
+          onClickLink={onClickLink}
+          onSearchLink={onSearchLink}
+          dictionary={dictionary}
+          view={view}
+        />
+      )}
+    </FloatingToolbar>
+  );
+}

app/editor/components/MentionMenu.tsx

@@ -1,20 +1,15 @@
-import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
-import { DocumentIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { toast } from "sonner";
 import { v4 } from "uuid";
-import Icon from "@shared/components/Icon";
 import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import Document from "~/models/Document";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import { DocumentsSection, UserSection } from "~/actions/sections";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
@@ -24,6 +19,9 @@ import SuggestionsMenu, {
 import SuggestionsMenuItem from "./SuggestionsMenuItem";
 
 interface MentionItem extends MenuItem {
+  name: string;
+  user: User;
+  appendSpace: boolean;
   attrs: {
     id: string;
     type: MentionType;
@@ -35,31 +33,24 @@ interface MentionItem extends MenuItem {
 
 type Props = Omit<
   SuggestionsMenuProps<MentionItem>,
-  "renderMenuItem" | "items" | "embeds"
+  "renderMenuItem" | "items" | "embeds" | "trigger"
 >;
 
 function MentionMenu({ search, isActive, ...rest }: Props) {
   const [loaded, setLoaded] = React.useState(false);
   const [items, setItems] = React.useState<MentionItem[]>([]);
   const { t } = useTranslation();
-  const { auth, documents, users } = useStores();
-  const actorId = auth.currentUserId;
+  const { auth, users } = useStores();
   const location = useLocation();
   const documentId = parseDocumentSlug(location.pathname);
-  const maxResultsInSection = search ? 25 : 5;
-
-  const { loading, request } = useRequest<{
-    documents: Document[];
-    users: User[];
-  }>(
-    React.useCallback(async () => {
-      const res = await client.post("/suggestions.mention", { query: search });
-
-      return {
-        documents: res.data.documents.map(documents.add),
-        users: res.data.users.map(users.add),
-      };
-    }, [search, documents, users])
+  const { data, loading, request } = useRequest(
+    React.useCallback(
+      () =>
+        documentId
+          ? users.fetchPage({ id: documentId, query: search })
+          : Promise.resolve([]),
+      [users, documentId, search]
+    )
   );
 
   React.useEffect(() => {
@@ -69,97 +60,28 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
   }, [request, isActive]);
 
   React.useEffect(() => {
-    if (actorId && !loading) {
-      const items = users
-        .findByQuery(search, { maxResults: maxResultsInSection })
-        .map(
-          (user) =>
-            ({
-              name: "mention",
-              icon: (
-                <Flex
-                  align="center"
-                  justify="center"
-                  style={{ width: 24, height: 24 }}
-                >
-                  <Avatar
-                    model={user}
-                    alt={t("Profile picture")}
-                    size={AvatarSize.Small}
-                  />
-                </Flex>
-              ),
-              title: user.name,
-              section: UserSection,
-              appendSpace: true,
-              attrs: {
-                id: v4(),
-                type: MentionType.User,
-                modelId: user.id,
-                actorId,
-                label: user.name,
-              },
-            } as MentionItem)
-        )
-        .concat(
-          documents
-            .findByQuery(search, { maxResults: maxResultsInSection })
-            .map(
-              (doc) =>
-                ({
-                  name: "mention",
-                  icon: doc.icon ? (
-                    <Icon value={doc.icon} color={doc.color ?? undefined} />
-                  ) : (
-                    <DocumentIcon />
-                  ),
-                  title: doc.title,
-                  subtitle: doc.collection?.name,
-                  section: DocumentsSection,
-                  appendSpace: true,
-                  attrs: {
-                    id: v4(),
-                    type: MentionType.Document,
-                    modelId: doc.id,
-                    actorId,
-                    label: doc.title,
-                  },
-                } as MentionItem)
-            )
-        )
-        .concat([
-          {
-            name: "link",
-            icon: <PlusIcon />,
-            title: search?.trim(),
-            section: DocumentsSection,
-            subtitle: t("Create a new doc"),
-            visible: !!search && !isEmail(search),
-            priority: -1,
-            appendSpace: true,
-            attrs: {
-              id: v4(),
-              type: MentionType.Document,
-              modelId: v4(),
-              actorId,
-              label: search,
-            },
-          } as MentionItem,
-        ]);
+    if (data && !loading) {
+      const items = data.map((user) => ({
+        name: "mention",
+        user,
+        title: user.name,
+        appendSpace: true,
+        attrs: {
+          id: v4(),
+          type: MentionType.User,
+          modelId: user.id,
+          actorId: auth.currentUserId ?? undefined,
+          label: user.name,
+        },
+      }));
 
       setItems(items);
       setLoaded(true);
     }
-  }, [t, actorId, loading, search, users, documents, maxResultsInSection]);
+  }, [auth.currentUserId, loading, data]);
 
   const handleSelect = React.useCallback(
     async (item: MentionItem) => {
-      if (item.attrs.type === MentionType.Document) {
-        return;
-      }
-      if (!documentId) {
-        return;
-      }
       // Check if the mentioned user has access to the document
       const res = await client.post("/documents.users", {
         id: documentId,
@@ -196,15 +118,28 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       {...rest}
       isActive={isActive}
       filterable={false}
+      trigger="@"
       search={search}
       onSelect={handleSelect}
       renderMenuItem={(item, _index, options) => (
         <SuggestionsMenuItem
           onClick={options.onClick}
           selected={options.selected}
-          subtitle={item.subtitle}
           title={item.title}
-          icon={item.icon}
+          icon={
+            <Flex
+              align="center"
+              justify="center"
+              style={{ width: 24, height: 24 }}
+            >
+              <Avatar
+                model={item.user}
+                showBorder={false}
+                alt={t("Profile picture")}
+                size={AvatarSize.Small}
+              />
+            </Flex>
+          }
         />
       )}
       items={items}

app/editor/components/NodeViewRenderer.tsx

@@ -25,9 +25,4 @@ export class NodeViewRenderer<T extends object> {
       this.props = props;
     }
   }
-
-  @action
-  public setProp<K extends keyof T>(key: K, value: T[K]) {
-    this.props[key] = value;
-  }
 }

app/editor/components/PasteMenu.tsx

@@ -1,68 +0,0 @@
-import { LinkIcon } from "outline-icons";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { EmbedDescriptor } from "@shared/editor/embeds";
-import SuggestionsMenu, {
-  Props as SuggestionsMenuProps,
-} from "./SuggestionsMenu";
-import SuggestionsMenuItem from "./SuggestionsMenuItem";
-
-type Props = Omit<
-  SuggestionsMenuProps,
-  "renderMenuItem" | "items" | "embeds" | "trigger"
-> & {
-  pastedText: string;
-  embeds: EmbedDescriptor[];
-};
-
-const PasteMenu = ({ embeds, ...props }: Props) => {
-  const { t } = useTranslation();
-
-  const embed = React.useMemo(() => {
-    for (const e of embeds) {
-      const matches = e.matcher(props.pastedText);
-      if (matches) {
-        return e;
-      }
-    }
-    return;
-  }, [embeds, props.pastedText]);
-
-  const items = React.useMemo(
-    () => [
-      {
-        name: "noop",
-        title: t("Keep as link"),
-        icon: <LinkIcon />,
-      },
-      {
-        name: "embed",
-        title: t("Embed"),
-        icon: embed?.icon,
-        keywords: embed?.keywords,
-      },
-    ],
-    [embed, t]
-  );
-
-  return (
-    <SuggestionsMenu
-      {...props}
-      trigger=""
-      filterable={false}
-      renderMenuItem={(item, _index, options) => (
-        <SuggestionsMenuItem
-          onClick={() => {
-            props.onSelect?.(item);
-          }}
-          selected={options.selected}
-          title={item.title}
-          icon={item.icon}
-        />
-      )}
-      items={items}
-    />
-  );
-};
-
-export default PasteMenu;

app/editor/components/SelectionToolbar.tsx

@@ -1,6 +1,7 @@
 import some from "lodash/some";
 import { EditorState, NodeSelection, TextSelection } from "prosemirror-state";
 import * as React from "react";
+import createAndInsertLink from "@shared/editor/commands/createAndInsertLink";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { getMarkRange } from "@shared/editor/queries/getMarkRange";
 import { isInCode } from "@shared/editor/queries/isInCode";
@@ -8,6 +9,7 @@ import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { getColumnIndex, getRowIndex } from "@shared/editor/queries/table";
 import { MenuItem } from "@shared/editor/types";
+import { creatingUrlPrefix } from "@shared/utils/urls";
 import useBoolean from "~/hooks/useBoolean";
 import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
@@ -24,7 +26,7 @@ import getTableColMenuItems from "../menus/tableCol";
 import getTableRowMenuItems from "../menus/tableRow";
 import { useEditor } from "./EditorContext";
 import FloatingToolbar from "./FloatingToolbar";
-import LinkEditor from "./LinkEditor";
+import LinkEditor, { SearchResult } from "./LinkEditor";
 import ToolbarMenu from "./ToolbarMenu";
 
 type Props = {
@@ -35,10 +37,12 @@ type Props = {
   canUpdate?: boolean;
   onOpen: () => void;
   onClose: () => void;
+  onSearchLink?: (term: string) => Promise<SearchResult[]>;
   onClickLink: (
     href: string,
     event: MouseEvent | React.MouseEvent<HTMLButtonElement>
   ) => void;
+  onCreateLink?: (title: string) => Promise<string>;
 };
 
 function useIsActive(state: EditorState) {
@@ -145,6 +149,40 @@ export default function SelectionToolbar(props: Props) {
     };
   }, [isActive, previousIsActive, readOnly, view]);
 
+  const handleOnCreateLink = async (
+    title: string,
+    nested?: boolean
+  ): Promise<void> => {
+    const { onCreateLink } = props;
+
+    if (!onCreateLink) {
+      return;
+    }
+
+    const { dispatch, state } = view;
+    const { from, to } = state.selection;
+    if (from === to) {
+      // Do not display a selection toolbar for collapsed selections
+      return;
+    }
+
+    const href = `${creatingUrlPrefix}${title}…`;
+    const markType = state.schema.marks.link;
+
+    // Insert a placeholder link
+    dispatch(
+      view.state.tr
+        .removeMark(from, to, markType)
+        .addMark(from, to, markType.create({ href }))
+    );
+
+    return createAndInsertLink(view, title, href, {
+      nested,
+      onCreateLink,
+      dictionary,
+    });
+  };
+
   const handleOnSelectLink = ({
     href,
     from,
@@ -165,7 +203,8 @@ export default function SelectionToolbar(props: Props) {
     );
   };
 
-  const { isTemplate, rtl, canComment, canUpdate, ...rest } = props;
+  const { onCreateLink, isTemplate, rtl, canComment, canUpdate, ...rest } =
+    props;
   const { state } = view;
   const { selection } = state;
   const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
@@ -244,6 +283,8 @@ export default function SelectionToolbar(props: Props) {
           from={link.from}
           to={link.to}
           onClickLink={props.onClickLink}
+          onSearchLink={props.onSearchLink}
+          onCreateLink={onCreateLink ? handleOnCreateLink : undefined}
           onSelectLink={handleOnSelectLink}
         />
       ) : (

app/editor/components/SuggestionsMenu.tsx

@@ -1,8 +1,7 @@
 import commandScore from "command-score";
 import capitalize from "lodash/capitalize";
-import orderBy from "lodash/orderBy";
 import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { toast } from "sonner";
 import styled from "styled-components";
@@ -14,7 +13,6 @@ import { MenuItem } from "@shared/editor/types";
 import { depths, s } from "@shared/styles";
 import { getEventFiles } from "@shared/utils/files";
 import { AttachmentValidation } from "@shared/validations";
-import Header from "~/components/ContextMenu/Header";
 import { Portal } from "~/components/Portal";
 import Scrollable from "~/components/Scrollable";
 import useDictionary from "~/hooks/useDictionary";
@@ -80,9 +78,8 @@ export type Props<T extends MenuItem = MenuItem> = {
 };
 
 function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
-  const { view, commands, props: editorProps } = useEditor();
+  const { view, commands } = useEditor();
   const dictionary = useDictionary();
-  const { t } = useTranslation();
   const hasActivated = React.useRef(false);
   const pointerRef = React.useRef<{ clientX: number; clientY: number }>({
     clientX: 0,
@@ -233,9 +230,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
       const attrs =
         typeof item.attrs === "function" ? item.attrs(view.state) : item.attrs;
 
-      if (item.name === "noop") {
-        // Do nothing
-      } else if (command) {
+      if (command) {
         command(attrs);
       } else {
         commands[`create${capitalize(item.name)}`](attrs);
@@ -255,16 +250,6 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
       props.onSelect?.(item);
 
       switch (item.name) {
-        case "link":
-          insertNode({
-            ...item,
-            name: "mention",
-          });
-          void editorProps.onCreateLink?.({
-            title: item.attrs.label,
-            id: item.attrs.modelId,
-          });
-          return;
         case "image":
           return triggerFilePick(
             AttachmentValidation.imageContentTypes.join(", ")
@@ -279,7 +264,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
           insertNode(item);
       }
     },
-    [editorProps, props, insertNode]
+    [insertNode]
   );
 
   const close = React.useCallback(() => {
@@ -429,16 +414,11 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
         return true;
       }
 
-      if (item.visible === false) {
-        return false;
-      }
-
       // Some extensions may be disabled, remove corresponding menu items
       if (
         item.name &&
         !commands[item.name] &&
-        !commands[`create${capitalize(item.name)}`] &&
-        item.name !== "noop"
+        !commands[`create${capitalize(item.name)}`]
       ) {
         return false;
       }
@@ -465,22 +445,16 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
     });
 
     return filterExcessSeparators(
-      orderBy(
-        filtered.map((item) => ({
+      filtered
+        .map((item) => ({
           item,
-          section:
-            "section" in item && item.section && "priority" in item.section
-              ? (item.section.priority as number) ?? 0
-              : 0,
-          priority: "priority" in item ? item.priority : 0,
           score:
             searchInput && item.title
               ? commandScore(item.title, searchInput)
               : 0,
-        })),
-        ["section", "priority", "score"],
-        ["desc", "desc", "desc"]
-      ).map(({ item }) => item)
+        }))
+        .sort((a, b) => b.score - a.score)
+        .map(({ item }) => item)
     );
   }, [commands, props]);
 
@@ -581,7 +555,6 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
 
   const { isActive, uploadFile } = props;
   const items = filtered;
-  let previousHeading: string | undefined;
 
   return (
     <Portal>
@@ -641,29 +614,18 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                     }
                   };
 
-                  const currentHeading =
-                    "section" in item ? item.section?.({ t }) : undefined;
-
-                  const response = (
-                    <>
-                      {currentHeading !== previousHeading && (
-                        <Header key={currentHeading}>{currentHeading}</Header>
-                      )}
-                      <ListItem
-                        key={index}
-                        onPointerMove={handlePointerMove}
-                        onPointerDown={handlePointerDown}
-                      >
-                        {props.renderMenuItem(item as any, index, {
-                          selected: index === selectedIndex,
-                          onClick: () => handleClickItem(item),
-                        })}
-                      </ListItem>
-                    </>
+                  return (
+                    <ListItem
+                      key={index}
+                      onPointerMove={handlePointerMove}
+                      onPointerDown={handlePointerDown}
+                    >
+                      {props.renderMenuItem(item as any, index, {
+                        selected: index === selectedIndex,
+                        onClick: () => handleClickItem(item),
+                      })}
+                    </ListItem>
                   );
-
-                  previousHeading = currentHeading;
-                  return response;
                 })}
                 {items.length === 0 && (
                   <ListItem>

app/editor/components/SuggestionsMenuItem.tsx

@@ -12,7 +12,7 @@ export type Props = {
   /** Callback when the item is clicked */
   onClick: (event: React.SyntheticEvent) => void;
   /** An optional icon for the item */
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
   /** The title of the item */
   title: React.ReactNode;
   /** An optional subtitle for the item */
@@ -56,7 +56,7 @@ function SuggestionsMenuItem({
       icon={icon}
     >
       {title}
-      {subtitle && <Subtitle $active={selected}>&middot; {subtitle}</Subtitle>}
+      {subtitle && <Subtitle $active={selected}>{subtitle}</Subtitle>}
       {shortcut && <Shortcut $active={selected}>{shortcut}</Shortcut>}
     </MenuItem>
   );

app/editor/extensions/BlockMenu.tsx

@@ -12,10 +12,9 @@ import BlockMenu from "../components/BlockMenu";
 export default class BlockMenuExtension extends Suggestion {
   get defaultOptions() {
     return {
-      trigger: "/",
-      allowSpaces: false,
-      requireSearchTerm: false,
-      enabledInCode: false,
+      // ported from https://github.com/tc39/proposal-regexp-unicode-property-escapes#unicode-aware-version-of-w
+      openRegex: /(?:^|\s|\()\/([\p{L}\p{M}\d]+)?$/u,
+      closeRegex: /(?:^|\s|\()\/(([\p{L}\p{M}\d]*\s+)|(\s+[\p{L}\p{M}\d]+))$/u,
     };
   }
 
@@ -99,28 +98,22 @@ export default class BlockMenuExtension extends Suggestion {
     ];
   }
 
-  private handleClose = action((insertNewLine: boolean) => {
-    const { view } = this.editor;
-
-    if (insertNewLine) {
-      const transaction = view.state.tr.split(view.state.selection.to);
-      view.dispatch(transaction);
-      view.focus();
-    }
-
-    this.state.open = false;
-  });
-
   widget = ({ rtl }: WidgetProps) => {
-    const { props } = this.editor;
-
+    const { props, view } = this.editor;
     return (
       <BlockMenu
         rtl={rtl}
-        trigger={this.options.trigger}
         isActive={this.state.open}
         search={this.state.query}
-        onClose={this.handleClose}
+        onClose={action((insertNewLine) => {
+          if (insertNewLine) {
+            const transaction = view.state.tr.split(view.state.selection.to);
+            view.dispatch(transaction);
+            view.focus();
+          }
+
+          this.state.open = false;
+        })}
         uploadFile={props.uploadFile}
         onFileUploadStart={props.onFileUploadStart}
         onFileUploadStop={props.onFileUploadStop}

app/editor/extensions/ClipboardTextSerializer.ts

@@ -1,9 +1,11 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import Extension from "@shared/editor/lib/Extension";
+import textBetween from "@shared/editor/lib/textBetween";
 
 /**
  * A plugin that allows overriding the default behavior of the editor to allow
- * copying text including the markdown formatting.
+ * copying text for nodes that do not inherently have text children by defining
+ * a `toPlainText` method in the node spec.
  */
 export default class ClipboardTextSerializer extends Extension {
   get name() {
@@ -11,16 +13,24 @@ export default class ClipboardTextSerializer extends Extension {
   }
 
   get plugins() {
-    const serializer = this.editor.extensions.serializer();
+    const textSerializers = Object.fromEntries(
+      Object.entries(this.editor.schema.nodes)
+        .filter(([, node]) => node.spec.toPlainText)
+        .map(([name, node]) => [name, node.spec.toPlainText])
+    );
 
     return [
       new Plugin({
         key: new PluginKey("clipboardTextSerializer"),
         props: {
-          clipboardTextSerializer: (slice) =>
-            serializer.serialize(slice.content, {
-              softBreak: true,
-            }),
+          clipboardTextSerializer: () => {
+            const { doc, selection } = this.editor.view.state;
+            const { ranges } = selection;
+            const from = Math.min(...ranges.map((range) => range.$from.pos));
+            const to = Math.max(...ranges.map((range) => range.$to.pos));
+
+            return textBetween(doc, from, to, textSerializers);
+          },
         },
       }),
     ];

app/editor/extensions/EmojiMenu.tsx

@@ -1,7 +1,6 @@
 import { action } from "mobx";
 import * as React from "react";
 import { WidgetProps } from "@shared/editor/lib/Extension";
-import { isBrowser } from "@shared/utils/browser";
 import Suggestion from "~/editor/extensions/Suggestion";
 import EmojiMenu from "../components/EmojiMenu";
 
@@ -14,15 +13,17 @@ const languagesUsingColon = ["fr"];
 
 export default class EmojiMenuExtension extends Suggestion {
   get defaultOptions() {
-    const languageIsUsingColon = isBrowser
-      ? languagesUsingColon.includes(window.navigator.language.slice(0, 2))
-      : false;
+    const languageIsUsingColon =
+      typeof window === "undefined"
+        ? false
+        : languagesUsingColon.includes(window.navigator.language.slice(0, 2));
 
     return {
-      trigger: ":",
-      allowSpaces: false,
-      requireSearchTerm: languageIsUsingColon,
-      enabledInCode: false,
+      openRegex: new RegExp(
+        `(?:^|\\s|\\():([0-9a-zA-Z_+-]+)${languageIsUsingColon ? "" : "?"}$`
+      ),
+      closeRegex:
+        /(?:^|\s|\():(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/,
     };
   }
 
@@ -33,7 +34,6 @@ export default class EmojiMenuExtension extends Suggestion {
   widget = ({ rtl }: WidgetProps) => (
     <EmojiMenu
       rtl={rtl}
-      trigger={this.options.trigger}
       isActive={this.state.open}
       search={this.state.query}
       onClose={action(() => {

app/editor/extensions/FindAndReplace.tsx

@@ -79,17 +79,15 @@ export default class FindAndReplaceExtension extends Extension {
   }
 
   private get decorations() {
-    return this.results.map((deco, index) => {
-      const decorationType =
-        deco.type === "node" ? Decoration.node : Decoration.inline;
-      return decorationType(deco.from, deco.to, {
+    return this.results.map((deco, index) =>
+      Decoration.inline(deco.from, deco.to, {
         class:
           this.options.resultClassName +
           (this.currentResultIndex === index
             ? ` ${this.options.resultCurrentClassName}`
             : ""),
-      });
-    });
+      })
+    );
   }
 
   public replace(replace: string): Command {
@@ -177,7 +175,7 @@ export default class FindAndReplaceExtension extends Extension {
   private goToMatch(direction: number): Command {
     return (state, dispatch) => {
       if (direction > 0) {
-        if (this.currentResultIndex >= this.results.length - 1) {
+        if (this.currentResultIndex === this.results.length - 1) {
           this.currentResultIndex = 0;
         } else {
           this.currentResultIndex += 1;
@@ -214,12 +212,11 @@ export default class FindAndReplaceExtension extends Extension {
 
     const { from: currentFrom, to: currentTo } = this.results[index];
     const offset = currentTo - currentFrom - replace.length + lastOffset;
-    const { from, to, type } = this.results[nextIndex];
+    const { from, to } = this.results[nextIndex];
 
     this.results[nextIndex] = {
       to: to - offset,
       from: from - offset,
-      type,
     };
 
     return offset;
@@ -227,19 +224,10 @@ export default class FindAndReplaceExtension extends Extension {
 
   private search(doc: Node) {
     this.results = [];
-    const mergedTextNodes: (
-      | {
-          text: string | undefined;
-          pos: number;
-          type: "inline";
-        }
-      | {
-          text: string | undefined;
-          pos: number;
-          type: "node";
-          nodeSize: number;
-        }
-    )[] = [];
+    const mergedTextNodes: {
+      text: string | undefined;
+      pos: number;
+    }[] = [];
     let index = 0;
 
     if (!this.searchTerm) {
@@ -250,32 +238,21 @@ export default class FindAndReplaceExtension extends Extension {
       if (node.isText) {
         if (mergedTextNodes[index]) {
           mergedTextNodes[index] = {
-            type: "inline",
             text: mergedTextNodes[index].text + (node.text ?? ""),
             pos: mergedTextNodes[index].pos,
           };
         } else {
           mergedTextNodes[index] = {
-            type: "inline",
             text: node.text,
             pos,
           };
         }
-      } else if (node.type.name === "mention") {
-        mergedTextNodes[++index] = {
-          type: "node",
-          nodeSize: node.nodeSize,
-          text: node.attrs.label,
-          pos,
-        };
-        ++index;
       } else {
-        ++index;
+        index += 1;
       }
     });
 
-    mergedTextNodes.forEach((node) => {
-      const { text = "", pos, type } = node;
+    mergedTextNodes.forEach(({ text = "", pos }) => {
       try {
         let m;
         const search = this.findRegExp;
@@ -289,8 +266,8 @@ export default class FindAndReplaceExtension extends Extension {
 
           // Reconstruct the correct match position
           const i = m.index >= text.length ? m.index - text.length : m.index;
-          const from = type === "inline" ? pos + i : pos;
-          const to = from + (type === "inline" ? m[0].length : node.nodeSize);
+          const from = pos + i;
+          const to = from + m[0].length;
 
           // Check if already exists in results, possible due to duplicated
           // search string on L257
@@ -298,7 +275,7 @@ export default class FindAndReplaceExtension extends Extension {
             continue;
           }
 
-          this.results.push({ from, to, type });
+          this.results.push({ from, to });
         }
       } catch (e) {
         // Invalid RegExp
@@ -372,7 +349,7 @@ export default class FindAndReplaceExtension extends Extension {
   private open = false;
 
   @observable
-  private results: { from: number; to: number; type: "inline" | "node" }[] = [];
+  private results: { from: number; to: number }[] = [];
 
   @observable
   private currentResultIndex = 0;

app/editor/extensions/MentionMenu.tsx

@@ -7,10 +7,9 @@ import MentionMenu from "../components/MentionMenu";
 export default class MentionMenuExtension extends Suggestion {
   get defaultOptions() {
     return {
-      trigger: "@",
-      allowSpaces: true,
-      requireSearchTerm: false,
-      enabledInCode: false,
+      // ported from https://github.com/tc39/proposal-regexp-unicode-property-escapes#unicode-aware-version-of-w
+      openRegex: /(?:^|\s|\()@([\p{L}\p{M}\d\s{1}@\.]+)?$/u,
+      closeRegex: /(?:^|\s|\()@(([\p{L}\p{M}\d]*\s{2})|(\s+[\p{L}\p{M}\d]+))$/u,
     };
   }
 
@@ -21,7 +20,6 @@ export default class MentionMenuExtension extends Suggestion {
   widget = ({ rtl }: WidgetProps) => (
     <MentionMenu
       rtl={rtl}
-      trigger={this.options.trigger}
       isActive={this.state.open}
       search={this.state.query}
       onClose={action(() => {

app/editor/extensions/Multiplayer.ts

@@ -1,5 +1,4 @@
 import isEqual from "lodash/isEqual";
-import { Plugin } from "prosemirror-state";
 import {
   ySyncPlugin,
   yCursorPlugin,
@@ -9,7 +8,6 @@ import {
 } from "y-prosemirror";
 import * as Y from "yjs";
 import Extension from "@shared/editor/lib/Extension";
-import { isRemoteTransaction } from "@shared/editor/lib/multiplayer";
 import { Second } from "@shared/utils/time";
 
 type UserAwareness = {
@@ -105,11 +103,6 @@ export default class Multiplayer extends Extension {
         selectionBuilder,
       }),
       yUndoPlugin(),
-      new Plugin({
-        props: {
-          handleScrollToSelection: (view) => isRemoteTransaction(view.state.tr),
-        },
-      }),
     ];
   }
 

app/editor/extensions/PasteHandler.ts

@@ -1,29 +1,17 @@
-import { action, observable } from "mobx";
 import { toggleMark } from "prosemirror-commands";
 import { Slice } from "prosemirror-model";
-import {
-  EditorState,
-  Plugin,
-  PluginKey,
-  TextSelection,
-} from "prosemirror-state";
-import { Decoration, DecorationSet } from "prosemirror-view";
-import * as React from "react";
-import { v4 } from "uuid";
+import { Plugin } from "prosemirror-state";
 import { LANGUAGES } from "@shared/editor/extensions/Prism";
-import Extension, { WidgetProps } from "@shared/editor/lib/Extension";
+import Extension from "@shared/editor/lib/Extension";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
-import { isRemoteTransaction } from "@shared/editor/lib/multiplayer";
-import { recreateTransform } from "@shared/editor/lib/prosemirror-recreate-transform";
 import { isInCode } from "@shared/editor/queries/isInCode";
-import { MenuItem } from "@shared/editor/types";
-import { IconType, MentionType } from "@shared/types";
+import { isInList } from "@shared/editor/queries/isInList";
+import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isDocumentUrl, isUrl } from "@shared/utils/urls";
 import stores from "~/stores";
-import PasteMenu from "../components/PasteMenu";
 
 /**
  * Checks if the HTML string is likely coming from Dropbox Paper.
@@ -72,26 +60,13 @@ function parseSingleIframeSrc(html: string) {
 }
 
 export default class PasteHandler extends Extension {
-  state: {
-    open: boolean;
-    query: string;
-    pastedText: string;
-  } = observable({
-    open: false,
-    query: "",
-    pastedText: "",
-  });
-
   get name() {
     return "paste-handler";
   }
 
-  private key = new PluginKey(this.name);
-
   get plugins() {
     return [
       new Plugin({
-        key: this.key,
         props: {
           transformPastedHTML(html: string) {
             if (isDropboxPaper(html)) {
@@ -131,6 +106,23 @@ export default class PasteHandler extends Extension {
             const html = event.clipboardData.getData("text/html");
             const vscode = event.clipboardData.getData("vscode-editor-data");
 
+            function insertLink(href: string, title?: string) {
+              // If it's not an embed and there is no text selected – just go ahead and insert the
+              // link directly
+              const transaction = view.state.tr
+                .insertText(
+                  title ?? href,
+                  state.selection.from,
+                  state.selection.to
+                )
+                .addMark(
+                  state.selection.from,
+                  state.selection.to + (title ?? href).length,
+                  state.schema.marks.link.create({ href })
+                );
+              view.dispatch(transaction);
+            }
+
             // If the users selection is currently in a code block then paste
             // as plain text, ignore all formatting and HTML content.
             if (isInCode(state)) {
@@ -148,13 +140,6 @@ export default class PasteHandler extends Extension {
             const supportsCodeMark = !!state.schema.marks.code_inline;
 
             if (!this.shiftKey) {
-              // If the HTML on the clipboard is from Prosemirror then the best
-              // compatability is to just use the HTML parser, regardless of
-              // whether it "looks" like Markdown, see: outline/outline#2416
-              if (html?.includes("data-pm-slice")) {
-                return false;
-              }
-
               // Check if the clipboard contents can be parsed as a single url
               if (isUrl(text)) {
                 // If there is selected text then we want to wrap it in a link to the url
@@ -166,6 +151,28 @@ export default class PasteHandler extends Extension {
                   return true;
                 }
 
+                // Is this link embeddable? Create an embed!
+                const { embeds } = this.editor.props;
+                if (
+                  embeds &&
+                  this.editor.commands.embed &&
+                  !isInCode(state) &&
+                  !isInList(state)
+                ) {
+                  for (const embed of embeds) {
+                    if (!embed.matchOnInput) {
+                      continue;
+                    }
+                    const matches = embed.matcher(text);
+                    if (matches) {
+                      this.editor.commands.embed({
+                        href: text,
+                      });
+                      return true;
+                    }
+                  }
+                }
+
                 // Is the link a link to a document? If so, we can grab the title and insert it.
                 if (isDocumentUrl(text)) {
                   const slug = parseDocumentSlug(text);
@@ -178,42 +185,26 @@ export default class PasteHandler extends Extension {
                           return;
                         }
                         if (document) {
-                          if (state.schema.nodes.mention) {
-                            view.dispatch(
-                              view.state.tr.replaceWith(
-                                state.selection.from,
-                                state.selection.to,
-                                state.schema.nodes.mention.create({
-                                  type: MentionType.Document,
-                                  modelId: document.id,
-                                  label: document.titleWithDefault,
-                                  id: v4(),
-                                })
-                              )
-                            );
-                          } else {
-                            const { hash } = new URL(text);
-                            const hasEmoji =
-                              determineIconType(document.icon) ===
-                              IconType.Emoji;
+                          const { hash } = new URL(text);
 
-                            const title = `${
-                              hasEmoji ? document.icon + " " : ""
-                            }${document.titleWithDefault}`;
+                          const hasEmoji =
+                            determineIconType(document.icon) === IconType.Emoji;
 
-                            this.insertLink(`${document.path}${hash}`, title);
-                          }
+                          const title = `${
+                            hasEmoji ? document.icon + " " : ""
+                          }${document.titleWithDefault}`;
+                          insertLink(`${document.path}${hash}`, title);
                         }
                       })
                       .catch(() => {
                         if (view.isDestroyed) {
                           return;
                         }
-                        this.insertLink(text);
+                        insertLink(text);
                       });
                   }
                 } else {
-                  this.insertLink(text);
+                  insertLink(text);
                 }
 
                 return true;
@@ -256,6 +247,13 @@ export default class PasteHandler extends Extension {
                   return true;
                 }
               }
+
+              // If the HTML on the clipboard is from Prosemirror then the best
+              // compatability is to just use the HTML parser, regardless of
+              // whether it "looks" like Markdown, see: outline/outline#2416
+              if (html?.includes("data-pm-slice")) {
+                return false;
+              }
             }
 
             // If the text on the clipboard looks like Markdown OR there is no
@@ -308,170 +306,10 @@ export default class PasteHandler extends Extension {
             return false;
           },
         },
-        state: {
-          init: () => DecorationSet.empty,
-          apply: (tr, set) => {
-            let mapping = tr.mapping;
-
-            // See if the transaction adds or removes any placeholders
-            const meta = tr.getMeta(this.key);
-            const hasDecorations = set.find().length;
-
-            // We only want a single paste placeholder at a time, so if we're adding a new
-            // placeholder we can just return a new DecorationSet and avoid mapping logic.
-            if (meta?.add) {
-              const { from, to, id } = meta.add;
-              const decorations = [
-                Decoration.inline(
-                  from,
-                  to,
-                  {
-                    class: "paste-placeholder",
-                  },
-                  {
-                    id,
-                  }
-                ),
-              ];
-              return DecorationSet.create(tr.doc, decorations);
-            }
-
-            if (hasDecorations && (isRemoteTransaction(tr) || meta)) {
-              try {
-                mapping = recreateTransform(tr.before, tr.doc, {
-                  complexSteps: true,
-                  wordDiffs: false,
-                  simplifyDiff: true,
-                }).mapping;
-              } catch (err) {
-                // eslint-disable-next-line no-console
-                console.warn("Failed to recreate transform: ", err);
-              }
-            }
-
-            set = set.map(mapping, tr.doc);
-
-            if (meta?.remove) {
-              const { id } = meta.remove;
-              const decorations = set.find(
-                undefined,
-                undefined,
-                (spec) => spec.id === id
-              );
-              return set.remove(decorations);
-            }
-
-            return set;
-          },
-        },
       }),
     ];
   }
 
+  /** Tracks whether the Shift key is currently held down */
   private shiftKey = false;
-
-  private showPasteMenu = action((text: string) => {
-    this.state.pastedText = text;
-    this.state.open = true;
-  });
-
-  private hidePasteMenu = action(() => {
-    this.state.open = false;
-  });
-
-  private insertLink(href: string, title?: string) {
-    const { view } = this.editor;
-    const { state } = view;
-    const { from } = state.selection;
-    const to = from + (title ?? href).length;
-
-    const transaction = view.state.tr
-      .insertText(title ?? href, state.selection.from, state.selection.to)
-      .addMark(from, to, state.schema.marks.link.create({ href }))
-      .setMeta(this.key, { add: { from, to, id: href } });
-    view.dispatch(transaction);
-    this.showPasteMenu(href);
-  }
-
-  private insertEmbed = () => {
-    const { view } = this.editor;
-    const { state } = view;
-    const result = this.findPlaceholder(state, this.state.pastedText);
-
-    if (result) {
-      const tr = state.tr.deleteRange(result[0], result[1]);
-      view.dispatch(
-        tr.setSelection(TextSelection.near(tr.doc.resolve(result[0])))
-      );
-    }
-
-    this.editor.commands.embed({
-      href: this.state.pastedText,
-    });
-  };
-
-  private removePlaceholder = () => {
-    const { view } = this.editor;
-    const { state } = view;
-    const result = this.findPlaceholder(state, this.state.pastedText);
-
-    if (result) {
-      view.dispatch(
-        state.tr.setMeta(this.key, {
-          remove: { id: this.state.pastedText },
-        })
-      );
-    }
-  };
-
-  private findPlaceholder = (
-    state: EditorState,
-    id: string
-  ): [number, number] | null => {
-    const decos = this.key.getState(state) as DecorationSet;
-    const found = decos?.find(undefined, undefined, (spec) => spec.id === id);
-    return found?.length ? [found[0].from, found[0].to] : null;
-  };
-
-  private handleSelect = (item: MenuItem) => {
-    switch (item.name) {
-      case "noop": {
-        this.hidePasteMenu();
-        this.removePlaceholder();
-        break;
-      }
-      case "embed": {
-        this.hidePasteMenu();
-        this.insertEmbed();
-        break;
-      }
-      default:
-        break;
-    }
-  };
-
-  keys() {
-    return {
-      Backspace: () => {
-        this.hidePasteMenu();
-        return false;
-      },
-      "Mod-z": () => {
-        this.hidePasteMenu();
-        return false;
-      },
-    };
-  }
-
-  widget = ({ rtl }: WidgetProps) => (
-    <PasteMenu
-      rtl={rtl}
-      embeds={this.editor.props.embeds}
-      pastedText={this.state.pastedText}
-      isActive={this.state.open}
-      search={this.state.query}
-      onClose={this.hidePasteMenu}
-      onSelect={this.handleSelect}
-    />
-  );
 }

app/editor/extensions/Suggestion.ts

@@ -1,4 +1,3 @@
-import escapeRegExp from "lodash/escapeRegExp";
 import { action, observable } from "mobx";
 import { InputRule } from "prosemirror-inputrules";
 import { NodeType, Schema } from "prosemirror-model";
@@ -7,37 +6,35 @@ import Extension from "@shared/editor/lib/Extension";
 import { SuggestionsMenuPlugin } from "@shared/editor/plugins/Suggestions";
 import { isInCode } from "@shared/editor/queries/isInCode";
 
-type Options = {
-  enabledInCode: boolean;
-  trigger: string;
-  allowSpaces: boolean;
-  requireSearchTerm: boolean;
-};
-
 export default class Suggestion extends Extension {
-  constructor(options: Options) {
-    super(options);
-
-    this.openRegex = new RegExp(
-      `(?:^|\\s|\\()${escapeRegExp(this.options.trigger)}(${`[\\p{L}\\p{M}\\d${
-        this.options.allowSpaces ? "\\s{1}" : ""
-      }\\.]+`})${this.options.requireSearchTerm ? "" : "?"}$`,
-      "u"
-    );
-  }
+  state: {
+    open: boolean;
+    query: string;
+  } = observable({
+    open: false,
+    query: "",
+  });
 
   get plugins(): Plugin[] {
-    return [
-      new SuggestionsMenuPlugin(this.options, this.state, this.openRegex),
-    ];
+    return [new SuggestionsMenuPlugin(this.options, this.state)];
   }
 
   keys() {
     return {
-      Space: action(() => {
-        if (this.state.open && !this.options.allowSpaces) {
-          this.state.open = false;
+      Backspace: action((state: EditorState) => {
+        const { $from } = state.selection;
+        const textBefore = $from.parent.textBetween(
+          Math.max(0, $from.parentOffset - 500), // 500 = max match
+          Math.max(0, $from.parentOffset - 1), // 1 = account for deleted character
+          null,
+          "\ufffc"
+        );
+
+        if (this.options.openRegex.test(textBefore)) {
+          return false;
         }
+
+        this.state.open = false;
         return false;
       }),
     };
@@ -45,7 +42,7 @@ export default class Suggestion extends Extension {
 
   inputRules = (_options: { type: NodeType; schema: Schema }) => [
     new InputRule(
-      this.openRegex,
+      this.options.openRegex,
       action((state: EditorState, match: RegExpMatchArray) => {
         const { parent } = state.selection.$from;
         if (
@@ -54,23 +51,21 @@ export default class Suggestion extends Extension {
             parent.type.name === "heading") &&
           (!isInCode(state) || this.options.enabledInCode)
         ) {
-          if (match[0].length <= 2) {
-            this.state.open = true;
-          }
+          this.state.open = true;
           this.state.query = match[1];
         }
         return null;
       })
     ),
+    new InputRule(
+      this.options.closeRegex,
+      action((_: EditorState, match: RegExpMatchArray) => {
+        if (match) {
+          this.state.open = false;
+          this.state.query = "";
+        }
+        return null;
+      })
+    ),
   ];
-
-  protected openRegex: RegExp;
-
-  protected state: {
-    open: boolean;
-    query: string;
-  } = observable({
-    open: false,
-    query: "",
-  });
 }

app/editor/extensions/index.ts

@@ -1,30 +0,0 @@
-import Extension from "@shared/editor/lib/Extension";
-import Mark from "@shared/editor/marks/Mark";
-import Node from "@shared/editor/nodes/Node";
-import BlockMenuExtension from "~/editor/extensions/BlockMenu";
-import ClipboardTextSerializer from "~/editor/extensions/ClipboardTextSerializer";
-import EmojiMenuExtension from "~/editor/extensions/EmojiMenu";
-import FindAndReplaceExtension from "~/editor/extensions/FindAndReplace";
-import HoverPreviewsExtension from "~/editor/extensions/HoverPreviews";
-import Keys from "~/editor/extensions/Keys";
-import MentionMenuExtension from "~/editor/extensions/MentionMenu";
-import PasteHandler from "~/editor/extensions/PasteHandler";
-import PreventTab from "~/editor/extensions/PreventTab";
-import SmartText from "~/editor/extensions/SmartText";
-
-type Nodes = (typeof Node | typeof Mark | typeof Extension)[];
-
-export const withUIExtensions = (nodes: Nodes) => [
-  ...nodes,
-  SmartText,
-  PasteHandler,
-  ClipboardTextSerializer,
-  BlockMenuExtension,
-  EmojiMenuExtension,
-  MentionMenuExtension,
-  FindAndReplaceExtension,
-  HoverPreviewsExtension,
-  // Order these default key handlers last
-  PreventTab,
-  Keys,
-];

app/editor/index.tsx

@@ -1,7 +1,5 @@
 /* global File Promise */
 import { PluginSimple } from "markdown-it";
-import { observable } from "mobx";
-import { Observer } from "mobx-react";
 import { darken, transparentize } from "polished";
 import { baseKeymap } from "prosemirror-commands";
 import { dropCursor } from "prosemirror-dropcursor";
@@ -35,23 +33,22 @@ import Extension, {
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
 import { MarkdownSerializer } from "@shared/editor/lib/markdown/serializer";
 import textBetween from "@shared/editor/lib/textBetween";
-import { getTextSerializers } from "@shared/editor/lib/textSerializers";
 import Mark from "@shared/editor/marks/Mark";
 import { basicExtensions as extensions } from "@shared/editor/nodes";
 import Node from "@shared/editor/nodes/Node";
 import ReactNode from "@shared/editor/nodes/ReactNode";
-import { ComponentProps } from "@shared/editor/types";
+import { ComponentProps, EventType } from "@shared/editor/types";
 import { ProsemirrorData, UserPreferences } from "@shared/types";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import EventEmitter from "@shared/utils/events";
-import Document from "~/models/Document";
 import Flex from "~/components/Flex";
 import { PortalContext } from "~/components/Portal";
 import { Dictionary } from "~/hooks/useDictionary";
-import { Properties } from "~/types";
 import Logger from "~/utils/Logger";
 import ComponentView from "./components/ComponentView";
 import EditorContext from "./components/EditorContext";
+import { SearchResult } from "./components/LinkEditor";
+import LinkToolbar from "./components/LinkToolbar";
 import { NodeViewRenderer } from "./components/NodeViewRenderer";
 import SelectionToolbar from "./components/SelectionToolbar";
 import WithTheme from "./components/WithTheme";
@@ -118,11 +115,13 @@ export type Props = {
   /** Callback when a file upload ends */
   onFileUploadStop?: () => void;
   /** Callback when a link is created, should return url to created document */
-  onCreateLink?: (params: Properties<Document>) => Promise<string>;
+  onCreateLink?: (title: string) => Promise<string>;
+  /** Callback when user searches for documents from link insert interface */
+  onSearchLink?: (term: string) => Promise<SearchResult[]>;
   /** Callback when user clicks on any link in the document */
   onClickLink: (
     href: string,
-    event?: MouseEvent | React.MouseEvent<HTMLButtonElement>
+    event: MouseEvent | React.MouseEvent<HTMLButtonElement>
   ) => void;
   /** Callback when user presses any key with document focused */
   onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
@@ -146,6 +145,8 @@ type State = {
   isEditorFocused: boolean;
   /** If the toolbar for a text selection is visible */
   selectionToolbarOpen: boolean;
+  /** If the insert link toolbar is visible */
+  linkToolbarOpen: boolean;
 };
 
 /**
@@ -175,6 +176,7 @@ export class Editor extends React.PureComponent<
     isRTL: false,
     isEditorFocused: false,
     selectionToolbarOpen: false,
+    linkToolbarOpen: false,
   };
 
   isInitialized = false;
@@ -195,7 +197,7 @@ export class Editor extends React.PureComponent<
   };
 
   widgets: { [name: string]: (props: WidgetProps) => React.ReactElement };
-  renderers: Set<NodeViewRenderer<ComponentProps>> = observable.set();
+  renderers: Set<NodeViewRenderer<ComponentProps>> = new Set();
   nodes: { [name: string]: NodeSpec };
   marks: { [name: string]: MarkSpec };
   commands: Record<string, CommandFactory>;
@@ -203,6 +205,11 @@ export class Editor extends React.PureComponent<
   events = new EventEmitter();
   mutationObserver?: MutationObserver;
 
+  public constructor(props: Props & ThemeProps<DefaultTheme>) {
+    super(props);
+    this.events.on(EventType.LinkToolbarOpen, this.handleOpenLinkToolbar);
+  }
+
   /**
    * We use componentDidMount instead of constructor as the init method requires
    * that the dom is already mounted.
@@ -239,12 +246,6 @@ export class Editor extends React.PureComponent<
         ...this.view.props,
         editable: () => !this.props.readOnly,
       });
-
-      // NodeView will not automatically render when editable changes so we must trigger an update
-      // manually, see: https://discuss.prosemirror.net/t/re-render-custom-nodeview-when-view-editable-changes/6441
-      Array.from(this.renderers).forEach((view) =>
-        view.setProp("isEditable", !this.props.readOnly)
-      );
     }
 
     if (this.props.scrollTo && this.props.scrollTo !== prevProps.scrollTo) {
@@ -264,6 +265,7 @@ export class Editor extends React.PureComponent<
     if (
       !this.isBlurred &&
       !this.state.isEditorFocused &&
+      !this.state.linkToolbarOpen &&
       !this.state.selectionToolbarOpen
     ) {
       this.isBlurred = true;
@@ -272,7 +274,9 @@ export class Editor extends React.PureComponent<
 
     if (
       this.isBlurred &&
-      (this.state.isEditorFocused || this.state.selectionToolbarOpen)
+      (this.state.isEditorFocused ||
+        this.state.linkToolbarOpen ||
+        this.state.selectionToolbarOpen)
     ) {
       this.isBlurred = false;
       this.props.onFocus?.();
@@ -709,7 +713,11 @@ export class Editor extends React.PureComponent<
    */
   public getPlainText = () => {
     const { doc } = this.view.state;
-    const textSerializers = getTextSerializers(this.schema);
+    const textSerializers = Object.fromEntries(
+      Object.entries(this.schema.nodes)
+        .filter(([, node]) => node.spec.toPlainText)
+        .map(([name, node]) => [name, node.spec.toPlainText])
+    );
 
     return textBetween(doc, 0, doc.content.size, textSerializers);
   };
@@ -771,8 +779,25 @@ export class Editor extends React.PureComponent<
     }));
   };
 
+  private handleOpenLinkToolbar = () => {
+    if (this.state.selectionToolbarOpen) {
+      return;
+    }
+    this.setState((state) => ({
+      ...state,
+      linkToolbarOpen: true,
+    }));
+  };
+
+  private handleCloseLinkToolbar = () => {
+    this.setState((state) => ({
+      ...state,
+      linkToolbarOpen: false,
+    }));
+  };
+
   public render() {
-    const { readOnly, canUpdate, grow, style, className, onKeyDown } =
+    const { dir, readOnly, canUpdate, grow, style, className, onKeyDown } =
       this.props;
     const { isRTL } = this.state;
 
@@ -789,6 +814,7 @@ export class Editor extends React.PureComponent<
             column
           >
             <EditorContainer
+              dir={dir}
               rtl={isRTL}
               grow={grow}
               readOnly={readOnly}
@@ -808,18 +834,25 @@ export class Editor extends React.PureComponent<
                 isTemplate={this.props.template === true}
                 onOpen={this.handleOpenSelectionToolbar}
                 onClose={this.handleCloseSelectionToolbar}
+                onSearchLink={this.props.onSearchLink}
                 onClickLink={this.props.onClickLink}
+                onCreateLink={this.props.onCreateLink}
+              />
+            )}
+            {!readOnly && this.view && this.marks.link && (
+              <LinkToolbar
+                isActive={this.state.linkToolbarOpen}
+                onCreateLink={this.props.onCreateLink}
+                onSearchLink={this.props.onSearchLink}
+                onClickLink={this.props.onClickLink}
+                onClose={this.handleCloseLinkToolbar}
               />
             )}
             {this.widgets &&
               Object.values(this.widgets).map((Widget, index) => (
                 <Widget key={String(index)} rtl={isRTL} readOnly={readOnly} />
               ))}
-            <Observer>
-              {() => (
-                <>{Array.from(this.renderers).map((view) => view.content)}</>
-              )}
-            </Observer>
+            {Array.from(this.renderers).map((view) => view.content)}
           </Flex>
         </EditorContext.Provider>
       </PortalContext.Provider>

app/hooks/useComponentSize.ts

@@ -0,0 +1,35 @@
+import { useState, useLayoutEffect } from "react";
+
+export default function useComponentSize(
+  ref: React.RefObject<HTMLElement | null>
+): {
+  width: number;
+  height: number;
+} {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useLayoutEffect(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+      entries.forEach(({ target }) => {
+        if (
+          size.width !== target.clientWidth ||
+          size.height !== target.clientHeight
+        ) {
+          setSize({ width: target.clientWidth, height: target.clientHeight });
+        }
+      });
+    });
+
+    if (ref.current) {
+      setSize({
+        width: ref.current?.clientWidth,
+        height: ref.current?.clientHeight,
+      });
+      sizeObserver.observe(ref.current);
+    }
+
+    return () => sizeObserver.disconnect();
+  }, [ref, size.height, size.width]);
+
+  return size;
+}

app/hooks/useDictionary.ts

@@ -39,7 +39,7 @@ export default function useDictionary() {
       em: t("Italic"),
       embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
       file: t("File attachment"),
-      enterLink: `${t("Enter a link")}…`,
+      findOrCreateDoc: `${t("Paste a link, search, or create")}…`,
       h1: t("Big heading"),
       h2: t("Medium heading"),
       h3: t("Small heading"),

app/hooks/useEditorClickHandlers.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { useHistory } from "react-router-dom";
 import { isModKey } from "@shared/utils/keyboard";
-import { isDocumentUrl, isInternalUrl } from "@shared/utils/urls";
+import { isInternalUrl } from "@shared/utils/urls";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { isHash } from "~/utils/urls";
-import useStores from "./useStores";
 
 type Params = {
   /** The share ID of the document being viewed, if any */
@@ -13,9 +12,8 @@ type Params = {
 
 export default function useEditorClickHandlers({ shareId }: Params) {
   const history = useHistory();
-  const { documents } = useStores();
   const handleClickLink = React.useCallback(
-    (href: string, event?: MouseEvent) => {
+    (href: string, event: MouseEvent) => {
       // on page hash
       if (isHash(href)) {
         window.location.href = href;
@@ -51,20 +49,13 @@ export default function useEditorClickHandlers({ shareId }: Params) {
           navigateTo = sharedDocumentPath(shareId, navigateTo);
         }
 
-        if (isDocumentUrl(navigateTo)) {
-          const document = documents.getByUrl(navigateTo);
-          if (document) {
-            navigateTo = document.path;
-          }
-        }
-
         // If we're navigating to a share link from a non-share link then open it in a new tab
         if (!shareId && navigateTo.startsWith("/s/")) {
           window.open(href, "_blank");
           return;
         }
 
-        if (!event || (!isModKey(event) && !event.shiftKey)) {
+        if (!isModKey(event) && !event.shiftKey) {
           history.push(navigateTo, { sidebarContext: "collections" }); // optimistic preference of "collections"
         } else {
           window.open(navigateTo, "_blank");

app/hooks/useImportDocument.ts

@@ -45,16 +45,12 @@ export default function useImportDocument(
         }
 
         for (const file of files) {
-          try {
-            const doc = await documents.import(file, documentId, cId, {
-              publish: true,
-            });
+          const doc = await documents.import(file, documentId, cId, {
+            publish: true,
+          });
 
-            if (redirect) {
-              history.push(documentPath(doc));
-            }
-          } catch (err) {
-            toast.error(err.message);
+          if (redirect) {
+            history.push(documentPath(doc));
           }
         }
       } catch (err) {

app/hooks/usePersistedState.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Primitive } from "utility-types";
 import Storage from "@shared/utils/Storage";
-import { isBrowser } from "@shared/utils/browser";
 import Logger from "~/utils/Logger";
 import useEventListener from "./useEventListener";
 
@@ -42,7 +41,7 @@ export default function usePersistedState<T extends Primitive | object>(
   options?: Options
 ): [T, (value: T) => void] {
   const [storedValue, setStoredValue] = React.useState(() => {
-    if (!isBrowser) {
+    if (typeof window === "undefined") {
       return defaultValue;
     }
     return Storage.get(key) ?? defaultValue;