From 25ae923130c1a09b85879bc9cbca363742315164 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 19 Jun 2023 20:20:32 -0400
Subject: [PATCH] fix: Cannot drag attachment without selecting first closes
 #5040

---
 shared/editor/components/Widget.tsx |  2 ++
 shared/editor/nodes/Attachment.tsx  | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/shared/editor/components/Widget.tsx b/shared/editor/components/Widget.tsx
index f2a971451..c6e4209d7 100644
--- a/shared/editor/components/Widget.tsx
+++ b/shared/editor/components/Widget.tsx
@@ -9,6 +9,7 @@ type Props = {
   href: string;
   isSelected: boolean;
   children?: React.ReactNode;
+  onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;
 };
 
 export default function Widget(props: Props & ThemeProps<DefaultTheme>) {
@@ -19,6 +20,7 @@ export default function Widget(props: Props & ThemeProps<DefaultTheme>) {
       }
       href={props.href}
       rel="noreferrer nofollow"
+      onMouseDown={props.onMouseDown}
     >
       {props.icon}
       <Preview>
diff --git a/shared/editor/nodes/Attachment.tsx b/shared/editor/nodes/Attachment.tsx
index b96c29f8a..3e889e4fa 100644
--- a/shared/editor/nodes/Attachment.tsx
+++ b/shared/editor/nodes/Attachment.tsx
@@ -1,6 +1,7 @@
 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 * as React from "react";
 import { Trans } from "react-i18next";
 import { bytesToHumanReadable } from "../../utils/files";
@@ -66,12 +67,23 @@ export default class Attachment extends Node {
     };
   }
 
-  component({ isSelected, theme, node }: ComponentProps) {
+  handleSelect =
+    ({ getPos }: { getPos: () => number }) =>
+    () => {
+      const { view } = this.editor;
+      const $pos = view.state.doc.resolve(getPos());
+      const transaction = view.state.tr.setSelection(new NodeSelection($pos));
+      view.dispatch(transaction);
+    };
+
+  component = (props: ComponentProps) => {
+    const { isSelected, theme, node } = props;
     return (
       <Widget
         icon={<FileExtension title={node.attrs.title} />}
         href={node.attrs.href}
         title={node.attrs.title}
+        onMouseDown={this.handleSelect(props)}
         context={
           node.attrs.href ? (
             bytesToHumanReadable(node.attrs.size)
@@ -87,7 +99,7 @@ export default class Attachment extends Node {
         {node.attrs.href && <DownloadIcon size={20} />}
       </Widget>
     );
-  }
+  };
 
   commands({ type }: { type: NodeType }) {
     return (attrs: Record<string, any>) => toggleWrap(type, attrs);