Stop writing text to revisions

* fix: Flaky test

* Migration, model interface

* Add policies to revisions

* Add revisions.update endpoint

* tests

* lint

.github/workflows/ci.yml

@@ -59,8 +59,30 @@ jobs:
     - run: yarn install --frozen-lockfile
     - run: yarn tsc
 
+  changes:
+    runs-on: ubuntu-latest
+    outputs:
+      server: ${{ steps.filter.outputs.server }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            server:
+              - 'server/**'
+              - 'shared/**'
+              - 'package.json'
+              - 'yarn.lock'
+            app:
+              - 'app/**'
+              - 'shared/**'
+              - 'package.json'
+              - 'yarn.lock'
+
   test:
     needs: build
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -75,7 +97,8 @@ jobs:
     - run: yarn test:${{ matrix.test-group }}
 
   test-server:
-    needs: build
+    needs: [build, changes]
+    if: ${{ needs.changes.outputs.server == 'true' }}
     runs-on: ubuntu-latest
     services:
       postgres:
@@ -121,6 +144,7 @@ jobs:
 
   bundle-size:
     needs: [build, types]
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
@@ -133,4 +157,7 @@ jobs:
       run: echo "NODE_ENV=production" >> $GITHUB_ENV
     - run: yarn vite:build
     - name: Send bundle stats to RelativeCI
-      run: npx relative-ci-agent
+      uses: relative-ci/agent-action@v2
+      with:
+        key: ${{ secrets.RELATIVE_CI_KEY }}
+        token: ${{ secrets.GITHUB_TOKEN }}

app/actions/definitions/collections.tsx

@@ -15,7 +15,6 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import stores from "~/stores";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
@@ -62,7 +61,7 @@ export const createCollection = createAction({
   keywords: "create",
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event }) => {
+  perform: ({ t, event, stores }) => {
     event?.preventDefault();
     event?.stopPropagation();
     stores.dialogs.openModal({
@@ -78,10 +77,10 @@ export const editCollection = createAction({
   analyticsName: "Edit collection",
   section: ActiveCollectionSection,
   icon: <EditIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ activeCollectionId, stores }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
+  perform: ({ t, activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -104,10 +103,10 @@ export const editCollectionPermissions = createAction({
   analyticsName: "Collection permissions",
   section: ActiveCollectionSection,
   icon: <PadlockIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ activeCollectionId, stores }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
+  perform: ({ t, activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -135,7 +134,7 @@ export const searchInCollection = createAction({
   analyticsName: "Search collection",
   section: ActiveCollectionSection,
   icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -160,7 +159,7 @@ export const starCollection = createAction({
   section: ActiveCollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -170,7 +169,7 @@ export const starCollection = createAction({
       stores.policies.abilities(activeCollectionId).star
     );
   },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -187,7 +186,7 @@ export const unstarCollection = createAction({
   section: ActiveCollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -197,7 +196,7 @@ export const unstarCollection = createAction({
       stores.policies.abilities(activeCollectionId).unstar
     );
   },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -339,13 +338,13 @@ export const deleteCollection = createAction({
   section: ActiveCollectionSection,
   dangerous: true,
   icon: <TrashIcon />,
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
     return stores.policies.abilities(activeCollectionId).delete;
   },
-  perform: ({ activeCollectionId, t }) => {
+  perform: ({ activeCollectionId, t, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -373,7 +372,7 @@ export const createTemplate = createAction({
   section: ActiveCollectionSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
-  visible: ({ activeCollectionId }) =>
+  visible: ({ activeCollectionId, stores }) =>
     !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).createDocument

app/actions/definitions/documents.tsx

@@ -683,6 +683,7 @@ export const searchInDocument = createAction({
   name: ({ t }) => t("Search in document"),
   analyticsName: "Search document",
   section: ActiveDocumentSection,
+  shortcut: [`Meta+/`],
   icon: <SearchIcon />,
   visible: ({ stores, activeDocumentId }) => {
     if (!activeDocumentId) {
@@ -1210,6 +1211,7 @@ export const rootDocumentActions = [
   unpublishDocument,
   subscribeDocument,
   unsubscribeDocument,
+  searchInDocument,
   duplicateDocument,
   leaveDocument,
   moveTemplateToWorkspace,

app/components/CommandBar/CommandBarItem.tsx

@@ -3,6 +3,7 @@ import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
+import { normalizeKeyDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
 import Text from "~/components/Text";
@@ -70,7 +71,7 @@ function CommandBarItem(
                 ""
               )}
               {sc.split("+").map((key) => (
-                <Key key={key}>{key}</Key>
+                <Key key={key}>{normalizeKeyDisplay(key)}</Key>
               ))}
             </React.Fragment>
           ))}

app/components/ContextMenu/MenuItem.tsx

@@ -13,6 +13,7 @@ import MenuIconWrapper from "./MenuIconWrapper";
 type Props = {
   id?: string;
   onClick?: (event: React.MouseEvent) => void | Promise<void>;
+  onPointerMove?: (event: React.MouseEvent) => void | Promise<void>;
   active?: boolean;
   selected?: boolean;
   disabled?: boolean;
@@ -31,6 +32,7 @@ type Props = {
 const MenuItem = (
   {
     onClick,
+    onPointerMove,
     children,
     active,
     selected,
@@ -90,6 +92,7 @@ const MenuItem = (
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
+      onPointerMove={disabled ? undefined : onPointerMove}
       disabled={disabled}
       hide={hide}
       {...rest}
@@ -158,6 +161,9 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
     &: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);
 

app/components/DocumentExplorer.tsx

@@ -15,7 +15,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Icon from "@shared/components/Icon";
-import { NavigationNode } from "@shared/types";
+import { NavigationNode, NavigationNodeType } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
@@ -78,6 +78,10 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   const VERTICAL_PADDING = 6;
   const HORIZONTAL_PADDING = 24;
 
+  const recentlyViewedItemIds = documents.recentlyViewed
+    .slice(0, 5)
+    .map((item) => item.id);
+
   const searchIndex = React.useMemo(
     () =>
       new FuzzySearch(items, ["title"], {
@@ -126,11 +130,18 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     return searchTerm
       ? searchIndex.search(searchTerm)
       : items
-          .filter((item) => item.type === "collection")
+          .filter((item) => recentlyViewedItemIds.includes(item.id))
+          .concat(
+            items.filter((item) => item.type === NavigationNodeType.Collection)
+          )
           .flatMap(includeDescendants);
   }
 
   const nodes = getNodes();
+  const baseDepth = nodes.reduce(
+    (min, node) => (node.depth ? Math.min(min, node.depth) : min),
+    Infinity
+  );
 
   const scrollNodeIntoView = React.useCallback(
     (node: number) => {
@@ -304,7 +315,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
           expanded={isExpanded(index)}
           icon={renderedIcon}
           title={title}
-          depth={node.depth as number}
+          depth={(node.depth ?? 0) - baseDepth}
           hasChildren={hasChildren(index)}
           ref={itemRefs[index]}
         />

app/components/DocumentExplorerNode.tsx

@@ -41,9 +41,9 @@ function DocumentExplorerNode(
 ) {
   const { t } = useTranslation();
   const OFFSET = 12;
-  const ICON_SIZE = 24;
+  const DISCLOSURE = 20;
 
-  const width = depth ? depth * ICON_SIZE + OFFSET : ICON_SIZE;
+  const width = depth ? depth * DISCLOSURE + OFFSET : DISCLOSURE;
 
   return (
     <Node

app/components/Fade.ts

@@ -1,8 +0,0 @@
-import styled from "styled-components";
-import { fadeIn } from "~/styles/animations";
-
-const Fade = styled.span<{ timing?: number | string }>`
-  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
-`;
-
-export default Fade;

app/components/Fade.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+import { fadeIn } from "~/styles/animations";
+
+const Fade = styled.span<{ timing?: number | string }>`
+  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
+`;
+
+type Props = {
+  children?: JSX.Element | null;
+  /** If true, children will be animated. */
+  animate: boolean;
+};
+
+/**
+ * Wraps children in a <Fade> if loading is true on mount.
+ */
+export const ConditionalFade = ({ animate, children }: Props) => {
+  const [isAnimated] = React.useState(animate);
+
+  return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
+};
+
+export default Fade;

app/components/Input.tsx

@@ -176,6 +176,7 @@ function Input(
     if (ev.key === "Enter" && ev.metaKey) {
       if (props.onRequestSubmit) {
         props.onRequestSubmit(ev);
+        return;
       }
     }
 
@@ -230,10 +231,11 @@ function Input(
               ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
-              onKeyDown={handleKeyDown}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
               {...rest}
+              // set it after "rest" to override "onKeyDown" from prop.
+              onKeyDown={handleKeyDown}
             />
           ) : (
             <NativeInput
@@ -243,11 +245,12 @@ function Input(
               ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
-              onKeyDown={handleKeyDown}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
               type={type}
               {...rest}
+              // set it after "rest" to override "onKeyDown" from prop.
+              onKeyDown={handleKeyDown}
             />
           )}
           {children}

app/components/Notifications/Notifications.tsx

@@ -48,6 +48,15 @@ function Notifications(
         notifications.approximateUnreadCount
       );
     }
+
+    // PWA badging
+    if ("setAppBadge" in navigator) {
+      if (notifications.approximateUnreadCount) {
+        void navigator.setAppBadge(notifications.approximateUnreadCount);
+      } else {
+        void navigator.clearAppBadge();
+      }
+    }
   }, [notifications.approximateUnreadCount]);
 
   return (

app/components/WebsocketProvider.tsx

@@ -1,11 +1,14 @@
 import invariant from "invariant";
 import find from "lodash/find";
+import isObject from "lodash/isObject";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
+import semver from "semver";
 import { io, Socket } from "socket.io-client";
 import { toast } from "sonner";
+import EDITOR_VERSION from "@shared/editor/version";
 import { FileOperationState, FileOperationType } from "@shared/types";
 import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
@@ -114,10 +117,23 @@ class WebsocketProvider extends React.Component<Props> {
       }
     });
 
-    this.socket.on("authenticated", () => {
+    this.socket.on("authenticated", (data) => {
       if (this.socket) {
         this.socket.authenticated = true;
       }
+      if (isObject(data) && "editorVersion" in data) {
+        const parsedClientVersion = semver.parse(EDITOR_VERSION);
+        const parsedCurrentVersion = semver.parse(String(data.editorVersion));
+
+        if (
+          parsedClientVersion &&
+          parsedCurrentVersion &&
+          (parsedClientVersion.major < parsedCurrentVersion.major ||
+            parsedClientVersion.minor < parsedCurrentVersion.minor)
+        ) {
+          window.location.reload();
+        }
+      }
     });
 
     this.socket.on("unauthorized", (err: Error) => {

app/editor/components/FindAndReplace.tsx

@@ -24,6 +24,54 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import Desktop from "~/utils/Desktop";
 import { useEditor } from "./EditorContext";
 
+type KeyboardShortcutsProps = {
+  popover: ReturnType<typeof usePopoverState>;
+  handleOpen: ({ withReplace }: { withReplace: boolean }) => void;
+  handleCaseSensitive: () => void;
+  handleRegex: () => void;
+};
+
+function useKeyboardShortcuts({
+  popover,
+  handleOpen,
+  handleCaseSensitive,
+  handleRegex,
+}: KeyboardShortcutsProps) {
+  // Open popover
+  useKeyDown(
+    (ev) =>
+      isModKey(ev) &&
+      ev.code === "KeyF" &&
+      // Keyboard handler is through the AppMenu on Desktop v1.2.0+
+      !(Desktop.bridge && "onFindInPage" in Desktop.bridge),
+    (ev) => {
+      ev.preventDefault();
+      handleOpen({ withReplace: ev.altKey });
+    },
+    { allowInInput: true }
+  );
+
+  // Enable/disable case sensitive search
+  useKeyDown(
+    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyC" && popover.visible,
+    (ev) => {
+      ev.preventDefault();
+      handleCaseSensitive();
+    },
+    { allowInInput: true }
+  );
+
+  // Enable/disable regex search
+  useKeyDown(
+    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyR" && popover.visible,
+    (ev) => {
+      ev.preventDefault();
+      handleRegex();
+    },
+    { allowInInput: true }
+  );
+}
+
 type Props = {
   /** Whether the find and replace popover is open */
   open: boolean;
@@ -89,42 +137,48 @@ export default function FindAndReplace({
     }
   }, [show]);
 
-  useOnClickOutside(popover.unstable_referenceRef, popover.hide);
+  // Callbacks
+  const selectInputText = React.useCallback(() => {
+    inputRef.current?.focus();
+    inputRef.current?.setSelectionRange(0, inputRef.current?.value.length);
+  }, []);
+
+  const selectInputReplaceText = React.useCallback(() => {
+    setTimeout(() => {
+      inputReplaceRef.current?.focus();
+      inputReplaceRef.current?.setSelectionRange(
+        0,
+        inputReplaceRef.current?.value.length
+      );
+    }, 100);
+  }, []);
+
+  const handleOpen = React.useCallback(
+    ({ withReplace }: { withReplace: boolean }) => {
+      const shouldShowReplace = !readOnly && withReplace;
+
+      // If already open, switch focus to corresponding input text.
+      if (popover.visible) {
+        if (shouldShowReplace) {
+          setShowReplace(true);
+          selectInputReplaceText();
+        } else {
+          selectInputText();
+        }
+
+        return;
+      }
 
-  // Keyboard shortcuts
-  useKeyDown(
-    (ev) =>
-      isModKey(ev) &&
-      !popover.visible &&
-      ev.code === "KeyF" &&
-      // Keyboard handler is through the AppMenu on Desktop v1.2.0+
-      !(Desktop.bridge && "onFindInPage" in Desktop.bridge),
-    (ev) => {
-      ev.preventDefault();
       selectionRef.current = window.getSelection()?.toString();
       popover.show();
-    }
-  );
 
-  useKeyDown(
-    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyR" && popover.visible,
-    (ev) => {
-      ev.preventDefault();
-      setRegex((state) => !state);
+      if (shouldShowReplace) {
+        setShowReplace(true);
+      }
     },
-    { allowInInput: true }
+    [popover, readOnly, selectInputText, selectInputReplaceText]
   );
 
-  useKeyDown(
-    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyC" && popover.visible,
-    (ev) => {
-      ev.preventDefault();
-      setCaseSensitive((state) => !state);
-    },
-    { allowInInput: true }
-  );
-
-  // Callbacks
   const handleMore = React.useCallback(() => {
     setShowReplace((state) => !state);
     setTimeout(() => inputReplaceRef.current?.focus(), 100);
@@ -132,68 +186,65 @@ export default function FindAndReplace({
 
   const handleCaseSensitive = React.useCallback(() => {
     setCaseSensitive((state) => {
-      const caseSensitive = !state;
+      const isCaseSensitive = !state;
 
       editor.commands.find({
         text: searchTerm,
-        caseSensitive,
+        caseSensitive: isCaseSensitive,
         regexEnabled,
       });
 
-      return caseSensitive;
+      return isCaseSensitive;
     });
   }, [regexEnabled, editor.commands, searchTerm]);
 
   const handleRegex = React.useCallback(() => {
     setRegex((state) => {
-      const regexEnabled = !state;
+      const isRegexEnabled = !state;
 
       editor.commands.find({
         text: searchTerm,
         caseSensitive,
-        regexEnabled,
+        regexEnabled: isRegexEnabled,
       });
 
-      return regexEnabled;
+      return isRegexEnabled;
     });
   }, [caseSensitive, editor.commands, searchTerm]);
 
   const handleKeyDown = React.useCallback(
     (ev: React.KeyboardEvent<HTMLInputElement>) => {
-      function nextPrevious(ev: React.KeyboardEvent<HTMLInputElement>) {
+      function nextPrevious() {
         if (ev.shiftKey) {
           editor.commands.prevSearchMatch();
         } else {
           editor.commands.nextSearchMatch();
         }
       }
-      function selectInputText() {
-        inputRef.current?.setSelectionRange(0, inputRef.current?.value.length);
-      }
 
       switch (ev.key) {
         case "Enter": {
           ev.preventDefault();
-          nextPrevious(ev);
+          nextPrevious();
           return;
         }
         case "g": {
           if (ev.metaKey) {
             ev.preventDefault();
-            nextPrevious(ev);
+            nextPrevious();
             selectInputText();
           }
           return;
         }
         case "F3": {
           ev.preventDefault();
-          nextPrevious(ev);
+          nextPrevious();
           selectInputText();
           return;
         }
       }
     },
-    [editor.commands]
+    [editor.commands, selectInputText]
   );
 
   const handleReplace = React.useCallback(
@@ -243,6 +294,15 @@ export default function FindAndReplace({
     [handleReplace]
   );
 
+  useOnClickOutside(popover.unstable_referenceRef, popover.hide);
+
+  useKeyboardShortcuts({
+    popover,
+    handleOpen,
+    handleCaseSensitive,
+    handleRegex,
+  });
+
   const style: React.CSSProperties = React.useMemo(
     () => ({
       position: "fixed",
@@ -285,7 +345,7 @@ export default function FindAndReplace({
     <>
       <Tooltip
         content={t("Previous match")}
-        shortcut="shift+enter"
+        shortcut="Shift+Enter"
         placement="bottom"
       >
         <ButtonLarge
@@ -295,7 +355,7 @@ export default function FindAndReplace({
           <CaretUpIcon />
         </ButtonLarge>
       </Tooltip>
-      <Tooltip content={t("Next match")} shortcut="enter" placement="bottom">
+      <Tooltip content={t("Next match")} shortcut="Enter" placement="bottom">
         <ButtonLarge
           disabled={disabled}
           onClick={() => editor.commands.nextSearchMatch()}
@@ -354,7 +414,11 @@ export default function FindAndReplace({
             </StyledInput>
             {navigation}
             {!readOnly && (
-              <Tooltip content={t("Replace options")} placement="bottom">
+              <Tooltip
+                content={t("Replace options")}
+                shortcut={`${altDisplay}+${metaDisplay}+f`}
+                placement="bottom"
+              >
                 <ButtonLarge onClick={handleMore}>
                   <ReplaceIcon color={theme.textSecondary} />
                 </ButtonLarge>
@@ -376,12 +440,28 @@ export default function FindAndReplace({
                   onRequestSubmit={handleReplaceAll}
                   onChange={(ev) => setReplaceTerm(ev.currentTarget.value)}
                 />
-                <Button onClick={handleReplace} disabled={disabled} neutral>
-                  {t("Replace")}
-                </Button>
-                <Button onClick={handleReplaceAll} disabled={disabled} neutral>
-                  {t("Replace all")}
-                </Button>
+                <Tooltip
+                  content={t("Replace")}
+                  shortcut="Enter"
+                  placement="bottom"
+                >
+                  <Button onClick={handleReplace} disabled={disabled} neutral>
+                    {t("Replace")}
+                  </Button>
+                </Tooltip>
+                <Tooltip
+                  content={t("Replace all")}
+                  shortcut={`${metaDisplay}+Enter`}
+                  placement="bottom"
+                >
+                  <Button
+                    onClick={handleReplaceAll}
+                    disabled={disabled}
+                    neutral
+                  >
+                    {t("Replace all")}
+                  </Button>
+                </Tooltip>
               </Flex>
             )}
           </ResizingHeightContainer>

app/editor/components/FloatingToolbar.tsx

@@ -6,7 +6,6 @@ import styled, { css } from "styled-components";
 import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
 import { depths, s } from "@shared/styles";
 import { HEADER_HEIGHT } from "~/components/Header";
 import { Portal } from "~/components/Portal";
@@ -41,7 +40,8 @@ function usePosition({
 }) {
   const { view } = useEditor();
   const { selection } = view.state;
-  const { width: menuWidth, height: menuHeight } = useComponentSize(menuRef);
+  const menuWidth = menuRef.current?.offsetWidth;
+  const menuHeight = menuRef.current?.offsetHeight;
 
   if (!active || !menuWidth || !menuHeight || !menuRef.current) {
     return defaultPosition;
@@ -78,13 +78,24 @@ function usePosition({
 
   // position at the top right of code blocks
   const codeBlock = findParentNode(isCode)(view.state.selection);
+  const noticeBlock = findParentNode(
+    (node) => node.type.name === "container_notice"
+  )(view.state.selection);
 
-  if (codeBlock && view.state.selection.empty) {
-    const element = view.nodeDOM(codeBlock.pos);
-    const bounds = (element as HTMLElement).getBoundingClientRect();
-    selectionBounds.top = bounds.top;
-    selectionBounds.left = bounds.right - menuWidth;
-    selectionBounds.right = bounds.right;
+  if ((codeBlock || noticeBlock) && view.state.selection.empty) {
+    const position = codeBlock
+      ? codeBlock.pos
+      : noticeBlock
+      ? noticeBlock.pos
+      : null;
+
+    if (position !== null) {
+      const element = view.nodeDOM(position);
+      const bounds = (element as HTMLElement).getBoundingClientRect();
+      selectionBounds.top = bounds.top;
+      selectionBounds.left = bounds.right - menuWidth;
+      selectionBounds.right = bounds.right;
+    }
   }
 
   // tables are an oddity, and need their own positioning logic
@@ -188,7 +199,8 @@ function usePosition({
     top: Math.round(top - offsetParent.top),
     offset: Math.round(offset),
     maxWidth: Math.min(window.innerWidth, offsetParent.width) - margin * 2,
-    blockSelection: codeBlock || isColSelection || isRowSelection,
+    blockSelection:
+      codeBlock || isColSelection || isRowSelection || noticeBlock,
     visible: true,
   };
 }

app/editor/components/Input.tsx

@@ -1,3 +1,4 @@
+import { transparentize } from "polished";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 
@@ -13,6 +14,10 @@ const Input = styled.input`
   flex-grow: 1;
   min-width: 0;
 
+  &::placeholder {
+    color: ${(props) => transparentize(0.5, props.theme.text)};
+  }
+
   @media (hover: none) and (pointer: coarse) {
     font-size: 16px;
   }

app/editor/components/LinkEditor.tsx

@@ -1,15 +1,24 @@
-import { ArrowIcon, CloseIcon, OpenIcon } from "outline-icons";
+import { observer } from "mobx-react";
+import { ArrowIcon, CloseIcon, DocumentIcon, OpenIcon } from "outline-icons";
 import { Mark } from "prosemirror-model";
 import { Selection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import styled from "styled-components";
+import Icon from "@shared/components/Icon";
+import { hideScrollbars, s } from "@shared/styles";
 import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
 import Flex from "~/components/Flex";
+import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
+import Scrollable from "~/components/Scrollable";
 import { Dictionary } from "~/hooks/useDictionary";
-import Logger from "~/utils/Logger";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import { client } from "~/utils/ApiClient";
 import Input from "./Input";
+import SuggestionsMenuItem from "./SuggestionsMenuItem";
 import ToolbarButton from "./ToolbarButton";
 import Tooltip from "./Tooltip";
 
@@ -32,152 +41,87 @@ type Props = {
   view: EditorView;
 };
 
-type State = {
-  value: string;
-  previousValue: string;
-};
+const LinkEditor: React.FC<Props> = ({
+  mark,
+  from,
+  to,
+  dictionary,
+  onRemoveLink,
+  onSelectLink,
+  onClickLink,
+  view,
+}) => {
+  const getHref = () => sanitizeUrl(mark?.attrs.href) ?? "";
+  const initialValue = getHref();
+  const initialSelectionLength = to - from;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const discardRef = useRef(false);
+  const [query, setQuery] = useState(initialValue);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const { documents } = useStores();
 
-class LinkEditor extends React.Component<Props, State> {
-  discardInputValue = false;
-  initialValue = this.href;
-  initialSelectionLength = this.props.to - this.props.from;
-  inputRef = React.createRef<HTMLInputElement>();
+  const trimmedQuery = query.trim();
+  const results = trimmedQuery
+    ? documents.findByQuery(trimmedQuery, { maxResults: 25 })
+    : [];
 
-  state: State = {
-    value: this.href,
-    previousValue: "",
-  };
+  const { request } = useRequest(
+    React.useCallback(async () => {
+      const res = await client.post("/suggestions.mention", { query });
+      res.data.documents.map(documents.add);
+    }, [query])
+  );
 
-  get href(): string {
-    return sanitizeUrl(this.props.mark?.attrs.href) ?? "";
-  }
-
-  componentDidMount(): void {
-    window.addEventListener("keydown", this.handleGlobalKeyDown);
-  }
-
-  componentWillUnmount = () => {
-    window.removeEventListener("keydown", this.handleGlobalKeyDown);
-
-    // If we discarded the changes then nothing to do
-    if (this.discardInputValue) {
-      return;
+  useEffect(() => {
+    if (trimmedQuery) {
+      void request();
     }
+  }, [trimmedQuery, request]);
 
-    // If the link is the same as it was when the editor opened, nothing to do
-    if (this.state.value === this.initialValue) {
-      return;
-    }
+  useEffect(() => {
+    const handleGlobalKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "k" && event.metaKey) {
+        inputRef.current?.select();
+      }
+    };
 
-    // If the link is totally empty or only spaces then remove the mark
-    const href = (this.state.value || "").trim();
-    if (!href) {
-      return this.handleRemoveLink();
-    }
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
 
-    this.save(href, href);
-  };
+      // If we discarded the changes then nothing to do
+      if (discardRef.current) {
+        return;
+      }
 
-  handleGlobalKeyDown = (event: KeyboardEvent): void => {
-    if (event.key === "k" && event.metaKey) {
-      this.inputRef.current?.select();
-    }
-  };
+      // If the link is the same as it was when the editor opened, nothing to do
+      if (trimmedQuery === initialValue) {
+        return;
+      }
 
-  save = (href: string, title?: string): void => {
+      // If the link is totally empty or only spaces then remove the mark
+      if (!trimmedQuery) {
+        return handleRemoveLink();
+      }
+
+      save(trimmedQuery, trimmedQuery);
+    };
+  }, [trimmedQuery, initialValue]);
+
+  const save = (href: string, title?: string) => {
     href = href.trim();
 
     if (href.length === 0) {
       return;
     }
 
-    this.discardInputValue = true;
-    const { from, to } = this.props;
+    discardRef.current = true;
     href = sanitizeUrl(href) ?? "";
 
-    this.props.onSelectLink({ href, title, from, to });
+    onSelectLink({ href, title, from, to });
   };
 
-  handleKeyDown = (event: React.KeyboardEvent): void => {
-    switch (event.key) {
-      case "Enter": {
-        event.preventDefault();
-        const { value } = this.state;
-
-        this.save(value, value);
-
-        if (this.initialSelectionLength) {
-          this.moveSelectionToEnd();
-        }
-
-        return;
-      }
-
-      case "Escape": {
-        event.preventDefault();
-
-        if (this.initialValue) {
-          this.setState({ value: this.initialValue }, this.moveSelectionToEnd);
-        } else {
-          this.handleRemoveLink();
-        }
-        return;
-      }
-    }
-  };
-
-  handleSearch = async (
-    event: React.ChangeEvent<HTMLInputElement>
-  ): Promise<void> => {
-    const value = event.target.value;
-
-    this.setState({
-      value,
-    });
-
-    const trimmedValue = value.trim();
-
-    if (trimmedValue) {
-      try {
-        this.setState({
-          previousValue: trimmedValue,
-        });
-      } catch (err) {
-        Logger.error("Error searching for link", err);
-      }
-    }
-  };
-
-  handlePaste = (): void => {
-    setTimeout(() => this.save(this.state.value, this.state.value), 0);
-  };
-
-  handleOpenLink = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    event.preventDefault();
-
-    try {
-      this.props.onClickLink(this.href, event);
-    } catch (err) {
-      toast.error(this.props.dictionary.openLinkError);
-    }
-  };
-
-  handleRemoveLink = (): void => {
-    this.discardInputValue = true;
-
-    const { from, to, mark, view, onRemoveLink } = this.props;
-    const { state, dispatch } = this.props.view;
-
-    if (mark) {
-      dispatch(state.tr.removeMark(from, to, mark));
-    }
-
-    onRemoveLink?.();
-    view.focus();
-  };
-
-  moveSelectionToEnd = () => {
-    const { to, view } = this.props;
+  const moveSelectionToEnd = () => {
     const { state, dispatch } = view;
     const nextSelection = Selection.findFrom(state.tr.doc.resolve(to), 1, true);
     if (nextSelection) {
@@ -186,47 +130,178 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
-  render() {
-    const { view, dictionary } = this.props;
-    const { value } = this.state;
-    const isInternal = isInternalUrl(value);
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const maxIndex = results.length - 1;
+        setSelectedIndex((current) => (current >= maxIndex ? 0 : current + 1));
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const maxIndex = results.length - 1;
+        setSelectedIndex((current) => (current <= 0 ? maxIndex : current - 1));
+        return;
+      }
+      case "Enter": {
+        event.preventDefault();
 
-    return (
+        if (selectedIndex >= 0 && results[selectedIndex]) {
+          const selectedDoc = results[selectedIndex];
+          const href = selectedDoc.url;
+          save(href, selectedDoc.title);
+        } else {
+          save(trimmedQuery, trimmedQuery);
+        }
+
+        if (initialSelectionLength) {
+          moveSelectionToEnd();
+        }
+        return;
+      }
+      case "Escape": {
+        event.preventDefault();
+
+        if (initialValue) {
+          setQuery(initialValue);
+          moveSelectionToEnd();
+        } else {
+          handleRemoveLink();
+        }
+        return;
+      }
+    }
+  };
+
+  const handleSearch = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setQuery(newValue);
+    setSelectedIndex(-1);
+  };
+
+  const handlePaste = () => {
+    setTimeout(() => save(query, query), 0);
+  };
+
+  const handleOpenLink = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    try {
+      onClickLink(getHref(), event);
+    } catch (err) {
+      toast.error(dictionary.openLinkError);
+    }
+  };
+
+  const handleRemoveLink = () => {
+    discardRef.current = true;
+
+    const { state, dispatch } = view;
+    if (mark) {
+      dispatch(state.tr.removeMark(from, to, mark));
+    }
+
+    onRemoveLink?.();
+    view.focus();
+  };
+
+  const isInternal = isInternalUrl(query);
+  const hasResults = !!results.length;
+
+  return (
+    <>
       <Wrapper>
         <Input
-          ref={this.inputRef}
-          value={value}
-          placeholder={dictionary.enterLink}
-          onKeyDown={this.handleKeyDown}
-          onPaste={this.handlePaste}
-          onChange={this.handleSearch}
-          onFocus={this.handleSearch}
-          autoFocus={this.href === ""}
+          ref={inputRef}
+          value={query}
+          placeholder={dictionary.searchOrPasteLink}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onChange={handleSearch}
+          onFocus={handleSearch}
+          autoFocus={getHref() === ""}
           readOnly={!view.editable}
         />
-
         <Tooltip
           content={isInternal ? dictionary.goToLink : dictionary.openLink}
         >
-          <ToolbarButton onClick={this.handleOpenLink} disabled={!value}>
+          <ToolbarButton onClick={handleOpenLink} disabled={!query}>
             {isInternal ? <ArrowIcon /> : <OpenIcon />}
           </ToolbarButton>
         </Tooltip>
         {view.editable && (
           <Tooltip content={dictionary.removeLink}>
-            <ToolbarButton onClick={this.handleRemoveLink}>
+            <ToolbarButton onClick={handleRemoveLink}>
               <CloseIcon />
             </ToolbarButton>
           </Tooltip>
         )}
       </Wrapper>
-    );
-  }
-}
+      <SearchResults $hasResults={hasResults}>
+        <ResizingHeightContainer>
+          {hasResults && (
+            <>
+              {results.map((doc, index) => (
+                <SuggestionsMenuItem
+                  onClick={() => {
+                    save(doc.url, doc.title);
+                    if (initialSelectionLength) {
+                      moveSelectionToEnd();
+                    }
+                  }}
+                  onPointerMove={() => setSelectedIndex(index)}
+                  selected={index === selectedIndex}
+                  key={doc.id}
+                  subtitle={doc.collection?.name}
+                  title={doc.title}
+                  icon={
+                    doc.icon ? (
+                      <Icon value={doc.icon} color={doc.color ?? undefined} />
+                    ) : (
+                      <DocumentIcon />
+                    )
+                  }
+                />
+              ))}
+            </>
+          )}
+        </ResizingHeightContainer>
+      </SearchResults>
+    </>
+  );
+};
 
 const Wrapper = styled(Flex)`
   pointer-events: all;
   gap: 8px;
 `;
 
-export default LinkEditor;
+const SearchResults = styled(Scrollable)<{ $hasResults: boolean }>`
+  background: ${s("menuBackground")};
+  box-shadow: ${(props) => (props.$hasResults ? s("menuShadow") : "none")};
+  clip-path: inset(0px -100px -100px -100px);
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: auto;
+  left: 0;
+  margin-top: -6px;
+  border-radius: 0 0 4px 4px;
+  padding: ${(props) => (props.$hasResults ? "6px" : "0")};
+  max-height: 240px;
+  pointer-events: all;
+
+  ${hideScrollbars()}
+
+  @media (hover: none) and (pointer: coarse) {
+    position: fixed;
+    top: auto;
+    bottom: 40px;
+    border-radius: 0;
+    max-height: 50vh;
+    padding: 8px 8px 4px;
+  }
+`;
+
+export default observer(LinkEditor);

app/editor/components/MentionMenu.tsx

@@ -10,8 +10,6 @@ import Icon from "@shared/components/Icon";
 import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import Document from "~/models/Document";
-import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import { DocumentsSection, UserSection } from "~/actions/sections";
@@ -48,17 +46,11 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
   const documentId = parseDocumentSlug(location.pathname);
   const maxResultsInSection = search ? 25 : 5;
 
-  const { loading, request } = useRequest<{
-    documents: Document[];
-    users: User[];
-  }>(
+  const { loading, request } = useRequest(
     React.useCallback(async () => {
       const res = await client.post("/suggestions.mention", { query: search });
-
-      return {
-        documents: res.data.documents.map(documents.add),
-        users: res.data.users.map(users.add),
-      };
+      res.data.documents.map(documents.add);
+      res.data.users.map(users.add);
     }, [search, documents, users])
   );
 

app/editor/components/SelectionToolbar.tsx

@@ -4,6 +4,7 @@ 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, getRowIndex } from "@shared/editor/queries/table";
@@ -18,6 +19,7 @@ import getCodeMenuItems from "../menus/code";
 import getDividerMenuItems from "../menus/divider";
 import getFormattingMenuItems from "../menus/formatting";
 import getImageMenuItems from "../menus/image";
+import getNoticeMenuItems from "../menus/notice";
 import getReadOnlyMenuItems from "../menus/readOnly";
 import getTableMenuItems from "../menus/table";
 import getTableColMenuItems from "../menus/tableCol";
@@ -55,6 +57,10 @@ function useIsActive(state: EditorState) {
     return true;
   }
 
+  if (isInNotice(state) && selection.from > 0) {
+    return true;
+  }
+
   if (!selection || selection.empty) {
     return false;
   }
@@ -184,6 +190,7 @@ export default function SelectionToolbar(props: Props) {
     selection instanceof NodeSelection &&
     selection.node.type.name === "attachment";
   const isCodeSelection = isInCode(state, { onlyBlock: true });
+  const isNoticeSelection = isInNotice(state);
 
   let items: MenuItem[] = [];
 
@@ -203,6 +210,8 @@ export default function SelectionToolbar(props: Props) {
     items = getDividerMenuItems(state, dictionary);
   } else if (readOnly) {
     items = getReadOnlyMenuItems(state, !!canUpdate, dictionary);
+  } else if (isNoticeSelection && selection.empty) {
+    items = getNoticeMenuItems(state, readOnly, dictionary);
   } else {
     items = getFormattingMenuItems(state, isTemplate, isMobile, dictionary);
   }

app/editor/components/SuggestionsMenuItem.tsx

@@ -11,6 +11,8 @@ export type Props = {
   disabled?: boolean;
   /** Callback when the item is clicked */
   onClick: (event: React.SyntheticEvent) => void;
+  /** Callback when the item is hovered */
+  onPointerMove?: (event: React.SyntheticEvent) => void;
   /** An optional icon for the item */
   icon?: React.ReactNode;
   /** The title of the item */
@@ -25,6 +27,7 @@ function SuggestionsMenuItem({
   selected,
   disabled,
   onClick,
+  onPointerMove,
   title,
   subtitle,
   shortcut,
@@ -53,6 +56,7 @@ function SuggestionsMenuItem({
       ref={ref}
       active={selected}
       onClick={disabled ? undefined : onClick}
+      onPointerMove={disabled ? undefined : onPointerMove}
       icon={icon}
     >
       {title}

app/editor/extensions/SmartText.ts

@@ -3,8 +3,8 @@ import { InputRule } from "@shared/editor/lib/InputRule";
 
 const rightArrow = new InputRule(/->$/, "→");
 const emdash = new InputRule(/--$/, "—");
-const oneHalf = new InputRule(/(?:^|\s)1\/2$/, "½");
-const threeQuarters = new InputRule(/(?:^|\s)3\/4$/, "¾");
+const oneHalf = new InputRule(/(?:^|\s)(1\/2)$/, "½");
+const threeQuarters = new InputRule(/(?:^|\s)(3\/4)$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");
 const registered = new InputRule(/\(r\)$/, "®️");
 const trademarked = new InputRule(/\(tm\)$/, "™️");

app/editor/menus/attachment.tsx

@@ -13,13 +13,11 @@ export default function attachmentMenuItems(
       name: "replaceAttachment",
       tooltip: dictionary.replaceAttachment,
       icon: <ReplaceIcon />,
-      visible: true,
     },
     {
       name: "deleteAttachment",
       tooltip: dictionary.deleteAttachment,
       icon: <TrashIcon />,
-      visible: true,
     },
     {
       name: "separator",

app/editor/menus/image.tsx

@@ -33,14 +33,12 @@ export default function imageMenuItems(
       name: "alignLeft",
       tooltip: dictionary.alignLeft,
       icon: <AlignImageLeftIcon />,
-      visible: true,
       active: isLeftAligned,
     },
     {
       name: "alignCenter",
       tooltip: dictionary.alignCenter,
       icon: <AlignImageCenterIcon />,
-      visible: true,
       active: (state) =>
         isNodeActive(schema.nodes.image)(state) &&
         !isLeftAligned(state) &&
@@ -51,19 +49,16 @@ export default function imageMenuItems(
       name: "alignRight",
       tooltip: dictionary.alignRight,
       icon: <AlignImageRightIcon />,
-      visible: true,
       active: isRightAligned,
     },
     {
       name: "alignFullWidth",
       tooltip: dictionary.alignFullWidth,
       icon: <AlignFullWidthIcon />,
-      visible: true,
       active: isFullWidthAligned,
     },
     {
       name: "separator",
-      visible: true,
     },
     {
       name: "downloadImage",
@@ -75,13 +70,11 @@ export default function imageMenuItems(
       name: "replaceImage",
       tooltip: dictionary.replaceImage,
       icon: <ReplaceIcon />,
-      visible: true,
     },
     {
       name: "deleteImage",
       tooltip: dictionary.deleteImage,
       icon: <TrashIcon />,
-      visible: true,
     },
   ];
 }

app/editor/menus/notice.tsx

@@ -0,0 +1,63 @@
+import {
+  DoneIcon,
+  ExpandedIcon,
+  InfoIcon,
+  StarredIcon,
+  WarningIcon,
+} from "outline-icons";
+import { EditorState } from "prosemirror-state";
+import * as React from "react";
+import { NoticeTypes } from "@shared/editor/nodes/Notice";
+import { MenuItem } from "@shared/editor/types";
+import { Dictionary } from "~/hooks/useDictionary";
+
+export default function noticeMenuItems(
+  state: EditorState,
+  readOnly: boolean | undefined,
+  dictionary: Dictionary
+): MenuItem[] {
+  const node = state.selection.$from.node(-1);
+  const currentStyle = node?.attrs.style as NoticeTypes;
+
+  const mapping = {
+    [NoticeTypes.Info]: dictionary.infoNotice,
+    [NoticeTypes.Warning]: dictionary.warningNotice,
+    [NoticeTypes.Success]: dictionary.successNotice,
+    [NoticeTypes.Tip]: dictionary.tipNotice,
+  };
+
+  return [
+    {
+      name: "container_notice",
+      visible: !readOnly,
+      label: mapping[currentStyle],
+      icon: <ExpandedIcon />,
+      children: [
+        {
+          name: NoticeTypes.Info,
+          icon: <InfoIcon />,
+          label: dictionary.infoNotice,
+          active: () => currentStyle === NoticeTypes.Info,
+        },
+        {
+          name: NoticeTypes.Success,
+          icon: <DoneIcon />,
+          label: dictionary.successNotice,
+          active: () => currentStyle === NoticeTypes.Success,
+        },
+        {
+          name: NoticeTypes.Warning,
+          icon: <WarningIcon />,
+          label: dictionary.warningNotice,
+          active: () => currentStyle === NoticeTypes.Warning,
+        },
+        {
+          name: NoticeTypes.Tip,
+          icon: <StarredIcon />,
+          label: dictionary.tipNotice,
+          active: () => currentStyle === NoticeTypes.Tip,
+        },
+      ],
+    },
+  ];
+}

app/menus/NotificationMenu.tsx

@@ -24,7 +24,6 @@ const NotificationMenu: React.FC = () => {
       {
         type: "button",
         title: t("Notification settings"),
-        visible: true,
         onClick: () => performAction(navigateToNotificationSettings, context),
       },
     ],

app/menus/TableOfContentsMenu.tsx

@@ -28,7 +28,6 @@ function TableOfContentsMenu() {
     const i = [
       {
         type: "heading",
-        visible: true,
         title: t("Contents"),
       },
       ...headings.map((heading) => ({

app/models/Revision.ts

@@ -19,6 +19,9 @@ class Revision extends Model {
   /** The document title when the revision was created */
   title: string;
 
+  /** An optional name for the revision */
+  name: string | null;
+
   /** Prosemirror data of the content when revision was created */
   data: ProsemirrorData;
 

app/models/Share.ts

@@ -1,12 +1,13 @@
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
 import Collection from "./Collection";
 import Document from "./Document";
 import User from "./User";
 import Model from "./base/Model";
 import Field from "./decorators/Field";
 import Relation from "./decorators/Relation";
+import { Searchable } from "./interfaces/Searchable";
 
-class Share extends Model {
+class Share extends Model implements Searchable {
   static modelName = "Share";
 
   @Field
@@ -65,6 +66,11 @@ class Share extends Model {
   /** The user that shared the document. */
   @Relation(() => User, { onDelete: "null" })
   createdBy: User;
+
+  @computed
+  get searchContent(): string[] {
+    return [this.document?.title ?? this.documentTitle];
+  }
 }
 
 export default Share;

app/scenes/Document/components/Document.tsx

@@ -551,6 +551,11 @@ class DocumentScene extends React.Component<Props> {
                     >
                       <Notices document={document} readOnly={readOnly} />
 
+                      {showContents && (
+                        <PrintContentsContainer>
+                          <Contents />
+                        </PrintContentsContainer>
+                      )}
                       <Editor
                         id={document.id}
                         key={embedsDisabled ? "disabled" : "enabled"}
@@ -665,6 +670,19 @@ const ContentsContainer = styled.div<ContentsContainerProps>`
     justify-self: ${({ position }: ContentsContainerProps) =>
       position === TOCPosition.Left ? "end" : "start"};
   `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+const PrintContentsContainer = styled.div`
+  display: none;
+  margin: 0 -12px;
+
+  @media print {
+    display: block;
+  }
 `;
 
 type EditorContainerProps = {

app/scenes/Document/components/History.tsx

@@ -1,3 +1,4 @@
+import isEqual from "fast-deep-equal";
 import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -136,14 +137,19 @@ function History() {
       "desc"
     );
 
-    const latestEvent = merged[0];
+    const latestRevisionEvent = merged.find(
+      (event) => event.name === "revisions.create"
+    );
 
-    if (latestEvent && document) {
-      const latestRevisionEvent = merged.find(
-        (event) => event.name === "revisions.create"
-      );
+    if (latestRevisionEvent && document) {
+      const latestRevision = revisions.get(latestRevisionEvent.id);
 
-      if (latestEvent.createdAt !== document.updatedAt) {
+      const isDocUpdated =
+        latestRevision?.title !== document.title ||
+        !isEqual(latestRevision.data, document.data);
+
+      if (isDocUpdated) {
+        revisions.remove(RevisionHelper.latestId(document.id));
         merged.unshift({
           id: RevisionHelper.latestId(document.id),
           name: "revisions.create",
@@ -157,7 +163,7 @@ function History() {
     }
 
     return merged;
-  }, [document, revisionEvents, nonRevisionEvents]);
+  }, [revisions, document, revisionEvents, nonRevisionEvents]);
 
   const onCloseHistory = React.useCallback(() => {
     if (document) {

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -99,7 +99,11 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     });
 
     provider.on("awarenessChange", (event: AwarenessChangeEvent) => {
-      presence.updateFromAwarenessChangeEvent(documentId, event);
+      presence.updateFromAwarenessChangeEvent(
+        documentId,
+        provider.awareness.clientID,
+        event
+      );
 
       event.states.forEach(({ user, scrollY }) => {
         if (user) {

app/scenes/Login/components/Notices.tsx

@@ -105,7 +105,7 @@ function Message({ notice }: { notice: string }) {
     case "authentication-provider-disabled":
       return (
         <Trans>
-          Authentication failed – this login method was disabled by a team
+          Authentication failed – this login method was disabled by a workspace
           admin.
         </Trans>
       );

app/scenes/Search/components/RecentSearches.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
-import Fade from "~/components/Fade";
+import { ConditionalFade } from "~/components/Fade";
 import useStores from "~/hooks/useStores";
 import RecentSearchListItem from "./RecentSearchListItem";
 
@@ -19,7 +19,6 @@ function RecentSearches(
 ) {
   const { searches } = useStores();
   const { t } = useTranslation();
-  const [isPreloaded] = React.useState(searches.recent.length > 0);
 
   React.useEffect(() => {
     void searches.fetchPage({
@@ -48,7 +47,11 @@ function RecentSearches(
     </>
   ) : null;
 
-  return isPreloaded ? content : <Fade>{content}</Fade>;
+  return (
+    <ConditionalFade animate={!searches.recent.length}>
+      {content}
+    </ConditionalFade>
+  );
 }
 
 const Heading = styled.h2`

app/scenes/Settings/Groups.tsx

@@ -10,6 +10,7 @@ import Group from "~/models/Group";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
 import Empty from "~/components/Empty";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
 import InputSearch from "~/components/InputSearch";
 import Scene from "~/components/Scene";
@@ -149,15 +150,17 @@ function Groups() {
               onChange={handleSearch}
             />
           </StickyFilters>
-          <GroupsTable
-            data={data ?? []}
-            sort={sort}
-            loading={loading}
-            page={{
-              hasNext: !!next,
-              fetchNext: next,
-            }}
-          />
+          <ConditionalFade animate={!data}>
+            <GroupsTable
+              data={data ?? []}
+              sort={sort}
+              loading={loading}
+              page={{
+                hasNext: !!next,
+                fetchNext: next,
+              }}
+            />
+          </ConditionalFade>
         </>
       )}
     </Scene>

app/scenes/Settings/Members.tsx

@@ -9,7 +9,7 @@ import styled from "styled-components";
 import UsersStore, { queriedUsers } from "~/stores/UsersStore";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
-import Fade from "~/components/Fade";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
 import InputSearch from "~/components/InputSearch";
 import Scene from "~/components/Scene";
@@ -22,7 +22,7 @@ import usePolicy from "~/hooks/usePolicy";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
 import { useTableRequest } from "~/hooks/useTableRequest";
-import { PeopleTable } from "./components/PeopleTable";
+import { MembersTable } from "./components/MembersTable";
 import { StickyFilters } from "./components/StickyFilters";
 import UserRoleFilter from "./components/UserRoleFilter";
 import UserStatusFilter from "./components/UserStatusFilter";
@@ -163,8 +163,8 @@ function Members() {
           onSelect={handleRoleFilter}
         />
       </StickyFilters>
-      <Fade>
-        <PeopleTable
+      <ConditionalFade animate={!data}>
+        <MembersTable
           data={data ?? []}
           sort={sort}
           canManage={can.update}
@@ -174,7 +174,7 @@ function Members() {
             fetchNext: next,
           }}
         />
-      </Fade>
+      </ConditionalFade>
     </Scene>
   );
 }

app/scenes/Settings/Shares.tsx

@@ -3,10 +3,11 @@ import { observer } from "mobx-react";
 import { GlobeIcon, WarningIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { toast } from "sonner";
-import Fade from "~/components/Fade";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
+import InputSearch from "~/components/InputSearch";
 import Notice from "~/components/Notice";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
@@ -16,17 +17,22 @@ import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
 import { useTableRequest } from "~/hooks/useTableRequest";
 import { SharesTable } from "./components/SharesTable";
+import { StickyFilters } from "./components/StickyFilters";
 
 function Shares() {
   const team = useCurrentTeam();
   const { t } = useTranslation();
+  const location = useLocation();
+  const history = useHistory();
   const { shares, auth } = useStores();
   const canShareDocuments = auth.team && auth.team.sharing;
   const can = usePolicy(team);
   const params = useQuery();
+  const [query, setQuery] = React.useState("");
 
   const reqParams = React.useMemo(
     () => ({
+      query: params.get("query") || undefined,
       sort: params.get("sort") || "createdAt",
       direction: (params.get("direction") || "desc").toUpperCase() as
         | "ASC"
@@ -44,18 +50,44 @@ function Shares() {
   );
 
   const { data, error, loading, next } = useTableRequest({
-    data: shares.orderedData,
+    data: shares.findByQuery(reqParams.query ?? ""),
     sort,
     reqFn: shares.fetchPage,
     reqParams,
   });
 
+  const updateParams = React.useCallback(
+    (name: string, value: string) => {
+      if (value) {
+        params.set(name, value);
+      } else {
+        params.delete(name);
+      }
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+    },
+    [params, history, location.pathname]
+  );
+
+  const handleSearch = React.useCallback((event) => {
+    const { value } = event.target;
+    setQuery(value);
+  }, []);
+
   React.useEffect(() => {
     if (error) {
       toast.error(t("Could not load shares"));
     }
   }, [t, error]);
 
+  React.useEffect(() => {
+    const timeout = setTimeout(() => updateParams("query", query), 250);
+    return () => clearTimeout(timeout);
+  }, [query, updateParams]);
+
   return (
     <Scene title={t("Shared Links")} icon={<GlobeIcon />} wide>
       <Heading>{t("Shared Links")}</Heading>
@@ -83,20 +115,26 @@ function Shares() {
         </Trans>
       </Text>
 
-      {data?.length ? (
-        <Fade>
-          <SharesTable
-            data={data ?? []}
-            sort={sort}
-            canManage={can.update}
-            loading={loading}
-            page={{
-              hasNext: !!next,
-              fetchNext: next,
-            }}
-          />
-        </Fade>
-      ) : null}
+      <StickyFilters gap={8}>
+        <InputSearch
+          short
+          value={query}
+          placeholder={`${t("Filter")}…`}
+          onChange={handleSearch}
+        />
+      </StickyFilters>
+      <ConditionalFade animate={!data}>
+        <SharesTable
+          data={data ?? []}
+          sort={sort}
+          canManage={can.update}
+          loading={loading}
+          page={{
+            hasNext: !!next,
+            fetchNext: next,
+          }}
+        />
+      </ConditionalFade>
     </Scene>
   );
 }

app/scenes/Settings/components/ActionRow.tsx

@@ -1,5 +1,6 @@
 import { transparentize } from "polished";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 
 /**
@@ -8,8 +9,9 @@ import { s } from "@shared/styles";
 export const ActionRow = styled.div`
   position: sticky;
   bottom: 0;
-  padding: 16px 50vw;
-  margin: 0 -50vw;
+  width: 100vw;
+  padding: 16px 12px;
+  margin-left: -12px;
 
   background: ${s("background")};
 
@@ -17,4 +19,8 @@ export const ActionRow = styled.div`
     backdrop-filter: blur(20px);
     background: ${(props) => transparentize(0.2, props.theme.background)};
   }
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `}
 `;

app/scenes/Settings/components/MembersTable.tsx

@@ -24,7 +24,7 @@ type Props = Omit<TableProps<User>, "columns" | "rowHeight"> & {
   canManage: boolean;
 };
 
-export function PeopleTable({ canManage, ...rest }: Props) {
+export function MembersTable({ canManage, ...rest }: Props) {
   const { t } = useTranslation();
   const currentUser = useCurrentUser();
 

app/scenes/Settings/components/SharesTable.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { unicodeCLDRtoBCP47 } from "@shared/utils/date";
 import Share from "~/models/Share";
-import { Avatar } from "~/components/Avatar";
+import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import { HEADER_HEIGHT } from "~/components/Header";
 import {
@@ -46,10 +46,10 @@ export function SharesTable({ data, canManage, ...rest }: Props) {
           accessor: (share) => share.createdBy,
           sortable: false,
           component: (share) => (
-            <Flex align="center" gap={4}>
+            <Flex align="center" gap={8}>
               {share.createdBy && (
                 <>
-                  <Avatar model={share.createdBy} />
+                  <Avatar model={share.createdBy} size={AvatarSize.Small} />
                   {share.createdBy.name}
                 </>
               )}

app/stores/DocumentPresenceStore.ts

@@ -14,17 +14,16 @@ export default class PresenceStore {
   @observable
   data: Map<string, DocumentPresence> = new Map();
 
-  timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map();
-
-  offlineTimeout = 30000;
-
-  private rootStore: RootStore;
-
   constructor(rootStore: RootStore) {
     this.rootStore = rootStore;
   }
 
-  // called when a user leaves the document
+  /**
+   * Removes a user from the presence store
+   *
+   * @param documentId ID of the document to remove the user from
+   * @param userId ID of the user to remove
+   */
   @action
   public leave(documentId: string, userId: string) {
     const existing = this.data.get(documentId);
@@ -34,8 +33,16 @@ export default class PresenceStore {
     }
   }
 
+  /**
+   * Updates the presence store based on an awareness event from YJS
+   *
+   * @param documentId ID of the document the event is for
+   * @param clientId ID of the client the event is for
+   * @param event The awareness event
+   */
   public updateFromAwarenessChangeEvent(
     documentId: string,
+    clientId: number,
     event: AwarenessChangeEvent
   ) {
     const presence = this.data.get(documentId);
@@ -45,7 +52,13 @@ export default class PresenceStore {
 
     event.states.forEach((state) => {
       const { user, cursor } = state;
-      if (user && this.rootStore.auth.currentUserId !== user.id) {
+
+      // To avoid loops we only want to update the presence for the current user
+      // if it is also the current client.
+      const isCurrentUser = this.rootStore.auth.currentUserId === user?.id;
+      const isCurrentClient = clientId === state.clientId;
+
+      if (user && (!isCurrentUser || !isCurrentClient)) {
         this.update(documentId, user.id, !!cursor);
         existingUserIds = existingUserIds.filter((id) => id !== user.id);
       }
@@ -56,6 +69,14 @@ export default class PresenceStore {
     });
   }
 
+  /**
+   * Updates the presence store to indicate that a user is present in a document
+   * and then removes the user after a timeout of inactivity.
+   *
+   * @param documentId ID of the document to update
+   * @param userId ID of the user to update
+   * @param isEditing Whether the user is "editing" the document
+   */
   public touch(documentId: string, userId: string, isEditing: boolean) {
     const id = `${documentId}-${userId}`;
     let timeout = this.timeouts.get(id);
@@ -73,6 +94,13 @@ export default class PresenceStore {
     this.timeouts.set(id, timeout);
   }
 
+  /**
+   * Updates the presence store to indicate that a user is present in a document.
+   *
+   * @param documentId ID of the document to update
+   * @param userId ID of the user to update
+   * @param isEditing Whether the user is "editing" the document
+   */
   @action
   private update(documentId: string, userId: string, isEditing: boolean) {
     const presence = this.data.get(documentId) || new Map();
@@ -95,4 +123,10 @@ export default class PresenceStore {
   public clear() {
     this.data.clear();
   }
+
+  private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map();
+
+  private offlineTimeout = 30000;
+
+  private rootStore: RootStore;
 }

app/types.ts

@@ -206,8 +206,31 @@ export type WebsocketEvent =
   | WebsocketEntitiesEvent
   | WebsocketCommentReactionEvent;
 
+type CursorPosition = {
+  type: {
+    client: number;
+    clock: number;
+  };
+  tname: string | null;
+  item: {
+    client: number;
+    clock: number;
+  };
+  assoc: number;
+};
+
+type Cursor = {
+  anchor: CursorPosition;
+  head: CursorPosition;
+};
+
 export type AwarenessChangeEvent = {
-  states: { user?: { id: string }; cursor: any; scrollY: number | undefined }[];
+  states: {
+    clientId: number;
+    user?: { id: string };
+    cursor: Cursor;
+    scrollY: number | undefined;
+  }[];
 };
 
 export const EmptySelectValue = "__empty__";

package.json

@@ -48,11 +48,11 @@
     "> 0.25%, not dead"
   ],
   "dependencies": {
-    "@aws-sdk/client-s3": "3.749.0",
-    "@aws-sdk/lib-storage": "3.749.0",
-    "@aws-sdk/s3-presigned-post": "3.749.0",
-    "@aws-sdk/s3-request-presigner": "3.749.0",
-    "@aws-sdk/signature-v4-crt": "^3.749.0",
+    "@aws-sdk/client-s3": "3.750.0",
+    "@aws-sdk/lib-storage": "3.750.0",
+    "@aws-sdk/s3-presigned-post": "3.750.0",
+    "@aws-sdk/s3-request-presigner": "3.750.0",
+    "@aws-sdk/signature-v4-crt": "^3.750.0",
     "@babel/core": "^7.26.9",
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/plugin-transform-class-properties": "^7.25.9",
@@ -188,7 +188,7 @@
     "prosemirror-transform": "1.10.0",
     "prosemirror-view": "^1.37.1",
     "query-string": "^7.1.3",
-    "randomstring": "1.3.0",
+    "randomstring": "1.3.1",
     "rate-limiter-flexible": "^2.4.2",
     "react": "^17.0.2",
     "react-avatar-editor": "^13.0.2",
@@ -217,7 +217,7 @@
     "rfc6902": "^5.1.1",
     "sanitize-filename": "^1.6.3",
     "scroll-into-view-if-needed": "^3.1.0",
-    "semver": "^7.6.2",
+    "semver": "^7.7.1",
     "sequelize": "^6.37.3",
     "sequelize-cli": "^6.6.2",
     "sequelize-encrypted": "^1.0.0",
@@ -356,7 +356,7 @@
     "rimraf": "^2.5.4",
     "rollup-plugin-webpack-stats": "^2.0.1",
     "terser": "^5.37.0",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "vite-plugin-static-copy": "^0.17.0",
     "yarn-deduplicate": "^6.0.2"
   },

server/commands/accountProvisioner.test.ts

@@ -190,6 +190,56 @@ describe("accountProvisioner", () => {
       expect(error).toBeTruthy();
     });
 
+    it("should prioritize enabled authentication provider", async () => {
+      const existingTeam = await buildTeam();
+      const existingProviders = await existingTeam.$get(
+        "authenticationProviders"
+      );
+
+      const team2 = await buildTeam();
+
+      const providers = await team2.$get("authenticationProviders");
+      const authenticationProvider = providers[0];
+      await authenticationProvider.update({
+        enabled: false,
+        providerId: existingProviders[0].providerId,
+      });
+
+      const existing = await buildUser({
+        teamId: existingTeam.id,
+      });
+      const authentications = await existing.$get("authentications");
+      const authentication = authentications[0];
+      const { isNewUser, isNewTeam } = await accountProvisioner({
+        ip,
+        user: {
+          name: existing.name,
+          email: existing.email!,
+          avatarUrl: existing.avatarUrl,
+        },
+        team: {
+          name: existingTeam.name,
+          avatarUrl: existingTeam.avatarUrl,
+          subdomain: faker.internet.domainWord(),
+        },
+        authenticationProvider: {
+          name: authenticationProvider.name,
+          providerId: authenticationProvider.providerId,
+        },
+        authentication: {
+          providerId: authentication.providerId,
+          accessToken: "123",
+          scopes: ["read"],
+        },
+      });
+      const auth = await UserAuthentication.findByPk(authentication.id);
+      expect(auth?.accessToken).toEqual("123");
+      expect(auth?.scopes.length).toEqual(1);
+      expect(auth?.scopes[0]).toEqual("read");
+      expect(isNewTeam).toEqual(false);
+      expect(isNewUser).toEqual(false);
+    });
+
     it("should throw an error when the domain is not allowed", async () => {
       const existingTeam = await buildTeam();
       const admin = await buildAdmin({ teamId: existingTeam.id });

server/commands/accountProvisioner.ts

@@ -102,7 +102,7 @@ async function accountProvisioner({
     if (err.id === "invalid_authentication") {
       const authenticationProvider = await AuthenticationProvider.findOne({
         where: {
-          name: authenticationProviderParams.name, // example: "google"
+          name: authenticationProviderParams.name,
           teamId: teamParams.teamId,
         },
         include: [
@@ -112,6 +112,7 @@ async function accountProvisioner({
             required: true,
           },
         ],
+        order: [["enabled", "DESC"]],
       });
 
       if (authenticationProvider) {

server/commands/documentCollaborativeUpdater.ts

@@ -1,10 +1,8 @@
 import isEqual from "fast-deep-equal";
 import uniq from "lodash/uniq";
-import { Node } from "prosemirror-model";
 import { yDocToProsemirrorJSON } from "y-prosemirror";
 import * as Y from "yjs";
 import { ProsemirrorData } from "@shared/types";
-import { schema, serializer } from "@server/editor";
 import Logger from "@server/logging/Logger";
 import { Document, Event } from "@server/models";
 import { sequelize } from "@server/storage/database";
@@ -45,8 +43,6 @@ export default async function documentCollaborativeUpdater({
 
     const state = Y.encodeStateAsUpdate(ydoc);
     const content = yDocToProsemirrorJSON(ydoc, "default") as ProsemirrorData;
-    const node = Node.fromJSON(schema, content);
-    const text = serializer.serialize(node, undefined);
     const isUnchanged = isEqual(document.content, content);
     const lastModifiedById =
       sessionCollaboratorIds[sessionCollaboratorIds.length - 1] ??
@@ -72,7 +68,6 @@ export default async function documentCollaborativeUpdater({
 
     await document.update(
       {
-        text,
         content,
         state: Buffer.from(state),
         lastModifiedById,

server/commands/documentCreator.ts

@@ -1,8 +1,9 @@
 import { Optional } from "utility-types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
+import { ProsemirrorHelper as SharedProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { TextHelper } from "@shared/utils/TextHelper";
 import { Document, Event, User } from "@server/models";
 import { DocumentHelper } from "@server/models/helpers/DocumentHelper";
+import { ProsemirrorHelper } from "@server/models/helpers/ProsemirrorHelper";
 import { APIContext } from "@server/types";
 
 type Props = Optional<
@@ -81,53 +82,58 @@ export default async function documentCreator({
     }
   }
 
-  const document = await Document.create(
-    {
-      id,
-      urlId,
-      parentDocumentId,
-      editorVersion,
-      collectionId,
-      teamId: user.teamId,
-      createdAt,
-      updatedAt: updatedAt ?? createdAt,
-      lastModifiedById: user.id,
-      createdById: user.id,
-      template,
-      templateId,
-      publishedAt,
-      importId,
-      sourceMetadata,
-      fullWidth: templateDocument ? templateDocument.fullWidth : fullWidth,
-      icon: templateDocument ? templateDocument.icon : icon,
-      color: templateDocument ? templateDocument.color : color,
-      title:
-        title ??
-        (templateDocument
-          ? template
-            ? templateDocument.title
-            : TextHelper.replaceTemplateVariables(templateDocument.title, user)
-          : ""),
-      text:
-        text ??
-        (templateDocument
-          ? template
-            ? templateDocument.text
-            : TextHelper.replaceTemplateVariables(templateDocument.text, user)
-          : ""),
-      content: templateDocument
-        ? ProsemirrorHelper.replaceTemplateVariables(
-            await DocumentHelper.toJSON(templateDocument),
-            user
-          )
-        : content,
-      state,
-    },
-    {
-      silent: !!createdAt,
-      transaction,
-    }
-  );
+  const titleWithReplacements =
+    title ??
+    (templateDocument
+      ? template
+        ? templateDocument.title
+        : TextHelper.replaceTemplateVariables(templateDocument.title, user)
+      : "");
+
+  const contentWithReplacements = text
+    ? ProsemirrorHelper.toProsemirror(text).toJSON()
+    : templateDocument
+    ? template
+      ? templateDocument.content
+      : SharedProsemirrorHelper.replaceTemplateVariables(
+          await DocumentHelper.toJSON(templateDocument),
+          user
+        )
+    : content;
+
+  const document = Document.build({
+    id,
+    urlId,
+    parentDocumentId,
+    editorVersion,
+    collectionId,
+    teamId: user.teamId,
+    createdAt,
+    updatedAt: updatedAt ?? createdAt,
+    lastModifiedById: user.id,
+    createdById: user.id,
+    template,
+    templateId,
+    publishedAt,
+    importId,
+    sourceMetadata,
+    fullWidth: fullWidth ?? templateDocument?.fullWidth,
+    icon: icon ?? templateDocument?.icon,
+    color: color ?? templateDocument?.color,
+    title: titleWithReplacements,
+    content: contentWithReplacements,
+    state,
+  });
+
+  document.text = DocumentHelper.toMarkdown(document, {
+    includeTitle: false,
+  });
+
+  await document.save({
+    silent: !!createdAt,
+    transaction,
+  });
+
   await Event.create(
     {
       name: "documents.create",

server/commands/documentDuplicator.ts

@@ -52,7 +52,6 @@ export default async function documentDuplicator({
       DocumentHelper.toProsemirror(document),
       ["comment"]
     ),
-    text: document.text,
     ...sharedProperties,
   });
 
@@ -86,7 +85,6 @@ export default async function documentDuplicator({
           DocumentHelper.toProsemirror(childDocument),
           ["comment"]
         ),
-        text: childDocument.text,
         ...sharedProperties,
       });
 

server/commands/teamProvisioner.ts

@@ -61,6 +61,7 @@ async function teamProvisioner({
         paranoid: false,
       },
     ],
+    order: [["enabled", "DESC"]],
   });
 
   // This authentication provider already exists which means we have a team and

server/commands/userProvisioner.ts

@@ -63,7 +63,7 @@ export default async function userProvisioner({
   const auth = authentication
     ? await UserAuthentication.findOne({
         where: {
-          providerId: "" + authentication.providerId,
+          providerId: String(authentication.providerId),
         },
         include: [
           {

server/migrations/20250223142558-cascade-team-domain.js

@@ -0,0 +1,49 @@
+const tableName = "team_domains";
+// because of this issue in Sequelize the foreign key constraint may be named differently depending
+// on when the previous migrations were ran https://github.com/sequelize/sequelize/pull/9890
+
+const constraintNames = [
+  "team_domains_createdById_fkey",
+  "createdById_foreign_idx"
+];
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    let error;
+
+    for (const constraintName of constraintNames) {
+      try {
+        await queryInterface.sequelize.query(
+          `alter table "${tableName}" drop constraint "${constraintName}"`
+        );
+        await queryInterface.sequelize.query(`alter table "${tableName}"
+            add constraint "${constraintName}" foreign key("createdById") references "users" ("id")
+            on delete set null`);
+        return;
+      } catch (err) {
+        error = err;
+      }
+    }
+
+    throw error;
+  },
+  down: async (queryInterface, Sequelize) => {
+    let error;
+
+    for (const constraintName of constraintNames) {
+      try {
+        await queryInterface.sequelize.query(
+          `alter table "${tableName}" drop constraint "${constraintName}"`
+        );
+        await queryInterface.sequelize.query(`alter table "${tableName}"\
+            add constraint "${constraintName}" foreign key("createdById") references "users" ("id")
+            on delete no action`);
+        return;
+      } catch (err) {
+        error = err;
+      }
+    }
+
+    throw error;
+  },
+};

server/migrations/20250301234423-add-name-to-revisions.js

@@ -0,0 +1,15 @@
+"use strict";
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.addColumn("revisions", "name", {
+      type: Sequelize.STRING,
+      allowNull: true,
+    });
+  },
+
+  async down(queryInterface) {
+    await queryInterface.removeColumn("revisions", "name");
+  },
+};

server/models/Document.ts

@@ -830,7 +830,9 @@ class Document extends ArchivableModel<
     }
 
     this.content = revision.content;
-    this.text = revision.text;
+    this.text = DocumentHelper.toMarkdown(revision, {
+      includeTitle: false,
+    });
     this.title = revision.title;
     this.icon = revision.icon;
     this.color = revision.color;

server/models/Revision.test.ts

@@ -16,6 +16,5 @@ describe("#findLatest", () => {
     await Revision.createFromDocument(document);
     const revision = await Revision.findLatest(document.id);
     expect(revision?.title).toBe("Changed 2");
-    expect(revision?.text).toBe("Content");
   });
 });

server/models/Revision.ts

@@ -15,7 +15,7 @@ import {
   Length as SimpleLength,
 } from "sequelize-typescript";
 import type { ProsemirrorData } from "@shared/types";
-import { DocumentValidation } from "@shared/validations";
+import { DocumentValidation, RevisionValidation } from "@shared/validations";
 import Document from "./Document";
 import User from "./User";
 import IdModel from "./base/IdModel";
@@ -42,6 +42,7 @@ class Revision extends IdModel<
   @Column(DataType.SMALLINT)
   version?: number | null;
 
+  /** The editor version at the time of the revision */
   @SimpleLength({
     max: 255,
     msg: `editorVersion must be 255 characters or less`,
@@ -49,6 +50,7 @@ class Revision extends IdModel<
   @Column
   editorVersion: string;
 
+  /** The document title at the time of the revision */
   @Length({
     max: DocumentValidation.maxTitleLength,
     msg: `Revision title must be ${DocumentValidation.maxTitleLength} characters or less`,
@@ -56,22 +58,29 @@ class Revision extends IdModel<
   @Column
   title: string;
 
+  /** An optional name for the revision */
+  @Length({
+    max: RevisionValidation.maxNameLength,
+    msg: `Revision name must be ${RevisionValidation.maxNameLength} characters or less`,
+  })
+  @Column
+  name: string | null;
+
   /**
    * The content of the revision as Markdown.
    *
-   * @deprecated Use `content` instead, or `DocumentHelper.toMarkdown` if exporting lossy markdown.
-   * This column will be removed in a future migration.
+   * @deprecated Use `content` instead, or `DocumentHelper.toMarkdown` if
+   * exporting lossy markdown. This column will be removed in a future migration
+   * and is no longer being written.
    */
   @Column(DataType.TEXT)
   text: string;
 
-  /**
-   * The content of the revision as JSON.
-   */
+  /** The content of the revision as JSON. */
   @Column(DataType.JSONB)
   content: ProsemirrorData | null;
 
-  /** An icon to use as the document icon. */
+  /** The icon at the time of the revision. */
   @Length({
     max: 50,
     msg: `icon must be 50 characters or less`,
@@ -79,7 +88,7 @@ class Revision extends IdModel<
   @Column
   icon: string | null;
 
-  /** The color of the icon. */
+  /** The color at the time of the revision. */
   @IsHexColor
   @Column
   color: string | null;
@@ -126,7 +135,6 @@ class Revision extends IdModel<
   static buildFromDocument(document: Document) {
     return this.build({
       title: document.title,
-      text: document.text,
       icon: document.icon,
       color: document.color,
       content: document.content,

server/models/User.test.ts

@@ -79,6 +79,7 @@ describe("user model", () => {
       expect(response.length).toEqual(1);
       expect(response[0]).toEqual(collection.id);
     });
+
     it("should return read collections", async () => {
       const team = await buildTeam();
       const user = await buildUser({
@@ -92,6 +93,7 @@ describe("user model", () => {
       expect(response.length).toEqual(1);
       expect(response[0]).toEqual(collection.id);
     });
+
     it("should not return private collections", async () => {
       const team = await buildTeam();
       const user = await buildUser({
@@ -104,6 +106,7 @@ describe("user model", () => {
       const response = await user.collectionIds();
       expect(response.length).toEqual(0);
     });
+
     it("should not return private collection with membership", async () => {
       const team = await buildTeam();
       const user = await buildUser({

server/models/User.ts

@@ -614,6 +614,7 @@ class User extends ParanoidModel<
           where: { email: this.email },
         },
       ],
+      order: [["createdAt", "ASC"]],
     });
 
   // hooks

server/models/helpers/DocumentHelper.tsx

@@ -147,10 +147,15 @@ export class DocumentHelper {
    * Returns the document as Markdown. This is a lossy conversion and should only be used for export.
    *
    * @param document The document or revision to convert
+   * @param options Options for the conversion
    * @returns The document title and content as a Markdown string
    */
   static toMarkdown(
-    document: Document | Revision | Collection | ProsemirrorData
+    document: Document | Revision | Collection | ProsemirrorData,
+    options?: {
+      /** Whether to include the document title (default: true) */
+      includeTitle?: boolean;
+    }
   ) {
     const text = serializer
       .serialize(DocumentHelper.toProsemirror(document))
@@ -165,7 +170,10 @@ export class DocumentHelper {
       return text;
     }
 
-    if (document instanceof Document || document instanceof Revision) {
+    if (
+      (document instanceof Document || document instanceof Revision) &&
+      options?.includeTitle !== false
+    ) {
       const iconType = determineIconType(document.icon);
 
       const title = `${iconType === IconType.Emoji ? document.icon + " " : ""}${

server/models/helpers/NotificationHelper.test.ts

@@ -1,5 +1,6 @@
 import { NotificationEventType } from "@shared/types";
 import {
+  buildComment,
   buildDocument,
   buildSubscription,
   buildUser,
@@ -7,6 +8,112 @@ import {
 import NotificationHelper from "./NotificationHelper";
 
 describe("NotificationHelper", () => {
+  describe("getCommentNotificationRecipients", () => {
+    it("should return users who have notification enabled for comment creation and are subscribed to the document in case of parent comment", async () => {
+      const documentAuthor = await buildUser();
+      const document = await buildDocument({
+        userId: documentAuthor.id,
+        teamId: documentAuthor.teamId,
+      });
+      const notificationEnabledUser = await buildUser({
+        teamId: document.teamId,
+        notificationSettings: { [NotificationEventType.CreateComment]: true },
+      });
+      const notificationDisabledUser = await buildUser({
+        teamId: document.teamId,
+        notificationSettings: { [NotificationEventType.CreateComment]: false },
+      });
+      await Promise.all([
+        buildSubscription({
+          userId: documentAuthor.id,
+          documentId: document.id,
+        }),
+        buildSubscription({
+          userId: notificationEnabledUser.id,
+          documentId: document.id,
+        }),
+        buildSubscription({
+          userId: notificationDisabledUser.id,
+          documentId: document.id,
+        }),
+      ]);
+
+      const comment = await buildComment({
+        documentId: document.id,
+        userId: documentAuthor.id,
+      });
+
+      const recipients =
+        await NotificationHelper.getCommentNotificationRecipients(
+          document,
+          comment,
+          comment.createdById
+        );
+
+      expect(recipients.length).toEqual(1);
+      expect(recipients[0].id).toEqual(notificationEnabledUser.id);
+    });
+
+    it("should return users who have notification enabled for comment creation and are in the thread in case of child comment", async () => {
+      const documentAuthor = await buildUser();
+      const document = await buildDocument({
+        userId: documentAuthor.id,
+        teamId: documentAuthor.teamId,
+      });
+      const notificationEnabledUserInThread = await buildUser({
+        teamId: document.teamId,
+        notificationSettings: { [NotificationEventType.CreateComment]: true },
+      });
+      const notificationEnabledUserNotInThread = await buildUser({
+        teamId: document.teamId,
+        notificationSettings: { [NotificationEventType.CreateComment]: true },
+      });
+      const notificationDisabledUser = await buildUser({
+        teamId: document.teamId,
+        notificationSettings: {
+          [NotificationEventType.CreateComment]: false,
+        },
+      });
+      await Promise.all([
+        buildSubscription({
+          userId: documentAuthor.id,
+          documentId: document.id,
+        }),
+        buildSubscription({
+          userId: notificationEnabledUserInThread.id,
+          documentId: document.id,
+        }),
+        buildSubscription({
+          userId: notificationEnabledUserNotInThread.id,
+          documentId: document.id,
+        }),
+        buildSubscription({
+          userId: notificationDisabledUser.id,
+          documentId: document.id,
+        }),
+      ]);
+      const parentComment = await buildComment({
+        documentId: document.id,
+        userId: notificationEnabledUserInThread.id,
+      });
+      const childComment = await buildComment({
+        documentId: document.id,
+        userId: documentAuthor.id,
+        parentCommentId: parentComment.id,
+      });
+
+      const recipients =
+        await NotificationHelper.getCommentNotificationRecipients(
+          document,
+          childComment,
+          childComment.createdById
+        );
+
+      expect(recipients.length).toEqual(1);
+      expect(recipients[0].id).toEqual(notificationEnabledUserInThread.id);
+    });
+  });
+
   describe("getDocumentNotificationRecipients", () => {
     it("should return all users who have notification enabled for the event", async () => {
       const documentAuthor = await buildUser();

server/models/helpers/NotificationHelper.ts

@@ -62,7 +62,7 @@ export default class NotificationHelper {
   ): Promise<User[]> => {
     let recipients = await this.getDocumentNotificationRecipients({
       document,
-      notificationType: NotificationEventType.UpdateDocument,
+      notificationType: NotificationEventType.CreateComment,
       onlySubscribers: !comment.parentCommentId,
       actorId,
     });

server/models/helpers/ProseMirrorHelper.test.ts

@@ -3,7 +3,7 @@ import { MentionType, ProsemirrorData } from "@shared/types";
 import { buildProseMirrorDoc } from "@server/test/factories";
 import { MentionAttrs, ProsemirrorHelper } from "./ProsemirrorHelper";
 
-describe("ProseMirrorHelper", () => {
+describe("ProsemirrorHelper", () => {
   describe("getNodeForMentionEmail", () => {
     it("should return the paragraph node", () => {
       const mentionAttrs: MentionAttrs = {

server/models/helpers/ProsemirrorHelper.tsx

@@ -118,10 +118,13 @@ export class ProsemirrorHelper {
   /**
    * Converts a plain object into a Prosemirror Node.
    *
-   * @param data The object to parse
+   * @param data The ProsemirrorData object or string to parse.
    * @returns The content as a Prosemirror Node
    */
-  static toProsemirror(data: ProsemirrorData) {
+  static toProsemirror(data: ProsemirrorData | string) {
+    if (typeof data === "string") {
+      return parser.parse(data);
+    }
     return Node.fromJSON(schema, data);
   }
 

server/models/helpers/SearchHelper.ts

@@ -601,6 +601,8 @@ export default class SearchHelper {
   }
 
   private static removeStopWords(query: string): string {
+    // Based on:
+    // https://github.com/postgres/postgres/blob/fc0d0ce978752493868496be6558fa17b7c4c3cf/src/backend/snowball/stopwords/english.stop
     const stopwords = [
       "i",
       "me",
@@ -665,7 +667,6 @@ export default class SearchHelper {
       "because",
       "as",
       "until",
-      "while",
       "of",
       "at",
       "by",
@@ -673,7 +674,6 @@ export default class SearchHelper {
       "with",
       "about",
       "against",
-      "between",
       "into",
       "through",
       "during",
@@ -681,18 +681,12 @@ export default class SearchHelper {
       "after",
       "above",
       "below",
-      "to",
       "from",
-      "up",
       "down",
-      "in",
-      "out",
-      "on",
       "off",
       "over",
       "under",
       "again",
-      "further",
       "then",
       "once",
       "here",
@@ -700,22 +694,15 @@ export default class SearchHelper {
       "when",
       "where",
       "why",
-      "how",
-      "all",
       "any",
       "both",
       "each",
       "few",
-      "more",
-      "most",
       "other",
       "some",
       "such",
-      "no",
       "nor",
-      "not",
       "only",
-      "own",
       "same",
       "so",
       "than",
@@ -723,12 +710,8 @@ export default class SearchHelper {
       "very",
       "s",
       "t",
-      "can",
-      "will",
-      "just",
       "don",
       "should",
-      "now",
     ];
     return query
       .split(" ")

server/onerror.ts

@@ -6,18 +6,8 @@ import Koa from "koa";
 import escape from "lodash/escape";
 import isNil from "lodash/isNil";
 import snakeCase from "lodash/snakeCase";
-import {
-  ValidationError as SequelizeValidationError,
-  EmptyResultError as SequelizeEmptyResultError,
-} from "sequelize";
 import env from "@server/env";
-import {
-  AuthorizationError,
-  ClientClosedRequestError,
-  InternalError,
-  NotFoundError,
-  ValidationError,
-} from "@server/errors";
+import { ClientClosedRequestError, InternalError } from "@server/errors";
 import { requestErrorHandler } from "@server/logging/sentry";
 
 let errorHtmlCache: Buffer | undefined;
@@ -32,16 +22,6 @@ export default function onerror(app: Koa) {
 
     err = wrapInNativeError(err);
 
-    if (err instanceof SequelizeValidationError) {
-      if (err.errors && err.errors[0]) {
-        err = ValidationError(
-          `${err.errors[0].message} (${err.errors[0].path})`
-        );
-      } else {
-        err = ValidationError();
-      }
-    }
-
     // Client aborted errors are a 500 by default, but 499 is more appropriate
     if (err instanceof formidable.errors.FormidableError) {
       if (err.internalCode === 1002) {
@@ -49,21 +29,6 @@ export default function onerror(app: Koa) {
       }
     }
 
-    if (
-      err.code === "ENOENT" ||
-      err instanceof SequelizeEmptyResultError ||
-      /Not found/i.test(err.message)
-    ) {
-      err = NotFoundError();
-    }
-
-    if (
-      !(err instanceof AuthorizationError) &&
-      /Authorization error/i.test(err.message)
-    ) {
-      err = AuthorizationError();
-    }
-
     // Push only unknown and 500 status errors to sentry
     if (
       typeof err.status !== "number" ||

server/policies/index.ts

@@ -12,6 +12,7 @@ import "./fileOperation";
 import "./integration";
 import "./pins";
 import "./reaction";
+import "./revision";
 import "./searchQuery";
 import "./share";
 import "./star";

server/policies/revision.ts

@@ -0,0 +1,11 @@
+import { User, Revision } from "@server/models";
+import { allow } from "./cancan";
+import { and, isTeamMutable, or } from "./utils";
+
+allow(User, ["update"], Revision, (actor, revision) =>
+  and(
+    //
+    or(actor.id === revision?.userId, actor.isAdmin),
+    isTeamMutable(actor)
+  )
+);

server/presenters/document.ts

@@ -42,7 +42,7 @@ async function presentDocument(
 
   const text =
     !asData || options?.includeText
-      ? document.text || DocumentHelper.toMarkdown(data)
+      ? DocumentHelper.toMarkdown(data, { includeTitle: false })
       : undefined;
 
   const res: Record<string, any> = {

server/presenters/revision.ts

@@ -12,6 +12,7 @@ async function presentRevision(revision: Revision, diff?: string) {
     id: revision.id,
     documentId: revision.documentId,
     title: strippedTitle,
+    name: revision.name,
     data: await DocumentHelper.toJSON(revision),
     icon: revision.icon ?? emoji,
     color: revision.color,

server/queues/processors/RevisionsProcessor.ts

@@ -2,6 +2,7 @@ import isEqual from "fast-deep-equal";
 import revisionCreator from "@server/commands/revisionCreator";
 import { Revision, Document, User } from "@server/models";
 import { DocumentEvent, RevisionEvent, Event } from "@server/types";
+import DocumentUpdateTextTask from "../tasks/DocumentUpdateTextTask";
 import BaseProcessor from "./BaseProcessor";
 
 export default class RevisionsProcessor extends BaseProcessor {
@@ -36,6 +37,8 @@ export default class RevisionsProcessor extends BaseProcessor {
           return;
         }
 
+        await DocumentUpdateTextTask.schedule(event);
+
         const user = await User.findByPk(event.actorId, {
           paranoid: false,
           rejectOnEmpty: true,

server/queues/tasks/DocumentUpdateTextTask.ts

@@ -0,0 +1,18 @@
+import { Node } from "prosemirror-model";
+import { schema, serializer } from "@server/editor";
+import { Document } from "@server/models";
+import { DocumentEvent } from "@server/types";
+import BaseTask from "./BaseTask";
+
+export default class DocumentUpdateTextTask extends BaseTask<DocumentEvent> {
+  public async perform(event: DocumentEvent) {
+    const document = await Document.findByPk(event.documentId);
+    if (!document?.content) {
+      return;
+    }
+
+    const node = Node.fromJSON(schema, document.content);
+    document.text = serializer.serialize(node);
+    await document.save({ silent: true });
+  }
+}

server/queues/tasks/RevisionCreatedNotificationsTask.test.ts

@@ -169,19 +169,25 @@ describe("revisions.create", () => {
 
     // Should emit 3 `subscriptions.create` events.
     expect(events.length).toEqual(3);
-    expect(events[0].name).toEqual("subscriptions.create");
-    expect(events[1].name).toEqual("subscriptions.create");
-    expect(events[2].name).toEqual("subscriptions.create");
+    expect(
+      events.every((event) => event.name === "subscriptions.create")
+    ).toEqual(true);
 
     // Each event should point to same document.
-    expect(events[0].documentId).toEqual(document.id);
-    expect(events[1].documentId).toEqual(document.id);
-    expect(events[2].documentId).toEqual(document.id);
+    expect(events.every((event) => event.documentId === document.id)).toEqual(
+      true
+    );
 
     // Events should mention correct `userId`.
-    expect(events[0].userId).toEqual(collaborator0.id);
-    expect(events[1].userId).toEqual(collaborator1.id);
-    expect(events[2].userId).toEqual(collaborator2.id);
+    const userIds = events.map((event) => event.userId);
+    expect(userIds).toEqual(
+      expect.arrayContaining([
+        collaborator0.id,
+        collaborator1.id,
+        collaborator2.id,
+      ])
+    );
+    expect(userIds.length).toBe(3);
   });
 
   test("should not send multiple emails", async () => {
@@ -266,16 +272,15 @@ describe("revisions.create", () => {
 
     // Should emit 2 `subscriptions.create` events.
     expect(events.length).toEqual(2);
-    expect(events[0].name).toEqual("subscriptions.create");
-    expect(events[1].name).toEqual("subscriptions.create");
-
-    // Each event should point to same document.
-    expect(events[0].documentId).toEqual(document.id);
-    expect(events[1].documentId).toEqual(document.id);
-
-    // Events should mention correct `userId`.
-    expect(events[0].userId).toEqual(collaborator0.id);
-    expect(events[1].userId).toEqual(collaborator1.id);
+    expect(events.every((event) => event.documentId === document.id)).toEqual(
+      true
+    );
+    expect(events.some((event) => event.userId === collaborator0.id)).toEqual(
+      true
+    );
+    expect(events.some((event) => event.userId === collaborator1.id)).toEqual(
+      true
+    );
 
     // One notification as one collaborator performed edit and the other is
     // unsubscribed

server/routes/api/collections/collections.ts

@@ -702,7 +702,7 @@ router.post(
   pagination(),
   transaction(),
   async (ctx: APIContext<T.CollectionsListReq>) => {
-    const { includeListOnly, statusFilter } = ctx.input.body;
+    const { includeListOnly, query, statusFilter } = ctx.input.body;
     const { user } = ctx.state.auth;
     const { transaction } = ctx.state;
     const collectionIds = await user.collectionIds({ transaction });
@@ -728,6 +728,12 @@ router.post(
       where[Op.and].push({ id: collectionIds });
     }
 
+    if (query) {
+      where[Op.and].push(
+        Sequelize.literal(`unaccent(LOWER(name)) like unaccent(LOWER(:query))`)
+      );
+    }
+
     const statusQuery = [];
     if (statusFilter?.includes(CollectionStatusFilter.Archived)) {
       statusQuery.push({
@@ -743,6 +749,8 @@ router.post(
       });
     }
 
+    const replacements = { query: `%${query}%` };
+
     const [collections, total] = await Promise.all([
       Collection.scope(
         statusFilter?.includes(CollectionStatusFilter.Archived)
@@ -757,6 +765,7 @@ router.post(
             }
       ).findAll({
         where,
+        replacements,
         order: [
           Sequelize.literal('"collection"."index" collate "C"'),
           ["updatedAt", "DESC"],
@@ -765,7 +774,12 @@ router.post(
         limit: ctx.state.pagination.limit,
         transaction,
       }),
-      Collection.count({ where, transaction }),
+      Collection.count({
+        where,
+        // @ts-expect-error Types are incorrect for count
+        replacements,
+        transaction,
+      }),
     ]);
 
     const nullIndex = collections.findIndex(

server/routes/api/collections/schema.ts

@@ -178,6 +178,9 @@ export type CollectionsUpdateReq = z.infer<typeof CollectionsUpdateSchema>;
 export const CollectionsListSchema = BaseSchema.extend({
   body: z.object({
     includeListOnly: z.boolean().default(false),
+
+    query: z.string().optional(),
+
     /** Collection statuses to include in results */
     statusFilter: z.nativeEnum(CollectionStatusFilter).array().optional(),
   }),

server/routes/api/comments/__snapshots__/comments.test.ts.snap

@@ -9,6 +9,59 @@ exports[`#comments.add_reaction should require authentication 1`] = `
 }
 `;
 
+exports[`#comments.create should create a comment from markdown text 1`] = `
+{
+  "content": [
+    {
+      "attrs": {
+        "level": 2,
+      },
+      "content": [
+        {
+          "text": "heading",
+          "type": "text",
+        },
+      ],
+      "type": "heading",
+    },
+    {
+      "content": [
+        {
+          "content": [
+            {
+              "content": [
+                {
+                  "text": "list item 1",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "list_item",
+        },
+        {
+          "content": [
+            {
+              "content": [
+                {
+                  "text": "list item 2",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "list_item",
+        },
+      ],
+      "type": "bullet_list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`#comments.create should require authentication 1`] = `
 {
   "error": "authentication_required",

server/routes/api/comments/comments.test.ts

@@ -481,6 +481,30 @@ describe("#comments.create", () => {
     expect(body.policies[0].abilities.delete).toBeTruthy();
   });
 
+  it("should create a comment from markdown text", async () => {
+    const team = await buildTeam();
+    const user = await buildUser({ teamId: team.id });
+    const document = await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+    });
+
+    const text = "## heading\n\n- list item 1\n- list item 2";
+
+    const res = await server.post("/api/comments.create", {
+      body: {
+        token: user.getJwtToken(),
+        documentId: document.id,
+        text,
+      },
+    });
+
+    const body = await res.json();
+
+    expect(res.status).toEqual(200);
+    expect(body.data.data).toMatchSnapshot();
+  });
+
   it("should not allow empty comment data", async () => {
     const team = await buildTeam();
     const user = await buildUser({ teamId: team.id });

server/routes/api/comments/comments.ts

@@ -6,6 +6,7 @@ import {
   TeamPreference,
   MentionType,
 } from "@shared/types";
+import { parser } from "@server/editor";
 import auth from "@server/middlewares/authentication";
 import { feature } from "@server/middlewares/feature";
 import { rateLimiter } from "@server/middlewares/rateLimiter";
@@ -13,6 +14,7 @@ import { transaction } from "@server/middlewares/transaction";
 import validate from "@server/middlewares/validate";
 import { Document, Comment, Collection, Reaction } from "@server/models";
 import { ProsemirrorHelper } from "@server/models/helpers/ProsemirrorHelper";
+import { TextHelper } from "@server/models/helpers/TextHelper";
 import { authorize } from "@server/policies";
 import { presentComment, presentPolicies } from "@server/presenters";
 import { APIContext } from "@server/types";
@@ -30,7 +32,7 @@ router.post(
   validate(T.CommentsCreateSchema),
   transaction(),
   async (ctx: APIContext<T.CommentsCreateReq>) => {
-    const { id, documentId, parentCommentId, data } = ctx.input.body;
+    const { id, documentId, parentCommentId } = ctx.input.body;
     const { user } = ctx.state.auth;
     const { transaction } = ctx.state;
 
@@ -40,6 +42,15 @@ router.post(
     });
     authorize(user, "comment", document);
 
+    const text = ctx.input.body.text
+      ? await TextHelper.replaceImagesWithAttachments(
+          ctx,
+          ctx.input.body.text,
+          user
+        )
+      : undefined;
+    const data = text ? parser.parse(text).toJSON() : ctx.input.body.data;
+
     const comment = await Comment.createWithCtx(ctx, {
       id,
       data,

server/routes/api/comments/schema.ts

@@ -1,4 +1,5 @@
 import emojiRegex from "emoji-regex";
+import isEmpty from "lodash/isEmpty";
 import { z } from "zod";
 import { CommentStatusFilter } from "@shared/types";
 import { BaseSchema, ProsemirrorSchema } from "@server/routes/api/schema";
@@ -23,19 +24,26 @@ const CommentsSortParamsSchema = z.object({
 });
 
 export const CommentsCreateSchema = BaseSchema.extend({
-  body: z.object({
-    /** Allow creation with a specific ID */
-    id: z.string().uuid().optional(),
+  body: z
+    .object({
+      /** Allow creation with a specific ID */
+      id: z.string().uuid().optional(),
 
-    /** Create comment for this document */
-    documentId: z.string().uuid(),
+      /** Create comment for this document */
+      documentId: z.string().uuid(),
 
-    /** Create comment under this parent */
-    parentCommentId: z.string().uuid().optional(),
+      /** Create comment under this parent */
+      parentCommentId: z.string().uuid().optional(),
 
-    /** Create comment with this data */
-    data: ProsemirrorSchema(),
-  }),
+      /** Create comment with this data */
+      data: ProsemirrorSchema().optional(),
+
+      /** Create comment with this text */
+      text: z.string().optional(),
+    })
+    .refine((obj) => !(isEmpty(obj.data) && isEmpty(obj.text)), {
+      message: "One of data or text is required",
+    }),
 });
 
 export type CommentsCreateReq = z.infer<typeof CommentsCreateSchema>;

server/routes/api/documents/documents.test.ts

@@ -8,6 +8,7 @@ import {
 } from "@shared/types";
 import { TextHelper } from "@shared/utils/TextHelper";
 import { createContext } from "@server/context";
+import { parser } from "@server/editor";
 import {
   Document,
   View,
@@ -3257,21 +3258,26 @@ describe("#documents.restore", () => {
       teamId: user.teamId,
     });
     const revision = await Revision.createFromDocument(document);
-    const previousText = revision.text;
+    const previous = revision.content;
     const revisionId = revision.id;
+
     // update the document contents
-    document.text = "UPDATED";
+    document.content = parser.parse("updated")?.toJSON();
     await document.save();
+
     const res = await server.post("/api/documents.restore", {
       body: {
         token: user.getJwtToken(),
         id: document.id,
         revisionId,
       },
+      headers: {
+        "x-api-version": 3,
+      },
     });
     const body = await res.json();
     expect(res.status).toEqual(200);
-    expect(body.data.text).toEqual(previousText);
+    expect(body.data.data).toEqual(previous);
   });
 
   it("should not allow restoring a revision in another document", async () => {

server/routes/api/index.ts

@@ -22,6 +22,7 @@ import groupMemberships from "./groupMemberships";
 import groups from "./groups";
 import installation from "./installation";
 import integrations from "./integrations";
+import apiErrorHandler from "./middlewares/apiErrorHandler";
 import apiResponse from "./middlewares/apiResponse";
 import apiTracer from "./middlewares/apiTracer";
 import editor from "./middlewares/editor";
@@ -60,6 +61,7 @@ api.use(coalesceBody());
 api.use<BaseContext, UserAgentContext>(userAgent);
 api.use(apiTracer());
 api.use(apiResponse());
+api.use(apiErrorHandler());
 api.use(editor());
 
 // Register plugin API routes before others to allow for overrides

server/routes/api/middlewares/apiErrorHandler.ts

@@ -0,0 +1,47 @@
+import { Context, Next } from "koa";
+import {
+  ValidationError as SequelizeValidationError,
+  EmptyResultError as SequelizeEmptyResultError,
+} from "sequelize";
+import {
+  AuthorizationError,
+  NotFoundError,
+  ValidationError,
+} from "@server/errors";
+
+export default function apiErrorHandler() {
+  return async function apiErrorHandlerMiddleware(ctx: Context, next: Next) {
+    try {
+      await next();
+    } catch (err) {
+      let transformedErr = err;
+
+      if (
+        !(err instanceof AuthorizationError) &&
+        /Authorization error/i.test(err.message)
+      ) {
+        transformedErr = AuthorizationError();
+      }
+
+      if (err instanceof SequelizeValidationError) {
+        if (err.errors && err.errors[0]) {
+          transformedErr = ValidationError(
+            `${err.errors[0].message} (${err.errors[0].path})`
+          );
+        } else {
+          transformedErr = ValidationError();
+        }
+      }
+
+      if (
+        err.code === "ENOENT" ||
+        err instanceof SequelizeEmptyResultError ||
+        /Not found/i.test(err.message)
+      ) {
+        transformedErr = NotFoundError();
+      }
+
+      throw transformedErr;
+    }
+  };
+}

server/routes/api/revisions/revisions.test.ts

@@ -1,5 +1,6 @@
 import { UserMembership, Revision } from "@server/models";
 import {
+  buildAdmin,
   buildCollection,
   buildDocument,
   buildUser,
@@ -42,6 +43,61 @@ describe("#revisions.info", () => {
   });
 });
 
+describe("#revisions.update", () => {
+  it("should update a document revision", async () => {
+    const user = await buildUser();
+    const document = await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+    });
+    const revision = await Revision.createFromDocument(document);
+
+    const res = await server.post("/api/revisions.update", {
+      body: {
+        token: user.getJwtToken(),
+        id: revision.id,
+        name: "new name",
+      },
+    });
+    const body = await res.json();
+    expect(res.status).toEqual(200);
+    expect(body.data.name).toEqual("new name");
+  });
+
+  it("should allow an admin to update a document revision", async () => {
+    const admin = await buildAdmin();
+    const document = await buildDocument({
+      teamId: admin.teamId,
+    });
+    const revision = await Revision.createFromDocument(document);
+
+    const res = await server.post("/api/revisions.update", {
+      body: {
+        token: admin.getJwtToken(),
+        id: revision.id,
+        name: "new name",
+      },
+    });
+    const body = await res.json();
+    expect(res.status).toEqual(200);
+    expect(body.data.name).toEqual("new name");
+  });
+
+  it("should require authorization", async () => {
+    const document = await buildDocument();
+    const revision = await Revision.createFromDocument(document);
+    const user = await buildUser();
+    const res = await server.post("/api/revisions.update", {
+      body: {
+        token: user.getJwtToken(),
+        id: revision.id,
+        name: "new name",
+      },
+    });
+    expect(res.status).toEqual(403);
+  });
+});
+
 describe("#revisions.diff", () => {
   it("should return the document HTML if no previous revision", async () => {
     const user = await buildUser();

server/routes/api/revisions/revisions.ts

@@ -4,11 +4,12 @@ import { RevisionHelper } from "@shared/utils/RevisionHelper";
 import slugify from "@shared/utils/slugify";
 import { ValidationError } from "@server/errors";
 import auth from "@server/middlewares/authentication";
+import { transaction } from "@server/middlewares/transaction";
 import validate from "@server/middlewares/validate";
 import { Document, Revision } from "@server/models";
 import { DocumentHelper } from "@server/models/helpers/DocumentHelper";
 import { authorize } from "@server/policies";
-import { presentRevision } from "@server/presenters";
+import { presentPolicies, presentRevision } from "@server/presenters";
 import { APIContext } from "@server/types";
 import pagination from "../middlewares/pagination";
 import * as T from "./schema";
@@ -57,6 +58,36 @@ router.post(
           includeStyles: false,
         })
       ),
+      policies: presentPolicies(user, [after]),
+    };
+  }
+);
+
+router.post(
+  "revisions.update",
+  auth(),
+  validate(T.RevisionsUpdateSchema),
+  transaction(),
+  async (ctx: APIContext<T.RevisionsUpdateReq>) => {
+    const { id, name } = ctx.input.body;
+    const { user } = ctx.state.auth;
+    const { transaction } = ctx.state;
+
+    const revision = await Revision.findByPk(id, {
+      rejectOnEmpty: true,
+    });
+    const document = await Document.findByPk(revision.documentId, {
+      userId: user.id,
+    });
+    authorize(user, "update", document);
+    authorize(user, "update", revision);
+
+    revision.name = name;
+    await revision.save({ transaction });
+
+    ctx.body = {
+      data: await presentRevision(revision),
+      policies: presentPolicies(user, [revision]),
     };
   }
 );
@@ -110,6 +141,7 @@ router.post(
 
     ctx.body = {
       data: content,
+      policies: presentPolicies(user, [revision]),
     };
   }
 );
@@ -144,6 +176,7 @@ router.post(
     ctx.body = {
       pagination: ctx.state.pagination,
       data,
+      policies: presentPolicies(user, revisions),
     };
   }
 );

server/routes/api/revisions/schema.ts

@@ -1,5 +1,6 @@
 import isEmpty from "lodash/isEmpty";
 import { z } from "zod";
+import { RevisionValidation } from "@shared/validations";
 import { Revision } from "@server/models";
 import { BaseSchema } from "@server/routes/api/schema";
 
@@ -25,6 +26,19 @@ export const RevisionsDiffSchema = BaseSchema.extend({
 
 export type RevisionsDiffReq = z.infer<typeof RevisionsDiffSchema>;
 
+export const RevisionsUpdateSchema = BaseSchema.extend({
+  body: z.object({
+    id: z.string().uuid(),
+
+    name: z
+      .string()
+      .min(RevisionValidation.minNameLength)
+      .max(RevisionValidation.maxNameLength),
+  }),
+});
+
+export type RevisionsUpdateReq = z.infer<typeof RevisionsUpdateSchema>;
+
 export const RevisionsListSchema = z.object({
   body: z.object({
     direction: z

server/routes/api/shares/schema.ts

@@ -29,6 +29,7 @@ export type SharesInfoReq = z.infer<typeof SharesInfoSchema>;
 
 export const SharesListSchema = BaseSchema.extend({
   body: z.object({
+    query: z.string().optional(),
     sort: z
       .string()
       .refine((val) => Object.keys(Share.getAttributes()).includes(val), {

server/routes/api/shares/shares.test.ts

@@ -57,6 +57,58 @@ describe("#shares.list", () => {
     expect(body.data[0].documentTitle).toBe(document.title);
   });
 
+  it("should allow filtering by document title", async () => {
+    const user = await buildUser();
+    const document = await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+      title: "hardcoded",
+    });
+    await buildShare({
+      documentId: document.id,
+      teamId: user.teamId,
+      userId: user.id,
+    });
+    const res = await server.post("/api/shares.list", {
+      body: {
+        token: user.getJwtToken(),
+        query: "test",
+      },
+    });
+    const body = await res.json();
+    expect(res.status).toEqual(200);
+    expect(body.data.length).toEqual(0);
+  });
+
+  it("should allow filtering by document title and return matching shares", async () => {
+    const user = await buildUser();
+    await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+    });
+    const document = await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+      title: "test",
+    });
+    const share = await buildShare({
+      documentId: document.id,
+      teamId: user.teamId,
+      userId: user.id,
+    });
+    const res = await server.post("/api/shares.list", {
+      body: {
+        token: user.getJwtToken(),
+        query: "test",
+      },
+    });
+    const body = await res.json();
+    expect(res.status).toEqual(200);
+    expect(body.data.length).toEqual(1);
+    expect(body.data[0].id).toEqual(share.id);
+    expect(body.data[0].documentTitle).toBe("test");
+  });
+
   it("should not return revoked shares", async () => {
     const user = await buildUser();
     const document = await buildDocument({

server/routes/api/shares/shares.ts

@@ -98,9 +98,10 @@ router.post(
   pagination(),
   validate(T.SharesListSchema),
   async (ctx: APIContext<T.SharesListReq>) => {
-    const { sort, direction } = ctx.input.body;
+    const { sort, direction, query } = ctx.input.body;
     const { user } = ctx.state.auth;
     authorize(user, "listShares", user.team);
+    const collectionIds = await user.collectionIds();
 
     const where: WhereOptions<Share> = {
       teamId: user.teamId,
@@ -111,12 +112,21 @@ router.post(
       },
     };
 
+    const documentWhere: WhereOptions<Document> = {
+      teamId: user.teamId,
+      collectionId: collectionIds,
+    };
+
+    if (query) {
+      documentWhere.title = {
+        [Op.iLike]: `%${query}%`,
+      };
+    }
+
     if (user.isAdmin) {
       delete where.userId;
     }
 
-    const collectionIds = await user.collectionIds();
-
     const options: FindOptions = {
       where,
       include: [
@@ -125,9 +135,7 @@ router.post(
           required: true,
           paranoid: true,
           as: "document",
-          where: {
-            collectionId: collectionIds,
-          },
+          where: documentWhere,
           include: [
             {
               model: Collection.scope({

server/routes/app.ts

@@ -112,6 +112,10 @@ export const renderApp = async (
       <script type="module" nonce="${ctx.state.cspNonce}" src="${viteHost}/static/${entry}"></script>
     `;
 
+  // Ensure no caching is performed
+  ctx.response.set("Cache-Control", "no-cache, must-revalidate");
+  ctx.response.set("Expires", "-1");
+
   ctx.body = page
     .toString()
     .replace(/\{env\}/g, environment)

server/routes/index.ts

@@ -139,29 +139,26 @@ router.get("*", shareDomains(), async (ctx, next) => {
   }
 
   const team = await getTeamFromContext(ctx);
-  let redirectUrl;
 
   if (env.isCloudHosted) {
     // Redirect all requests to custom domain if one is set
-    if (team?.domain && team.domain !== ctx.hostname) {
-      redirectUrl = ctx.href.replace(ctx.hostname, team.domain);
+    if (team?.domain) {
+      if (team.domain !== ctx.hostname) {
+        ctx.redirect(ctx.href.replace(ctx.hostname, team.domain));
+        return;
+      }
     }
 
     // Redirect if subdomain is not the current team's subdomain
     else if (team?.subdomain) {
       const { teamSubdomain } = parseDomain(ctx.href);
       if (team?.subdomain !== teamSubdomain) {
-        redirectUrl = ctx.href.replace(
-          `//${teamSubdomain}.`,
-          `//${team.subdomain}.`
+        ctx.redirect(
+          ctx.href.replace(`//${teamSubdomain}.`, `//${team.subdomain}.`)
         );
+        return;
       }
     }
-
-    if (redirectUrl) {
-      ctx.redirect(redirectUrl);
-      return;
-    }
   }
 
   const analytics = team

server/services/websockets.ts

@@ -4,6 +4,7 @@ import cookie from "cookie";
 import Koa from "koa";
 import IO from "socket.io";
 import { createAdapter } from "socket.io-redis";
+import EDITOR_VERSION from "@shared/editor/version";
 import { AuthenticationError } from "@server/errors";
 import Logger from "@server/logging/Logger";
 import Metrics from "@server/logging/Metrics";
@@ -116,7 +117,7 @@ export default function init(
       await authenticate(socket);
       Logger.debug("websockets", `Authenticated socket ${socket.id}`);
 
-      socket.emit("authenticated", true);
+      socket.emit("authenticated", { editorVersion: EDITOR_VERSION });
       void authenticated(io, socket);
     } catch (err) {
       Logger.debug("websockets", `Authentication error socket ${socket.id}`, {

server/storage/database.ts

@@ -48,16 +48,15 @@ export function createDatabaseInstance(
       schema,
     });
   } catch (error) {
-    if (error instanceof URIError) {
-      Logger.fatal(
-        "Could not connect to database",
-        new Error(
-          `Failed to parse: ${databaseUrl}, ensure special characters in database URL are properly encoded`
-        )
-      );
-      process.exit(1);
-    }
-    throw error;
+    Logger.fatal(
+      "Could not connect to database",
+      databaseUrl
+        ? new Error(
+            `Failed to parse: "${databaseUrl}". Ensure special characters in database URL are encoded`
+          )
+        : new Error(`DATABASE_URL is not set.`)
+    );
+    process.exit(1);
   }
 }
 

shared/constants.ts

@@ -32,6 +32,6 @@ export const UserPreferenceDefaults: UserPreferences = {
   [UserPreference.RememberLastPath]: true,
   [UserPreference.UseCursorPointer]: true,
   [UserPreference.CodeBlockLineNumers]: true,
-  [UserPreference.SortCommentsByOrderInDocument]: false,
+  [UserPreference.SortCommentsByOrderInDocument]: true,
   [UserPreference.EnableSmartText]: true,
 };

shared/editor/commands/table.ts

@@ -1,3 +1,4 @@
+import { GapCursor } from "prosemirror-gapcursor";
 import { Node, NodeType } from "prosemirror-model";
 import { Command, EditorState, TextSelection } from "prosemirror-state";
 import {
@@ -61,13 +62,14 @@ function createTableInner(
       : cellType.createAndFill(attrs);
 
   for (let index = 0; index < colsCount; index += 1) {
-    const attrs = colWidth
-      ? {
-          colwidth: [colWidth],
-          colspan: 1,
-          rowspan: 1,
-        }
-      : null;
+    const attrs =
+      colWidth && index < colsCount - 1
+        ? {
+            colwidth: [colWidth],
+            colspan: 1,
+            rowspan: 1,
+          }
+        : null;
     const cell = createCell(types.cell, attrs);
 
     if (cell) {
@@ -498,3 +500,46 @@ export function selectTable(): Command {
     return false;
   };
 }
+
+export function moveOutOfTable(direction: 1 | -1): Command {
+  return (state, dispatch): boolean => {
+    if (dispatch) {
+      if (state.selection instanceof GapCursor) {
+        return false;
+      }
+      if (!isInTable(state)) {
+        return false;
+      }
+
+      // check if current cursor position is at the top or bottom of the table
+      const rect = selectedRect(state);
+      const topOfTable =
+        rect.top === 0 && rect.bottom === 1 && direction === -1;
+      const bottomOfTable =
+        rect.top === rect.map.height - 1 &&
+        rect.bottom === rect.map.height &&
+        direction === 1;
+
+      if (!topOfTable && !bottomOfTable) {
+        return false;
+      }
+
+      const map = rect.map.map;
+      const $start = state.doc.resolve(rect.tableStart + map[0] - 1);
+      const $end = state.doc.resolve(rect.tableStart + map[map.length - 1] + 2);
+
+      // @ts-expect-error findGapCursorFrom is a ProseMirror internal method.
+      const $found = GapCursor.findGapCursorFrom(
+        direction > 0 ? $end : $start,
+        direction,
+        true
+      );
+
+      if ($found) {
+        dispatch(state.tr.setSelection(new GapCursor($found)));
+        return true;
+      }
+    }
+    return false;
+  };
+}

shared/editor/components/Caption.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import { s } from "../../styles";
+import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 
 type Props = {
   /** Callback triggered when the caption is blurred */
@@ -40,7 +40,7 @@ function Caption({ placeholder, children, isSelected, width, ...rest }: Props) {
       $isSelected={isSelected}
       onMouseDown={handleMouseDown}
       onPaste={handlePaste}
-      className="caption"
+      className={EditorStyleHelper.imageCaption}
       tabIndex={-1}
       role="textbox"
       contentEditable
@@ -54,34 +54,16 @@ function Caption({ placeholder, children, isSelected, width, ...rest }: Props) {
 }
 
 const Content = styled.p<{ $width: number; $isSelected: boolean }>`
-  border: 0;
-  display: block;
-  font-style: italic;
-  font-weight: normal;
-  color: ${s("textSecondary")};
-  padding: 8px 0 4px;
-  line-height: 16px;
-  text-align: center;
-  min-height: 1em;
-  outline: none;
-  background: none;
-  resize: none;
-  user-select: text;
-  margin: 0 auto !important;
   cursor: text;
   width: ${(props) => props.$width}px;
   min-width: 200px;
   max-width: 100%;
 
-  ${breakpoint("tablet")`
-    font-size: 13px;
-  `};
-
   &:empty:not(:focus) {
     display: ${(props) => (props.$isSelected ? "block" : "none")}};
   }
 
-  &:empty:before {
+  &:empty::before {
     color: ${s("placeholder")};
     content: attr(data-caption);
     pointer-events: none;

shared/editor/components/Styles.ts

@@ -692,11 +692,29 @@ img.ProseMirror-separator {
   display: none;
 }
 
+.${EditorStyleHelper.imageCaption} {
+  border: 0;
+  display: block;
+  font-style: italic;
+  font-weight: normal;
+  font-size: 13px;
+  color: ${props.theme.textSecondary};
+  padding: 8px 0 4px;
+  line-height: 16px;
+  text-align: center;
+  min-height: 1em;
+  outline: none;
+  background: none;
+  resize: none;
+  user-select: text;
+  margin: 0 auto !important;
+}
+
 .ProseMirror[contenteditable="false"] {
-  .caption {
+  .${EditorStyleHelper.imageCaption} {
     pointer-events: none;
   }
-  .caption:empty {
+  .${EditorStyleHelper.imageCaption}:empty {
     visibility: hidden;
   }
 }

shared/editor/embeds/index.tsx

@@ -322,7 +322,6 @@ const embeds: EmbedDescriptor[] = [
     regexMatch: [new RegExp("^https?://www\\.google\\.com/maps/embed\\?(.*)$")],
     transformMatch: (matches: RegExpMatchArray) => matches[0],
     icon: <Img src="/images/google-maps.png" alt="Google Maps" />,
-    visible: true,
   }),
   new EmbedDescriptor({
     title: "Google Drawings",

shared/editor/nodes/Image.tsx

@@ -12,6 +12,7 @@ import { sanitizeUrl } from "../../utils/urls";
 import Caption from "../components/Caption";
 import ImageComponent from "../components/Image";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
+import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 import { ComponentProps } from "../types";
 import SimpleImage from "./SimpleImage";
 
@@ -152,11 +153,8 @@ export default class Image extends SimpleImage {
         const className = node.attrs.layoutClass
           ? `image image-${node.attrs.layoutClass}`
           : "image";
-        return [
-          "div",
-          {
-            class: className,
-          },
+
+        const children = [
           [
             "img",
             {
@@ -167,7 +165,22 @@ export default class Image extends SimpleImage {
               contentEditable: "false",
             },
           ],
-          ["p", { class: "caption" }, 0],
+        ];
+
+        if (node.attrs.alt) {
+          children.push([
+            "p",
+            { class: EditorStyleHelper.imageCaption },
+            node.attrs.alt,
+          ]);
+        }
+
+        return [
+          "div",
+          {
+            class: className,
+          },
+          ...children,
         ];
       },
       toPlainText: (node) =>

shared/editor/nodes/Notice.tsx

@@ -2,6 +2,7 @@ import { Token } from "markdown-it";
 import { WarningIcon, InfoIcon, StarredIcon, DoneIcon } from "outline-icons";
 import { wrappingInputRule } from "prosemirror-inputrules";
 import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
+import { Command, EditorState, Transaction } from "prosemirror-state";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { Primitive } from "utility-types";
@@ -10,6 +11,13 @@ import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import noticesRule from "../rules/notices";
 import Node from "./Node";
 
+export enum NoticeTypes {
+  Info = "info",
+  Success = "success",
+  Tip = "tip",
+  Warning = "warning",
+}
+
 export default class Notice extends Node {
   get name() {
     return "container_notice";
@@ -23,7 +31,7 @@ export default class Notice extends Node {
     return {
       attrs: {
         style: {
-          default: "info",
+          default: NoticeTypes.Info,
         },
       },
       content:
@@ -38,12 +46,12 @@ export default class Notice extends Node {
           contentElement: (node: HTMLDivElement) =>
             node.querySelector("div.content") || node,
           getAttrs: (dom: HTMLDivElement) => ({
-            style: dom.className.includes("tip")
-              ? "tip"
-              : dom.className.includes("warning")
-              ? "warning"
-              : dom.className.includes("success")
-              ? "success"
+            style: dom.className.includes(NoticeTypes.Tip)
+              ? NoticeTypes.Tip
+              : dom.className.includes(NoticeTypes.Warning)
+              ? NoticeTypes.Warning
+              : dom.className.includes(NoticeTypes.Success)
+              ? NoticeTypes.Success
               : undefined,
           }),
         },
@@ -60,10 +68,10 @@ export default class Notice extends Node {
           tag: "div.alert.theme-admonition",
           preserveWhitespace: "full",
           getAttrs: (dom: HTMLDivElement) => ({
-            style: dom.className.includes("warning")
-              ? "warning"
-              : dom.className.includes("success")
-              ? "success"
+            style: dom.className.includes(NoticeTypes.Warning)
+              ? NoticeTypes.Warning
+              : dom.className.includes(NoticeTypes.Success)
+              ? NoticeTypes.Success
               : undefined,
           }),
         },
@@ -73,11 +81,11 @@ export default class Notice extends Node {
           preserveWhitespace: "full",
           getAttrs: (dom: HTMLDivElement) => ({
             style: dom.className.includes("confluence-information-macro-tip")
-              ? "success"
+              ? NoticeTypes.Success
               : dom.className.includes("confluence-information-macro-note")
-              ? "tip"
+              ? NoticeTypes.Tip
               : dom.className.includes("confluence-information-macro-warning")
-              ? "warning"
+              ? NoticeTypes.Warning
               : undefined,
           }),
         },
@@ -87,11 +95,11 @@ export default class Notice extends Node {
         if (typeof document !== "undefined") {
           let component;
 
-          if (node.attrs.style === "tip") {
+          if (node.attrs.style === NoticeTypes.Tip) {
             component = <StarredIcon />;
-          } else if (node.attrs.style === "warning") {
+          } else if (node.attrs.style === NoticeTypes.Warning) {
             component = <WarningIcon />;
-          } else if (node.attrs.style === "success") {
+          } else if (node.attrs.style === NoticeTypes.Success) {
             component = <DoneIcon />;
           } else {
             component = <InfoIcon />;
@@ -113,26 +121,40 @@ export default class Notice extends Node {
   }
 
   commands({ type }: { type: NodeType }) {
-    return (attrs: Record<string, Primitive>) => toggleWrap(type, attrs);
+    return {
+      container_notice: (attrs: Record<string, Primitive>) =>
+        toggleWrap(type, attrs),
+      info: (): Command => (state, dispatch) =>
+        this.handleStyleChange(state, dispatch, NoticeTypes.Info),
+      warning: (): Command => (state, dispatch) =>
+        this.handleStyleChange(state, dispatch, NoticeTypes.Warning),
+      success: (): Command => (state, dispatch) =>
+        this.handleStyleChange(state, dispatch, NoticeTypes.Success),
+      tip: (): Command => (state, dispatch) =>
+        this.handleStyleChange(state, dispatch, NoticeTypes.Tip),
+    };
   }
 
-  handleStyleChange = (event: InputEvent) => {
-    const { view } = this.editor;
-    const { tr } = view.state;
-    const element = event.target;
-    if (!(element instanceof HTMLSelectElement)) {
-      return;
-    }
+  handleStyleChange = (
+    state: EditorState,
+    dispatch: ((tr: Transaction) => void) | undefined,
+    style: NoticeTypes
+  ): boolean => {
+    const { tr, selection } = state;
+    const { $from } = selection;
+    const node = $from.node(-1);
 
-    const { top, left } = element.getBoundingClientRect();
-    const result = view.posAtCoords({ top, left });
-
-    if (result) {
-      const transaction = tr.setNodeMarkup(result.inside, undefined, {
-        style: element.value,
-      });
-      view.dispatch(transaction);
+    if (node?.type.name === this.name) {
+      if (dispatch) {
+        const transaction = tr.setNodeMarkup($from.before(-1), undefined, {
+          ...node.attrs,
+          style,
+        });
+        dispatch(transaction);
+      }
+      return true;
     }
+    return false;
   };
 
   inputRules({ type }: { type: NodeType }) {

shared/editor/nodes/Table.ts

@@ -22,6 +22,7 @@ import {
   setTableAttr,
   deleteColSelection,
   deleteRowSelection,
+  moveOutOfTable,
 } from "../commands/table";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import { FixTablesPlugin } from "../plugins/FixTables";
@@ -95,6 +96,8 @@ export default class Table extends Node {
         deleteColSelection(),
         deleteRowSelection()
       ),
+      ArrowDown: moveOutOfTable(1),
+      ArrowUp: moveOutOfTable(-1),
     };
   }
 

shared/editor/queries/isInNotice.ts

@@ -0,0 +1,13 @@
+import { EditorState } from "prosemirror-state";
+import { isNodeActive } from "./isNodeActive";
+
+/**
+ * Returns true if the selection is inside a notice block.
+ *
+ * @param state The editor state.
+ * @returns True if the selection is inside a notice block.
+ */
+export function isInNotice(state: EditorState): boolean {
+  const { nodes } = state.schema;
+  return nodes.container_notice && isNodeActive(nodes.container_notice)(state);
+}

shared/editor/styles/EditorStyleHelper.ts

@@ -6,6 +6,8 @@ export class EditorStyleHelper {
 
   static readonly imageHandle = "image-handle";
 
+  static readonly imageCaption = "caption";
+
   // Comments
 
   static readonly comment = "comment-marker";

shared/i18n/locales/en_US/translation.json

@@ -794,7 +794,7 @@
   "Sorry, it looks like that sign-in link is no longer valid, please try requesting another.": "Sorry, it looks like that sign-in link is no longer valid, please try requesting another.",
   "Your account has been suspended. To re-activate your account, please contact a workspace admin.": "Your account has been suspended. To re-activate your account, please contact a workspace admin.",
   "This workspace has been suspended. Please contact support to restore access.": "This workspace has been suspended. Please contact support to restore access.",
-  "Authentication failed – this login method was disabled by a team admin.": "Authentication failed – this login method was disabled by a team admin.",
+  "Authentication failed – this login method was disabled by a workspace admin.": "Authentication failed – this login method was disabled by a workspace admin.",
   "The workspace you are trying to join requires an invite before you can create an account.<1></1>Please request an invite from your workspace admin and try again.": "The workspace you are trying to join requires an invite before you can create an account.<1></1>Please request an invite from your workspace admin and try again.",
   "Sorry, an unknown error occurred.": "Sorry, an unknown error occurred.",
   "Login": "Login",

shared/utils/keyboard.ts

@@ -1,13 +1,42 @@
 import { isMac } from "./browser";
 
+/**
+ * Returns the display string for the alt key
+ */
 export const altDisplay = isMac() ? "⌥" : "Alt";
 
+/**
+ * Returns the display string for the meta key
+ */
 export const metaDisplay = isMac() ? "⌘" : "Ctrl";
 
+/**
+ * Returns the name of the modifier key
+ */
 export const meta = isMac() ? "cmd" : "ctrl";
 
+/**
+ * Returns true if the given event is a modifier key (Cmd or Ctrl on Mac, Alt on
+ * @param event The event to check
+ * @returns True if the event is a modifier key
+ */
 export function isModKey(
   event: KeyboardEvent | MouseEvent | React.KeyboardEvent
 ) {
   return isMac() ? event.metaKey : event.ctrlKey;
 }
+
+/**
+ * Returns a string with the appropriate display strings for the given key
+ *
+ * @param key The key to display
+ * @returns The display string for the key
+ */
+export function normalizeKeyDisplay(key: string) {
+  return key
+    .replace(/Meta/i, metaDisplay)
+    .replace(/Cmd/i, metaDisplay)
+    .replace(/Alt/i, altDisplay)
+    .replace(/Control/i, metaDisplay)
+    .replace(/Shift/i, "⇧");
+}