option to show more 'shared with me' documents

* fix: Remove ability to collapse sidebar on shared links

* fix: Existing collapsed sidebars should be forced open

.github/workflows/auto_close_prs.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Close unsigned PRs
-        uses: actions/github-script@v6
+        uses: actions/github-script@v8
         with:
           script: |
             const now = new Date();

.github/workflows/calibreapp-image-actions.yml

@@ -40,7 +40,7 @@ jobs:
        github.event.pull_request.head.repo.full_name == github.repository)
     steps:
       - name: Checkout Branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v5
       - name: Compress Images
         id: calibre
         uses: calibreapp/image-actions@main
@@ -48,6 +48,7 @@ jobs:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           # For non-Pull Requests, run in compressOnly mode and we'll PR after.
           compressOnly: ${{ github.event_name != 'pull_request' }}
+          minPctChange: "10"
       - name: Create Pull Request
         # If it's not a Pull Request then commit any changes as a new PR.
         if: |

.github/workflows/ci.yml

@@ -25,9 +25,9 @@ jobs:
         node-version: [20.x, 22.x]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ matrix.node-version }}
           cache: "yarn"
@@ -38,8 +38,8 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 22.x
           cache: "yarn"
@@ -50,8 +50,8 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 22.x
           cache: "yarn"
@@ -65,7 +65,7 @@ jobs:
       server: ${{ steps.filter.outputs.server }}
       app: ${{ steps.filter.outputs.app }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: dorny/paths-filter@v2
         id: filter
         with:
@@ -92,8 +92,8 @@ jobs:
       matrix:
         test-group: [app, shared]
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 22.x
           cache: "yarn"
@@ -124,8 +124,8 @@ jobs:
         shard: [1, 2, 3, 4]
 
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 22.x
           cache: "yarn"
@@ -141,8 +141,8 @@ jobs:
     if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 22.x
           cache: "yarn"

.github/workflows/codeql-analysis.yml

@@ -38,7 +38,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v5
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/docker.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubicloud-standard-8-arm
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -93,7 +93,7 @@ jobs:
     runs-on: ubicloud-standard-8
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3

.github/workflows/lint.yml

@@ -1,30 +0,0 @@
-name: Lint
-
-on:
-  pull_request:
-    branches: [main]
-
-jobs:
-  run-linters:
-    if: startsWith(github.actor, 'codegen-sh')
-    name: Run linters
-    runs-on: ubuntu-latest
-
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
-      - run: yarn lint --fix
-
-      - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: "Applied automatic fixes"

.github/workflows/stale.yml

@@ -12,7 +12,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v5
+      - uses: actions/stale@v10
         with:
           stale-pr-message: "This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
           stale-issue-message: "This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"

.jestconfig.json

@@ -20,8 +20,7 @@
       "moduleNameMapper": {
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
       },
       "modulePaths": ["<rootDir>/app"],
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
@@ -48,8 +47,7 @@
       "moduleNameMapper": {
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
       "testEnvironment": "jsdom",

Dockerfile

@@ -6,7 +6,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:22-slim AS runner
+FROM node:22.21.0-slim AS runner
 
 LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 
@@ -16,9 +16,9 @@ ENV NODE_ENV=production
 
 # Create a non-root user compatible with Debian and BusyBox based images
 RUN addgroup --gid 1001 nodejs && \
-  adduser --uid 1001 --ingroup nodejs nodejs && \
-  mkdir -p /var/lib/outline && \
-  chown -R nodejs:nodejs /var/lib/outline
+    adduser --uid 1001 --ingroup nodejs nodejs && \
+    mkdir -p /var/lib/outline && \
+    chown -R nodejs:nodejs /var/lib/outline
 
 COPY --from=base --chown=nodejs:nodejs $APP_PATH/build ./build
 COPY --from=base $APP_PATH/server ./server
@@ -29,13 +29,13 @@ COPY --from=base $APP_PATH/package.json ./package.json
 
 # Install wget to healthcheck the server
 RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
+    && apt-get install -y wget \
+    && rm -rf /var/lib/apt/lists/*
 
 ENV FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
 RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
+    chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
+    chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
 
 VOLUME /var/lib/outline/data
 

Dockerfile.base

@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:22 AS deps
+FROM node:22.21.0 AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.87.4
+Licensed Work:        Outline 1.0.1
                       The Licensed Work is (c) 2025 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2029-09-18
+Change Date:          2029-10-29
 
 Change License:       Apache License, Version 2.0
 

app/.oxlintrc.json

@@ -5,6 +5,13 @@
     {
       "files": ["**/*.{jsx,tsx}"],
       "rules": {
+        "no-restricted-globals": [
+          "error",
+          {
+            "name": "crypto",
+            "message": "Do not use, does not work in environments without SSL."
+          }
+        ],
         "no-restricted-imports": [
           "error",
           {

app/actions/definitions/developer.tsx

@@ -176,6 +176,21 @@ export const toggleDebugLogging = createAction({
   },
 });
 
+export const toggleDebugSafeArea = createAction({
+  name: () => "Toggle menu safe area debugging",
+  icon: <ToolsIcon />,
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: ({ stores }) => {
+    stores.ui.toggleDebugSafeArea();
+    toast.message(
+      stores.ui.debugSafeArea
+        ? "Menu safe area debugging enabled"
+        : "Menu safe area debugging disabled"
+    );
+  },
+});
+
 export const toggleFeatureFlag = createAction({
   name: "Toggle feature flag",
   icon: <BeakerIcon />,
@@ -209,6 +224,7 @@ export const developer = createAction({
   children: [
     copyId,
     toggleDebugLogging,
+    toggleDebugSafeArea,
     toggleFeatureFlag,
     createToast,
     createTestUsers,

app/actions/definitions/users.tsx

@@ -22,6 +22,7 @@ export const inviteUser = createAction({
   perform: ({ t }) => {
     stores.dialogs.openModal({
       title: t("Invite to workspace"),
+      width: "500px",
       content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
     });
   },

app/actions/index.ts

@@ -1,4 +1,5 @@
 import { LocationDescriptor } from "history";
+import { v4 as uuidv4 } from "uuid";
 import flattenDeep from "lodash/flattenDeep";
 import { toast } from "sonner";
 import { Optional } from "utility-types";
@@ -45,7 +46,7 @@ export function createAction(definition: Optional<Action, "id">): Action {
           return definition.perform?.(context);
         }
       : undefined,
-    id: definition.id ?? crypto.randomUUID(),
+    id: definition.id ?? uuidv4(),
   };
 }
 
@@ -201,7 +202,7 @@ export function createActionV2(
           return definition.perform(context);
         }
       : () => {},
-    id: definition.id ?? crypto.randomUUID(),
+    id: definition.id ?? uuidv4(),
   };
 }
 
@@ -212,7 +213,7 @@ export function createInternalLinkActionV2(
     ...definition,
     type: "action",
     variant: "internal_link",
-    id: definition.id ?? crypto.randomUUID(),
+    id: definition.id ?? uuidv4(),
   };
 }
 
@@ -223,7 +224,7 @@ export function createExternalLinkActionV2(
     ...definition,
     type: "action",
     variant: "external_link",
-    id: definition.id ?? crypto.randomUUID(),
+    id: definition.id ?? uuidv4(),
   };
 }
 
@@ -234,7 +235,7 @@ export function createActionV2WithChildren(
     ...definition,
     type: "action",
     variant: "action_with_children",
-    id: definition.id ?? crypto.randomUUID(),
+    id: definition.id ?? uuidv4(),
   };
 }
 
@@ -251,7 +252,7 @@ export function createRootMenuAction(
   actions: (ActionV2Variant | ActionV2Group | TActionV2Separator)[]
 ): ActionV2WithChildren {
   return {
-    id: crypto.randomUUID(),
+    id: uuidv4(),
     type: "action",
     variant: "action_with_children",
     name: "root_action",

app/components/Avatar/Avatar.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import styled from "styled-components";
 import useBoolean from "~/hooks/useBoolean";
 import Initials from "./Initials";
+import Tooltip from "../Tooltip";
 
 export enum AvatarSize {
   Small = 16,
@@ -22,6 +23,7 @@ export interface IAvatar {
   avatarUrl: string | null;
   color?: string;
   initial?: string;
+  name?: string;
   id?: string;
 }
 
@@ -42,6 +44,8 @@ type Props = {
   className?: string;
   /** Optional style */
   style?: React.CSSProperties;
+  /** Whether to show a tooltip */
+  showTooltip?: boolean;
 };
 
 function Avatar(props: Props) {
@@ -50,12 +54,13 @@ function Avatar(props: Props) {
     style,
     variant = AvatarVariant.Round,
     className,
+    showTooltip,
     ...rest
   } = props;
   const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
 
-  return (
+  const content = (
     <Relative
       style={style}
       $variant={variant}
@@ -73,6 +78,12 @@ function Avatar(props: Props) {
       )}
     </Relative>
   );
+
+  return showTooltip ? (
+    <Tooltip content={props.alt || model?.name || ""}>{content}</Tooltip>
+  ) : (
+    content
+  );
 }
 
 Avatar.defaultProps = {

app/components/Avatar/GroupAvatar.tsx

@@ -26,6 +26,7 @@ export function GroupAvatar({
   return (
     <Squircle color={color ?? theme.text} size={size} className={className}>
       <GroupIcon
+        data-fixed-color
         color={backgroundColor ?? theme.background}
         size={size * 0.75}
       />

app/components/Dialogs.tsx

@@ -32,6 +32,8 @@ function Dialogs() {
           }}
           title={modal.title}
           style={modal.style}
+          width={modal.width}
+          height={modal.height}
         >
           {modal.content}
         </Modal>

app/components/EditableTitle.tsx

@@ -83,13 +83,15 @@ function EditableTitle(
       try {
         await onSubmit(trimmedValue);
         setOriginalValue(trimmedValue);
+        setIsEditing(false);
       } catch (error) {
-        setValue(originalValue);
+        setValue(value);
+        setIsEditing(true);
+
         toast.error(error.message);
         throw error;
       } finally {
         setIsSubmitting(false);
-        setIsEditing(false);
       }
     },
     [originalValue, value, onCancel, onSubmit, isSubmitting]

app/components/ExportDialog.tsx

@@ -25,6 +25,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
   );
   const [includeAttachments, setIncludeAttachments] =
     React.useState<boolean>(true);
+  const [includePrivate, setIncludePrivate] = React.useState<boolean>(true);
   const user = useCurrentUser();
   const { collections } = useStores();
   const { t } = useTranslation();
@@ -44,6 +45,13 @@ function ExportDialog({ collection, onSubmit }: Props) {
     []
   );
 
+  const handleIncludePrivateChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setIncludePrivate(ev.target.checked);
+    },
+    []
+  );
+
   const handleSubmit = async () => {
     if (collection) {
       await collection.export(format, includeAttachments);
@@ -59,7 +67,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
         },
       });
     } else {
-      await collections.export(format, includeAttachments);
+      await collections.export({ format, includeAttachments, includePrivate });
       toast.success(t("Export started"));
     }
     onSubmit();
@@ -123,37 +131,62 @@ function ExportDialog({ collection, onSubmit }: Props) {
               <Text as="p" size="small" weight="bold">
                 {item.title}
               </Text>
-              <Text size="small">{item.description}</Text>
+              <Text size="small" type="secondary">
+                {item.description}
+              </Text>
             </div>
           </Option>
         ))}
       </Flex>
-      <hr />
-      <Option>
-        <input
-          type="checkbox"
-          name="includeAttachments"
-          checked={includeAttachments}
-          onChange={handleIncludeAttachmentsChange}
-        />
-        <div>
-          <Text as="p" size="small" weight="bold">
-            {t("Include attachments")}
-          </Text>
-          <Text size="small">
-            {t("Including uploaded images and files in the exported data")}.
-          </Text>{" "}
-        </div>
-      </Option>
+      <HR />
+      <Flex gap={12} column>
+        <Option>
+          <input
+            type="checkbox"
+            name="includeAttachments"
+            checked={includeAttachments}
+            onChange={handleIncludeAttachmentsChange}
+          />
+          <div>
+            <Text as="p" size="small" weight="bold">
+              {t("Include attachments")}
+            </Text>
+            <Text size="small" type="secondary">
+              {t("Including uploaded images and files in the exported data")}.
+            </Text>{" "}
+          </div>
+        </Option>
+        <Option>
+          <input
+            type="checkbox"
+            name="includePrivate"
+            checked={includePrivate}
+            onChange={handleIncludePrivateChange}
+          />
+          <div>
+            <Text as="p" size="small" weight="bold">
+              {t("Include private collections")}
+            </Text>
+          </div>
+        </Option>
+      </Flex>
     </ConfirmationDialog>
   );
 }
 
+const HR = styled.hr`
+  margin: 16px 0;
+`;
+
 const Option = styled.label`
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: 16px;
 
+  input {
+    margin-top: 4px;
+  }
+
   p {
     margin: 0;
   }

app/components/Facepile.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The users to display */
@@ -21,6 +22,8 @@ type Props = {
       model: User;
     }
   >;
+  /** Whether to show tooltips on hover, defaults to true */
+  showTooltip?: boolean;
 };
 
 function Facepile({
@@ -29,6 +32,7 @@ function Facepile({
   size = AvatarSize.Large,
   limit = 8,
   renderAvatar = Avatar,
+  showTooltip = true,
   ...rest
 }: Props) {
   const { t } = useTranslation();
@@ -51,6 +55,7 @@ function Facepile({
           <Component
             key={model.id}
             {...{
+              showTooltip,
               model,
               size,
               style: {
@@ -101,6 +106,11 @@ const Avatars = styled(Flex)`
   align-items: center;
   flex-direction: row-reverse;
   cursor: var(--pointer);
+
+  *:hover {
+    clip-path: none !important;
+    box-shadow: 0 0 0 2px ${s("background")};
+  }
 `;
 
 export default observer(Facepile);

app/components/HoverPreview/HoverPreview.tsx

@@ -13,6 +13,7 @@ import useStores from "~/hooks/useStores";
 import LoadingIndicator from "../LoadingIndicator";
 import { CARD_MARGIN } from "./Components";
 import HoverPreviewDocument from "./HoverPreviewDocument";
+import HoverPreviewGroup from "./HoverPreviewGroup";
 import HoverPreviewIssue from "./HoverPreviewIssue";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
@@ -132,6 +133,13 @@ const HoverPreviewDesktop = observer(
                   lastActive={data.lastActive}
                   email={data.email}
                 />
+              ) : data.type === UnfurlResourceType.Group ? (
+                <HoverPreviewGroup
+                  ref={cardRef}
+                  name={data.name}
+                  memberCount={data.memberCount}
+                  users={data.users}
+                />
               ) : data.type === UnfurlResourceType.Document ? (
                 <HoverPreviewDocument
                   ref={cardRef}
@@ -295,10 +303,10 @@ const Pointer = styled.div<{ top: number; left: number; direction: Direction }>`
 
   &:before {
     border: 8px solid transparent;
-    ${({ direction, theme }) =>
+    ${({ direction }) =>
       direction === Direction.UP
-        ? `border-bottom-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`
-        : `border-top-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`};
+        ? `border-bottom-color: rgba(0, 0, 0, 0.1)`
+        : `border-top-color: rgba(0, 0, 0, 0.1)`};
     ${({ direction }) =>
       direction === Direction.UP ? "right: -1px" : "left: -1px"};
   }

app/components/HoverPreview/HoverPreviewGroup.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
+import { MAX_AVATAR_DISPLAY } from "@shared/constants";
+import User from "~/models/User";
+import Facepile from "~/components/Facepile";
+import Flex from "~/components/Flex";
+import {
+  Preview,
+  Title,
+  Info,
+  Card,
+  CardContent,
+  Description,
+} from "./Components";
+import ErrorBoundary from "../ErrorBoundary";
+
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Group], "type">;
+
+const HoverPreviewGroup = React.forwardRef(function _HoverPreviewGroup(
+  { name, memberCount, users }: Props,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <Preview as="div">
+      <Card fadeOut={false} ref={ref}>
+        <CardContent>
+          <ErrorBoundary showTitle={false} reloadOnChunkMissing={false}>
+            <Flex column gap={2} align="start">
+              <Title>{name}</Title>
+              <Info>
+                {memberCount === 1 ? "1 member" : `${memberCount} members`}
+              </Info>
+              {users.length > 0 && (
+                <Description>
+                  <Facepile
+                    users={users.map(
+                      (member) =>
+                        ({
+                          id: member.id,
+                          name: member.name,
+                          avatarUrl: member.avatarUrl,
+                          color: member.color,
+                          initial: member.name ? member.name[0] : "?",
+                        }) as User
+                    )}
+                    overflow={Math.max(0, memberCount - users.length)}
+                    limit={MAX_AVATAR_DISPLAY}
+                  />
+                </Description>
+              )}
+            </Flex>
+          </ErrorBoundary>
+        </CardContent>
+      </Card>
+    </Preview>
+  );
+});
+
+export default HoverPreviewGroup;

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -7,7 +7,7 @@ import { Preview, Title, Info, Card, CardContent } from "./Components";
 type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;
 
 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { avatarUrl, name, lastActive, color, email }: Props,
+  { avatarUrl, name, lastActive, color }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -25,7 +25,6 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
             />
             <Flex column gap={2} justify="center">
               <Title>{name}</Title>
-              {email && <Info>{email}</Info>}
               <Info>{lastActive}</Info>
             </Flex>
           </Flex>

app/components/InputSelect.tsx

@@ -1,6 +1,5 @@
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { QuestionMarkIcon } from "outline-icons";
-import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
@@ -342,9 +341,9 @@ function Option({
       {option.description && (
         <>
           &nbsp;
-          <Description type="tertiary" size="small" ellipsis>
+          <Text type="tertiary" size="small" ellipsis>
             – {option.description}
-          </Description>
+          </Text>
         </>
       )}
     </OptionContainer>
@@ -360,15 +359,6 @@ const OptionContainer = styled(Flex)`
   min-height: 24px;
 `;
 
-const Description = styled(Text)`
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      color: ${(props) => transparentize(0.5, props.theme.accentText)};
-    }
-  }
-`;
-
 const IconWrapper = styled.span`
   display: flex;
   justify-content: center;

app/components/Lightbox.tsx

@@ -5,10 +5,12 @@ import {
   ComponentProps,
   createContext,
   forwardRef,
+  HTMLAttributes,
   ReactNode,
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -47,6 +49,7 @@ import {
   ReactZoomPanPinchRef,
 } from "react-zoom-pan-pinch";
 import { transparentize } from "polished";
+import { mergeRefs } from "react-merge-refs";
 
 export enum LightboxStatus {
   READY_TO_OPEN,
@@ -96,16 +99,44 @@ type ZoomablePannablePinchableProps = {
   children: ReactNode;
   panningDisabled: boolean;
   disabled: boolean;
+  onClose?: () => void;
 };
+
 const ZoomablePannablePinchable = forwardRef<
   ReactZoomPanPinchRef,
   ZoomablePannablePinchableProps
->(({ children, panningDisabled, disabled }, ref) => {
+>(({ children, panningDisabled, disabled, onClose }, ref) => {
   const { isPanning, ...panningHandlers } = usePanning();
+  const wrapperRef = useRef<ReactZoomPanPinchRef>(null);
+  const scale = wrapperRef.current?.instance.transformState.scale ?? 1;
+
+  const wrapperProps = useMemo(
+    () =>
+      ({
+        onClick: (event) => {
+          if (scale > 1) {
+            return;
+          }
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (
+            ["IMG", "INPUT", "BUTTON", "A"].includes(
+              (event.target as Element).tagName
+            )
+          ) {
+            return;
+          }
+          onClose?.();
+        },
+      }) satisfies HTMLAttributes<HTMLDivElement>,
+    [onClose, scale]
+  );
+
   return (
     <ZoomPanPinchContext.Provider value={{ isImagePanning: isPanning }}>
       <TransformWrapper
-        ref={ref}
+        ref={mergeRefs([ref, wrapperRef])}
         disabled={disabled}
         doubleClick={{ disabled: true }}
         minScale={1}
@@ -116,7 +147,11 @@ const ZoomablePannablePinchable = forwardRef<
         {...panningHandlers}
       >
         <TransformComponent
-          wrapperStyle={{ width: "100%", height: "100%" }}
+          wrapperStyle={{
+            width: "100%",
+            height: "100%",
+            cursor: isPanning ? "grabbing" : scale > 1 ? "grab" : "zoom-out",
+          }}
           contentStyle={{
             width: "100%",
             height: "100%",
@@ -124,6 +159,7 @@ const ZoomablePannablePinchable = forwardRef<
             justifyContent: "center",
             alignItems: "center",
           }}
+          wrapperProps={wrapperProps}
         >
           {children}
         </TransformComponent>
@@ -138,10 +174,7 @@ function usePanning() {
 
   const onPanningStart: ComponentProps<
     typeof TransformWrapper
-  >["onPanningStart"] = (ref, event) => {
-    if (!(event.target instanceof HTMLImageElement)) {
-      return;
-    }
+  >["onPanningStart"] = (ref) => {
     const zoomedIn = ref.state.scale > 1;
     if (zoomedIn) {
       setPanning(ref.instance.isPanning);
@@ -157,13 +190,10 @@ function usePanning() {
   const onPanningStop: ComponentProps<
     typeof TransformWrapper
   >["onPanningStop"] = (ref, event) => {
-    if (!(event.target instanceof HTMLImageElement)) {
-      return;
-    }
     setPanning(ref.instance.isPanning);
     if (dragged.current) {
       dragged.current = false;
-    } else {
+    } else if (event.target instanceof HTMLImageElement) {
       const zoomedOut = Math.abs(ref.state.scale - 1) < 0.001;
       if (zoomedOut) {
         ref.zoomIn();
@@ -758,6 +788,7 @@ function Lightbox({ images, activeImage, onUpdate, onClose }: Props) {
             }
             disabled={status.image === ImageStatus.ERROR}
             ref={zoomPanPinchRef}
+            onClose={close}
           >
             <Image
               ref={imgRef}
@@ -998,7 +1029,7 @@ const StyledImg = styled.img<{
   object-fit: contain;
   cursor: ${(props) =>
     props.$panning
-      ? "grab"
+      ? "grabbing"
       : props.$zoomedOut
         ? "zoom-in"
         : props.$zoomedIn

app/components/MeasuredContainer.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import useMeasure from "react-use-measure";
 
 export const MeasuredContainer = <T extends React.ElementType>({
-  as: As,
+  as: As = "div",
   name,
   children,
   ...rest

app/components/Menu/transformer.tsx

@@ -11,9 +11,12 @@ import {
 } from "~/components/primitives/Menu";
 import * as Components from "~/components/primitives/components/Menu";
 import { MenuItem } from "~/types";
+import { MouseSafeArea } from "~/components/MouseSafeArea";
+import { createRef } from "react";
 
 export function toMenuItems(items: MenuItem[]) {
   const filteredItems = filterMenuItems(items);
+  const parentRef = createRef<HTMLDivElement>();
 
   if (!filteredItems.length) {
     return null;
@@ -88,7 +91,10 @@ export function toMenuItems(items: MenuItem[]) {
               icon={icon}
               disabled={item.disabled}
             />
-            <SubMenuContent>{submenuItems}</SubMenuContent>
+            <SubMenuContent ref={parentRef}>
+              <MouseSafeArea parentRef={parentRef} />
+              {submenuItems}
+            </SubMenuContent>
           </SubMenu>
         );
       }

app/components/Modal.tsx

@@ -22,6 +22,8 @@ type Props = {
   isOpen: boolean;
   title?: React.ReactNode;
   style?: React.CSSProperties;
+  width?: number | string;
+  height?: number | string;
   onRequestClose: () => void;
 };
 
@@ -30,6 +32,8 @@ const Modal: React.FC<Props> = ({
   isOpen,
   title = "Untitled",
   style,
+  width,
+  height,
   onRequestClose,
 }: Props) => {
   const wasOpen = usePrevious(isOpen);
@@ -57,7 +61,7 @@ const Modal: React.FC<Props> = ({
         >
           {isMobile ? (
             <Mobile>
-              <Content>
+              <MobileContent>
                 <Centered onClick={(ev) => ev.stopPropagation()} column>
                   {title && (
                     <Text size="xlarge" weight="bold">
@@ -66,7 +70,7 @@ const Modal: React.FC<Props> = ({
                   )}
                   <ErrorBoundary>{children}</ErrorBoundary>
                 </Centered>
-              </Content>
+              </MobileContent>
               <Close onClick={onRequestClose}>
                 <CloseIcon size={32} />
               </Close>
@@ -76,7 +80,7 @@ const Modal: React.FC<Props> = ({
               </Back>
             </Mobile>
           ) : (
-            <Small>
+            <Wrapper $width={width} $height={height}>
               <Centered
                 onClick={(ev) => ev.stopPropagation()}
                 // maxHeight needed for proper overflow behavior in Safari
@@ -84,9 +88,9 @@ const Modal: React.FC<Props> = ({
                 column
                 reverse
               >
-                <SmallContent style={style} shadow>
+                <DesktopContent style={style} shadow>
                   <ErrorBoundary component="div">{children}</ErrorBoundary>
-                </SmallContent>
+                </DesktopContent>
                 <Header>
                   {title && <Text size="large">{title}</Text>}
                   <NudeButton onClick={onRequestClose}>
@@ -94,7 +98,7 @@ const Modal: React.FC<Props> = ({
                   </NudeButton>
                 </Header>
               </Centered>
-            </Small>
+            </Wrapper>
           )}
         </StyledContent>
       </Dialog.Portal>
@@ -142,7 +146,7 @@ const Mobile = styled.div`
   outline: none;
 `;
 
-const Content = styled(Scrollable)`
+const MobileContent = styled(Scrollable)`
   width: 100%;
   padding: 8vh 12px;
 
@@ -151,6 +155,10 @@ const Content = styled(Scrollable)`
   `};
 `;
 
+const DesktopContent = styled(Scrollable)`
+  padding: 8px 24px 24px;
+`;
+
 const Centered = styled(Flex)`
   width: 640px;
   max-width: 100%;
@@ -207,14 +215,17 @@ const Header = styled(Flex)`
   padding: 24px 24px 12px;
 `;
 
-const Small = styled.div`
+const Wrapper = styled.div<{
+  $width?: number | string;
+  $height?: number | string;
+}>`
   animation: ${fadeAndScaleIn} 250ms ease;
 
   margin: 25vh auto auto auto;
   width: 75vw;
   min-width: 350px;
-  max-width: 450px;
-  max-height: 65vh;
+  max-width: ${(props) => props.$width || "450px"};
+  max-height: ${(props) => props.$height || "70vh"};
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;
@@ -237,8 +248,4 @@ const Small = styled.div`
   }
 `;
 
-const SmallContent = styled(Scrollable)`
-  padding: 8px 24px 24px;
-`;
-
 export default observer(Modal);

app/components/MouseSafeArea.tsx

@@ -0,0 +1,92 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useMousePosition } from "~/hooks/useMousePosition";
+import usePrevious from "~/hooks/usePrevious";
+import useStores from "~/hooks/useStores";
+
+type Positions = {
+  /** Sub-menu x */
+  x: number;
+  /** Sub-menu y */
+  y: number;
+  /** Sub-menu height */
+  h: number;
+  /** Sub-menu width */
+  w: number;
+  /** Mouse x */
+  mouseX: number;
+  /** Mouse y */
+  mouseY: number;
+};
+
+/**
+ * Component to cover the area between the mouse cursor and the sub-menu, to
+ * allow moving cursor to lower parts of sub-menu without the sub-menu
+ * disappearing.
+ */
+export const MouseSafeArea = observer(function MouseSafeArea_(props: {
+  parentRef: React.RefObject<HTMLElement | null>;
+}) {
+  const {
+    x = 0,
+    y = 0,
+    height: h = 0,
+    width: w = 0,
+  } = props.parentRef.current?.getBoundingClientRect() || {};
+  const { ui } = useStores();
+  const [mouseX, mouseY] = useMousePosition();
+  const [isVisible, setIsVisible] = React.useState(true);
+  const positions = { x, y, h, w, mouseX, mouseY };
+  const distance = Math.abs(mouseX - x);
+  const prevDistance = usePrevious(distance) ?? distance;
+
+  // Hide the safe area if the mouse is moving _away_ from the menu
+  React.useEffect(() => {
+    if (distance > prevDistance) {
+      setIsVisible(false);
+    } else if (distance < prevDistance) {
+      setIsVisible(true);
+    }
+  }, [distance, prevDistance]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        backgroundColor: ui.debugSafeArea ? "rgba(255,0,0,0.2)" : undefined,
+        right: getRight(positions),
+        left: getLeft(positions),
+        height: h,
+        width: getWidth(positions),
+        clipPath: getClipPath(positions),
+      }}
+    />
+  );
+});
+
+const buffer = 10;
+
+const getLeft = ({ x, mouseX }: Positions) =>
+  mouseX > x ? undefined : -Math.max(x - mouseX + buffer, buffer) + "px";
+
+const getRight = ({ x, w, mouseX }: Positions) =>
+  mouseX > x ? -Math.max(mouseX - (x + w) + buffer, buffer) + "px" : undefined;
+
+const getWidth = ({ x, w, mouseX }: Positions) =>
+  mouseX > x
+    ? Math.max(mouseX - (x + w - buffer), buffer) + "px"
+    : Math.max(x - mouseX + buffer, buffer) + "px";
+
+const getClipPath = ({ x, y, h, mouseX, mouseY }: Positions) =>
+  mouseX > x
+    ? `polygon(0% 0%, 0% 100%, 100% ${
+        (100 * (mouseY - y)) / h + 5
+      }%, 100% ${(100 * (mouseY - y)) / h - buffer}%)`
+    : `polygon(100% 0%, 0% ${(100 * (mouseY - y)) / h - buffer}%, 0% ${
+        (100 * (mouseY - y)) / h + 5
+      }%, 100% 100%)`;

app/components/Sidebar/Shared.tsx

@@ -47,7 +47,7 @@ function SharedSidebar({ share }: Props) {
   }
 
   return (
-    <StyledSidebar $hoverTransition={!teamAvailable}>
+    <StyledSidebar $hoverTransition={!teamAvailable} canResize={false}>
       {teamAvailable && (
         <SidebarButton
           title={team.name}
@@ -57,9 +57,7 @@ function SharedSidebar({ share }: Props) {
           onClick={() =>
             history.push(user ? homePath() : sharedModelPath(shareId))
           }
-        >
-          <ToggleSidebar />
-        </SidebarButton>
+        />
       )}
       <ScrollContainer topShadow flex>
         <TopSection>

app/components/Sidebar/Sidebar.tsx

@@ -25,13 +25,15 @@ import { useTranslation } from "react-i18next";
 const ANIMATION_MS = 250;
 
 type Props = {
-  children: React.ReactNode;
   hidden?: boolean;
+  /**  Whether the sidebar can be resized and collapsed, defaults to true. */
+  canResize?: boolean;
   className?: string;
+  children: React.ReactNode;
 };
 
 const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
-  { children, hidden = false, className }: Props,
+  { children, hidden = false, canResize = true, className }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const [isCollapsing, setCollapsing] = React.useState(false);
@@ -43,7 +45,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   const user = useCurrentUser({ rejectOnEmpty: false });
   const isMobile = useMobile();
   const width = ui.sidebarWidth;
-  const collapsed = ui.sidebarIsClosed;
+  const collapsed = ui.sidebarIsClosed && canResize;
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
 
@@ -254,10 +256,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
             </SidebarButton>
           </AccountMenu>
         )}
-        <ResizeBorder
-          onMouseDown={handleMouseDown}
-          onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
-        />
+        {canResize && (
+          <ResizeBorder
+            onMouseDown={handleMouseDown}
+            onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
+          />
+        )}
       </Container>
       {ui.mobileSidebarVisible && <Backdrop onClick={ui.toggleMobileSidebar} />}
     </TooltipProvider>

app/components/Sidebar/components/CollectionLink.tsx

@@ -86,27 +86,33 @@ const CollectionLink: React.FC<Props> = ({
     editableTitleRef.current?.setIsEditing(true);
   }, [editableTitleRef]);
 
+  const newChildTitleRef = React.useRef<RefHandle>(null);
   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);
+      try {
+        newChildTitleRef.current?.setIsEditing(false);
+        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.push({
-        pathname: documentEditPath(newDocument),
-        state: { sidebarContext },
-      });
+        closeAddingNewChild();
+        history.push({
+          pathname: documentEditPath(newDocument),
+          state: { sidebarContext },
+        });
+      } catch (_err) {
+        newChildTitleRef.current?.setIsEditing(true);
+      }
     },
     [user, sidebarContext, closeAddingNewChild, history, collection, documents]
   );
@@ -192,6 +198,7 @@ const CollectionLink: React.FC<Props> = ({
               onCancel={closeAddingNewChild}
               onSubmit={handleNewDoc}
               maxLength={DocumentValidation.maxTitleLength}
+              ref={newChildTitleRef}
             />
           }
         />

app/components/Sidebar/components/Disclosure.tsx

@@ -22,7 +22,7 @@ function Disclosure({ onClick, root, expanded, ...rest }: Props) {
       aria-label={expanded ? t("Collapse") : t("Expand")}
       {...rest}
     >
-      <StyledCollapsedIcon expanded={expanded} size={20} />
+      <StyledCollapsedIcon $expanded={expanded} size={20} />
     </Button>
   );
 }
@@ -52,13 +52,13 @@ const Button = styled(NudeButton)<{ $root?: boolean }>`
 `;
 
 const StyledCollapsedIcon = styled(CollapsedIcon)<{
-  expanded?: boolean;
+  $expanded?: boolean;
 }>`
   transition:
     opacity 100ms ease,
     transform 100ms ease,
     fill 50ms !important;
-  ${(props) => !props.expanded && "transform: rotate(-90deg);"};
+  ${(props) => !props.$expanded && "transform: rotate(-90deg);"};
 `;
 
 // Enables identifying this component within styled components

app/components/Sidebar/components/DocumentLink.tsx

@@ -281,30 +281,36 @@ function InnerDocumentLink(
     [setExpanded, setCollapsed, hasChildren, expanded]
   );
 
+  const newChildTitleRef = React.useRef<RefHandle>(null);
   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);
+      try {
+        newChildTitleRef.current?.setIsEditing(false);
+        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.push({
-        pathname: documentEditPath(newDocument),
-        state: { sidebarContext },
-      });
+        closeAddingNewChild();
+        history.push({
+          pathname: documentEditPath(newDocument),
+          state: { sidebarContext },
+        });
+      } catch (_err) {
+        newChildTitleRef.current?.setIsEditing(true);
+      }
     },
     [
       documents,
@@ -320,6 +326,62 @@ function InnerDocumentLink(
 
   const contextMenuAction = useDocumentMenuAction({ documentId: node.id });
 
+  const labelElement = React.useMemo(
+    () => (
+      <EditableTitle
+        title={title}
+        onSubmit={handleTitleChange}
+        isEditing={isEditing}
+        onEditing={setIsEditing}
+        canUpdate={canUpdate}
+        maxLength={DocumentValidation.maxTitleLength}
+        ref={editableTitleRef}
+      />
+    ),
+    [title, handleTitleChange, isEditing, setIsEditing, canUpdate]
+  );
+
+  const menuElement = React.useMemo(
+    () =>
+      document && !isMoving && !isEditing && !isDraggingAnyDocument ? (
+        <Fade>
+          {can.createChildDocument && (
+            <Tooltip content={t("New doc")}>
+              <NudeButton
+                aria-label={t("New nested document")}
+                onClick={(ev) => {
+                  ev.preventDefault();
+                  setIsAddingNewChild();
+                  setExpanded();
+                }}
+              >
+                <PlusIcon />
+              </NudeButton>
+            </Tooltip>
+          )}
+          <DocumentMenu
+            document={document}
+            onRename={handleRename}
+            onOpen={handleMenuOpen}
+            onClose={handleMenuClose}
+          />
+        </Fade>
+      ) : undefined,
+    [
+      document,
+      isMoving,
+      isEditing,
+      isDraggingAnyDocument,
+      can.createChildDocument,
+      t,
+      setIsAddingNewChild,
+      setExpanded,
+      handleRename,
+      handleMenuOpen,
+      handleMenuClose,
+    ]
+  );
+
   return (
     <ActionContextProvider
       value={{
@@ -345,17 +407,7 @@ function InnerDocumentLink(
                 contextAction={contextMenuAction}
                 to={toPath}
                 icon={iconElement}
-                label={
-                  <EditableTitle
-                    title={title}
-                    onSubmit={handleTitleChange}
-                    isEditing={isEditing}
-                    onEditing={setIsEditing}
-                    canUpdate={canUpdate}
-                    maxLength={DocumentValidation.maxTitleLength}
-                    ref={editableTitleRef}
-                  />
-                }
+                label={labelElement}
                 isActive={isActiveCheck}
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}
@@ -364,35 +416,7 @@ function InnerDocumentLink(
                 scrollIntoViewIfNeeded={sidebarContext === "collections"}
                 isDraft={isDraft}
                 ref={ref}
-                menu={
-                  document &&
-                  !isMoving &&
-                  !isEditing &&
-                  !isDraggingAnyDocument ? (
-                    <Fade>
-                      {can.createChildDocument && (
-                        <Tooltip content={t("New doc")}>
-                          <NudeButton
-                            aria-label={t("New nested document")}
-                            onClick={(ev) => {
-                              ev.preventDefault();
-                              setIsAddingNewChild();
-                              setExpanded();
-                            }}
-                          >
-                            <PlusIcon />
-                          </NudeButton>
-                        </Tooltip>
-                      )}
-                      <DocumentMenu
-                        document={document}
-                        onRename={handleRename}
-                        onOpen={handleMenuOpen}
-                        onClose={handleMenuClose}
-                      />
-                    </Fade>
-                  ) : undefined
-                }
+                menu={menuElement}
               />
             </DropToImport>
           </div>
@@ -414,6 +438,7 @@ function InnerDocumentLink(
               onCancel={closeAddingNewChild}
               onSubmit={handleNewDoc}
               maxLength={DocumentValidation.maxTitleLength}
+              ref={newChildTitleRef}
             />
           }
         />

app/components/Sidebar/components/GroupLink.tsx

@@ -8,19 +8,32 @@ import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
 import SidebarContext, { groupSidebarContext } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
+import { RequestResponse } from "~/hooks/usePaginatedRequest";
+import GroupMembership from "~/models/GroupMembership";
+import { t } from "i18next";
+import { toast } from "sonner";
 
 type Props = {
   /** The group to render */
   group: Group;
+  /** The response from the group memberships request */
+  response: RequestResponse<GroupMembership>;
 };
 
-const GroupLink: React.FC<Props> = ({ group }) => {
+const GroupLink: React.FC<Props> = ({ group, response }) => {
   const locationSidebarContext = useLocationSidebarContext();
   const sidebarContext = groupSidebarContext(group.id);
+  const { loading, next, end, error } = response;
   const [expanded, setExpanded] = React.useState(
     locationSidebarContext === sidebarContext
   );
 
+  React.useEffect(() => {
+    if (error) {
+      toast.error(t("Could not load shared documents"));
+    }
+  }, [error, t]);
+
   const handleDisclosureClick = React.useCallback((ev) => {
     ev?.preventDefault();
     setExpanded((e) => !e);
@@ -50,6 +63,14 @@ const GroupLink: React.FC<Props> = ({ group }) => {
               depth={1}
             />
           ))}
+          {!end && (
+            <SidebarLink
+              onClick={next}
+              label={`${t("Show more")}…`}
+              disabled={loading}
+              depth={0}
+            />
+          )}
         </Folder>
       </SidebarContext.Provider>
     </Relative>

app/components/Sidebar/components/Header.tsx

@@ -41,7 +41,7 @@ export const Header: React.FC<Props> = ({ id, title, children }: Props) => {
       <H3>
         <Button onClick={handleClick} disabled={!id}>
           {title}
-          {id && <Disclosure expanded={expanded} size={20} />}
+          {id && <Disclosure $expanded={expanded} size={20} />}
         </Button>
       </H3>
       {expanded && (firstRender ? children : <Fade>{children}</Fade>)}
@@ -91,12 +91,12 @@ const Button = styled.button`
   }
 `;
 
-const Disclosure = styled(CollapsedIcon)<{ expanded?: boolean }>`
+const Disclosure = styled(CollapsedIcon)<{ $expanded?: boolean }>`
   transition:
     opacity 100ms ease,
     transform 100ms ease,
     fill 50ms !important;
-  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+  ${(props) => !props.$expanded && "transform: rotate(-90deg);"};
   opacity: 0;
 `;
 

app/components/Sidebar/components/SharedWithMe.tsx

@@ -30,7 +30,9 @@ function SharedWithMe() {
   const history = useHistory();
   const locationSidebarContext = useLocationSidebarContext();
 
-  usePaginatedRequest<GroupMembership>(groupMemberships.fetchAll);
+  const gmResponse = usePaginatedRequest<GroupMembership>(
+    groupMemberships.fetchAll
+  );
 
   const { loading, next, end, error, page } =
     usePaginatedRequest<UserMembership>(userMemberships.fetchPage, {
@@ -108,7 +110,7 @@ function SharedWithMe() {
       <Flex column>
         <Header id="shared" title={t("Shared with me")}>
           {user.groupsWithDocumentMemberships.map((group) => (
-            <GroupLink key={group.id} group={group} />
+            <GroupLink key={group.id} group={group} response={gmResponse} />
           ))}
           <Relative>
             {reorderProps.isDragging && (

app/components/Sidebar/components/StarredLink.tsx

@@ -85,11 +85,8 @@ function StarredDocumentLink({
   const { collections, documents } = useStores();
 
   const document = documents.get(documentId);
-  if (!document) {
-    return null;
-  }
 
-  const documentCollection = document.collectionId
+  const documentCollection = document?.collectionId
     ? collections.get(document.collectionId)
     : undefined;
   const childDocuments = documentCollection
@@ -97,7 +94,11 @@ function StarredDocumentLink({
     : [];
   const hasChildDocuments = childDocuments.length > 0;
   const displayChildDocuments = expanded && !isDragging;
-  const contextMenuAction = useDocumentMenuAction({ documentId: document.id });
+  const contextMenuAction = useDocumentMenuAction({ documentId });
+
+  if (!document) {
+    return null;
+  }
 
   return (
     <ActionContextProvider

app/components/Sidebar/hooks/useCollectionDocuments.ts

@@ -7,18 +7,28 @@ export default function useCollectionDocuments(
   collection: Collection | undefined,
   activeDocument: Document | undefined
 ) {
+  const insertDraftDocument = useMemo(
+    () =>
+      activeDocument &&
+      activeDocument.isActive &&
+      activeDocument.isDraft &&
+      activeDocument.collectionId === collection?.id &&
+      !activeDocument.parentDocumentId,
+    [
+      activeDocument?.isActive,
+      activeDocument?.isDraft,
+      activeDocument?.collectionId,
+      activeDocument?.parentDocumentId,
+      collection?.id,
+    ]
+  );
+
   return useMemo(() => {
     if (!collection?.sortedDocuments) {
       return undefined;
     }
 
-    const insertDraftDocument =
-      activeDocument?.isActive &&
-      activeDocument?.isDraft &&
-      activeDocument?.collectionId === collection.id &&
-      !activeDocument?.parentDocumentId;
-
-    return insertDraftDocument
+    return insertDraftDocument && activeDocument
       ? sortNavigationNodes(
           [activeDocument.asNavigationNode, ...collection.sortedDocuments],
           collection.sort,
@@ -26,14 +36,9 @@ export default function useCollectionDocuments(
         )
       : collection.sortedDocuments;
   }, [
-    activeDocument?.isActive,
-    activeDocument?.isDraft,
-    activeDocument?.collectionId,
-    activeDocument?.parentDocumentId,
+    insertDraftDocument,
     activeDocument?.asNavigationNode,
-    collection,
     collection?.sortedDocuments,
-    collection?.id,
     collection?.sort,
   ]);
 }

app/components/primitives/components/InputSelect.tsx

@@ -9,6 +9,8 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Button, { Inner } from "~/components/Button";
 import Flex from "~/components/Flex";
+import Text from "~/components/Text";
+import { transparentize } from "polished";
 
 export const SelectItem = forwardRef<
   HTMLDivElement,
@@ -114,6 +116,10 @@ const ItemContainer = styled(Flex)`
         color: ${s("accentText")};
         fill: ${s("accentText")};
       }
+
+      ${Text} {
+        color: ${(props) => transparentize(0.5, props.theme.accentText)};
+      }
     }
   }
 

app/components/primitives/components/Menu.tsx

@@ -57,7 +57,7 @@ const BaseMenuItemCSS = css<BaseMenuItemProps>`
     box-shadow: none;
     cursor: var(--pointer);
 
-    svg {
+    svg:not([data-fixed-color]) {
       color: ${props.theme.accentText};
       fill: ${props.theme.accentText};
     }
@@ -66,22 +66,18 @@ const BaseMenuItemCSS = css<BaseMenuItemProps>`
   ${(props) =>
     !props.disabled &&
     `
-    @media (hover: hover) {
-        &:hover,
-        &:focus,
-        &:focus-visible {
-          color: ${props.theme.accentText};
-          background: ${props.$dangerous ? props.theme.danger : props.theme.accent};
-          outline-color: ${
-            props.$dangerous ? props.theme.danger : props.theme.accent
-          };
-          box-shadow: none;
-          cursor: var(--pointer);
+      &:focus-visible {
+        color: ${props.theme.accentText};
+        background: ${props.$dangerous ? props.theme.danger : props.theme.accent};
+        outline-color: ${
+          props.$dangerous ? props.theme.danger : props.theme.accent
+        };
+        box-shadow: none;
+        cursor: var(--pointer);
 
-          svg {
-            color: ${props.theme.accentText};
-            fill: ${props.theme.accentText};
-          }
+        svg:not([data-fixed-color]) {
+          color: ${props.theme.accentText};
+          fill: ${props.theme.accentText};
         }
       }
   `}

app/editor/components/BlockMenu.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import useDictionary from "~/hooks/useDictionary";
 import getMenuItems from "../menus/block";
 import { useEditor } from "./EditorContext";
@@ -13,20 +14,25 @@ function BlockMenu(props: Props) {
   const dictionary = useDictionary();
   const { elementRef } = useEditor();
 
+  const renderMenuItem = useCallback(
+    (item, _index, options) => (
+      <SuggestionsMenuItem
+        onClick={options.onClick}
+        selected={options.selected}
+        icon={item.icon}
+        title={item.title}
+        shortcut={item.shortcut}
+      />
+    ),
+    []
+  );
+
   return (
     <SuggestionsMenu
       {...props}
       filterable
       trigger="/"
-      renderMenuItem={(item, _index, options) => (
-        <SuggestionsMenuItem
-          onClick={options.onClick}
-          selected={options.selected}
-          icon={item.icon}
-          title={item.title}
-          shortcut={item.shortcut}
-        />
-      )}
+      renderMenuItem={renderMenuItem}
       items={getMenuItems(dictionary, elementRef)}
     />
   );

app/editor/components/EmojiMenu.tsx

@@ -1,5 +1,5 @@
 import capitalize from "lodash/capitalize";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { emojiMartToGemoji, snakeCase } from "@shared/editor/lib/emoji";
 import { search as emojiSearch } from "@shared/utils/emoji";
 import EmojiMenuItem from "./EmojiMenuItem";
@@ -45,18 +45,23 @@ const EmojiMenu = (props: Props) => {
     [search]
   );
 
+  const renderMenuItem = useCallback(
+    (item, _index, options) => (
+      <EmojiMenuItem
+        onClick={options.onClick}
+        selected={options.selected}
+        title={item.description}
+        emoji={item.emoji}
+      />
+    ),
+    []
+  );
+
   return (
     <SuggestionsMenu
       {...props}
       filterable={false}
-      renderMenuItem={(item, _index, options) => (
-        <EmojiMenuItem
-          onClick={options.onClick}
-          selected={options.selected}
-          title={item.description}
-          emoji={item.emoji}
-        />
-      )}
+      renderMenuItem={renderMenuItem}
       items={items}
     />
   );

app/editor/components/FloatingToolbar.tsx

@@ -47,9 +47,19 @@ function usePosition({
 }) {
   const { view } = useEditor();
   const { selection } = view.state;
-  const menuWidth = menuRef.current?.offsetWidth ?? 0;
+  const [menuWidth, setMenuWidth] = React.useState(0);
   const menuHeight = 36;
 
+  // Measure the menu width after DOM updates to ensure accurate positioning
+  React.useLayoutEffect(() => {
+    if (menuRef.current) {
+      const width = menuRef.current.offsetWidth;
+      if (width !== menuWidth) {
+        setMenuWidth(width);
+      }
+    }
+  });
+
   // based on the start and end of the selection calculate the position at
   // the center top
   let fromPos;
@@ -167,7 +177,7 @@ function usePosition({
         offset: 0,
         visible: true,
         blockSelection: false,
-        maxWidth: width,
+        maxWidth: "100%",
       };
     }
   }
@@ -288,7 +298,7 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
         ref={menuRef}
         $offset={position.offset}
         style={{
-          width: props.width,
+          minWidth: props.width,
           maxWidth: `${position.maxWidth}px`,
           top: `${position.top}px`,
           left: `${position.left}px`,
@@ -309,7 +319,7 @@ type WrapperProps = {
 const arrow = (props: WrapperProps) =>
   props.arrow
     ? css`
-        &::before {
+        &::after {
           content: "";
           display: block;
           width: 24px;
@@ -317,11 +327,14 @@ const arrow = (props: WrapperProps) =>
           transform: translateX(-50%) rotate(45deg);
           background: ${s("menuBackground")};
           border-radius: 3px;
-          z-index: -1;
+          z-index: 0;
           position: absolute;
-          bottom: -3px;
+          bottom: -2px;
           left: calc(50% - ${props.$offset || 0}px);
           pointer-events: none;
+
+          // clip to show only the bottom right corner
+          clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
         }
       `
     : "";

app/editor/components/MediaLinkEditor.tsx

@@ -3,71 +3,57 @@ import { Node } from "prosemirror-model";
 import { Selection, TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import styled from "styled-components";
-import { getMatchingEmbed } from "@shared/editor/lib/embeds";
 import Flex from "~/components/Flex";
 import Tooltip from "~/components/Tooltip";
 import Input from "~/editor/components/Input";
 import { Dictionary } from "~/hooks/useDictionary";
-import useEmbeds from "~/hooks/useEmbeds";
 import ToolbarButton from "./ToolbarButton";
 
 type Props = {
   node: Node;
   view: EditorView;
   dictionary: Dictionary;
+  autoFocus?: boolean;
 };
 
-export function EmbedLinkEditor({ node, view, dictionary }: Props) {
-  const { t } = useTranslation();
-  const embeds = useEmbeds();
-
-  const url = node.attrs.href as string;
+export function MediaLinkEditor({ node, view, dictionary, autoFocus }: Props) {
+  const url = (node.attrs.href ?? node.attrs.src) as string;
   const [localUrl, setLocalUrl] = useState(url);
 
   const moveSelectionToEnd = useCallback(() => {
     const { state, dispatch } = view;
-
     const nextSelection = Selection.findFrom(
       state.tr.doc.resolve(state.selection.from),
       1,
       true
     );
-    const selection = nextSelection ?? TextSelection.create(state.tr.doc, 0);
 
+    const selection = nextSelection ?? TextSelection.create(state.tr.doc, 0);
     dispatch(state.tr.setSelection(selection));
     view.focus();
   }, [view]);
 
-  const openEmbed = useCallback(() => {
+  const openLink = useCallback(() => {
     window.open(url, "_blank");
   }, [url]);
 
-  const removeEmbed = useCallback(() => {
+  const remove = useCallback(() => {
     const { state, dispatch } = view;
     dispatch(state.tr.deleteSelection());
   }, [view]);
 
-  const updateEmbed = useCallback(() => {
-    const matchingEmbed = getMatchingEmbed(embeds, localUrl);
-
-    if (!matchingEmbed) {
-      toast.error(t("Sorry, invalid embed link"));
-      return;
-    }
-
-    const { state, dispatch } = view;
-    dispatch(
-      state.tr.setNodeMarkup(state.selection.from, undefined, {
-        ...node.attrs,
-        href: localUrl,
-      })
-    );
+  const update = useCallback(() => {
+    const { state } = view;
+    const hrefType = node.type.name === "image" ? "src" : "href";
+    const tr = state.tr.setNodeMarkup(state.selection.from, undefined, {
+      ...node.attrs,
+      [hrefType]: localUrl,
+    });
 
+    view.dispatch(tr);
     moveSelectionToEnd();
-  }, [t, localUrl, embeds, node, view, moveSelectionToEnd]);
+  }, [localUrl, node, view, moveSelectionToEnd]);
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -78,7 +64,7 @@ export function EmbedLinkEditor({ node, view, dictionary }: Props) {
       switch (event.key) {
         case "Enter": {
           event.preventDefault();
-          updateEmbed();
+          update();
           return;
         }
 
@@ -89,12 +75,13 @@ export function EmbedLinkEditor({ node, view, dictionary }: Props) {
         }
       }
     },
-    [updateEmbed, moveSelectionToEnd]
+    [update, moveSelectionToEnd]
   );
 
   return (
     <Wrapper>
       <Input
+        autoFocus={autoFocus}
         value={localUrl}
         placeholder={dictionary.pasteLink}
         onChange={(e) => setLocalUrl(e.target.value)}
@@ -102,13 +89,19 @@ export function EmbedLinkEditor({ node, view, dictionary }: Props) {
         readOnly={!view.editable}
       />
       <Tooltip content={dictionary.openLink}>
-        <ToolbarButton onClick={openEmbed} disabled={!localUrl}>
+        <ToolbarButton onClick={openLink} disabled={!localUrl}>
           <OpenIcon />
         </ToolbarButton>
       </Tooltip>
       {view.editable && (
-        <Tooltip content={dictionary.deleteEmbed}>
-          <ToolbarButton onClick={removeEmbed}>
+        <Tooltip
+          content={
+            node.type.name === "embed"
+              ? dictionary.deleteEmbed
+              : dictionary.deleteImage
+          }
+        >
+          <ToolbarButton onClick={remove}>
             <TrashIcon />
           </ToolbarButton>
         </Tooltip>
@@ -121,4 +114,5 @@ const Wrapper = styled(Flex)`
   pointer-events: all;
   gap: 6px;
   padding: 6px;
+  min-width: 350px;
 `;

app/editor/components/MentionMenu.tsx

@@ -1,5 +1,6 @@
 import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
+import { v4 as uuidv4 } from "uuid";
 import { DocumentIcon, PlusIcon, CollectionIcon } from "outline-icons";
 import { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,13 +10,14 @@ import Icon from "@shared/components/Icon";
 import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import { Avatar, AvatarSize, GroupAvatar } from "~/components/Avatar";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Flex from "~/components/Flex";
 import {
   DocumentsSection,
   UserSection,
   CollectionsSection,
+  GroupSection,
 } from "~/actions/sections";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
@@ -24,6 +26,7 @@ import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
 import SuggestionsMenuItem from "./SuggestionsMenuItem";
+import { runInAction } from "mobx";
 
 interface MentionItem extends MenuItem {
   attrs: {
@@ -44,7 +47,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
   const [loaded, setLoaded] = useState(false);
   const [items, setItems] = useState<MentionItem[]>([]);
   const { t } = useTranslation();
-  const { auth, documents, users, collections } = useStores();
+  const { auth, documents, users, collections, groups } = useStores();
   const actorId = auth.currentUserId;
   const location = useLocation();
   const documentId = parseDocumentSlug(location.pathname);
@@ -52,11 +55,17 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
 
   const { loading, request } = useRequest(
     useCallback(async () => {
-      const res = await client.post("/suggestions.mention", { query: search });
+      const res = await client.post("/suggestions.mention", {
+        query: search,
+        limit: maxResultsInSection,
+      });
 
-      res.data.documents.map(documents.add);
-      res.data.users.map(users.add);
-      res.data.collections.map(collections.add);
+      runInAction(() => {
+        res.data.documents.map(documents.add);
+        res.data.users.map(users.add);
+        res.data.collections.map(collections.add);
+        res.data.groups.map(groups.add);
+      });
     }, [search, documents, users, collections])
   );
 
@@ -91,7 +100,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
               section: UserSection,
               appendSpace: true,
               attrs: {
-                id: crypto.randomUUID(),
+                id: uuidv4(),
                 type: MentionType.User,
                 modelId: user.id,
                 actorId,
@@ -99,6 +108,32 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
               },
             }) as MentionItem
         )
+        .concat(
+          groups
+            .findByQuery(search, { maxResults: maxResultsInSection })
+            .map((group) => ({
+              name: "mention",
+              icon: (
+                <Flex
+                  align="center"
+                  justify="center"
+                  style={{ width: 24, height: 24, marginRight: 4 }}
+                >
+                  <GroupAvatar group={group} size={AvatarSize.Small} />
+                </Flex>
+              ),
+              title: group.name,
+              section: GroupSection,
+              appendSpace: true,
+              attrs: {
+                id: uuidv4(),
+                type: MentionType.Group,
+                modelId: group.id,
+                actorId,
+                label: group.name,
+              },
+            }))
+        )
         .concat(
           documents
             .findByQuery(search, { maxResults: maxResultsInSection })
@@ -123,7 +158,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                   section: DocumentsSection,
                   appendSpace: true,
                   attrs: {
-                    id: crypto.randomUUID(),
+                    id: uuidv4(),
                     type: MentionType.Document,
                     modelId: doc.id,
                     actorId,
@@ -151,7 +186,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                   section: CollectionsSection,
                   appendSpace: true,
                   attrs: {
-                    id: crypto.randomUUID(),
+                    id: uuidv4(),
                     type: MentionType.Collection,
                     modelId: collection.id,
                     actorId,
@@ -171,9 +206,9 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
             priority: -1,
             appendSpace: true,
             attrs: {
-              id: crypto.randomUUID(),
+              id: uuidv4(),
               type: MentionType.Document,
-              modelId: crypto.randomUUID(),
+              modelId: uuidv4(),
               actorId,
               label: search,
             },
@@ -183,7 +218,17 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       setItems(items);
       setLoaded(true);
     }
-  }, [t, actorId, loading, search, users, documents, maxResultsInSection]);
+  }, [
+    t,
+    actorId,
+    loading,
+    search,
+    users,
+    documents,
+    maxResultsInSection,
+    groups,
+    collections,
+  ]);
 
   const handleSelect = useCallback(
     async (item: MentionItem) => {
@@ -196,29 +241,57 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       if (!documentId) {
         return;
       }
-      // Check if the mentioned user has access to the document
-      const res = await client.post("/documents.users", {
-        id: documentId,
-        userId: item.attrs.modelId,
-      });
-
-      if (!res.data.length) {
-        const user = users.get(item.attrs.modelId);
+      if (item.attrs.type === MentionType.User) {
+        // Check if the mentioned user has access to the document
+        const res = await client.post("/documents.users", {
+          id: documentId,
+          userId: item.attrs.modelId,
+        });
+        if (!res.data.length) {
+          const user = users.get(item.attrs.modelId);
+          toast.message(
+            t(
+              "{{ userName }} won't be notified, as they do not have access to this document",
+              {
+                userName: item.attrs.label,
+              }
+            ),
+            {
+              icon: <Avatar model={user} size={AvatarSize.Toast} />,
+              duration: 10000,
+            }
+          );
+        }
+      } else if (item.attrs.type === MentionType.Group) {
+        const group = groups.get(item.attrs.modelId);
         toast.message(
           t(
-            "{{ userName }} won't be notified, as they do not have access to this document",
+            `Members of "{{ groupName }}" that have access to this document will be notified`,
             {
-              userName: item.attrs.label,
+              groupName: item.attrs.label,
             }
           ),
           {
-            icon: <Avatar model={user} size={AvatarSize.Toast} />,
+            icon: group ? <GroupAvatar group={group} /> : undefined,
             duration: 10000,
           }
         );
       }
     },
-    [t, users, documentId]
+    [t, users, documentId, groups]
+  );
+
+  const renderMenuItem = useCallback(
+    (item, _index, options) => (
+      <SuggestionsMenuItem
+        onClick={options.onClick}
+        selected={options.selected}
+        subtitle={item.subtitle}
+        title={item.title}
+        icon={item.icon}
+      />
+    ),
+    []
   );
 
   // Prevent showing the menu until we have data otherwise it will be positioned
@@ -234,15 +307,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       filterable={false}
       search={search}
       onSelect={handleSelect}
-      renderMenuItem={(item, _index, options) => (
-        <SuggestionsMenuItem
-          onClick={options.onClick}
-          selected={options.selected}
-          subtitle={item.subtitle}
-          title={item.title}
-          icon={item.icon}
-        />
-      )}
+      renderMenuItem={renderMenuItem}
       items={items}
     />
   );

app/editor/components/PasteMenu.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
+import { v4 as uuidv4 } from "uuid";
 import { EmailIcon, LinkIcon } from "outline-icons";
-import React from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { EmbedDescriptor } from "@shared/editor/embeds";
 import { MenuItem } from "@shared/editor/types";
@@ -26,6 +27,18 @@ type Props = Omit<
 export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
   const items = useItems({ pastedText, embeds });
 
+  const renderMenuItem = useCallback(
+    (item, _index, options) => (
+      <SuggestionsMenuItem
+        onClick={options.onClick}
+        selected={options.selected}
+        title={item.title}
+        icon={item.icon}
+      />
+    ),
+    []
+  );
+
   if (!items) {
     props.onClose();
     return null;
@@ -36,14 +49,7 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
       {...props}
       trigger=""
       filterable={false}
-      renderMenuItem={(item, _index, options) => (
-        <SuggestionsMenuItem
-          onClick={options.onClick}
-          selected={options.selected}
-          title={item.title}
-          icon={item.icon}
-        />
-      )}
+      renderMenuItem={renderMenuItem}
       items={items}
     />
   );
@@ -96,11 +102,11 @@ function useItems({
         icon: <EmailIcon />,
         visible: !!mentionType,
         attrs: {
-          id: crypto.randomUUID(),
+          id: uuidv4(),
           type: mentionType,
           label: pastedText,
           href: pastedText,
-          modelId: crypto.randomUUID(),
+          modelId: uuidv4(),
           actorId: user?.id,
         },
         appendSpace: true,

app/editor/components/SelectionToolbar.tsx

@@ -1,11 +1,9 @@
-import some from "lodash/some";
-import { EditorState, NodeSelection, TextSelection } from "prosemirror-state";
+import { Selection, NodeSelection, TextSelection } from "prosemirror-state";
 import * as React from "react";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { getMarkRange } from "@shared/editor/queries/getMarkRange";
 import { isInCode } from "@shared/editor/queries/isInCode";
 import { isInNotice } from "@shared/editor/queries/isInNotice";
-import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import {
   getColumnIndex,
@@ -17,7 +15,6 @@ import useBoolean from "~/hooks/useBoolean";
 import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
-import usePrevious from "~/hooks/usePrevious";
 import getAttachmentMenuItems from "../menus/attachment";
 import getCodeMenuItems from "../menus/code";
 import getDividerMenuItems from "../menus/divider";
@@ -29,71 +26,33 @@ import getTableMenuItems from "../menus/table";
 import getTableColMenuItems from "../menus/tableCol";
 import getTableRowMenuItems from "../menus/tableRow";
 import { useEditor } from "./EditorContext";
-import { EmbedLinkEditor } from "./EmbedLinkEditor";
+import { MediaLinkEditor } from "./MediaLinkEditor";
 import FloatingToolbar from "./FloatingToolbar";
 import LinkEditor from "./LinkEditor";
 import ToolbarMenu from "./ToolbarMenu";
 
 type Props = {
+  /** Whether the text direction is right-to-left */
   rtl: boolean;
+  /** Whether the current document is a template */
   isTemplate: boolean;
+  /** Whether the toolbar is currently active/visible */
+  isActive: boolean;
+  /** The current selection */
+  selection?: Selection;
+  /** Whether the editor is in read-only mode */
   readOnly?: boolean;
+  /** Whether the user has permission to add comments */
   canComment?: boolean;
+  /** Whether the user has permission to update the document */
   canUpdate?: boolean;
-  onOpen: () => void;
-  onClose: () => void;
+  /** Callback function when a link is clicked */
   onClickLink: (
     href: string,
     event: MouseEvent | React.MouseEvent<HTMLButtonElement>
   ) => void;
 };
 
-function useIsActive(state: EditorState) {
-  const { selection, doc } = state;
-
-  if (isMarkActive(state.schema.marks.link)(state)) {
-    return true;
-  }
-  if (
-    (isNodeActive(state.schema.nodes.code_block)(state) ||
-      isNodeActive(state.schema.nodes.code_fence)(state)) &&
-    selection.from > 0
-  ) {
-    return true;
-  }
-
-  if (isInNotice(state) && selection.from > 0) {
-    return true;
-  }
-
-  if (!selection || selection.empty) {
-    return false;
-  }
-  if (selection instanceof NodeSelection && selection.node.type.name === "hr") {
-    return true;
-  }
-  if (
-    selection instanceof NodeSelection &&
-    ["image", "attachment", "embed"].includes(selection.node.type.name)
-  ) {
-    return true;
-  }
-  if (selection instanceof NodeSelection) {
-    return false;
-  }
-
-  const selectionText = doc.cut(selection.from, selection.to).textContent;
-  if (selection instanceof TextSelection && !selectionText) {
-    return false;
-  }
-
-  const slice = selection.content();
-  const fragment = slice.content;
-  const nodes = (fragment as any).content;
-
-  return some(nodes, (n) => n.content.size);
-}
-
 function useIsDragging() {
   const [isDragging, setDragging, setNotDragging] = useBoolean();
   useEventListener("dragstart", setDragging);
@@ -102,25 +61,19 @@ function useIsDragging() {
   return isDragging;
 }
 
-export default function SelectionToolbar(props: Props) {
-  const { onClose, readOnly, onOpen } = props;
+export function SelectionToolbar(props: Props) {
+  const { readOnly = false } = props;
   const { view, commands } = useEditor();
   const dictionary = useDictionary();
   const menuRef = React.useRef<HTMLDivElement | null>(null);
   const isMobile = useMobile();
-  const isActive = useIsActive(view.state) || isMobile;
+  const isActive = props.isActive || isMobile;
   const isDragging = useIsDragging();
-  const previousIsActive = usePrevious(isActive);
+  const [isEditingImgUrl, setIsEditingImgUrl] = React.useState(false);
 
   React.useEffect(() => {
-    // Trigger callbacks when the toolbar is opened or closed
-    if (previousIsActive && !isActive) {
-      onClose();
-    }
-    if (!previousIsActive && isActive) {
-      onOpen();
-    }
-  }, [isActive, onClose, onOpen, previousIsActive]);
+    setIsEditingImgUrl(false);
+  }, [isActive]);
 
   React.useEffect(() => {
     const handleClickOutside = (ev: MouseEvent): void => {
@@ -143,6 +96,8 @@ export default function SelectionToolbar(props: Props) {
         return;
       }
 
+      setIsEditingImgUrl(false);
+
       const { dispatch } = view;
       dispatch(
         view.state.tr.setSelection(new TextSelection(view.state.doc.resolve(0)))
@@ -154,7 +109,7 @@ export default function SelectionToolbar(props: Props) {
     return () => {
       window.removeEventListener("mouseup", handleClickOutside);
     };
-  }, [isActive, previousIsActive, readOnly, view]);
+  }, [isActive, readOnly, view]);
 
   const handleOnSelectLink = ({
     href,
@@ -176,14 +131,14 @@ export default function SelectionToolbar(props: Props) {
     );
   };
 
-  const { isTemplate, rtl, canComment, canUpdate, ...rest } = props;
-  const { state } = view;
-  const { selection } = state;
-
   if (isDragging) {
     return null;
   }
 
+  const { isTemplate, rtl, canComment, canUpdate, ...rest } = props;
+  const { state } = view;
+  const { selection } = state;
+
   const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
   const colIndex = getColumnIndex(state);
   const rowIndex = getRowIndex(state);
@@ -205,19 +160,22 @@ export default function SelectionToolbar(props: Props) {
     items = getCodeMenuItems(state, readOnly, dictionary);
     align = "end";
   } else if (isTableSelected(state)) {
-    items = readOnly ? [] : getTableMenuItems(state, dictionary);
+    items = getTableMenuItems(state, readOnly, dictionary);
   } else if (colIndex !== undefined) {
-    items = readOnly
-      ? []
-      : getTableColMenuItems(state, colIndex, rtl, dictionary);
+    items = getTableColMenuItems(state, readOnly, dictionary, {
+      index: colIndex,
+      rtl,
+    });
   } else if (rowIndex !== undefined) {
-    items = readOnly ? [] : getTableRowMenuItems(state, rowIndex, dictionary);
+    items = getTableRowMenuItems(state, readOnly, dictionary, {
+      index: rowIndex,
+    });
   } else if (isImageSelection) {
-    items = readOnly ? [] : getImageMenuItems(state, dictionary);
+    items = getImageMenuItems(state, readOnly, dictionary);
   } else if (isAttachmentSelection) {
-    items = readOnly ? [] : getAttachmentMenuItems(state, dictionary);
+    items = getAttachmentMenuItems(state, readOnly, dictionary);
   } else if (isDividerSelection) {
-    items = getDividerMenuItems(state, dictionary);
+    items = getDividerMenuItems(state, readOnly, dictionary);
   } else if (readOnly) {
     items = getReadOnlyMenuItems(state, !!canUpdate, dictionary);
   } else if (isNoticeSelection && selection.empty) {
@@ -252,6 +210,9 @@ export default function SelectionToolbar(props: Props) {
   const showLinkToolbar =
     link && link.from === selection.from && link.to === selection.to;
 
+  const isEditingMedia =
+    isEmbedSelection || (isImageSelection && isEditingImgUrl);
+
   return (
     <FloatingToolbar
       align={align}
@@ -270,15 +231,22 @@ export default function SelectionToolbar(props: Props) {
           onClickLink={props.onClickLink}
           onSelectLink={handleOnSelectLink}
         />
-      ) : isEmbedSelection ? (
-        <EmbedLinkEditor
+      ) : isEditingMedia ? (
+        <MediaLinkEditor
           key={`embed-${selection.from}`}
-          node={(selection as NodeSelection).node}
+          node={selection.node}
           view={view}
           dictionary={dictionary}
+          autoFocus={isEditingImgUrl}
         />
       ) : (
-        <ToolbarMenu items={items} {...rest} />
+        <ToolbarMenu
+          items={items}
+          {...rest}
+          handlers={{
+            editImageUrl: () => setIsEditingImgUrl(true),
+          }}
+        />
       )}
     </FloatingToolbar>
   );

app/editor/components/SuggestionsMenu.tsx

@@ -641,6 +641,10 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                     }
                   };
 
+                  const handleOnClick = () => {
+                    handleClickItem(item);
+                  };
+
                   const currentHeading =
                     "section" in item ? item.section?.({ t }) : undefined;
 
@@ -657,7 +661,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                       >
                         {props.renderMenuItem(item as any, index, {
                           selected: index === selectedIndex,
-                          onClick: () => handleClickItem(item),
+                          onClick: handleOnClick,
                         })}
                       </ListItem>
                     </React.Fragment>

app/editor/components/SuggestionsMenuItem.tsx

@@ -92,4 +92,4 @@ const Shortcut = styled.span<{ $active?: boolean }>`
   text-align: right;
 `;
 
-export default SuggestionsMenuItem;
+export default React.memo(SuggestionsMenuItem);

app/editor/components/ToolbarMenu.tsx

@@ -20,15 +20,20 @@ import EventBoundary from "@shared/components/EventBoundary";
 
 type Props = {
   items: MenuItem[];
+  handlers?: Record<string, (...args: any[]) => void>;
 };
 
 /*
  * Renders a dropdown menu in the floating toolbar.
  */
-function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
+function ToolbarDropdown(props: {
+  active: boolean;
+  item: MenuItem;
+  handlers?: Record<string, Function>;
+}) {
   const { commands, view } = useEditor();
   const { t } = useTranslation();
-  const { item } = props;
+  const { item, handlers } = props;
   const { state } = view;
 
   const items: TMenuItem[] = useMemo(() => {
@@ -37,11 +42,19 @@ function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
         return;
       }
 
-      commands[menuItem.name](
-        typeof menuItem.attrs === "function"
-          ? menuItem.attrs(state)
-          : menuItem.attrs
-      );
+      if (commands[menuItem.name]) {
+        commands[menuItem.name](
+          typeof menuItem.attrs === "function"
+            ? menuItem.attrs(state)
+            : menuItem.attrs
+        );
+      } else if (handlers && handlers[menuItem.name]) {
+        handlers[menuItem.name](
+          typeof menuItem.attrs === "function"
+            ? menuItem.attrs(state)
+            : menuItem.attrs
+        );
+      }
     };
 
     return item.children
@@ -128,6 +141,7 @@ function ToolbarMenu(props: Props) {
                   <MediaDimension key={index} />
                 ) : item.children ? (
                   <ToolbarDropdown
+                    handlers={props.handlers}
                     active={isActive && !item.label}
                     item={item}
                   />

app/editor/extensions/ClipboardTextSerializer.ts

@@ -1,6 +1,5 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import Extension from "@shared/editor/lib/Extension";
-import { isList } from "@shared/editor/queries/isList";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 
 /**
@@ -19,33 +18,32 @@ export default class ClipboardTextSerializer extends Extension {
       new Plugin({
         key: new PluginKey("clipboardTextSerializer"),
         props: {
-          clipboardTextSerializer: (slice, view) => {
-            const isMultiline = slice.content.childCount > 1;
+          clipboardTextSerializer: (slice) => {
+            // Check if the only node is a code block
+            const isSingleCodeBlock =
+              slice.content.childCount === 1 &&
+              (slice.content.firstChild?.type.name === "code_block" ||
+                slice.content.firstChild?.type.name === "code_fence");
 
-            // This is a cheap way to determine if the content is "complex",
-            // aka it has multiple marks or formatting. In which case we'll use
-            // markdown formatting
-            const hasMultipleListItems = slice.content.content
-              .filter((node) => node.content.content.length > 1)
-              .some((node) => isList(node, view.state.schema));
-            const hasMultipleBlockTypes =
-              [
-                ...new Set(
-                  slice.content.content
-                    .filter((node) => node.content.content.length > 1)
-                    .map((node) => node.type.name)
-                ),
-              ].length > 1;
-            const copyAsMarkdown =
-              isMultiline || hasMultipleBlockTypes || hasMultipleListItems;
+            // Check if the only mark is a code mark
+            const marks = new Set<string>();
+            slice.content.descendants((node) => {
+              node.marks.forEach((mark) => marks.add(mark.type.name));
+            });
+            const hasOnlyCodeMark =
+              marks.size === 1 && marks.has("code_inline");
+            
 
-            return copyAsMarkdown
-              ? mdSerializer.serialize(slice.content, {
-                  softBreak: true,
-                })
-              : slice.content.content
+            // Use plain text serializer only for code-only content
+            const usePlainText = isSingleCodeBlock || hasOnlyCodeMark;
+
+            return usePlainText
+              ? slice.content.content
                   .map((node) => ProsemirrorHelper.toPlainText(node))
-                  .join("");
+                  .join("")
+              : mdSerializer.serialize(slice.content, {
+                  softBreak: true,
+                });
           },
         },
       }),

app/editor/extensions/PasteHandler.tsx

@@ -1,4 +1,5 @@
 import { action, observable } from "mobx";
+import { v4 as uuidv4 } from "uuid";
 import { toggleMark } from "prosemirror-commands";
 import { Node, Slice } from "prosemirror-model";
 import {
@@ -143,7 +144,7 @@ export default class PasteHandler extends Extension {
                                   type: MentionType.Document,
                                   modelId: document.id,
                                   label: document.titleWithDefault,
-                                  id: crypto.randomUUID(),
+                                  id: uuidv4(),
                                 })
                               )
                             );
@@ -188,7 +189,7 @@ export default class PasteHandler extends Extension {
                                   type: MentionType.Collection,
                                   modelId: collection.id,
                                   label: collection.name,
-                                  id: crypto.randomUUID(),
+                                  id: uuidv4(),
                                 })
                               )
                             );

app/editor/extensions/SelectionToolbar.tsx

@@ -0,0 +1,116 @@
+import some from "lodash/some";
+import { action, observable } from "mobx";
+import {
+  EditorState,
+  NodeSelection,
+  Selection,
+  Plugin,
+  TextSelection,
+} from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import Extension, { WidgetProps } from "@shared/editor/lib/Extension";
+import { isInNotice } from "@shared/editor/queries/isInNotice";
+import { isMarkActive } from "@shared/editor/queries/isMarkActive";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
+import { SelectionToolbar } from "../components/SelectionToolbar";
+
+export default class SelectionToolbarExtension extends Extension {
+  get name() {
+    return "selection-toolbar";
+  }
+
+  get allowInReadOnly() {
+    return true;
+  }
+
+  get plugins(): Plugin[] {
+    return [
+      new Plugin({
+        view: () => ({
+          update: this.handleUpdate,
+        }),
+      }),
+    ];
+  }
+
+  @observable
+  state: Selection | boolean = false;
+
+  private handleUpdate = action((view: EditorView) => {
+    const { state } = view;
+    this.state = this.calculateState(state);
+  });
+
+  private calculateState(state: EditorState): Selection | boolean {
+    const { selection, doc, schema } = state;
+
+    if (isMarkActive(schema.marks.link)(state)) {
+      return selection;
+    }
+
+    if (
+      (isNodeActive(schema.nodes.code_block)(state) ||
+        isNodeActive(schema.nodes.code_fence)(state)) &&
+      selection.from > 0
+    ) {
+      return selection;
+    }
+
+    if (isInNotice(state) && selection.from > 0) {
+      return selection;
+    }
+
+    if (!selection || selection.empty) {
+      return false;
+    }
+
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type.name === "hr"
+    ) {
+      return selection;
+    }
+
+    if (
+      selection instanceof NodeSelection &&
+      ["image", "attachment", "embed"].includes(selection.node.type.name)
+    ) {
+      return selection;
+    }
+
+    if (selection instanceof NodeSelection) {
+      return false;
+    }
+
+    const selectionText = doc.cut(selection.from, selection.to).textContent;
+    if (selection instanceof TextSelection && !selectionText) {
+      return false;
+    }
+
+    const slice = selection.content();
+    const fragment = slice.content;
+    const nodes = (fragment as any).content;
+
+    if (some(nodes, (n) => n.content.size)) {
+      return selection;
+    }
+
+    return false;
+  }
+
+  widget = (props: WidgetProps) => {
+    const editorProps = this.editor.props;
+
+    return (
+      <SelectionToolbar
+        {...props}
+        isActive={!!this.state}
+        selection={this.state ? (this.state as Selection) : undefined}
+        canUpdate={editorProps.canUpdate}
+        canComment={editorProps.canComment}
+        isTemplate={editorProps.template === true}
+        onClickLink={editorProps.onClickLink}
+      />
+    );
+  };
+}

app/editor/extensions/SmartText.ts

@@ -3,7 +3,7 @@ import { InputRule } from "@shared/editor/lib/InputRule";
 
 const rightArrow = new InputRule(/->$/, "→");
 // Note that the suppression of pipe here prevents conflict with table creation rule.
-const emdash = new InputRule(/(?:^|[^\|])(--)$/, "—");
+const emdash = new InputRule(/(?:^|[^\|])(--\s)$/, "— ");
 const oneHalf = new InputRule(/(?:^|\s)(1\/2)$/, "½");
 const threeQuarters = new InputRule(/(?:^|\s)(3\/4)$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");

app/editor/extensions/index.ts

@@ -10,6 +10,7 @@ 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 SelectionToolbarExtension from "~/editor/extensions/SelectionToolbar";
 import SmartText from "~/editor/extensions/SmartText";
 
 type Nodes = (typeof Node | typeof Mark | typeof Extension)[];
@@ -24,6 +25,7 @@ export const withUIExtensions = (nodes: Nodes) => [
   MentionMenuExtension,
   FindAndReplaceExtension,
   HoverPreviewsExtension,
+  SelectionToolbarExtension,
   // Order these default key handlers last
   PreventTab,
   Keys,

app/editor/index.tsx

@@ -52,15 +52,16 @@ import Logger from "~/utils/Logger";
 import ComponentView from "./components/ComponentView";
 import EditorContext from "./components/EditorContext";
 import { NodeViewRenderer } from "./components/NodeViewRenderer";
-import SelectionToolbar from "./components/SelectionToolbar";
+
 import WithTheme from "./components/WithTheme";
 import isNull from "lodash/isNull";
-import { map } from "lodash";
+import { isArray, map } from "lodash";
 import {
   LightboxImage,
   LightboxImageFactory,
 } from "@shared/editor/lib/Lightbox";
 import Lightbox from "~/components/Lightbox";
+import { anchorPlugin } from "@shared/editor/plugins/anchorPlugin";
 
 export type Props = {
   /** An optional identifier for the editor context. It is used to persist local settings */
@@ -150,8 +151,6 @@ type State = {
   isRTL: boolean;
   /** If the editor is currently focused */
   isEditorFocused: boolean;
-  /** If the toolbar for a text selection is visible */
-  selectionToolbarOpen: boolean;
   /** Image that's being currently viewed in Lightbox */
   activeLightboxImage: LightboxImage | null;
 };
@@ -182,7 +181,6 @@ export class Editor extends React.PureComponent<
   state: State = {
     isRTL: false,
     isEditorFocused: false,
-    selectionToolbarOpen: false,
     activeLightboxImage: null,
   };
 
@@ -270,19 +268,12 @@ export class Editor extends React.PureComponent<
       this.calculateDir();
     }
 
-    if (
-      !this.isBlurred &&
-      !this.state.isEditorFocused &&
-      !this.state.selectionToolbarOpen
-    ) {
+    if (!this.isBlurred && !this.state.isEditorFocused) {
       this.isBlurred = true;
       this.props.onBlur?.();
     }
 
-    if (
-      this.isBlurred &&
-      (this.state.isEditorFocused || this.state.selectionToolbarOpen)
-    ) {
+    if (this.isBlurred && this.state.isEditorFocused) {
       this.isBlurred = false;
       this.props.onFocus?.();
     }
@@ -416,6 +407,7 @@ export class Editor extends React.PureComponent<
       plugins: [
         ...this.keymaps,
         ...this.plugins,
+        anchorPlugin(),
         dropCursor({
           color: this.props.theme.cursor,
         }),
@@ -678,19 +670,36 @@ export class Editor extends React.PureComponent<
   public removeComment = (commentId: string) => {
     const { state, dispatch } = this.view;
     const tr = state.tr;
+    let markRemoved = false;
 
     state.doc.descendants((node, pos) => {
-      if (!node.isInline) {
-        return;
+      if (markRemoved) {
+        return false;
       }
-
       const mark = node.marks.find(
         (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
       );
 
       if (mark) {
         tr.removeMark(pos, pos + node.nodeSize, mark);
+        markRemoved = true;
+        return;
       }
+
+      if (isArray(node.attrs?.marks)) {
+        const existingMarks = node.attrs.marks;
+        const updatedMarks = existingMarks.filter(
+          (mark: any) => mark.attrs.id !== commentId
+        );
+        const attrs = {
+          ...node.attrs,
+          marks: updatedMarks,
+        };
+        tr.setNodeMarkup(pos, undefined, attrs);
+        markRemoved = true;
+      }
+
+      return;
     });
 
     dispatch(tr);
@@ -699,7 +708,7 @@ export class Editor extends React.PureComponent<
   /**
    * Update all marks related to a specific comment in the document.
    *
-   * @param commentId The id of the comment to remove
+   * @param commentId The id of the comment to update
    * @param attrs The attributes to update
    */
   public updateComment = (
@@ -708,10 +717,11 @@ export class Editor extends React.PureComponent<
   ) => {
     const { state, dispatch } = this.view;
     const tr = state.tr;
+    let markUpdated = false;
 
     state.doc.descendants((node, pos) => {
-      if (!node.isInline) {
-        return;
+      if (markUpdated) {
+        return false;
       }
 
       const mark = node.marks.find(
@@ -725,9 +735,27 @@ export class Editor extends React.PureComponent<
           ...mark.attrs,
           ...attrs,
         });
-
         tr.removeMark(from, to, mark).addMark(from, to, newMark);
+        markUpdated = true;
+        return;
       }
+
+      if (isArray(node.attrs?.marks)) {
+        const existingMarks = node.attrs.marks;
+        const updatedMarks = existingMarks.map((mark: any) =>
+          mark.type === "comment" && mark.attrs.id === commentId
+            ? { ...mark, attrs: { ...mark.attrs, ...attrs } }
+            : mark
+        );
+        const newAttrs = {
+          ...node.attrs,
+          marks: updatedMarks,
+        };
+        tr.setNodeMarkup(pos, undefined, newAttrs);
+        markUpdated = true;
+      }
+
+      return;
     });
 
     dispatch(tr);
@@ -791,23 +819,6 @@ export class Editor extends React.PureComponent<
     return false;
   };
 
-  private handleOpenSelectionToolbar = () => {
-    this.setState((state) => ({
-      ...state,
-      selectionToolbarOpen: true,
-    }));
-  };
-
-  private handleCloseSelectionToolbar = () => {
-    if (!this.state.selectionToolbarOpen) {
-      return;
-    }
-    this.setState((state) => ({
-      ...state,
-      selectionToolbarOpen: false,
-    }));
-  };
-
   public render() {
     const { readOnly, canUpdate, grow, style, className, onKeyDown } =
       this.props;
@@ -837,18 +848,7 @@ export class Editor extends React.PureComponent<
               ref={this.elementRef}
               lang=""
             />
-            {this.view && (
-              <SelectionToolbar
-                rtl={isRTL}
-                readOnly={readOnly}
-                canUpdate={this.props.canUpdate}
-                canComment={this.props.canComment}
-                isTemplate={this.props.template === true}
-                onOpen={this.handleOpenSelectionToolbar}
-                onClose={this.handleCloseSelectionToolbar}
-                onClickLink={this.props.onClickLink}
-              />
-            )}
+
             {this.widgets &&
               Object.values(this.widgets).map((Widget, index) => (
                 <Widget key={String(index)} rtl={isRTL} readOnly={readOnly} />
@@ -880,10 +880,15 @@ const EditorContainer = styled(Styles)<{
   ${(props) =>
     props.focusedCommentId &&
     css`
-      #comment-${props.focusedCommentId} {
+      span#comment-${props.focusedCommentId} {
         background: ${transparentize(0.5, props.theme.brand.marine)};
         border-bottom: 2px solid ${props.theme.commentMarkBackground};
       }
+      a#comment-${props.focusedCommentId}
+        ~ span.component-image
+        div.image-wrapper {
+        outline: ${props.theme.commentMarkBackground} solid 2px;
+      }
     `}
 
   ${(props) =>

app/editor/menus/attachment.tsx

@@ -5,8 +5,12 @@ import { Dictionary } from "~/hooks/useDictionary";
 
 export default function attachmentMenuItems(
   state: EditorState,
+  readOnly: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
+  if (readOnly) {
+    return [];
+  }
   return [
     {
       name: "replaceAttachment",

app/editor/menus/divider.tsx

@@ -6,8 +6,12 @@ import { Dictionary } from "~/hooks/useDictionary";
 
 export default function dividerMenuItems(
   state: EditorState,
+  readOnly: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
+  if (readOnly) {
+    return [];
+  }
   const { schema } = state;
 
   return [

app/editor/menus/image.tsx

@@ -6,16 +6,22 @@ import {
   AlignImageRightIcon,
   AlignImageCenterIcon,
   AlignFullWidthIcon,
+  CommentIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
+import { metaDisplay } from "@shared/utils/keyboard";
 
 export default function imageMenuItems(
   state: EditorState,
+  readOnly: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
+  if (readOnly) {
+    return [];
+  }
   const { schema } = state;
   const isLeftAligned = isNodeActive(schema.nodes.image, {
     layoutClass: "left-50",
@@ -75,14 +81,32 @@ export default function imageMenuItems(
       visible: !!fetch,
     },
     {
-      name: "replaceImage",
       tooltip: dictionary.replaceImage,
       icon: <ReplaceIcon />,
+      children: [
+        {
+          name: "replaceImage",
+          label: dictionary.uploadImage,
+        },
+        {
+          name: "editImageUrl",
+          label: dictionary.editImageUrl,
+        },
+      ],
     },
     {
       name: "deleteImage",
       tooltip: dictionary.deleteImage,
       icon: <TrashIcon />,
     },
+    {
+      name: "separator",
+    },
+    {
+      name: "commentOnImage",
+      tooltip: dictionary.comment,
+      shortcut: `${metaDisplay}+⌥+M`,
+      icon: <CommentIcon />,
+    },
   ];
 }

app/editor/menus/table.tsx

@@ -6,8 +6,12 @@ import { Dictionary } from "~/hooks/useDictionary";
 
 export default function tableMenuItems(
   state: EditorState,
+  readOnly: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
+  if (readOnly) {
+    return [];
+  }
   const { schema } = state;
   const isFullWidth = isNodeActive(schema.nodes.table, {
     layout: TableLayout.fullWidth,

app/editor/menus/tableCol.tsx

@@ -25,10 +25,18 @@ import { ArrowLeftIcon, ArrowRightIcon } from "~/components/Icons/ArrowIcon";
 
 export default function tableColMenuItems(
   state: EditorState,
-  index: number,
-  rtl: boolean,
-  dictionary: Dictionary
+  readOnly: boolean,
+  dictionary: Dictionary,
+  options: {
+    index: number;
+    rtl: boolean;
+  }
 ): MenuItem[] {
+  if (readOnly) {
+    return [];
+  }
+
+  const { index, rtl } = options;
   const { schema, selection } = state;
 
   if (!(selection instanceof CellSelection)) {

app/editor/menus/tableRow.tsx

@@ -19,9 +19,17 @@ import { ArrowDownIcon, ArrowUpIcon } from "~/components/Icons/ArrowIcon";
 
 export default function tableRowMenuItems(
   state: EditorState,
-  index: number,
-  dictionary: Dictionary
+  readOnly: boolean,
+  dictionary: Dictionary,
+  options: {
+    index: number;
+  }
 ): MenuItem[] {
+  if (readOnly) {
+    return [];
+  }
+
+  const { index } = options;
   const { selection } = state;
 
   if (!(selection instanceof CellSelection)) {

app/hooks/useDictionary.ts

@@ -32,6 +32,7 @@ export default function useDictionary() {
       comment: t("Comment"),
       copy: t("Copy"),
       createLink: t("Create link"),
+      editImageUrl: t("Edit image URL"),
       createLinkError: t("Sorry, an error occurred creating the link"),
       createNewDoc: t("Create a new doc"),
       createNewChildDoc: t("Create a new child doc"),
@@ -108,6 +109,7 @@ export default function useDictionary() {
       untitled: t("Untitled"),
       none: t("None"),
       deleteEmbed: t("Delete embed"),
+      uploadImage: t("Upload an image"),
     }),
     [t]
   );

app/hooks/useMousePosition.ts

@@ -0,0 +1,29 @@
+import { useState, useMemo } from "react";
+import useEventListener from "./useEventListener";
+
+/**
+ * Mouse position as a tuple of [x, y]
+ */
+type MousePosition = [number, number];
+
+/**
+ * Hook to get the current mouse position
+ *
+ * @returns Mouse position as a tuple of [x, y]
+ */
+export const useMousePosition = () => {
+  const [mousePosition, setMousePosition] = useState<MousePosition>([0, 0]);
+
+  const updateMousePosition = useMemo(
+    () => (ev: MouseEvent) => {
+      setMousePosition([ev.clientX, ev.clientY]);
+    },
+    []
+  );
+
+  useEventListener("mousemove", updateMousePosition, undefined, {
+    passive: true,
+  });
+
+  return mousePosition;
+};

app/hooks/usePaginatedRequest.ts

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import { PaginationParams } from "~/types";
 import useRequest from "./useRequest";
 
-type RequestResponse<T> = {
+export type RequestResponse<T> = {
   /** The return value of the paginated request function. */
   data: T[] | undefined;
   /** The request error, if any. */

app/models/Collection.ts

@@ -1,5 +1,5 @@
 import invariant from "invariant";
-import { action, computed, observable, runInAction } from "mobx";
+import { action, comparer, computed, observable, runInAction } from "mobx";
 import {
   CollectionPermission,
   FileOperationFormat,
@@ -156,7 +156,7 @@ export default class Collection extends ParanoidModel {
     return this.sort.field === "index";
   }
 
-  @computed
+  @computed({ equals: comparer.structural })
   get sortedDocuments(): NavigationNode[] | undefined {
     if (!this.documents) {
       return undefined;

app/models/Document.ts

@@ -2,7 +2,7 @@ import { addDays, differenceInDays } from "date-fns";
 import i18n, { t } from "i18next";
 import capitalize from "lodash/capitalize";
 import floor from "lodash/floor";
-import { action, autorun, computed, observable, set } from "mobx";
+import { action, autorun, comparer, computed, observable, set } from "mobx";
 import type {
   JSONObject,
   NavigationNode,
@@ -89,6 +89,11 @@ export default class Document extends ArchivableModel implements Searchable {
     return this.title;
   }
 
+  @computed
+  get searchSuppressed(): boolean {
+    return this.isDeleted || this.isArchived;
+  }
+
   /**
    * The name of the original data source, if imported.
    */
@@ -179,7 +184,7 @@ export default class Document extends ArchivableModel implements Searchable {
   /**
    * Parent document that this is a child of, if any.
    */
-  @Relation(() => Document, { onArchive: "cascade" })
+  @Relation(() => Document, { onArchive: "cascade", onDelete: "cascade" })
   parentDocument?: Document;
 
   @observable
@@ -647,7 +652,7 @@ export default class Document extends ArchivableModel implements Searchable {
     );
   }
 
-  @computed
+  @computed({ equals: comparer.structural })
   get asNavigationNode(): NavigationNode {
     return {
       type: NavigationNodeType.Document,

app/models/Group.ts

@@ -3,8 +3,9 @@ import GroupMembership from "./GroupMembership";
 import Model from "./base/Model";
 import Field from "./decorators/Field";
 import { GroupPermission } from "@shared/types";
+import { Searchable } from "./interfaces/Searchable";
 
-class Group extends Model {
+class Group extends Model implements Searchable {
   static modelName = "Group";
 
   @Field
@@ -17,6 +18,10 @@ class Group extends Model {
   @observable
   memberCount: number;
 
+  @Field
+  @observable
+  disableMentions: boolean;
+
   /**
    * Returns the users that are members of this group.
    */
@@ -26,6 +31,16 @@ class Group extends Model {
     return users.inGroup(this.id);
   }
 
+  @computed
+  get searchContent(): string[] {
+    return [this.name].filter(Boolean);
+  }
+
+  @computed
+  get searchSuppressed(): boolean {
+    return this.disableMentions;
+  }
+
   @computed
   get admins() {
     const { groupUsers } = this.store.rootStore;

app/models/Notification.ts

@@ -122,6 +122,9 @@ class Notification extends Model {
       case NotificationEventType.MentionedInDocument:
       case NotificationEventType.MentionedInComment:
         return t("mentioned you in");
+      case NotificationEventType.GroupMentionedInComment:
+      case NotificationEventType.GroupMentionedInDocument:
+        return t("mentioned your group in");
       case NotificationEventType.CreateComment:
         return t("left a comment on");
       case NotificationEventType.ResolveComment:
@@ -177,9 +180,11 @@ class Notification extends Model {
         return collection ? collectionPath(collection.path) : "";
       }
       case NotificationEventType.AddUserToDocument:
+      case NotificationEventType.GroupMentionedInDocument:
       case NotificationEventType.MentionedInDocument: {
         return this.document?.path;
       }
+      case NotificationEventType.GroupMentionedInComment:
       case NotificationEventType.MentionedInComment:
       case NotificationEventType.ResolveComment:
       case NotificationEventType.CreateComment:

app/models/Share.ts

@@ -105,6 +105,11 @@ class Share extends Model implements Searchable {
     return [this.title];
   }
 
+  @computed
+  get searchSuppressed(): boolean {
+    return false;
+  }
+
   @computed
   get sharedCache() {
     return (

app/models/User.ts

@@ -68,6 +68,11 @@ class User extends ParanoidModel implements Searchable {
     return [this.name, this.email].filter(Boolean);
   }
 
+  @computed
+  get searchSuppressed(): boolean {
+    return this.isDeleted;
+  }
+
   @computed
   get initial(): string {
     return (this.name ? this.name[0] : "?").toUpperCase();

app/models/base/Model.ts

@@ -1,11 +1,12 @@
 import pick from "lodash/pick";
-import { observable, action } from "mobx";
+import { observable, action, toJS } from "mobx";
 import { JSONObject } from "@shared/types";
 import type Store from "~/stores/base/Store";
 import Logger from "~/utils/Logger";
 import { getFieldsForModel } from "../decorators/Field";
 import { LifecycleManager } from "../decorators/Lifecycle";
 import { getRelationsForModelClass } from "../decorators/Relation";
+import { isEqual } from "lodash";
 
 export default abstract class Model {
   static modelName: string;
@@ -147,6 +148,10 @@ export default abstract class Model {
           continue;
         }
         // @ts-expect-error TODO
+        if (isEqual(toJS(this[key]), data[key])) {
+          continue;
+        }
+        // @ts-expect-error TODO
         this[key] = data[key];
       } catch (error) {
         Logger.warn(`Error setting ${key} on model`, error);

app/models/interfaces/Searchable.ts

@@ -4,4 +4,6 @@
 export interface Searchable {
   /** The content to be used for search */
   get searchContent(): string | string[];
+
+  get searchSuppressed(): boolean;
 }

app/scenes/Collection/components/Overview.tsx

@@ -13,6 +13,7 @@ import Document from "~/models/Document";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import Text from "~/components/Text";
+import { MeasuredContainer } from "~/components/MeasuredContainer";
 import { withUIExtensions } from "~/editor/extensions";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
@@ -81,20 +82,22 @@ function Overview({ collection, shareId }: Props) {
       {collections.isSaving && <LoadingIndicator />}
       {(collection.hasDescription || can.update) && (
         <Suspense fallback={<Placeholder>Loading…</Placeholder>}>
-          <Editor
-            defaultValue={collection.data}
-            onChange={handleSave}
-            placeholder={`${t("Add a description")}…`}
-            extensions={extensions}
-            maxLength={CollectionValidation.maxDescriptionLength}
-            onCreateLink={onCreateLink}
-            canUpdate={can.update}
-            readOnly={!can.update || !!shareId}
-            userId={user?.id}
-            editorStyle={editorStyle}
-            shareId={shareId}
-          />
-          <div ref={childRef} />
+          <MeasuredContainer name="document">
+            <Editor
+              defaultValue={collection.data}
+              onChange={handleSave}
+              placeholder={`${t("Add a description")}…`}
+              extensions={extensions}
+              maxLength={CollectionValidation.maxDescriptionLength}
+              onCreateLink={onCreateLink}
+              canUpdate={can.update}
+              readOnly={!can.update || !!shareId}
+              userId={user?.id}
+              editorStyle={editorStyle}
+              shareId={shareId}
+            />
+            <div ref={childRef} />
+          </MeasuredContainer>
         </Suspense>
       )}
     </>

app/scenes/Document/components/CommentForm.tsx

@@ -1,4 +1,5 @@
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { v4 as uuidv4 } from "uuid";
 import { m } from "framer-motion";
 import { action } from "mobx";
 import { observer } from "mobx-react";
@@ -160,7 +161,7 @@ function CommentForm({
       comments
     );
 
-    comment.id = crypto.randomUUID();
+    comment.id = uuidv4();
     comments.add(comment);
 
     comment

app/scenes/Document/components/Document.tsx

@@ -41,6 +41,7 @@ import PlaceholderDocument from "~/components/PlaceholderDocument";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import { SidebarContextType } from "~/components/Sidebar/components/SidebarContext";
 import withStores from "~/components/withStores";
+import { MeasuredContainer } from "~/components/MeasuredContainer";
 import type { Editor as TEditor } from "~/editor";
 import { Properties } from "~/types";
 import { client } from "~/utils/ApiClient";
@@ -54,7 +55,6 @@ import Container from "./Container";
 import Contents from "./Contents";
 import Editor from "./Editor";
 import Header from "./Header";
-import { MeasuredContainer } from "./MeasuredContainer";
 import Notices from "./Notices";
 import PublicReferences from "./PublicReferences";
 import References from "./References";
@@ -417,6 +417,18 @@ class DocumentScene extends React.Component<Props> {
     void this.onSave();
   });
 
+  handleSelectTemplate = async (template: Document | Revision) => {
+    const doc = this.editor.current?.view.state.doc;
+    if (!doc) {
+      return;
+    }
+
+    return this.replaceSelection(
+      template,
+      ProsemirrorHelper.isEmpty(doc) ? new AllSelection(doc) : undefined
+    );
+  };
+
   goBack = () => {
     if (!this.props.readOnly) {
       this.props.history.push({
@@ -533,7 +545,7 @@ class DocumentScene extends React.Component<Props> {
               }
               savingIsDisabled={document.isSaving || this.isEmpty}
               sharedTree={this.props.sharedTree}
-              onSelectTemplate={this.replaceSelection}
+              onSelectTemplate={this.handleSelectTemplate}
               onSave={this.onSave}
             />
             <Main

app/scenes/Invite.tsx

@@ -58,7 +58,9 @@ function Invite({ onSubmit }: Props) {
         onSubmit();
 
         if (response.length > 0) {
-          toast.success(t("We sent out your invites!"));
+          toast.success(
+            t("{{ count }} invites sent", { count: response.length })
+          );
         } else {
           toast.message(t("Those email addresses are already invited"));
         }
@@ -223,6 +225,8 @@ function Invite({ onSubmit }: Props) {
                   labelHidden={index !== 0}
                   onKeyDown={handleKeyDown}
                   onChange={(ev) => handleChange(ev, index)}
+                  autoComplete="off"
+                  data-1p-ignore
                   value={invite.name}
                   required={!!invite.email}
                   flex

app/scenes/Login/Login.tsx

@@ -56,6 +56,7 @@ function Login({ children, onBack }: Props) {
   const location = useLocation();
   const query = useQuery();
   const notice = query.get("notice");
+  const forceOTP = query.get("forceOTP");
 
   const { t } = useTranslation();
   const user = useCurrentUser({ rejectOnEmpty: false });
@@ -206,7 +207,7 @@ function Login({ children, onBack }: Props) {
     (provider) => provider.id === auth.lastSignedIn && !isCreate
   );
   const clientType = Desktop.isElectron() ? Client.Desktop : Client.Web;
-  const preferOTP = isPWA;
+  const preferOTP = isPWA || !!forceOTP;
 
   if (firstRun) {
     return (
@@ -324,6 +325,7 @@ function Login({ children, onBack }: Props) {
             <AuthenticationProvider
               isCreate={isCreate}
               onEmailSuccess={handleEmailSuccess}
+              preferOTP={preferOTP}
               {...defaultProvider}
             />
             {hasMultipleProviders && (
@@ -348,6 +350,7 @@ function Login({ children, onBack }: Props) {
               key={provider.id}
               isCreate={isCreate}
               onEmailSuccess={handleEmailSuccess}
+              preferOTP={preferOTP}
               neutral={defaultProvider && hasMultipleProviders}
               {...provider}
             />

app/scenes/Login/components/AuthenticationProvider.tsx

@@ -3,7 +3,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Client } from "@shared/types";
-import { isPWA } from "@shared/utils/browser";
 import ButtonLarge from "~/components/ButtonLarge";
 import InputLarge from "~/components/InputLarge";
 import PluginIcon from "~/components/PluginIcon";
@@ -17,6 +16,7 @@ type Props = React.ComponentProps<typeof ButtonLarge> & {
   authUrl: string;
   isCreate: boolean;
   onEmailSuccess: (email: string) => void;
+  preferOTP: boolean;
 };
 
 type AuthState = "initial" | "email" | "code";
@@ -28,7 +28,6 @@ function AuthenticationProvider(props: Props) {
   const [email, setEmail] = React.useState("");
   const { isCreate, id, name, authUrl, onEmailSuccess, ...rest } = props;
   const clientType = Desktop.isElectron() ? Client.Desktop : Client.Web;
-  const preferOTP = isPWA;
 
   const handleChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
@@ -46,7 +45,7 @@ function AuthenticationProvider(props: Props) {
         const response = await client.post(event.currentTarget.action, {
           email,
           client: clientType,
-          preferOTP,
+          preferOTP: props.preferOTP,
         });
 
         if (response.redirect) {

app/scenes/Search/Search.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import { v4 as uuidv4 } from "uuid";
 import queryString from "query-string";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -104,7 +105,7 @@ function Search() {
     // without a flash of loading.
     if (query) {
       searches.add({
-        id: crypto.randomUUID(),
+        id: uuidv4(),
         query,
         createdAt: new Date().toISOString(),
       });

app/scenes/Settings/Notifications.tsx

@@ -13,6 +13,7 @@ import {
   SmileyIcon,
   StarredIcon,
   UserIcon,
+  GroupIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
@@ -70,6 +71,14 @@ function Notifications() {
         "Receive a notification when someone mentions you in a document or comment"
       ),
     },
+    {
+      event: NotificationEventType.GroupMentionedInDocument,
+      icon: <GroupIcon />,
+      title: t("Group mentions"),
+      description: t(
+        "Receive a notification when someone mentions a group you are a member of in a document or comment"
+      ),
+    },
     {
       event: NotificationEventType.ResolveComment,
       icon: <DoneIcon />,

app/scenes/Settings/components/GroupDialogs.tsx

@@ -29,6 +29,7 @@ import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelec
 import { GroupPermission } from "@shared/types";
 import { EmptySelectValue, Permission } from "~/types";
 import GroupUser from "~/models/GroupUser";
+import Switch from "~/components/Switch";
 
 type Props = {
   group: Group;
@@ -103,6 +104,9 @@ export function CreateGroupDialog() {
 export function EditGroupDialog({ group, onSubmit }: Props) {
   const { t } = useTranslation();
   const [name, setName] = React.useState(group.name);
+  const [disableMentions, setDisableMentions] = React.useState(
+    group.disableMentions || false
+  );
   const [isSaving, setIsSaving] = React.useState(false);
   const handleSubmit = React.useCallback(
     async (ev: React.SyntheticEvent) => {
@@ -112,6 +116,7 @@ export function EditGroupDialog({ group, onSubmit }: Props) {
       try {
         await group.save({
           name,
+          disableMentions,
         });
         onSubmit();
       } catch (err) {
@@ -120,7 +125,7 @@ export function EditGroupDialog({ group, onSubmit }: Props) {
         setIsSaving(false);
       }
     },
-    [group, onSubmit, name]
+    [group, onSubmit, name, disableMentions]
   );
 
   const handleNameChange = React.useCallback(
@@ -138,7 +143,7 @@ export function EditGroupDialog({ group, onSubmit }: Props) {
           often might confuse your team mates.
         </Trans>
       </Text>
-      <Flex>
+      <Flex column>
         <Input
           type="text"
           label={t("Name")}
@@ -148,6 +153,15 @@ export function EditGroupDialog({ group, onSubmit }: Props) {
           autoFocus
           flex
         />
+        <Switch
+          id="mentions"
+          label={t("Disable mentions")}
+          note={t(
+            "Prevent this group from being mentionable in documents or comments"
+          )}
+          checked={disableMentions}
+          onChange={setDisableMentions}
+        />
       </Flex>
 
       <Button type="submit" disabled={isSaving || !name}>

app/stores/CollectionsStore.ts

@@ -247,9 +247,9 @@ export default class CollectionsStore extends Store<Collection> {
     await this.rootStore.documents.fetchRecentlyViewed();
   }
 
-  export = (format: FileOperationFormat, includeAttachments: boolean) =>
-    client.post("/collections.export_all", {
-      format,
-      includeAttachments,
-    });
+  export = (options: {
+    format: FileOperationFormat;
+    includeAttachments: boolean;
+    includePrivate: boolean;
+  }) => client.post("/collections.export_all", options);
 }

app/stores/DialogsStore.ts

@@ -1,4 +1,5 @@
 import { observable, action } from "mobx";
+import { v4 as uuidv4 } from "uuid";
 import * as React from "react";
 
 type DialogDefinition = {
@@ -6,6 +7,8 @@ type DialogDefinition = {
   content: React.ReactNode;
   isOpen: boolean;
   style?: React.CSSProperties;
+  width?: number | string;
+  height?: number | string;
   onClose?: () => void;
 };
 
@@ -48,14 +51,12 @@ export default class DialogsStore {
     content,
     replace,
     style,
+    width,
+    height,
     onClose,
-  }: {
+  }: Omit<DialogDefinition, "isOpen"> & {
     id?: string;
-    title: string;
-    content: React.ReactNode;
-    style?: React.CSSProperties;
     replace?: boolean;
-    onClose?: () => void;
   }) => {
     setTimeout(
       action(() => {
@@ -65,10 +66,12 @@ export default class DialogsStore {
           this.modalStack.clear();
         }
 
-        this.modalStack.set(id ?? replaceId ?? crypto.randomUUID(), {
+        this.modalStack.set(id ?? replaceId ?? uuidv4(), {
           title,
           content,
           style,
+          width,
+          height,
           isOpen: true,
           onClose,
         });

app/stores/PinsStore.ts

@@ -37,6 +37,9 @@ export default class PinsStore extends Store<Pin> {
         documentId,
         collectionId,
       });
+      if (!res) {
+        return;
+      }
       invariant(res?.data, "Data should be available");
       return this.add(res.data);
     } catch (err) {

app/stores/SubscriptionsStore.ts

@@ -34,6 +34,9 @@ export default class SubscriptionsStore extends Store<Subscription> {
 
     try {
       const res = await client.post(`/${this.apiEndpoint}.info`, options);
+      if (!res) {
+        return;
+      }
       invariant(res?.data, "Data should be available");
       return this.add(res.data);
     } catch (err) {

app/stores/UiStore.ts

@@ -86,6 +86,9 @@ class UiStore {
   @observable
   multiplayerErrorCode?: number;
 
+  @observable
+  debugSafeArea = false;
+
   rootStore: RootStore;
 
   constructor(rootStore: RootStore) {
@@ -248,6 +251,11 @@ class UiStore {
     this.mobileSidebarVisible = false;
   };
 
+  @action
+  toggleDebugSafeArea = () => {
+    this.debugSafeArea = !this.debugSafeArea;
+  };
+
   @computed
   get readyToShow() {
     return (

app/stores/base/Store.ts

@@ -22,6 +22,7 @@ import { Searchable } from "~/models/interfaces/Searchable";
 import type { PaginationParams, PartialExcept, Properties } from "~/types";
 import { client } from "~/utils/ApiClient";
 import { AuthorizationError, NotFoundError } from "~/utils/errors";
+import ParanoidModel from "~/models/base/ParanoidModel";
 
 export enum RPCAction {
   Info = "info",
@@ -100,24 +101,13 @@ export default abstract class Store<T extends Model> {
 
     if (!normalized) {
       return this.orderedData
-        .filter((item) => {
-          if ("deletedAt" in item && item.deletedAt) {
-            return false;
-          }
-          if ("archivedAt" in item && item.archivedAt) {
-            return false;
-          }
-          return true;
-        })
+        .filter((item: T & Searchable) => !item.searchSuppressed)
         .slice(0, options?.maxResults);
     }
 
     return this.orderedData
       .filter((item: T & Searchable) => {
-        if ("deletedAt" in item && item.deletedAt) {
-          return false;
-        }
-        if ("archivedAt" in item && item.archivedAt) {
+        if (item.searchSuppressed) {
           return false;
         }
         if ("searchContent" in item) {
@@ -212,7 +202,13 @@ export default abstract class Store<T extends Model> {
     }
 
     LifecycleManager.executeHooks(model.constructor, "beforeRemove", model);
-    this.data.delete(id);
+
+    if (model instanceof ParanoidModel) {
+      model.deletedAt = new Date().toISOString();
+    } else {
+      this.data.delete(id);
+    }
+
     LifecycleManager.executeHooks(model.constructor, "afterRemove", model);
   }
 

app/typings/styled-components.d.ts

@@ -150,7 +150,6 @@ declare module "styled-components" {
     menuItemSelected: string;
     menuBackground: string;
     menuShadow: string;
-    menuBorder?: string;
     divider: string;
     titleBarDivider: string;
     inputBorder: string;

package.json

@@ -41,7 +41,7 @@
     "url": "https://github.com/sponsors/outline"
   },
   "engines": {
-    "node": "20 || 22"
+    "node": ">=20.12 <21 || 22"
   },
   "repository": {
     "type": "git",
@@ -51,18 +51,18 @@
     "> 0.25%, not dead"
   ],
   "dependencies": {
-    "@aws-sdk/client-s3": "3.908.0",
-    "@aws-sdk/lib-storage": "3.908.0",
-    "@aws-sdk/s3-presigned-post": "3.908.0",
-    "@aws-sdk/s3-request-presigner": "3.908.0",
-    "@aws-sdk/signature-v4-crt": "^3.908.0",
-    "@babel/core": "^7.28.4",
+    "@aws-sdk/client-s3": "3.917.0",
+    "@aws-sdk/lib-storage": "3.917.0",
+    "@aws-sdk/s3-presigned-post": "3.917.0",
+    "@aws-sdk/s3-request-presigner": "3.917.0",
+    "@aws-sdk/signature-v4-crt": "^3.916.0",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
-    "@babel/plugin-transform-destructuring": "^7.28.0",
+    "@babel/plugin-transform-destructuring": "^7.28.5",
     "@babel/plugin-transform-regenerator": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@benrbray/prosemirror-math": "^0.2.2",
     "@bull-board/api": "^6.7.10",
     "@bull-board/koa": "^6.13.0",
@@ -149,14 +149,14 @@
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^2.7.3",
     "invariant": "^2.2.4",
-    "ioredis": "^5.7.0",
+    "ioredis": "^5.8.2",
     "is-printable-key-event": "^1.0.0",
     "jsdom": "^22.1.0",
     "jsonwebtoken": "^9.0.0",
     "jszip": "^3.10.1",
     "katex": "^0.16.22",
     "kbar": "0.1.0-beta.48",
-    "koa": "^3.0.1",
+    "koa": "^3.0.3",
     "koa-body": "^6.0.1",
     "koa-compress": "^5.1.1",
     "koa-helmet": "^6.1.0",
@@ -181,13 +181,13 @@
     "node-fetch": "2.7.0",
     "nodemailer": "^7.0.7",
     "octokit": "^3.2.2",
-    "outline-icons": "^3.13.0",
+    "outline-icons": "^3.13.1",
     "oy-vey": "^0.12.1",
     "passport": "^0.7.0",
     "passport-google-oauth2": "^0.2.0",
     "passport-oauth2": "^1.8.0",
     "passport-slack-oauth2": "^1.2.0",
-    "patch-package": "^8.0.0",
+    "patch-package": "^8.0.1",
     "pg": "^8.16.3",
     "pg-tsquery": "^8.4.2",
     "pluralize": "^8.0.0",
@@ -262,7 +262,8 @@
     "ukkonen": "^2.2.0",
     "umzug": "^3.8.2",
     "utility-types": "^3.11.0",
-    "validator": "13.15.15",
+    "uuid": "^11.1.0",
+    "validator": "13.15.20",
     "vaul": "^1.1.2",
     "vite": "npm:rolldown-vite@latest",
     "vite-plugin-pwa": "1.0.3",
@@ -277,7 +278,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/preset-typescript": "^7.28.5",
     "@faker-js/faker": "^8.4.1",
     "@relative-ci/agent": "^4.3.1",
     "@types/addressparser": "^1.0.3",
@@ -329,7 +330,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized-auto-sizer": "^1.0.8",
     "@types/react-window": "^1.8.8",
-    "@types/readable-stream": "^4.0.21",
+    "@types/readable-stream": "^4.0.22",
     "@types/redis-info": "^3.0.3",
     "@types/refractor": "^3.4.1",
     "@types/resolve-path": "^1.4.3",
@@ -350,7 +351,7 @@
     "babel-plugin-tsconfig-paths-module-resolver": "^1.0.4",
     "browserslist-to-esbuild": "^1.2.0",
     "concurrently": "^8.2.2",
-    "discord-api-types": "^0.38.20",
+    "discord-api-types": "^0.38.30",
     "husky": "^8.0.3",
     "i18next-parser": "^8.13.0",
     "ioredis-mock": "^8.9.0",
@@ -363,7 +364,7 @@
     "oxlint-tsgolint": "^0.1.6",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.6.2",
-    "react-refresh": "^0.17.0",
+    "react-refresh": "^0.18.0",
     "rimraf": "^2.5.4",
     "rollup-plugin-webpack-stats": "2.1.6",
     "terser": "^5.43.1",
@@ -381,6 +382,6 @@
     "qs": "6.9.7",
     "prismjs": "1.30.0"
   },
-  "version": "0.87.4",
+  "version": "1.0.1",
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

plugins/email/server/auth/email.ts

@@ -72,7 +72,7 @@ router.post(
     }
 
     // Generate both a link token and a 6-digit verification code
-    const token = preferOTP ? undefined : user.getEmailSigninToken();
+    const token = preferOTP ? undefined : user.getEmailSigninToken(ctx);
     const verificationCode = preferOTP
       ? await user.getEmailVerificationCode()
       : undefined;
@@ -131,7 +131,7 @@ const emailCallback = async (ctx: APIContext<T.EmailCallbackReq>) => {
 
   try {
     if (token) {
-      user = await getUserForEmailSigninToken(token as string);
+      user = await getUserForEmailSigninToken(ctx, token as string);
     } else if (code && email) {
       user = await User.scope("withTeam").findOne({
         rejectOnEmpty: true,
@@ -150,16 +150,18 @@ const emailCallback = async (ctx: APIContext<T.EmailCallbackReq>) => {
       // Delete the code after successful verification
       await VerificationCode.delete(email);
     } else {
-      ctx.redirect("/?notice=auth-error");
+      ctx.redirect("/?notice=auth-error&description=Missing%20token");
       return;
     }
   } catch (err) {
     Logger.debug("authentication", err);
-    return ctx.redirect("/?notice=auth-error");
+    return ctx.redirect(`/?notice=auth-error&description=${err.message}`);
   }
 
   if (!user.team.emailSigninEnabled) {
-    return ctx.redirect("/?notice=auth-error");
+    return ctx.redirect(
+      "/?notice=auth-error&description=Disabled%20signin%20method"
+    );
   }
 
   if (user.isSuspended) {
@@ -195,13 +197,13 @@ const emailCallback = async (ctx: APIContext<T.EmailCallbackReq>) => {
 };
 router.get(
   "email.callback",
-  rateLimiter(RateLimiterStrategy.TenPerHour),
+  rateLimiter(RateLimiterStrategy.FivePerMinute),
   validate(T.EmailCallbackSchema),
   emailCallback
 );
 router.post(
   "email.callback",
-  rateLimiter(RateLimiterStrategy.TenPerHour),
+  rateLimiter(RateLimiterStrategy.FivePerMinute),
   validate(T.EmailCallbackSchema),
   emailCallback
 );

plugins/enterprise/client/translations.tsx

@@ -0,0 +1,76 @@
+import { Trans } from 'react-i18next';
+
+export const Translations = () => (
+  <>
+    <Trans defaults={`New attribute`} />
+    <Trans defaults={`Paper size`} />
+    <Trans defaults={`Ask AI "{{question}}"`} />
+    <Trans defaults={`Are you sure you want to delete?`} />
+    <Trans defaults={`Deleting this version of the document will permanently and irrevocably remove it from the history.`} />
+    <Trans defaults={`Format`} />
+    <Trans defaults={`Add option`} />
+    <Trans defaults={`Optional`} />
+    <Trans defaults={`Choose a size for your exported document`} />
+    <Trans defaults={`Revision renamed`} />
+    <Trans defaults={`Failed to save revision`} />
+    <Trans defaults={`Invite to document`} />
+    <Trans defaults={`Sorry, invalid embed link`} />
+    <Trans defaults={`Data Attributes`} />
+    <Trans defaults={`Edit attribute`} />
+    <Trans defaults={`Property`} />
+    <Trans defaults={`Yes`} />
+    <Trans defaults={`No`} />
+    <Trans defaults={`Search or ask a question`} />
+    <Trans defaults={`Invited {{roleName}} will not receive access to any collections or documents unless explicitly shared.`} />
+    <Trans defaults={`Can view only what is explicitly shared`} />
+    <Trans defaults={`SAML assertion was invalid or missing fields, please check your configuration`} />
+    <Trans defaults={`AI generated answer based on related documents in your workspace`} />
+    <Trans defaults={`References`} />
+    <Trans defaults={`Enable AI answers to get direct answers to searched questions.`} />
+    <Trans defaults={`Go to settings`} />
+    <Trans defaults={`Where do I find the file?`} />
+    <Trans defaults={`In a Confluence space, navigate to <em>Space Settings -> Manage space -> Export space</em> and choose to export as HTML with the "Normal Export" option.`} />
+    <Trans defaults={`Drag and drop the zip file from Confluence's HTML export option, or click to upload`} />
+    <Trans defaults={`Guests`} />
+    <Trans defaults={`New Attribute`} />
+    <Trans defaults={`Attributes allow you to define data to be stored with your documents. They can be used to store custom properties, metadata, or any other structured information that is common across documents.`} />
+    <Trans defaults={`Custom domain`} />
+    <Trans defaults={`AI answers`} />
+    <Trans defaults={`Use AI to directly answer searched questions using content in your workspace.`} />
+    <Trans defaults={`API access`} />
+    <Trans defaults={`Allow members to create API keys for programmatic access`} />
+    <Trans defaults={`Public document embedding`} />
+    <Trans defaults={`When enabled, publicly shared documents can be embedded in third-party websites`} />
+    <Trans defaults={`Include previews in emails`} />
+    <Trans defaults={`When enabled, email notifications will include content previews`} />
+    <Trans defaults={`Boolean`} />
+    <Trans defaults={`Number`} />
+    <Trans defaults={`Text`} />
+    <Trans defaults={`List`} />
+    <Trans defaults={`Could not load events`} />
+    <Trans defaults={`Audit Log`} />
+    <Trans defaults={`The audit log details the history of security related and other events across your knowledge base.`} />
+    <Trans defaults={`IP address`} />
+    <Trans defaults={`Actor`} />
+    <Trans defaults={`Event`} />
+    <Trans defaults={`Timestamp`} />
+    <Trans defaults={`IP`} />
+    <Trans defaults={`a group`} />
+    <Trans defaults={`All users`} />
+    <Trans defaults={`Private`} />
+    <Trans defaults={`View and edit`} />
+    <Trans defaults={`Sharing enabled`} />
+    <Trans defaults={`Date archived`} />
+    <Trans defaults={`Could not load collections`} />
+    <Trans defaults={`Manage the permissions and settings of all collections in the knowledge base. As a workspace admin you can also administer private collections.`} />
+    <Trans defaults={`Automatically index and search document content from {{appName}} inside <4>Glean</4> in realtime.`} />
+    <Trans defaults={`API Endpoint`} />
+    <Trans defaults={`API Secret`} />
+    <Trans defaults={`Datasource`} />
+    <Trans defaults={`Details of the current {{appName}} license. To arrange contract renewal as expiry or seat limits approach or increase licensed seats please contact your account manager or email <4>priority@getoutline.com</4>.`} />
+    <Trans defaults={`Sorry, an answer could not be found in the collection, try widening your search.`} />
+    <Trans defaults={`Sorry, an answer could not be found in the workspace, try widening your search.`} />
+    <Trans defaults={`Looking for answers`} />
+    <Trans defaults={`Answer to "{{ query }}"`} />
+  </>
+)

plugins/linear/server/linear.ts

@@ -13,6 +13,8 @@ import { UnfurlIssueOrPR, UnfurlSignature } from "@server/types";
 import { LinearUtils } from "../shared/LinearUtils";
 import env from "./env";
 import { Minute } from "@shared/utils/time";
+import { opts } from "@server/utils/i18n";
+import { t } from "i18next";
 
 const AccessTokenResponseSchema = z.object({
   access_token: z.string(),
@@ -111,18 +113,25 @@ export class Linear {
       return;
     }
 
-    const integration = (await Integration.scope("withAuthentication").findOne({
-      where: {
-        service: IntegrationService.Linear,
-        teamId: actor.teamId,
-        "settings.linear.workspace.key": resource.workspaceKey,
-      },
-    })) as Integration<IntegrationType.Embed>;
+    const integrations = (await Integration.scope("withAuthentication").findAll(
+      {
+        where: {
+          service: IntegrationService.Linear,
+          teamId: actor.teamId,
+        },
+      }
+    )) as Integration<IntegrationType.Embed>[];
 
-    if (!integration) {
+    if (integrations.length === 0) {
       return;
     }
 
+    // Prefer integration with matching workspaceKey, otherwise pick the first one
+    const integration =
+      integrations.find(
+        (int) => int.settings.linear?.workspace.key === resource.workspaceKey
+      ) ?? integrations[0];
+
     try {
       const accessToken = await integration.authentication.refreshTokenIfNeeded(
         async (refreshToken: string) => Linear.refreshToken(refreshToken),
@@ -142,7 +151,7 @@ export class Linear {
         issue.paginate(issue.labels, {}),
       ]);
 
-      if (!author || !state || !labels) {
+      if (!state || !labels) {
         return { error: "Failed to fetch auxiliary data from Linear" };
       }
 
@@ -159,8 +168,12 @@ export class Linear {
         title: issue.title,
         description: issue.description ?? null,
         author: {
-          name: author.name,
-          avatarUrl: author.avatarUrl ?? "",
+          name:
+            author?.name ??
+            issue.botActor?.userDisplayName ??
+            issue.botActor?.name ??
+            t("Unknown", opts(actor)),
+          avatarUrl: author?.avatarUrl ?? "",
         },
         labels: labels.map((label) => ({
           name: label.name,

server/commands/collectionExporter.ts

@@ -15,6 +15,7 @@ type Props = {
   user: User;
   format?: FileOperationFormat;
   includeAttachments?: boolean;
+  includePrivate?: boolean;
   ctx: APIContext;
 };
 
@@ -34,6 +35,7 @@ async function collectionExporter({
   user,
   format = FileOperationFormat.MarkdownZip,
   includeAttachments = true,
+  includePrivate = true,
   ctx,
 }: Props) {
   const collectionId = collection?.id;
@@ -52,6 +54,7 @@ async function collectionExporter({
     collectionId,
     options: {
       includeAttachments,
+      includePrivate,
     },
     userId: user.id,
     teamId: user.teamId,

server/commands/documentUpdater.ts

@@ -1,5 +1,6 @@
 import { Event, Document, User } from "@server/models";
 import { DocumentHelper } from "@server/models/helpers/DocumentHelper";
+import { TextHelper } from "@server/models/helpers/TextHelper";
 import { APIContext } from "@server/types";
 
 type Props = {
@@ -85,7 +86,13 @@ export default async function documentUpdater(
     document.insightsEnabled = insightsEnabled;
   }
   if (text !== undefined) {
-    document = DocumentHelper.applyMarkdownToDocument(document, text, append);
+    document = DocumentHelper.applyMarkdownToDocument(
+      document,
+      await TextHelper.replaceImagesWithAttachments(ctx, text, user, {
+        base64Only: true,
+      }),
+      append
+    );
   }
 
   const changed = document.changed();

server/commands/userInviter.ts

@@ -1,4 +1,5 @@
 import uniqBy from "lodash/uniqBy";
+import partition from "lodash/partition";
 import { UserRole } from "@shared/types";
 import InviteEmail from "@server/emails/templates/InviteEmail";
 import env from "@server/env";
@@ -24,6 +25,7 @@ export default async function userInviter(
   { invites }: Props
 ): Promise<{
   sent: Invite[];
+  unsent: Invite[];
   users: User[];
 }> {
   const { user } = ctx.state.auth;
@@ -61,8 +63,9 @@ export default async function userInviter(
   const existingEmails = existingUsers.map(
     (existingUser) => existingUser.email
   );
-  const filteredInvites = normalizedInvites.filter(
-    (invite) => !existingEmails.includes(invite.email)
+  const [existingInvites, filteredInvites] = partition(
+    normalizedInvites,
+    (invite) => existingEmails.includes(invite.email)
   );
   const users = [];
 
@@ -105,13 +108,14 @@ export default async function userInviter(
         "email",
         `Sign in immediately: ${
           env.URL
-        }/auth/email.callback?token=${newUser.getEmailSigninToken()}`
+        }/auth/email.callback?token=${newUser.getEmailSigninToken(ctx)}`
       );
     }
   }
 
   return {
     sent: filteredInvites,
+    unsent: existingInvites,
     users,
   };
 }