Markdown message preview fixed (#34942)

* markdown message preview fixed

* message preview overflow fix

* fix show_more test

* restore package-lock.json

* pull package-lock from master

* package-lock line break

* Fix missing newline at end of package-lock.json

* Update test snapshots

---------

Co-authored-by: David Krauser <david@krauser.org>
Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: David Krauser <david@kruser.org>
This commit is contained in:
Arya Khochare 2026-04-08 00:11:03 +05:30 committed by GitHub
parent 8eb9863215
commit cf40f44023
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 80 additions and 10 deletions

View file

@ -64,7 +64,7 @@ exports[`PostMessagePreview direct and group messages should render preview for
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -156,7 +156,7 @@ exports[`PostMessagePreview direct and group messages should render preview for
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -248,7 +248,7 @@ exports[`PostMessagePreview nested previews should render file preview 1`] = `
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -340,7 +340,7 @@ exports[`PostMessagePreview nested previews should render opengraph preview 1`]
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -432,7 +432,7 @@ exports[`PostMessagePreview should not render bot icon 1`] = `
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -524,7 +524,7 @@ exports[`PostMessagePreview should render bot icon 1`] = `
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -616,7 +616,7 @@ exports[`PostMessagePreview should render correctly 1`] = `
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"
@ -710,7 +710,7 @@ exports[`PostMessagePreview show render without preview when preview posts becom
>
<div
class="post-message__text-container"
style="max-height: 105px;"
style="max-height: 200px;"
>
<div
class="post-message__text"

View file

@ -188,7 +188,7 @@ const PostMessagePreview = (props: Props) => {
<PostMessageView
post={previewPost}
overflowType='ellipsis'
maxHeight={105}
maxHeight={200}
userLanguage={locale}
isChannelAutotranslated={isChannelAutotranslated}
/>

View file

@ -127,6 +127,25 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
</div>
`;
exports[`components/post_view/ShowMore should match snapshot, PostMessageView on collapsed view with ellipsis overflow 1`] = `
<div>
<div
class="post-message post-message--collapsed post-message-preview--overflow"
>
<div
class="post-message__text-container"
style=""
/>
<button
class="post-preview-collapse__show-more-button color--link"
id="showMoreButton"
>
Show more
</button>
</div>
</div>
`;
exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view 1`] = `
<div>
<div
@ -198,3 +217,22 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
</div>
</div>
`;
exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view with ellipsis overflow 1`] = `
<div>
<div
class="post-message post-message--expanded post-message-preview--overflow"
>
<div
class="post-message__text-container"
style=""
/>
<button
class="post-preview-collapse__show-more-button color--link"
id="showMoreButton"
>
Show less
</button>
</div>
</div>
`;

View file

@ -82,6 +82,36 @@ describe('components/post_view/ShowMore', () => {
expect(container).toMatchSnapshot();
});
test('should match snapshot, PostMessageView on collapsed view with ellipsis overflow', () => {
const ref = React.createRef<ShowMore>();
const {container} = renderWithContext(
<ShowMore
{...baseProps}
overflowType='ellipsis'
ref={ref}
/>,
);
act(() => {
ref.current?.setState({isOverflow: true, isCollapsed: true});
});
expect(container).toMatchSnapshot();
});
test('should match snapshot, PostMessageView on expanded view with ellipsis overflow', () => {
const ref = React.createRef<ShowMore>();
const {container} = renderWithContext(
<ShowMore
{...baseProps}
overflowType='ellipsis'
ref={ref}
/>,
);
act(() => {
ref.current?.setState({isOverflow: true, isCollapsed: false});
});
expect(container).toMatchSnapshot();
});
test('should match snapshot, PostMessageView on expanded view with compactDisplay', () => {
const ref = React.createRef<ShowMore>();
const {container} = renderWithContext(

View file

@ -114,8 +114,10 @@ export default class ShowMore extends React.PureComponent<Props, State> {
let className = 'post-message';
let collapsedMaxHeightStyle: number | undefined;
if (isCollapsed) {
collapsedMaxHeightStyle = this.maxHeight;
className += ' post-message--collapsed';
if (!(overflowType === 'ellipsis' && isOverflow)) {
collapsedMaxHeightStyle = this.maxHeight;
}
} else {
className += ' post-message--expanded';
}