chore: Compressed inefficient images automatically

Co-authored-by: tommoor <tommoor@users.noreply.github.com>

LICENSE

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

app/components/DocumentListItem.tsx

@@ -25,6 +25,10 @@ import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { documentPath } from "~/utils/routeHelpers";
 import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
+import useActionContext from "~/hooks/useActionContext";
+import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
+import { ContextMenu } from "./Menu/ContextMenu";
+import useStores from "~/hooks/useStores";
 
 type Props = {
   document: Document;
@@ -50,6 +54,7 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const { userMemberships, groupMemberships } = useStores();
   const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
@@ -78,87 +83,109 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar = !document.isArchived && !document.isTemplate;
 
+  const isShared = !!(
+    userMemberships.getByDocumentId(document.id) ||
+    groupMemberships.getByDocumentId(document.id)
+  );
+
   const sidebarContext = determineSidebarContext({
     document,
     user,
     currentContext: locationSidebarContext,
   });
 
-  return (
-    <DocumentLink
-      ref={itemRef}
-      dir={document.dir}
-      role="menuitem"
-      $isStarred={document.isStarred}
-      $menuOpen={menuOpen}
-      to={{
-        pathname: documentPath(document),
-        state: {
-          title: document.titleWithDefault,
-          sidebarContext,
-        },
-      }}
-      {...rest}
-      {...rovingTabIndex}
-    >
-      <Content>
-        <Heading dir={document.dir}>
-          {document.icon && (
-            <>
-              <Icon
-                value={document.icon}
-                color={document.color ?? undefined}
-                initial={document.initial}
-              />
-              &nbsp;
-            </>
-          )}
-          <Title
-            text={document.titleWithDefault}
-            highlight={highlight}
-            dir={document.dir}
-          />
-          {document.isBadgedNew && document.createdBy?.id !== user.id && (
-            <Badge yellow>{t("New")}</Badge>
-          )}
-          {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
-              <Badge>{t("Draft")}</Badge>
-            </Tooltip>
-          )}
-          {canStar && (
-            <StarPositioner>
-              <StarButton document={document} />
-            </StarPositioner>
-          )}
-          {document.isTemplate && showTemplate && (
-            <Badge primary>{t("Template")}</Badge>
-          )}
-        </Heading>
+  const actionContext = useActionContext({
+    isContextMenu: true,
+    activeDocumentId: document.id,
+    activeCollectionId:
+      !isShared && document.collectionId ? document.collectionId : undefined,
+  });
 
-        {!queryIsInTitle && (
-          <ResultContext
-            text={context}
-            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
-            processResult={replaceResultMarks}
+  const contextMenuAction = useDocumentMenuAction({ document });
+
+  return (
+    <ContextMenu
+      action={contextMenuAction}
+      context={actionContext}
+      ariaLabel={t("Document options")}
+      onOpen={handleMenuOpen}
+      onClose={handleMenuClose}
+    >
+      <DocumentLink
+        ref={itemRef}
+        dir={document.dir}
+        role="menuitem"
+        $isStarred={document.isStarred}
+        $menuOpen={menuOpen}
+        to={{
+          pathname: documentPath(document),
+          state: {
+            title: document.titleWithDefault,
+            sidebarContext,
+          },
+        }}
+        {...rest}
+        {...rovingTabIndex}
+      >
+        <Content>
+          <Heading dir={document.dir}>
+            {document.icon && (
+              <>
+                <Icon
+                  value={document.icon}
+                  color={document.color ?? undefined}
+                  initial={document.initial}
+                />
+                &nbsp;
+              </>
+            )}
+            <Title
+              text={document.titleWithDefault}
+              highlight={highlight}
+              dir={document.dir}
+            />
+            {document.isBadgedNew && document.createdBy?.id !== user.id && (
+              <Badge yellow>{t("New")}</Badge>
+            )}
+            {document.isDraft && showDraft && (
+              <Tooltip content={t("Only visible to you")} placement="top">
+                <Badge>{t("Draft")}</Badge>
+              </Tooltip>
+            )}
+            {canStar && (
+              <StarPositioner>
+                <StarButton document={document} />
+              </StarPositioner>
+            )}
+            {document.isTemplate && showTemplate && (
+              <Badge primary>{t("Template")}</Badge>
+            )}
+          </Heading>
+
+          {!queryIsInTitle && (
+            <ResultContext
+              text={context}
+              highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+              processResult={replaceResultMarks}
+            />
+          )}
+          <DocumentMeta
+            document={document}
+            showCollection={showCollection}
+            showPublished={showPublished}
+            showParentDocuments={showParentDocuments}
+            showLastViewed
           />
-        )}
-        <DocumentMeta
-          document={document}
-          showCollection={showCollection}
-          showPublished={showPublished}
-          showParentDocuments={showParentDocuments}
-          showLastViewed
-        />
-      </Content>
-      <Actions>
-        <DocumentMenu
-          document={document}
-          onOpen={handleMenuOpen}
-          onClose={handleMenuClose}
-        />
-      </Actions>
-    </DocumentLink>
+        </Content>
+        <Actions>
+          <DocumentMenu
+            document={document}
+            onOpen={handleMenuOpen}
+            onClose={handleMenuClose}
+          />
+        </Actions>
+      </DocumentLink>
+    </ContextMenu>
   );
 }
 

app/components/Menu/ContextMenu.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { actionV2ToMenuItem } from "~/actions";
+import useActionContext from "~/hooks/useActionContext";
+import useMobile from "~/hooks/useMobile";
+import { ActionContext, ActionV2Variant, ActionV2WithChildren } from "~/types";
+import { toMenuItems } from "./transformer";
+import { observer } from "mobx-react";
+import { useComputed } from "~/hooks/useComputed";
+import { Menu, MenuContent, MenuTrigger } from "~/components/primitives/Menu";
+import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
+
+type Props = {
+  /** Root action with children representing the menu items */
+  action: ActionV2WithChildren;
+  /** Action context to use - new context will be created if not provided */
+  context?: ActionContext;
+  /** Trigger for the menu */
+  children: React.ReactNode;
+  /** ARIA label for the menu */
+  ariaLabel: string;
+  /** Callback when menu is opened */
+  onOpen?: () => void;
+  /** Callback when menu is closed */
+  onClose?: () => void;
+};
+
+export const ContextMenu = observer(
+  ({ action, children, ariaLabel, context, onOpen, onClose }: Props) => {
+    const isMobile = useMobile();
+    const contentRef = React.useRef<React.ElementRef<typeof MenuContent>>(null);
+
+    const actionContext =
+      context ??
+      useActionContext({
+        isContextMenu: true,
+      });
+
+    const menuItems = useComputed(() => {
+      if (!open) {
+        return [];
+      }
+
+      return (action.children as ActionV2Variant[]).map((childAction) =>
+        actionV2ToMenuItem(childAction, actionContext)
+      );
+    }, [open, action.children, actionContext]);
+
+    const handleOpenChange = React.useCallback(
+      (open: boolean) => {
+        if (open) {
+          onOpen?.();
+        } else {
+          onClose?.();
+        }
+      },
+      [onOpen, onClose]
+    );
+
+    const enablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "auto";
+      }
+    }, []);
+
+    const disablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "none";
+      }
+    }, []);
+
+    const handleCloseAutoFocus = React.useCallback(
+      (e: Event) => e.preventDefault(),
+      []
+    );
+
+    if (isMobile) {
+      return <>{children}</>;
+    }
+
+    const content = toMenuItems(menuItems);
+
+    return (
+      <MenuProvider variant={"context"}>
+        <Menu onOpenChange={handleOpenChange}>
+          <MenuTrigger aria-label={ariaLabel}>{children}</MenuTrigger>
+          <MenuContent
+            aria-label={ariaLabel}
+            onAnimationStart={disablePointerEvents}
+            onAnimationEnd={enablePointerEvents}
+            onCloseAutoFocus={handleCloseAutoFocus}
+          >
+            {content}
+          </MenuContent>
+        </Menu>
+      </MenuProvider>
+    );
+  }
+);

app/components/Menu/DropdownMenu.tsx

@@ -8,11 +8,8 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "~/components/primitives/Drawer";
-import {
-  DropdownMenu as DropdownMenuRoot,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-} from "~/components/primitives/DropdownMenu";
+import { Menu, MenuContent, MenuTrigger } from "~/components/primitives/Menu";
+import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
 import { actionV2ToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
@@ -23,7 +20,7 @@ import {
   MenuItem,
   MenuItemWithChildren,
 } from "~/types";
-import { toDropdownMenuItems, toMobileMenuItems } from "./transformer";
+import { toMenuItems, toMobileMenuItems } from "./transformer";
 import { observer } from "mobx-react";
 import { useComputed } from "~/hooks/useComputed";
 
@@ -66,7 +63,7 @@ export const DropdownMenu = observer(
       const [open, setOpen] = React.useState(false);
       const isMobile = useMobile();
       const contentRef =
-        React.useRef<React.ElementRef<typeof DropdownMenuContent>>(null);
+        React.useRef<React.ElementRef<typeof MenuContent>>(null);
 
       const actionContext =
         context ??
@@ -126,24 +123,26 @@ export const DropdownMenu = observer(
         );
       }
 
-      const content = toDropdownMenuItems(menuItems);
+      const content = toMenuItems(menuItems);
 
       return (
-        <DropdownMenuRoot open={open} onOpenChange={handleOpenChange}>
-          <DropdownMenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
-            {children}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align={align}
-            aria-label={ariaLabel}
-            onAnimationStart={disablePointerEvents}
-            onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={handleCloseAutoFocus}
-          >
-            {content}
-            {append}
-          </DropdownMenuContent>
-        </DropdownMenuRoot>
+        <MenuProvider variant={"dropdown"}>
+          <Menu open={open} onOpenChange={handleOpenChange}>
+            <MenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
+              {children}
+            </MenuTrigger>
+            <MenuContent
+              align={align}
+              aria-label={ariaLabel}
+              onAnimationStart={disablePointerEvents}
+              onAnimationEnd={enablePointerEvents}
+              onCloseAutoFocus={handleCloseAutoFocus}
+            >
+              {content}
+              {append}
+            </MenuContent>
+          </Menu>
+        </MenuProvider>
       );
     }
   )

app/components/Menu/transformer.tsx

@@ -1,28 +1,18 @@
 import { CheckmarkIcon } from "outline-icons";
-import {
-  DropdownMenuButton,
-  DropdownMenuExternalLink,
-  DropdownMenuGroup,
-  DropdownMenuInternalLink,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownSubMenu,
-  DropdownSubMenuContent,
-  DropdownSubMenuTrigger,
-} from "~/components/primitives/DropdownMenu";
 import {
   MenuButton,
-  MenuIconWrapper,
   MenuInternalLink,
   MenuExternalLink,
-  MenuLabel,
   MenuSeparator,
-  MenuDisclosure,
-  SelectedIconWrapper,
-} from "~/components/primitives/components/Menu";
+  SubMenu,
+  SubMenuTrigger,
+  SubMenuContent,
+  MenuGroup,
+} from "~/components/primitives/Menu";
+import * as Components from "~/components/primitives/components/Menu";
 import { MenuItem } from "~/types";
 
-export function toDropdownMenuItems(items: MenuItem[]) {
+export function toMenuItems(items: MenuItem[]) {
   const filteredItems = filterMenuItems(items);
 
   if (!filteredItems.length) {
@@ -39,15 +29,15 @@ export function toDropdownMenuItems(items: MenuItem[]) {
 
   return filteredItems.map((item, index) => {
     const icon = showIcon ? (
-      <MenuIconWrapper aria-hidden>
+      <Components.MenuIconWrapper aria-hidden>
         {"icon" in item ? item.icon : null}
-      </MenuIconWrapper>
+      </Components.MenuIconWrapper>
     ) : undefined;
 
     switch (item.type) {
       case "button":
         return (
-          <DropdownMenuButton
+          <MenuButton
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             icon={icon}
@@ -61,7 +51,7 @@ export function toDropdownMenuItems(items: MenuItem[]) {
 
       case "route":
         return (
-          <DropdownMenuInternalLink
+          <MenuInternalLink
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             icon={icon}
@@ -72,7 +62,7 @@ export function toDropdownMenuItems(items: MenuItem[]) {
 
       case "link":
         return (
-          <DropdownMenuExternalLink
+          <MenuExternalLink
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             icon={icon}
@@ -85,33 +75,33 @@ export function toDropdownMenuItems(items: MenuItem[]) {
         );
 
       case "submenu": {
-        const submenuItems = toDropdownMenuItems(item.items);
+        const submenuItems = toMenuItems(item.items);
 
         if (!submenuItems?.length) {
           return null;
         }
 
         return (
-          <DropdownSubMenu key={`${item.type}-${item.title}-${index}`}>
-            <DropdownSubMenuTrigger
+          <SubMenu key={`${item.type}-${item.title}-${index}`}>
+            <SubMenuTrigger
               label={item.title as string}
               icon={icon}
               disabled={item.disabled}
             />
-            <DropdownSubMenuContent>{submenuItems}</DropdownSubMenuContent>
-          </DropdownSubMenu>
+            <SubMenuContent>{submenuItems}</SubMenuContent>
+          </SubMenu>
         );
       }
 
       case "group": {
-        const groupItems = toDropdownMenuItems(item.items);
+        const groupItems = toMenuItems(item.items);
 
         if (!groupItems?.length) {
           return null;
         }
 
         return (
-          <DropdownMenuGroup
+          <MenuGroup
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             items={groupItems}
@@ -120,7 +110,7 @@ export function toDropdownMenuItems(items: MenuItem[]) {
       }
 
       case "separator":
-        return <DropdownMenuSeparator key={`${item.type}-${index}`} />;
+        return <MenuSeparator key={`${item.type}-${index}`} />;
 
       default:
         return null;
@@ -149,15 +139,15 @@ export function toMobileMenuItems(
 
   return filteredItems.map((item, index) => {
     const icon = showIcon ? (
-      <MenuIconWrapper aria-hidden>
+      <Components.MenuIconWrapper aria-hidden>
         {"icon" in item ? item.icon : null}
-      </MenuIconWrapper>
+      </Components.MenuIconWrapper>
     ) : undefined;
 
     switch (item.type) {
       case "button":
         return (
-          <MenuButton
+          <Components.MenuButton
             key={`${item.type}-${item.title}-${index}`}
             disabled={item.disabled}
             $dangerous={item.dangerous}
@@ -167,31 +157,31 @@ export function toMobileMenuItems(
             }}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
             {item.selected !== undefined && (
-              <SelectedIconWrapper aria-hidden>
+              <Components.SelectedIconWrapper aria-hidden>
                 {item.selected ? <CheckmarkIcon /> : null}
-              </SelectedIconWrapper>
+              </Components.SelectedIconWrapper>
             )}
-          </MenuButton>
+          </Components.MenuButton>
         );
 
       case "route":
         return (
-          <MenuInternalLink
+          <Components.MenuInternalLink
             key={`${item.type}-${item.title}-${index}`}
             to={item.to}
             disabled={item.disabled}
             onClick={closeMenu}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-          </MenuInternalLink>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
+          </Components.MenuInternalLink>
         );
 
       case "link":
         return (
-          <MenuExternalLink
+          <Components.MenuExternalLink
             key={`${item.type}-${item.title}-${index}`}
             href={typeof item.href === "string" ? item.href : item.href.url}
             target={
@@ -201,8 +191,8 @@ export function toMobileMenuItems(
             onClick={closeMenu}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-          </MenuExternalLink>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
+          </Components.MenuExternalLink>
         );
 
       case "submenu": {
@@ -217,7 +207,7 @@ export function toMobileMenuItems(
         }
 
         return (
-          <MenuButton
+          <Components.MenuButton
             key={`${item.type}-${item.title}-${index}`}
             disabled={item.disabled}
             onClick={() => {
@@ -225,9 +215,9 @@ export function toMobileMenuItems(
             }}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-            <MenuDisclosure />
-          </MenuButton>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
+            <Components.MenuDisclosure />
+          </Components.MenuButton>
         );
       }
 
@@ -244,14 +234,14 @@ export function toMobileMenuItems(
 
         return (
           <div key={`${item.type}-${item.title}-${index}`}>
-            <DropdownMenuLabel>{item.title}</DropdownMenuLabel>
+            <Components.MenuHeader>{item.title}</Components.MenuHeader>
             {groupItems}
           </div>
         );
       }
 
       case "separator":
-        return <MenuSeparator key={`${item.type}-${index}`} />;
+        return <Components.MenuSeparator key={`${item.type}-${index}`} />;
 
       default:
         return null;

app/components/primitives/DropdownMenu.tsx

@@ -1,291 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { LocationDescriptor } from "history";
-import * as React from "react";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-import Scrollable from "~/components/Scrollable";
-import Tooltip from "~/components/Tooltip";
-import { fadeAndScaleIn } from "~/styles/animations";
-import {
-  MenuButton,
-  MenuDisclosure,
-  MenuExternalLink,
-  MenuHeader,
-  MenuInternalLink,
-  MenuLabel,
-  MenuSeparator,
-  MenuSubTrigger,
-  SelectedIconWrapper,
-} from "./components/Menu";
-import { CheckmarkIcon } from "outline-icons";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownSubMenu = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
->((props, ref) => {
-  const { children, ...rest } = props;
-  return (
-    <DropdownMenuPrimitive.Trigger ref={ref} {...rest} asChild>
-      {children}
-    </DropdownMenuPrimitive.Trigger>
-  );
-});
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        {...rest}
-        sideOffset={4}
-        collisionPadding={6}
-        asChild
-      >
-        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
-      </DropdownMenuPrimitive.Content>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-type DropdownSubMenuTriggerProps = BaseDropdownItemProps &
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>;
-
-const DropdownSubMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  DropdownSubMenuTriggerProps
->((props, ref) => {
-  const { label, icon, disabled, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.SubTrigger ref={ref} {...rest} asChild>
-      <MenuSubTrigger disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-        <MenuDisclosure />
-      </MenuSubTrigger>
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-});
-DropdownSubMenuTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownSubMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.SubContent
-        ref={ref}
-        {...rest}
-        collisionPadding={6}
-        asChild
-      >
-        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
-      </DropdownMenuPrimitive.SubContent>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownSubMenuContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-type DropdownMenuGroupProps = {
-  label: string;
-  items: React.ReactNode[];
-} & Omit<
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>,
-  "children" | "asChild"
->;
-
-const DropdownMenuGroup = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Group>,
-  DropdownMenuGroupProps
->((props, ref) => {
-  const { label, items, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Group ref={ref} {...rest}>
-      <DropdownMenuLabel>{label}</DropdownMenuLabel>
-      {items}
-    </DropdownMenuPrimitive.Group>
-  );
-});
-DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
-
-type BaseDropdownItemProps = {
-  label: string;
-  icon?: React.ReactElement;
-  disabled?: boolean;
-};
-
-type DropdownMenuButtonProps = BaseDropdownItemProps & {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  tooltip?: React.ReactChild;
-  selected?: boolean;
-  dangerous?: boolean;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuButton = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuButtonProps
->((props, ref) => {
-  const {
-    label,
-    icon,
-    tooltip,
-    disabled,
-    selected,
-    dangerous,
-    onClick,
-    ...rest
-  } = props;
-
-  const button = (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuButton disabled={disabled} $dangerous={dangerous} onClick={onClick}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-        {selected !== undefined && (
-          <SelectedIconWrapper aria-hidden>
-            {selected ? <CheckmarkIcon /> : null}
-          </SelectedIconWrapper>
-        )}
-      </MenuButton>
-    </DropdownMenuPrimitive.Item>
-  );
-
-  return tooltip ? (
-    <Tooltip content={tooltip} placement="bottom">
-      <div>{button}</div>
-    </Tooltip>
-  ) : (
-    <>{button}</>
-  );
-});
-DropdownMenuButton.displayName = "DropdownMenuButton";
-
-type DropdownMenuInternalLinkProps = BaseDropdownItemProps & {
-  to: LocationDescriptor;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuInternalLink = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuInternalLinkProps
->((props, ref) => {
-  const { label, icon, disabled, to, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuInternalLink to={to} disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-      </MenuInternalLink>
-    </DropdownMenuPrimitive.Item>
-  );
-});
-DropdownMenuInternalLink.displayName = "DropdownMenuInternalLink";
-
-type DropdownMenuExternalLinkProps = BaseDropdownItemProps & {
-  href: string;
-  target?: string;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuExternalLink = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuExternalLinkProps
->((props, ref) => {
-  const { label, icon, disabled, href, target, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuExternalLink href={href} target={target} disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-      </MenuExternalLink>
-    </DropdownMenuPrimitive.Item>
-  );
-});
-DropdownMenuExternalLink.displayName = "DropdownMenuExternalLink";
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->((props, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} {...props} asChild>
-    <MenuSeparator />
-  </DropdownMenuPrimitive.Separator>
-));
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label ref={ref} {...props} asChild>
-    <MenuHeader>{children}</MenuHeader>
-  </DropdownMenuPrimitive.Label>
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-/** Styled components */
-const StyledScrollable = styled(Scrollable)`
-  z-index: ${depths.menu};
-  min-width: 180px;
-  max-width: 276px;
-  min-height: 44px;
-  max-height: min(85vh, var(--radix-dropdown-menu-content-available-height));
-  font-weight: normal;
-
-  background: ${s("menuBackground")};
-  box-shadow: ${s("menuShadow")};
-  border-radius: 6px;
-  padding: 6px;
-  outline: none;
-
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-
-  &[data-state="open"] {
-    animation: ${fadeAndScaleIn} 150ms ease-out;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuButton,
-  DropdownMenuInternalLink,
-  DropdownMenuExternalLink,
-  DropdownMenuSeparator,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownSubMenu,
-  DropdownSubMenuTrigger,
-  DropdownSubMenuContent,
-};

app/components/primitives/Form.tsx

@@ -0,0 +1,19 @@
+import { CSRF } from "@shared/constants";
+import { useCsrfToken } from "~/hooks/useCsrfToken";
+
+/**
+ * Form component that automatically includes a CSRF token as a hidden input field.
+ */
+export const Form = ({
+  children,
+  ...props
+}: React.FormHTMLAttributes<HTMLFormElement>) => {
+  const token = useCsrfToken();
+
+  return (
+    <form {...props}>
+      {token && <input type="hidden" name={CSRF.fieldName} value={token} />}
+      {children}
+    </form>
+  );
+};

app/components/primitives/Menu/MenuContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useMemo } from "react";
+
+type MenuVariant = "dropdown" | "context";
+
+const MenuContext = createContext<{
+  variant: MenuVariant;
+}>({
+  variant: "dropdown",
+});
+
+export function MenuProvider({
+  variant,
+  children,
+}: {
+  variant: MenuVariant;
+  children: React.ReactNode;
+}) {
+  const ctx = useMemo(() => ({ variant }), [variant]);
+
+  return <MenuContext.Provider value={ctx}>{children}</MenuContext.Provider>;
+}
+
+export const useMenuContext = () => useContext(MenuContext);

app/components/primitives/Menu/index.tsx

@@ -0,0 +1,435 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as Components from "../components/Menu";
+import { LocationDescriptor } from "history";
+import * as React from "react";
+import Tooltip from "~/components/Tooltip";
+import { CheckmarkIcon } from "outline-icons";
+import { useMenuContext } from "./MenuContext";
+
+type MenuProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Root
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
+
+const Menu = ({ children, ...rest }: MenuProps) => {
+  const { variant } = useMenuContext();
+
+  const Root =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Root
+      : ContextMenuPrimitive.Root;
+
+  return <Root {...rest}>{children}</Root>;
+};
+
+type SubMenuProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Sub
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>;
+
+const SubMenu = ({ children, ...rest }: SubMenuProps) => {
+  const { variant } = useMenuContext();
+
+  const Sub =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Sub
+      : ContextMenuPrimitive.Sub;
+
+  return <Sub {...rest}>{children}</Sub>;
+};
+
+type TriggerProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Trigger
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
+
+const MenuTrigger = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Trigger>
+  | React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
+  TriggerProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Trigger =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Trigger
+      : ContextMenuPrimitive.Trigger;
+
+  return (
+    <Trigger ref={ref} {...rest} asChild>
+      {children}
+    </Trigger>
+  );
+});
+MenuTrigger.displayName = "MenuTrigger";
+
+type ContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Content
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
+
+const MenuContent = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Content>
+  | React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContentProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Portal =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Portal
+      : ContextMenuPrimitive.Portal;
+
+  const Content =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Content
+      : ContextMenuPrimitive.Content;
+
+  const offsetProp =
+    variant === "dropdown" ? { sideOffset: 4 } : { alignOffset: 4 };
+
+  const contentProps = {
+    maxHeightVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-available-height"
+        : "--radix-context-menu-content-available-height",
+    transformOriginVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-transform-origin"
+        : "--radix-context-menu-content-transform-origin",
+  };
+
+  return (
+    <Portal>
+      <Content ref={ref} {...rest} {...offsetProp} collisionPadding={6} asChild>
+        <Components.MenuContent {...contentProps} hiddenScrollbars>
+          {children}
+        </Components.MenuContent>
+      </Content>
+    </Portal>
+  );
+});
+MenuContent.displayName = "MenuContent";
+
+type SubMenuTriggerProps = BaseItemProps &
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>;
+
+const SubMenuTrigger = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>
+  | React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  SubMenuTriggerProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, icon, disabled, ...rest } = props;
+
+  const Trigger =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.SubTrigger
+      : ContextMenuPrimitive.SubTrigger;
+
+  return (
+    <Trigger ref={ref} {...rest} asChild>
+      <Components.MenuSubTrigger disabled={disabled}>
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+        <Components.MenuDisclosure />
+      </Components.MenuSubTrigger>
+    </Trigger>
+  );
+});
+SubMenuTrigger.displayName = "SubMenuTrigger";
+
+type SubMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.SubContent
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>;
+
+const SubMenuContent = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.SubContent>
+  | React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  SubMenuContentProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Portal =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Portal
+      : ContextMenuPrimitive.Portal;
+
+  const Content =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.SubContent
+      : ContextMenuPrimitive.SubContent;
+
+  const contentProps = {
+    maxHeightVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-available-height"
+        : "--radix-context-menu-content-available-height",
+    transformOriginVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-transform-origin"
+        : "--radix-context-menu-content-transform-origin",
+  };
+
+  return (
+    <Portal>
+      <Content ref={ref} {...rest} collisionPadding={6} asChild>
+        <Components.MenuContent {...contentProps} hiddenScrollbars>
+          {children}
+        </Components.MenuContent>
+      </Content>
+    </Portal>
+  );
+});
+SubMenuContent.displayName = "SubMenuContent";
+
+type MenuGroupProps = {
+  label: string;
+  items: React.ReactNode[];
+} & Omit<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>,
+  "children" | "asChild"
+> &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>,
+    "children" | "asChild"
+  >;
+
+const MenuGroup = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Group>
+  | React.ElementRef<typeof ContextMenuPrimitive.Group>,
+  MenuGroupProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, items, ...rest } = props;
+
+  const Group =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Group
+      : ContextMenuPrimitive.Group;
+
+  return (
+    <Group ref={ref} {...rest}>
+      <MenuLabel>{label}</MenuLabel>
+      {items}
+    </Group>
+  );
+});
+MenuGroup.displayName = "MenuGroup";
+
+type BaseItemProps = {
+  label: string;
+  icon?: React.ReactElement;
+  disabled?: boolean;
+};
+
+type MenuButtonProps = BaseItemProps & {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  tooltip?: React.ReactChild;
+  selected?: boolean;
+  dangerous?: boolean;
+} & Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  > &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  >;
+
+const MenuButton = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Item>
+  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  MenuButtonProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const {
+    label,
+    icon,
+    tooltip,
+    disabled,
+    selected,
+    dangerous,
+    onClick,
+    ...rest
+  } = props;
+
+  const Item =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Item
+      : ContextMenuPrimitive.Item;
+
+  const button = (
+    <Item ref={ref} disabled={disabled} {...rest} asChild>
+      <Components.MenuButton
+        disabled={disabled}
+        $dangerous={dangerous}
+        onClick={onClick}
+      >
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+        {selected !== undefined && (
+          <Components.SelectedIconWrapper aria-hidden>
+            {selected ? <CheckmarkIcon /> : null}
+          </Components.SelectedIconWrapper>
+        )}
+      </Components.MenuButton>
+    </Item>
+  );
+
+  return tooltip ? (
+    <Tooltip content={tooltip} placement="bottom">
+      <div>{button}</div>
+    </Tooltip>
+  ) : (
+    <>{button}</>
+  );
+});
+MenuButton.displayName = "MenuButton";
+
+type MenuInternalLinkProps = BaseItemProps & {
+  to: LocationDescriptor;
+} & Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  > &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  >;
+
+const MenuInternalLink = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Item>
+  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  MenuInternalLinkProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, icon, disabled, to, ...rest } = props;
+
+  const Item =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Item
+      : ContextMenuPrimitive.Item;
+
+  return (
+    <Item ref={ref} disabled={disabled} {...rest} asChild>
+      <Components.MenuInternalLink to={to} disabled={disabled}>
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+      </Components.MenuInternalLink>
+    </Item>
+  );
+});
+MenuInternalLink.displayName = "MenuInternalLink";
+
+type MenuExternalLinkProps = BaseItemProps & {
+  href: string;
+  target?: string;
+} & Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  > &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  >;
+
+const MenuExternalLink = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Item>
+  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  MenuExternalLinkProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, icon, disabled, href, target, ...rest } = props;
+
+  const Item =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Item
+      : ContextMenuPrimitive.Item;
+
+  return (
+    <Item ref={ref} disabled={disabled} {...rest} asChild>
+      <Components.MenuExternalLink
+        href={href}
+        target={target}
+        disabled={disabled}
+      >
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+      </Components.MenuExternalLink>
+    </Item>
+  );
+});
+MenuExternalLink.displayName = "MenuExternalLink";
+
+type MenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Separator
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>;
+
+const MenuSeparator = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Separator>
+  | React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  MenuSeparatorProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+
+  const Separator =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Separator
+      : ContextMenuPrimitive.Separator;
+
+  return (
+    <Separator ref={ref} {...props} asChild>
+      <Components.MenuSeparator />
+    </Separator>
+  );
+});
+MenuSeparator.displayName = "MenuSeparator";
+
+type MenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Label
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>;
+
+const MenuLabel = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Label>
+  | React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  MenuLabelProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Label =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Label
+      : ContextMenuPrimitive.Label;
+
+  return (
+    <Label ref={ref} {...rest} asChild>
+      <Components.MenuHeader>{children}</Components.MenuHeader>
+    </Label>
+  );
+});
+MenuLabel.displayName = "MenuLabel";
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuContent,
+  MenuButton,
+  MenuInternalLink,
+  MenuExternalLink,
+  MenuSeparator,
+  MenuGroup,
+  MenuLabel,
+  SubMenu,
+  SubMenuTrigger,
+  SubMenuContent,
+};

app/components/primitives/components/Menu.tsx

@@ -3,7 +3,9 @@ import { ellipsis } from "polished";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
+import { depths, s } from "@shared/styles";
+import Scrollable from "~/components/Scrollable";
+import { fadeAndScaleIn } from "~/styles/animations";
 
 type BaseMenuItemProps = {
   disabled?: boolean;
@@ -135,3 +137,31 @@ export const SelectedIconWrapper = styled.span`
   color: ${s("textSecondary")};
   flex-shrink: 0;
 `;
+
+export const MenuContent = styled(Scrollable)<{
+  maxHeightVar: string;
+  transformOriginVar: string;
+}>`
+  z-index: ${depths.menu};
+  min-width: 180px;
+  max-width: 276px;
+  min-height: 44px;
+  max-height: ${({ maxHeightVar }) => `min(85vh, var(${maxHeightVar}))`};
+  font-weight: normal;
+
+  background: ${s("menuBackground")};
+  box-shadow: ${s("menuShadow")};
+  border-radius: 6px;
+  padding: 6px;
+  outline: none;
+
+  transform-origin: ${({ transformOriginVar }) => `var(${transformOriginVar})`};
+
+  &[data-state="open"] {
+    animation: ${fadeAndScaleIn} 150ms ease-out;
+  }
+
+  @media print {
+    display: none;
+  }
+`;

app/editor/extensions/ClipboardTextSerializer.ts

@@ -44,9 +44,7 @@ export default class ClipboardTextSerializer extends Extension {
                   softBreak: true,
                 })
               : slice.content.content
-                  .map((node) =>
-                    ProsemirrorHelper.toPlainText(node, this.editor.schema)
-                  )
+                  .map((node) => ProsemirrorHelper.toPlainText(node))
                   .join("");
           },
         },

app/editor/index.tsx

@@ -35,7 +35,6 @@ import Extension, {
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
 import { MarkdownSerializer } from "@shared/editor/lib/markdown/serializer";
 import textBetween from "@shared/editor/lib/textBetween";
-import { getTextSerializers } from "@shared/editor/lib/textSerializers";
 import Mark from "@shared/editor/marks/Mark";
 import { basicExtensions as extensions } from "@shared/editor/nodes";
 import Node from "@shared/editor/nodes/Node";
@@ -627,8 +626,7 @@ export class Editor extends React.PureComponent<
    *
    * @returns A list of headings in the document
    */
-  public getHeadings = () =>
-    ProsemirrorHelper.getHeadings(this.view.state.doc, this.schema);
+  public getHeadings = () => ProsemirrorHelper.getHeadings(this.view.state.doc);
 
   /**
    * Return the images in the current editor.
@@ -721,9 +719,8 @@ export class Editor extends React.PureComponent<
    */
   public getPlainText = () => {
     const { doc } = this.view.state;
-    const textSerializers = getTextSerializers(this.schema);
 
-    return textBetween(doc, 0, doc.content.size, textSerializers);
+    return textBetween(doc, 0, doc.content.size);
   };
 
   private dispatchThemeChanged = (event: CustomEvent) => {

app/hooks/useCsrfToken.ts

@@ -0,0 +1,30 @@
+import { CSRF } from "@shared/constants";
+import { useState, useEffect } from "react";
+import { getCookie } from "tiny-cookie";
+
+/**
+ * React hook for accessing CSRF tokens in components
+ *
+ * @returns The CSRF token string or null if not found
+ */
+export function useCsrfToken() {
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const updateToken = () => {
+      const currentToken = getCookie(CSRF.cookieName);
+
+      setToken(currentToken);
+    };
+
+    // Initial load
+    updateToken();
+
+    // Listen for cookie changes (when navigating or refreshing)
+    const interval = setInterval(updateToken, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return token;
+}

app/hooks/useDocumentMenuAction.tsx

@@ -0,0 +1,135 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { InputIcon, SearchIcon } from "outline-icons";
+import { ActionV2Separator, createActionV2 } from "~/actions";
+import {
+  restoreDocument,
+  unsubscribeDocument,
+  subscribeDocument,
+  restoreDocumentToCollection,
+  starDocument,
+  unstarDocument,
+  editDocument,
+  shareDocument,
+  createNestedDocument,
+  importDocument,
+  createTemplateFromDocument,
+  duplicateDocument,
+  publishDocument,
+  unpublishDocument,
+  archiveDocument,
+  moveDocument,
+  moveTemplate,
+  applyTemplateFactory,
+  pinDocument,
+  createDocumentFromTemplate,
+  openDocumentComments,
+  openDocumentHistory,
+  openDocumentInsights,
+  downloadDocument,
+  copyDocument,
+  printDocument,
+  searchInDocument,
+  deleteDocument,
+  leaveDocument,
+  permanentlyDeleteDocument,
+} from "~/actions/definitions/documents";
+import { ActiveDocumentSection } from "~/actions/sections";
+import useMobile from "./useMobile";
+import Document from "~/models/Document";
+import usePolicy from "./usePolicy";
+import useCurrentUser from "./useCurrentUser";
+import { useTemplateMenuActions } from "./useTemplateMenuActions";
+import { useMenuAction } from "./useMenuAction";
+
+type Props = {
+  /** Document for which the actions are generated */
+  document: Document;
+  /** Invoked when the "Find and replace" menu item is clicked */
+  onFindAndReplace?: () => void;
+  /** Invoked when the "Rename" menu item is clicked */
+  onRename?: () => void;
+  /** Callback when a template is selected to apply its content to the document */
+  onSelectTemplate?: (template: Document) => void;
+};
+
+export function useDocumentMenuAction({
+  document,
+  onFindAndReplace,
+  onRename,
+  onSelectTemplate,
+}: Props) {
+  const { t } = useTranslation();
+  const isMobile = useMobile();
+  const user = useCurrentUser();
+
+  const can = usePolicy(document);
+
+  const templateMenuActions = useTemplateMenuActions({
+    document,
+    onSelectTemplate,
+  });
+
+  const actions = useMemo(
+    () => [
+      restoreDocument,
+      restoreDocumentToCollection,
+      starDocument,
+      unstarDocument,
+      subscribeDocument,
+      unsubscribeDocument,
+      createActionV2({
+        name: `${t("Find and replace")}…`,
+        section: ActiveDocumentSection,
+        icon: <SearchIcon />,
+        visible: !!onFindAndReplace && isMobile,
+        perform: () => onFindAndReplace?.(),
+      }),
+      ActionV2Separator,
+      editDocument,
+      createActionV2({
+        name: `${t("Rename")}…`,
+        section: ActiveDocumentSection,
+        icon: <InputIcon />,
+        visible: !!can.update && !user.separateEditMode && !!onRename,
+        perform: () => requestAnimationFrame(() => onRename?.()),
+      }),
+      shareDocument,
+      createNestedDocument,
+      importDocument,
+      createTemplateFromDocument,
+      duplicateDocument,
+      publishDocument,
+      unpublishDocument,
+      archiveDocument,
+      moveDocument,
+      moveTemplate,
+      applyTemplateFactory({ actions: templateMenuActions }),
+      pinDocument,
+      createDocumentFromTemplate,
+      ActionV2Separator,
+      openDocumentComments,
+      openDocumentHistory,
+      openDocumentInsights,
+      downloadDocument,
+      copyDocument,
+      printDocument,
+      searchInDocument,
+      ActionV2Separator,
+      deleteDocument,
+      permanentlyDeleteDocument,
+      leaveDocument,
+    ],
+    [
+      t,
+      isMobile,
+      templateMenuActions,
+      can.update,
+      user.separateEditMode,
+      onFindAndReplace,
+      onRename,
+    ]
+  );
+
+  return useMenuAction(actions);
+}

app/menus/DocumentMenu.tsx

@@ -1,6 +1,5 @@
 import noop from "lodash/noop";
 import { observer } from "mobx-react";
-import { InputIcon, SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -11,49 +10,14 @@ import Document from "~/models/Document";
 import { DropdownMenu } from "~/components/Menu/DropdownMenu";
 import { OverflowMenuButton } from "~/components/Menu/OverflowMenuButton";
 import Switch from "~/components/Switch";
-import { ActionV2Separator, createActionV2 } from "~/actions";
-import {
-  pinDocument,
-  createTemplateFromDocument,
-  subscribeDocument,
-  unsubscribeDocument,
-  moveDocument,
-  deleteDocument,
-  permanentlyDeleteDocument,
-  downloadDocument,
-  importDocument,
-  starDocument,
-  unstarDocument,
-  duplicateDocument,
-  archiveDocument,
-  openDocumentHistory,
-  openDocumentInsights,
-  publishDocument,
-  unpublishDocument,
-  printDocument,
-  openDocumentComments,
-  createDocumentFromTemplate,
-  createNestedDocument,
-  shareDocument,
-  copyDocument,
-  searchInDocument,
-  leaveDocument,
-  moveTemplate,
-  restoreDocument,
-  restoreDocumentToCollection,
-  editDocument,
-  applyTemplateFactory,
-} from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useMobile from "~/hooks/useMobile";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import { ActiveDocumentSection } from "~/actions/sections";
-import { useTemplateMenuActions } from "~/hooks/useTemplateMenuActions";
-import { useMenuAction } from "~/hooks/useMenuAction";
 import { MenuSeparator } from "~/components/primitives/components/Menu";
+import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
 
 type Props = {
   /** Document for which the menu is to be shown */
@@ -95,7 +59,13 @@ function DocumentMenu({
   const isMobile = useMobile();
   const can = usePolicy(document);
 
-  const { subscriptions, pins } = useStores();
+  const { userMemberships, groupMemberships, subscriptions, pins } =
+    useStores();
+
+  const isShared = !!(
+    userMemberships.getByDocumentId(document.id) ||
+    groupMemberships.getByDocumentId(document.id)
+  );
 
   const {
     loading: auxDataLoading,
@@ -155,78 +125,18 @@ function DocumentMenu({
     [document]
   );
 
-  const templateMenuActions = useTemplateMenuActions({
+  const rootAction = useDocumentMenuAction({
     document,
+    onFindAndReplace,
+    onRename,
     onSelectTemplate,
   });
 
-  const actions = React.useMemo(
-    () => [
-      restoreDocument,
-      restoreDocumentToCollection,
-      starDocument,
-      unstarDocument,
-      subscribeDocument,
-      unsubscribeDocument,
-      createActionV2({
-        name: `${t("Find and replace")}…`,
-        section: ActiveDocumentSection,
-        icon: <SearchIcon />,
-        visible: !!onFindAndReplace && isMobile,
-        perform: () => onFindAndReplace?.(),
-      }),
-      ActionV2Separator,
-      editDocument,
-      createActionV2({
-        name: `${t("Rename")}…`,
-        section: ActiveDocumentSection,
-        icon: <InputIcon />,
-        visible: !!can.update && !user.separateEditMode && !!onRename,
-        perform: () => requestAnimationFrame(() => onRename?.()),
-      }),
-      shareDocument,
-      createNestedDocument,
-      importDocument,
-      createTemplateFromDocument,
-      duplicateDocument,
-      publishDocument,
-      unpublishDocument,
-      archiveDocument,
-      moveDocument,
-      moveTemplate,
-      applyTemplateFactory({ actions: templateMenuActions }),
-      pinDocument,
-      createDocumentFromTemplate,
-      ActionV2Separator,
-      openDocumentComments,
-      openDocumentHistory,
-      openDocumentInsights,
-      downloadDocument,
-      copyDocument,
-      printDocument,
-      searchInDocument,
-      ActionV2Separator,
-      deleteDocument,
-      permanentlyDeleteDocument,
-      leaveDocument,
-    ],
-    [
-      t,
-      isMobile,
-      templateMenuActions,
-      can.update,
-      user.separateEditMode,
-      onFindAndReplace,
-      onRename,
-    ]
-  );
-
-  const rootAction = useMenuAction(actions);
-
   const context = useActionContext({
     isContextMenu: true,
     activeDocumentId: document.id,
-    activeCollectionId: document.collectionId ?? undefined,
+    activeCollectionId:
+      !isShared && document.collectionId ? document.collectionId : undefined,
   });
 
   const toggleSwitches = React.useMemo<React.ReactNode>(() => {
@@ -280,6 +190,7 @@ function DocumentMenu({
   }, [
     t,
     can.update,
+    can.updateInsights,
     document.embedsDisabled,
     document.fullWidth,
     document.insightsEnabled,
@@ -288,6 +199,7 @@ function DocumentMenu({
     showToggleEmbeds,
     handleEmbedsToggle,
     handleFullWidthToggle,
+    handleInsightsToggle,
   ]);
 
   return (

app/menus/GroupMemberMenu.tsx

@@ -1,38 +0,0 @@
-import { observer } from "mobx-react";
-import { useTranslation } from "react-i18next";
-import { DropdownMenu } from "~/components/Menu/DropdownMenu";
-import { OverflowMenuButton } from "~/components/Menu/OverflowMenuButton";
-import { useMenuAction } from "~/hooks/useMenuAction";
-import { useMemo } from "react";
-import { createActionV2 } from "~/actions";
-import { GroupSection } from "~/actions/sections";
-
-type Props = {
-  onRemove: () => void;
-};
-
-function GroupMemberMenu({ onRemove }: Props) {
-  const { t } = useTranslation();
-
-  const actions = useMemo(
-    () => [
-      createActionV2({
-        name: t("Remove"),
-        section: GroupSection,
-        dangerous: true,
-        perform: onRemove,
-      }),
-    ],
-    [t, onRemove]
-  );
-
-  const rootAction = useMenuAction(actions);
-
-  return (
-    <DropdownMenu action={rootAction} ariaLabel={t("Group member options")}>
-      <OverflowMenuButton />
-    </DropdownMenu>
-  );
-}
-
-export default observer(GroupMemberMenu);

app/models/ApiKey.ts

@@ -2,6 +2,8 @@ import { isPast } from "date-fns";
 import { computed, observable } from "mobx";
 import ParanoidModel from "./base/ParanoidModel";
 import Field from "./decorators/Field";
+import User from "./User";
+import Relation from "./decorators/Relation";
 
 class ApiKey extends ParanoidModel {
   static modelName = "ApiKey";
@@ -25,6 +27,10 @@ class ApiKey extends ParanoidModel {
   @observable
   lastActiveAt?: string;
 
+  /** The user who this API key belongs to. */
+  @Relation(() => User)
+  user: User;
+
   /** The user ID that the API key belongs to. */
   userId: string;
 

app/models/Document.ts

@@ -723,8 +723,7 @@ export default class Document extends ArchivableModel implements Searchable {
       marks: extensionManager.marks,
     });
     const text = ProsemirrorHelper.toPlainText(
-      Node.fromJSON(schema, this.data),
-      schema
+      Node.fromJSON(schema, this.data)
     );
     return text;
   };

app/models/GroupUser.ts

@@ -1,7 +1,9 @@
+import { GroupPermission } from "@shared/types";
 import Group from "./Group";
 import User from "./User";
 import Model from "./base/Model";
 import Relation from "./decorators/Relation";
+import Field from "./decorators/Field";
 
 /**
  * Represents a user's membership to a group.
@@ -22,6 +24,10 @@ class GroupUser extends Model {
   /** The group that the user belongs to. */
   @Relation(() => Group, { onDelete: "cascade" })
   group: Group;
+
+  /** The permission of the user in the group. */
+  @Field
+  permission: GroupPermission;
 }
 
 export default GroupUser;

app/scenes/Login/OAuthAuthorize.tsx

@@ -26,6 +26,7 @@ import { Background } from "./components/Background";
 import { Centered } from "./components/Centered";
 import { ConnectHeader } from "./components/ConnectHeader";
 import { TeamSwitcher } from "./components/TeamSwitcher";
+import { Form } from "~/components/primitives/Form";
 
 export default function OAuthAuthorize() {
   const team = useCurrentTeam({ rejectOnEmpty: false });
@@ -203,7 +204,7 @@ function Authorize() {
             </li>
           ))}
         </ul>
-        <form
+        <Form
           method="POST"
           action="/oauth/authorize"
           style={{ width: "100%" }}
@@ -236,7 +237,7 @@ function Authorize() {
               {t("Authorize")}
             </Button>
           </Flex>
-        </form>
+        </Form>
       </Centered>
     </Background>
   );

app/scenes/Login/components/WorkspaceSetup.tsx

@@ -12,15 +12,17 @@ import { detectLanguage } from "~/utils/language";
 import { BackButton } from "./BackButton";
 import { Background } from "./Background";
 import { Centered } from "./Centered";
+import { Form } from "~/components/primitives/Form";
 
 const WorkspaceSetup = ({ onBack }: { onBack?: () => void }) => {
   const { t } = useTranslation();
+
   return (
     <Background>
       <BackButton onBack={onBack} />
       <ChangeLanguage locale={detectLanguage()} />
       <Centered
-        as="form"
+        as={Form}
         action="/api/installation.create"
         method="POST"
         gap={12}

app/scenes/Settings/components/ApiKeyListItem.tsx

@@ -32,7 +32,7 @@ const ApiKeyListItem = ({ apiKey }: Props) => {
         {t(`Created`)} <Time dateTime={apiKey.createdAt} addSuffix />{" "}
         {apiKey.userId === user.id
           ? ""
-          : t(`by {{ name }}`, { name: user.name })}{" "}
+          : t(`by {{ name }}`, { name: apiKey.user.name })}{" "}
         &middot;{" "}
       </Text>
       {apiKey.lastActiveAt && (

app/scenes/Settings/components/GroupDialogs.tsx

@@ -25,7 +25,10 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import GroupMemberMenu from "~/menus/GroupMemberMenu";
+import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
+import { GroupPermission } from "@shared/types";
+import { EmptySelectValue, Permission } from "~/types";
+import GroupUser from "~/models/GroupUser";
 
 type Props = {
   group: Group;
@@ -248,6 +251,7 @@ export const ViewGroupMembersDialog = observer(function ({
               </Button>
             </span>
           )}
+          <br />
         </>
       ) : (
         <Text as="p" type="secondary">
@@ -262,7 +266,6 @@ export const ViewGroupMembersDialog = observer(function ({
           />
         </Text>
       )}
-      <br />
       <PaginatedList<User>
         items={users.inGroup(group.id)}
         fetch={groupUsers.fetchPage}
@@ -274,6 +277,10 @@ export const ViewGroupMembersDialog = observer(function ({
           <GroupMemberListItem
             key={user.id}
             user={user}
+            group={group}
+            groupUser={groupUsers.orderedData.find(
+              (gu) => gu.userId === user.id && gu.groupId === group.id
+            )}
             onRemove={can.update ? () => handleRemoveUser(user) : undefined}
           />
         )}
@@ -390,6 +397,8 @@ const AddPeopleToGroupDialog = observer(function ({
             <GroupMemberListItem
               key={item.id}
               user={item}
+              group={group}
+              groupUser={undefined}
               onAdd={() => handleAddUser(item)}
             />
           )}
@@ -401,16 +410,41 @@ const AddPeopleToGroupDialog = observer(function ({
 
 type GroupMemberListItemProps = {
   user: User;
+  group: Group;
+  groupUser: GroupUser | undefined;
   onAdd?: () => Promise<void>;
   onRemove?: () => Promise<void>;
 };
 
 const GroupMemberListItem = observer(function ({
   user,
-  onRemove,
+  group,
+  groupUser,
   onAdd,
 }: GroupMemberListItemProps) {
   const { t } = useTranslation();
+  const { groupUsers } = useStores();
+  const can = usePolicy(group);
+
+  const permissions = React.useMemo(
+    () =>
+      [
+        {
+          label: t("Manage"),
+          value: GroupPermission.Admin,
+        },
+        {
+          label: t("Member"),
+          value: GroupPermission.Member,
+        },
+        {
+          divider: true,
+          label: t("Remove"),
+          value: EmptySelectValue,
+        },
+      ] as Permission[],
+    [t]
+  );
 
   return (
     <ListItem
@@ -431,11 +465,40 @@ const GroupMemberListItem = observer(function ({
       image={<Avatar model={user} size={AvatarSize.Large} />}
       actions={
         <Flex align="center">
-          {onRemove && <GroupMemberMenu onRemove={onRemove} />}
-          {onAdd && (
+          {onAdd ? (
             <Button onClick={onAdd} neutral>
               {t("Add")}
             </Button>
+          ) : (
+            <div style={{ marginRight: -8 }}>
+              <InputMemberPermissionSelect
+                permissions={permissions}
+                onChange={async (
+                  permission: GroupPermission | typeof EmptySelectValue
+                ) => {
+                  try {
+                    if (permission === EmptySelectValue) {
+                      await groupUsers.delete({
+                        userId: user.id,
+                        groupId: group.id,
+                      });
+                    } else {
+                      await groupUsers.update({
+                        userId: user.id,
+                        groupId: group.id,
+                        permission,
+                      });
+                    }
+                  } catch (err) {
+                    toast.error(err.message);
+                    return false;
+                  }
+                  return true;
+                }}
+                disabled={!can.update}
+                value={groupUser?.permission}
+              />
+            </div>
           )}
         </Flex>
       }

app/stores/GroupUsersStore.ts

@@ -3,6 +3,7 @@ import filter from "lodash/filter";
 import { action, runInAction } from "mobx";
 import GroupUser from "~/models/GroupUser";
 import { PaginationParams } from "~/types";
+import { GroupPermission } from "@shared/types";
 import { client } from "~/utils/ApiClient";
 import RootStore from "./RootStore";
 import Store, {
@@ -12,7 +13,7 @@ import Store, {
 } from "./base/Store";
 
 export default class GroupUsersStore extends Store<GroupUser> {
-  actions = [RPCAction.Create, RPCAction.Delete];
+  actions = [RPCAction.Create, RPCAction.Update, RPCAction.Delete];
 
   constructor(rootStore: RootStore) {
     super(rootStore, GroupUser);
@@ -43,10 +44,19 @@ export default class GroupUsersStore extends Store<GroupUser> {
   };
 
   @action
-  async create({ groupId, userId }: { groupId: string; userId: string }) {
+  async create({
+    groupId,
+    userId,
+    permission = GroupPermission.Member,
+  }: {
+    groupId: string;
+    userId: string;
+    permission?: GroupPermission;
+  }) {
     const res = await client.post("/groups.add_user", {
       id: groupId,
       userId,
+      permission,
     });
     invariant(res?.data, "Group Membership data should be available");
     res.data.users.forEach(this.rootStore.users.add);
@@ -70,6 +80,29 @@ export default class GroupUsersStore extends Store<GroupUser> {
     });
   }
 
+  @action
+  async update({
+    groupId,
+    userId,
+    permission,
+  }: {
+    groupId: string;
+    userId: string;
+    permission?: GroupPermission;
+  }) {
+    const res = await client.post("/groups.update_user", {
+      id: groupId,
+      userId,
+      permission,
+    });
+    invariant(res?.data, "Group Membership data should be available");
+    res.data.users.forEach(this.rootStore.users.add);
+    res.data.groups.forEach(this.rootStore.groups.add);
+
+    const groupMemberships = res.data.groupMemberships.map(this.add);
+    return groupMemberships[0];
+  }
+
   @action
   removeGroupMemberships = (groupId: string) => {
     this.data.forEach((_, key) => {

app/types.ts

@@ -4,6 +4,7 @@ import {
   JSONValue,
   CollectionPermission,
   DocumentPermission,
+  GroupPermission,
 } from "@shared/types";
 import RootStore from "~/stores/RootStore";
 import { SidebarContextType } from "./components/Sidebar/components/SidebarContext";
@@ -311,7 +312,11 @@ export const EmptySelectValue = "__empty__";
 
 export type Permission = {
   label: string;
-  value: CollectionPermission | DocumentPermission | typeof EmptySelectValue;
+  value:
+    | CollectionPermission
+    | DocumentPermission
+    | GroupPermission
+    | typeof EmptySelectValue;
   divider?: boolean;
 };
 

app/utils/ApiClient.ts

@@ -2,7 +2,7 @@ import retry from "fetch-retry";
 import trim from "lodash/trim";
 import queryString from "query-string";
 import EDITOR_VERSION from "@shared/editor/version";
-import { JSONObject } from "@shared/types";
+import { JSONObject, Scope } from "@shared/types";
 import stores from "~/stores";
 import Logger from "./Logger";
 import download from "./download";
@@ -20,6 +20,9 @@ import {
   UnprocessableEntityError,
   UpdateRequiredError,
 } from "./errors";
+import { getCookie } from "tiny-cookie";
+import { CSRF } from "@shared/constants";
+import AuthenticationHelper from "@shared/helpers/AuthenticationHelper";
 
 type Options = {
   baseUrl?: string;
@@ -105,6 +108,20 @@ class ApiClient {
       ...options?.headers,
     };
 
+    // Add CSRF token to headers for mutating requests
+    const isModifyingRequest = ["POST", "PUT", "PATCH", "DELETE"].includes(
+      method
+    );
+    const canAccessWithReadOnly = AuthenticationHelper.canAccess(path, [
+      Scope.Read,
+    ]);
+    if (isModifyingRequest && !canAccessWithReadOnly) {
+      const csrfToken = getCookie(CSRF.cookieName);
+      if (csrfToken) {
+        headerOptions[CSRF.headerName] = csrfToken;
+      }
+    }
+
     // for multipart forms or other non JSON requests fetch
     // populates the Content-Type without needing to explicitly
     // set it.
@@ -213,6 +230,12 @@ class ApiClient {
         });
       }
 
+      if (error.error === "csrf_error") {
+        throw new AuthorizationError(
+          "CSRF token invalid, please try reloading."
+        );
+      }
+
       throw new AuthorizationError(error.message);
     }
 

package.json

@@ -92,6 +92,7 @@
     "@outlinewiki/koa-passport": "^4.2.1",
     "@outlinewiki/passport-azure-ad-oauth2": "^0.1.0",
     "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-one-time-password-field": "^0.1.8",
@@ -381,6 +382,6 @@
     "qs": "6.9.7",
     "prismjs": "1.30.0"
   },
-  "version": "0.86.1",
+  "version": "0.87.1",
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

plugins/oidc/server/oidcDiscovery.ts

@@ -52,6 +52,7 @@ export async function fetchOIDCConfiguration(
         Accept: "application/json",
       },
       timeout: 10000, // 10 second timeout
+      allowPrivateIPAddress: true,
     });
 
     if (!response.ok) {

server/errors.ts

@@ -32,6 +32,12 @@ export function AuthorizationError(message = "Authorization error") {
   });
 }
 
+export function CSRFError(message = "Authorization error") {
+  return httpErrors(403, message, {
+    id: "csrf_error",
+  });
+}
+
 export function RateLimitExceededError(
   message = "Rate limit exceeded for this operation"
 ) {

server/middlewares/csp.ts

@@ -23,6 +23,8 @@ export default function createCSPMiddleware() {
   if (!env.isProduction) {
     scriptSrc.push(env.URL.replace(`:${env.PORT}`, ":3001"));
     scriptSrc.push("localhost:3001");
+  } else {
+    scriptSrc.push(env.URL);
   }
 
   if (env.GOOGLE_ANALYTICS_ID) {

server/middlewares/csrf.ts

@@ -0,0 +1,107 @@
+import type { Next } from "koa";
+import { Scope } from "@shared/types";
+import env from "@server/env";
+import AuthenticationHelper from "@shared/helpers/AuthenticationHelper";
+import { AppContext } from "@server/types";
+import {
+  generateRawToken,
+  bundleToken,
+  unbundleToken,
+} from "@server/utils/csrf";
+import { getCookieDomain } from "@shared/utils/domains";
+import { CSRF } from "@shared/constants";
+import { CSRFError } from "@server/errors";
+
+/**
+ * Middleware that generates and attaches CSRF tokens for safe methods
+ */
+export function attachCSRFToken() {
+  return async function attachCSRFTokenMiddleware(ctx: AppContext, next: Next) {
+    // Only attach tokens for safe methods that don't mutate state
+    if (["GET", "HEAD", "OPTIONS"].includes(ctx.method)) {
+      const raw = generateRawToken(16);
+      const bundled = bundleToken(raw, env.SECRET_KEY);
+
+      // Set cookie that JavaScript can read (not HttpOnly)
+      ctx.cookies.set(CSRF.cookieName, bundled, {
+        httpOnly: false,
+        sameSite: "lax",
+        domain: getCookieDomain(ctx.request.hostname, env.isCloudHosted),
+      });
+    }
+
+    await next();
+  };
+}
+
+/**
+ * Middleware that verifies CSRF tokens for mutating requests
+ */
+export function verifyCSRFToken() {
+  /**
+   * Determines if a request requires CSRF protection
+   */
+  const shouldProtectRequest = (ctx: AppContext): boolean => {
+    // Skip if not a potentially mutating method
+    if (["GET", "HEAD", "OPTIONS"].includes(ctx.method)) {
+      return false;
+    }
+
+    // If not using cookie-based auth, skip CSRF protection
+    if (!ctx.cookies.get("accessToken")) {
+      return false;
+    }
+
+    // For API routes, use AuthenticationHelper to determine if the operation is read-only
+    if (ctx.originalUrl.startsWith("/api/")) {
+      const canAccessWithReadOnly = AuthenticationHelper.canAccess(ctx.path, [
+        Scope.Read,
+      ]);
+
+      // If it can be accessed with read-only scope, it doesn't need CSRF protection
+      if (canAccessWithReadOnly) {
+        return false;
+      }
+    }
+
+    // Protect all other mutating requests
+    return true;
+  };
+
+  return async function verifyCSRFTokenMiddleware(ctx: AppContext, next: Next) {
+    if (!shouldProtectRequest(ctx)) {
+      await next();
+      return;
+    }
+
+    // Get token from cookie
+    const cookieVal = ctx.cookies.get(CSRF.cookieName);
+    if (!cookieVal) {
+      throw CSRFError("CSRF token missing from cookie");
+    }
+
+    // Get token from header or form field depending on type
+    // Access the already-parsed body from koa-body middleware
+    const inputVal =
+      ctx.get(CSRF.headerName) || ctx.request.body?.[CSRF.fieldName];
+
+    if (!inputVal) {
+      throw CSRFError("CSRF token missing from request");
+    }
+
+    // Verify both tokens are valid HMAC-signed tokens
+    const { valid: cookieValid } = unbundleToken(cookieVal, env.SECRET_KEY);
+    const { valid: inputValid } = unbundleToken(inputVal, env.SECRET_KEY);
+
+    if (!cookieValid || !inputValid) {
+      throw CSRFError("CSRF token invalid or malformed");
+    }
+
+    // Verify tokens match (double-submit check)
+    if (cookieVal !== inputVal) {
+      throw CSRFError("CSRF token mismatch");
+    }
+
+    await next();
+  };
+}

server/migrations/20250826204500-modify-shares-unique-constraint-with-revoked-condition.js

@@ -0,0 +1,30 @@
+"use strict";
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    // Create a partial unique index that only applies when revokedAt is NULL
+    // This ensures that only non-revoked shares have the unique constraint
+    await queryInterface.sequelize.query(
+      `CREATE UNIQUE INDEX CONCURRENTLY "shares_urlId_teamId_not_revoked_uk"
+         ON "shares" ("urlId", "teamId")
+         WHERE "revokedAt" IS NULL;`
+    );
+
+    // Remove the existing unique constraint
+    await queryInterface.removeConstraint("shares", "shares_urlId_teamId_uk");
+  },
+
+  async down(queryInterface, Sequelize) {
+    // Restore the original unique constraint
+    await queryInterface.addConstraint("shares", {
+      fields: ["urlId", "teamId"],
+      type: "unique",
+      name: "shares_urlId_teamId_uk",
+    });
+
+    // Remove the partial unique index
+    await queryInterface.sequelize.query(
+      `DROP INDEX CONCURRENTLY IF EXISTS "shares_urlId_teamId_not_revoked_uk";`
+    );
+  },
+};

server/migrations/20250828094500-update-group-user-role.js

@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.addColumn("group_users", "permission", {
+      type: Sequelize.ENUM("admin", "member"),
+      allowNull: false,
+      defaultValue: "member",
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.removeColumn("group_users", "permission");
+  },
+};

server/migrations/20250830060500-add-expires-at-to-authentications.js

@@ -0,0 +1,14 @@
+"use strict";
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.addColumn("authentications", "expiresAt", {
+      type: Sequelize.DATE,
+      allowNull: true,
+    });
+  },
+
+  async down(queryInterface) {
+    await queryInterface.removeColumn("authentications", "expiresAt");
+  },
+};

server/models/ApiKey.ts

@@ -21,7 +21,7 @@ import User from "./User";
 import ParanoidModel from "./base/ParanoidModel";
 import { SkipChangeset } from "./decorators/Changeset";
 import Fix from "./decorators/Fix";
-import AuthenticationHelper from "./helpers/AuthenticationHelper";
+import AuthenticationHelper from "@shared/helpers/AuthenticationHelper";
 import Length from "./validators/Length";
 
 @Table({ tableName: "apiKeys", modelName: "apiKey" })

server/models/Comment.ts

@@ -136,7 +136,7 @@ class Comment extends ParanoidModel<
    */
   public toPlainText() {
     const node = Node.fromJSON(schema, this.data);
-    return ProsemirrorHelper.toPlainText(node, schema);
+    return ProsemirrorHelper.toPlainText(node);
   }
 
   // hooks

server/models/GroupUser.ts

@@ -8,6 +8,7 @@ import {
   DataType,
   Scopes,
 } from "sequelize-typescript";
+import { GroupPermission } from "@shared/types";
 import Group from "./Group";
 import User from "./User";
 import Model from "./base/Model";
@@ -65,6 +66,9 @@ class GroupUser extends Model<
   @Column(DataType.UUID)
   createdById: string;
 
+  @Column(DataType.ENUM(...Object.values(GroupPermission)))
+  permission: GroupPermission;
+
   get modelId() {
     return this.groupId;
   }