diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index b76fddad3..7f1382f7c 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -68,38 +68,62 @@ export function RenderMessageContent({ ); }; + const content: IImageContent = getContent(); + const renderCaption = content.filename && content.filename !== content.body; + let renderedCaption: React.ReactNode = null; + if(renderCaption) { + renderedCaption = ( + ( + + )} + renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} + /> + ) + } const renderFile = () => ( - ( - ( - } - /> - )} - renderAsTextFile={() => ( - + ( + } - /> - )} - > - - - )} - outlined={outlineAttachment} - /> + renderAsPdfFile={() => ( + } + /> + )} + renderAsTextFile={() => ( + } + /> + )} + > + + + + )} + outlined={outlineAttachment} + /> + {renderedCaption} + ); if (msgType === MsgType.Text) { @@ -156,8 +180,6 @@ export function RenderMessageContent({ /> ); } - const content: IImageContent = getContent(); - const renderCaption = content.filename && content.filename !== content.body; if (msgType === MsgType.Image) { return ( @@ -174,23 +196,7 @@ export function RenderMessageContent({ )} outlined={outlineAttachment} /> - { - renderCaption && ( - ( - - )} - renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} - /> - ) - } + {renderedCaption} ); } @@ -225,23 +231,7 @@ export function RenderMessageContent({ )} outlined={outlineAttachment} /> - { - renderCaption && ( - ( - - )} - renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} - /> - ) - } + {renderedCaption} ); @@ -258,23 +248,7 @@ export function RenderMessageContent({ )} outlined={outlineAttachment} /> - { - renderCaption && ( - ( - - )} - renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} - /> - ) - } + {renderedCaption} ); diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 7a5fce42f..f2b70b7ab 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -227,18 +227,18 @@ export const RoomInput = forwardRef( const contentsPromises = uploads.map(async (upload) => { const fileItem = selectedFiles.find((f) => f.file === upload.file); if (!fileItem) throw new Error('Broken upload'); - const caption = toPlainText(editor.children).trim() || null; + const caption = toPlainText(editor.children).trim() || undefined; if (fileItem.file.type.startsWith('image')) { return getImageMsgContent(mx, fileItem, upload.mxc, caption); } if (fileItem.file.type.startsWith('video')) { - return getVideoMsgContent(mx, fileItem, upload.mxc); + return getVideoMsgContent(mx, fileItem, upload.mxc, caption); } if (fileItem.file.type.startsWith('audio')) { - return getAudioMsgContent(fileItem, upload.mxc); + return getAudioMsgContent(fileItem, upload.mxc, caption); } - return getFileMsgContent(fileItem, upload.mxc); + return getFileMsgContent(fileItem, upload.mxc, caption); }); handleCancelUpload(uploads); const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises)); diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts index acf67d2f5..8681c1aa4 100644 --- a/src/app/features/room/msgContent.ts +++ b/src/app/features/room/msgContent.ts @@ -144,11 +144,11 @@ export const getAudioMsgContent = (item: TUploadItem, mxc: string, caption?: str return content; }; -export const getFileMsgContent = (item: TUploadItem, mxc: string): IContent => { +export const getFileMsgContent = (item: TUploadItem, mxc: string, caption?: string): IContent => { const { file, encInfo } = item; const content: IContent = { msgtype: MsgType.File, - body: file.name, + body: caption ?? file.name, filename: file.name, info: { mimetype: file.type,