Add margin top on media caption (#2283)

This commit is contained in:
Ajay Bura 2025-03-22 19:21:49 +11:00 committed by GitHub
parent ea48092270
commit 1361c1d5de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 46 deletions

View file

@ -2,6 +2,7 @@ import React from 'react';
import { MsgType } from 'matrix-js-sdk';
import { HTMLReactParserOptions } from 'html-react-parser';
import { Opts } from 'linkifyjs';
import { config } from 'folds';
import {
AudioContent,
DownloadFile,
@ -29,7 +30,7 @@ import { ImageViewer } from './image-viewer';
import { PdfViewer } from './Pdf-viewer';
import { TextViewer } from './text-viewer';
import { testMatrixTo } from '../plugins/matrix-to';
import {IImageContent} from "../../types/matrix/common";
import { IImageContent } from '../../types/matrix/common';
type RenderMessageContentProps = {
displayName: string;
@ -73,6 +74,7 @@ export function RenderMessageContent({
if (content.filename && content.filename !== content.body) {
return (
<MText
style={{ marginTop: config.space.S200 }}
edited={edited}
content={content}
renderBody={(props) => (
@ -85,10 +87,10 @@ export function RenderMessageContent({
)}
renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
/>
)
);
}
return null;
}
};
const renderFile = () => (
<>
@ -119,7 +121,6 @@ export function RenderMessageContent({
>
<DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
</FileContent>
)}
outlined={outlineAttachment}
/>
@ -234,7 +235,6 @@ export function RenderMessageContent({
/>
{renderCaption()}
</>
);
}
@ -251,7 +251,6 @@ export function RenderMessageContent({
/>
{renderCaption()}
</>
);
}

View file

@ -1,4 +1,4 @@
import React, { ReactNode } from 'react';
import React, { CSSProperties, ReactNode } from 'react';
import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
import { IContent } from 'matrix-js-sdk';
import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
@ -74,8 +74,9 @@ type MTextProps = {
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
style?: CSSProperties;
};
export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) {
export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />;
@ -88,6 +89,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextP
<MessageTextBody
preWrap={typeof customBody !== 'string'}
jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
style={style}
>
{renderBody({
body: trimmedBody,