feat: Add option to replace existing file attachment in editor

shared/editor/components/Styles.ts

@@ -488,6 +488,12 @@ iframe.embed {
   }
 }
 
+.attachment-replacement-uploading {
+  .widget {
+    opacity: 0.5;
+  }
+}
+
 .image-replacement-uploading {
   img {
     opacity: 0.5;

shared/editor/components/Widget.tsx

@@ -11,6 +11,7 @@ type Props = {
   isSelected: boolean;
   children?: React.ReactNode;
   onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 };
 
 export default function Widget(props: Props & ThemeProps<DefaultTheme>) {
@@ -22,6 +23,7 @@ export default function Widget(props: Props & ThemeProps<DefaultTheme>) {
       href={sanitizeUrl(props.href)}
       rel="noreferrer nofollow"
       onMouseDown={props.onMouseDown}
+      onClick={props.onClick}
     >
       {props.icon}
       <Preview>

shared/editor/lib/uploadPlaceholder.tsx

@@ -38,39 +38,39 @@ const uploadPlaceholder = new Plugin({
       set = set.map(mapping, tr.doc);
 
       if (action?.add) {
-        if (action.add.isImage) {
-          if (action.add.replaceExisting) {
-            const $pos = tr.doc.resolve(action.add.pos);
-
-            if ($pos.nodeAfter?.type.name === "image") {
-              const deco = Decoration.node(
-                $pos.pos,
-                $pos.pos + $pos.nodeAfter.nodeSize,
-                {
-                  class: "image-replacement-uploading",
-                },
-                {
-                  id: action.add.id,
-                }
-              );
-              set = set.add(tr.doc, [deco]);
-            }
-          } else {
-            const element = document.createElement("div");
-            element.className = "image placeholder";
-
-            const img = document.createElement("img");
-            img.src = URL.createObjectURL(action.add.file);
-            img.width = action.add.dimensions?.width;
-            img.height = action.add.dimensions?.height;
-
-            element.appendChild(img);
-
-            const deco = Decoration.widget(action.add.pos, element, {
-              id: action.add.id,
-            });
-            set = set.add(tr.doc, [deco]);
+        if (action.add.replaceExisting) {
+          const $pos = tr.doc.resolve(action.add.pos);
+          const nodeAfter = $pos.nodeAfter;
+          if (!nodeAfter) {
+            return;
           }
+
+          const deco = Decoration.node(
+            $pos.pos,
+            $pos.pos + nodeAfter.nodeSize,
+            {
+              class: `${nodeAfter.type.name}-replacement-uploading`,
+            },
+            {
+              id: action.add.id,
+            }
+          );
+          set = set.add(tr.doc, [deco]);
+        } else if (action.add.isImage) {
+          const element = document.createElement("div");
+          element.className = "image placeholder";
+
+          const img = document.createElement("img");
+          img.src = URL.createObjectURL(action.add.file);
+          img.width = action.add.dimensions?.width;
+          img.height = action.add.dimensions?.height;
+
+          element.appendChild(img);
+
+          const deco = Decoration.widget(action.add.pos, element, {
+            id: action.add.id,
+          });
+          set = set.add(tr.doc, [deco]);
         } else if (action.add.isVideo) {
           const element = document.createElement("div");
           element.className = "video placeholder";

shared/editor/nodes/Attachment.tsx

@@ -1,12 +1,13 @@
 import Token from "markdown-it/lib/token";
 import { DownloadIcon } from "outline-icons";
 import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
-import { NodeSelection } from "prosemirror-state";
+import { Command, NodeSelection } from "prosemirror-state";
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { Primitive } from "utility-types";
-import { bytesToHumanReadable } from "../../utils/files";
+import { bytesToHumanReadable, getEventFiles } from "../../utils/files";
 import { sanitizeUrl } from "../../utils/urls";
+import insertFiles from "../commands/insertFiles";
 import toggleWrap from "../commands/toggleWrap";
 import FileExtension from "../components/FileExtension";
 import Widget from "../components/Widget";
@@ -69,7 +70,7 @@ export default class Attachment extends Node {
   }
 
   handleSelect =
-    ({ getPos }: { getPos: () => number }) =>
+    ({ getPos }: ComponentProps) =>
     () => {
       const { view } = this.editor;
       const $pos = view.state.doc.resolve(getPos());
@@ -78,13 +79,19 @@ export default class Attachment extends Node {
     };
 
   component = (props: ComponentProps) => {
-    const { isSelected, theme, node } = props;
+    const { isSelected, isEditable, theme, node } = props;
     return (
       <Widget
         icon={<FileExtension title={node.attrs.title} />}
         href={node.attrs.href}
         title={node.attrs.title}
         onMouseDown={this.handleSelect(props)}
+        onClick={(event) => {
+          if (isEditable) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }}
         context={
           node.attrs.href ? (
             bytesToHumanReadable(node.attrs.size || "0")
@@ -97,13 +104,69 @@ export default class Attachment extends Node {
         isSelected={isSelected}
         theme={theme}
       >
-        {node.attrs.href && <DownloadIcon size={20} />}
+        {node.attrs.href && !isEditable && <DownloadIcon size={20} />}
       </Widget>
     );
   };
 
   commands({ type }: { type: NodeType }) {
-    return (attrs: Record<string, Primitive>) => toggleWrap(type, attrs);
+    return {
+      createAttachment: (attrs: Record<string, Primitive>) =>
+        toggleWrap(type, attrs),
+      deleteAttachment: (): Command => (state, dispatch) => {
+        dispatch?.(state.tr.deleteSelection());
+        return true;
+      },
+      replaceAttachment: (): Command => (state) => {
+        if (!(state.selection instanceof NodeSelection)) {
+          return false;
+        }
+        const { view } = this.editor;
+        const { node } = state.selection;
+        const { uploadFile, onFileUploadStart, onFileUploadStop } =
+          this.editor.props;
+
+        if (!uploadFile) {
+          throw new Error("uploadFile prop is required to replace attachments");
+        }
+
+        if (node.type.name !== "attachment") {
+          return false;
+        }
+
+        // create an input element and click to trigger picker
+        const inputElement = document.createElement("input");
+        inputElement.type = "file";
+        inputElement.onchange = (event) => {
+          const files = getEventFiles(event);
+          void insertFiles(view, event, state.selection.from, files, {
+            uploadFile,
+            onFileUploadStart,
+            onFileUploadStop,
+            dictionary: this.options.dictionary,
+            replaceExisting: true,
+          });
+        };
+        inputElement.click();
+        return true;
+      },
+      downloadAttachment: (): Command => (state) => {
+        if (!(state.selection instanceof NodeSelection)) {
+          return false;
+        }
+        const { node } = state.selection;
+
+        // create a temporary link node and click it
+        const link = document.createElement("a");
+        link.href = node.attrs.href;
+        document.body.appendChild(link);
+        link.click();
+
+        // cleanup
+        document.body.removeChild(link);
+        return true;
+      },
+    };
   }
 
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {

shared/i18n/locales/en_US/translation.json

@@ -306,6 +306,9 @@
   "Delete column": "Delete column",
   "Delete row": "Delete row",
   "Delete table": "Delete table",
+  "Delete file": "Delete file",
+  "Download file": "Download file",
+  "Replace file": "Replace file",
   "Delete image": "Delete image",
   "Download image": "Download image",
   "Replace image": "Replace image",