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 {