feat: Add option to replace existing file attachment in editor

app/editor/components/SelectionToolbar.tsx

@@ -15,6 +15,7 @@ import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
+import getAttachmentMenuItems from "../menus/attachment";
 import getCodeMenuItems from "../menus/code";
 import getDividerMenuItems from "../menus/divider";
 import getFormattingMenuItems from "../menus/formatting";
@@ -66,7 +67,7 @@ function useIsActive(state: EditorState) {
   }
   if (
     selection instanceof NodeSelection &&
-    selection.node.type.name === "image"
+    ["image", "attachment"].includes(selection.node.type.name)
   ) {
     return true;
   }
@@ -219,6 +220,9 @@ export default function SelectionToolbar(props: Props) {
   const range = getMarkRange(selection.$from, state.schema.marks.link);
   const isImageSelection =
     selection instanceof NodeSelection && selection.node.type.name === "image";
+  const isAttachmentSelection =
+    selection instanceof NodeSelection &&
+    selection.node.type.name === "attachment";
   const isCodeSelection = isInCode(state, { onlyBlock: true });
 
   let items: MenuItem[] = [];
@@ -233,6 +237,8 @@ export default function SelectionToolbar(props: Props) {
     items = getTableRowMenuItems(state, rowIndex, dictionary);
   } else if (isImageSelection) {
     items = readOnly ? [] : getImageMenuItems(state, dictionary);
+  } else if (isAttachmentSelection) {
+    items = readOnly ? [] : getAttachmentMenuItems(state, dictionary);
   } else if (isDividerSelection) {
     items = getDividerMenuItems(state, dictionary);
   } else if (readOnly) {

app/editor/menus/attachment.tsx

@@ -0,0 +1,34 @@
+import { TrashIcon, DownloadIcon, ReplaceIcon } from "outline-icons";
+import { EditorState } from "prosemirror-state";
+import * as React from "react";
+import { MenuItem } from "@shared/editor/types";
+import { Dictionary } from "~/hooks/useDictionary";
+
+export default function attachmentMenuItems(
+  state: EditorState,
+  dictionary: Dictionary
+): MenuItem[] {
+  return [
+    {
+      name: "replaceAttachment",
+      tooltip: dictionary.replaceAttachment,
+      icon: <ReplaceIcon />,
+      visible: true,
+    },
+    {
+      name: "deleteAttachment",
+      tooltip: dictionary.deleteAttachment,
+      icon: <TrashIcon />,
+      visible: true,
+    },
+    {
+      name: "separator",
+    },
+    {
+      name: "downloadAttachment",
+      label: dictionary.download,
+      icon: <DownloadIcon />,
+      visible: !!fetch,
+    },
+  ];
+}