mirror of
https://github.com/mattermost/mattermost.git
synced 2026-05-28 04:35:04 -04:00
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:
parent
8eb9863215
commit
cf40f44023
5 changed files with 80 additions and 10 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ const PostMessagePreview = (props: Props) => {
|
|||
<PostMessageView
|
||||
post={previewPost}
|
||||
overflowType='ellipsis'
|
||||
maxHeight={105}
|
||||
maxHeight={200}
|
||||
userLanguage={locale}
|
||||
isChannelAutotranslated={isChannelAutotranslated}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue