diff --git a/src/components/message-pane/MessagePane.tsx b/src/components/message-pane/MessagePane.tsx
index bf3b33c3e..f42cfe12d 100644
--- a/src/components/message-pane/MessagePane.tsx
+++ b/src/components/message-pane/MessagePane.tsx
@@ -550,7 +550,7 @@ function MessageArea(props: {
-
+
@@ -1306,7 +1306,9 @@ function EditIndicator(props: { messageId: string }) {
);
}
-function FloatingAttachment(props: {}) {
+function FloatingAttachment(props: {
+ textArea?: HTMLElement,
+}) {
const params = useParams<{ channelId: string }>();
const { createPortal } = useCustomPortal();
const { channelProperties } = useStore();
@@ -1350,6 +1352,11 @@ function FloatingAttachment(props: {}) {
const isMobileWidth = () => (paneWidth() || 0) <= 400;
+ const cancelAttachment = () => {
+ channelProperties.setAttachment(params.channelId, undefined);
+ props.textArea?.focus();
+ };
+
return (
+
+
+
);
diff --git a/src/components/message-pane/styles.module.scss b/src/components/message-pane/styles.module.scss
index 34c4f634e..0287f7f85 100644
--- a/src/components/message-pane/styles.module.scss
+++ b/src/components/message-pane/styles.module.scss
@@ -356,6 +356,10 @@ body .floating.floatingSlowModeIndicator {
padding: 6px;
}
}
+ .attachmentClose {
+ align-self: flex-start;
+ margin-left: auto;
+ }
}
.attachmentFilename {