Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

[MM-12898] Allow in-line markdown images to open preview window #3639

Merged

Conversation

abdusabri
Copy link
Contributor

Summary

Updates the behavior of in-line markdown images to allow for opening the preview window. There are 3 cases as follows:

  1. If the image source is unsafe, a link is rendered
  2. If the image source is safe, the image will have a pointer cursor & a hover effect, and clicking on it will open the preview window
  3. If the image is a link itself, the image will be rendered and clicking on it will open the link in a new browser window (no preview or hover effect)

Here is a screen capture demonstrating the expected behavior.

inline-markdown-8

Ticket Link

Fixes mattermost/mattermost#9805

@jasonblais jasonblais added 1: PM Review Requires review by a product manager 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester labels Sep 11, 2019
@jasonblais jasonblais added the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Sep 11, 2019
Copy link
Contributor

@esethna esethna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @abdusabri! Looking really good just one note,

  1. We should try to follow the UI that we use for attachments in terms of the hover state:

image
Attachment image ^

image
In-line image ^


FYI I filed a related bug ticket that I found while testing but it's not related to this PR so won't block merging this: https://mattermost.atlassian.net/browse/MM-18508

@abdusabri
Copy link
Contributor Author

abdusabri commented Sep 12, 2019

Oh, thanks @esethna for catching that!

image

You might notice that the outer shadow has slightly less depth at the bottom compared to attached images, and that's is because the inline nature of markdown images has naturally less space/margins. When I tried the default (similar to attachments), it was a bit too much, specially with small icons like Github's favicon, in some other trials the ending was cut a little bit and didn't look natural.

Hopefully that's Ok and I didn't miss something 🙂

@abdusabri
Copy link
Contributor Author

@saturninoabril I will push a single commit with both of your comments implemented after #3647 is merged

Copy link
Contributor

@esethna esethna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks @abdusabri! Great work on this, nice work finding and solving for the corner cases. Definitely have a browse at all the other tickets we have available if something catches your eye: https://github.com/mattermost/mattermost-server/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22

@esethna esethna removed the 1: PM Review Requires review by a product manager label Sep 13, 2019
@saturninoabril
Copy link
Member

@abdusabri fyi, said PR is now merged.

@abdusabri
Copy link
Contributor Author

@esethna while updating the tests, I noticed that I'd removed the alt attribute of the images by mistake. Sorry, I've fixed this now.

I would like also to note that attached images don't have an alt attribute, I think this should be fixed under a separate ticket.

Copy link
Member

@saturninoabril saturninoabril left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In RHS, there's no hover effect.
In center view, the image seemed to be cut-off by a few pixels in standard mode (good in compact).
Screen Shot 2019-09-16 at 7 14 09 PM

@abdusabri
Copy link
Contributor Author

In RHS, there's no hover effect.
In center view, the image seemed to be cut-off by a few pixels in standard mode (good in compact).
Screen Shot 2019-09-16 at 7 14 09 PM

Thanks @saturninoabril , didn't know about this case, will fix it. (Getting to know the product 🙈)

@abdusabri
Copy link
Contributor Author

abdusabri commented Sep 18, 2019

> FYI I filed a related bug ticket that I found while testing but it's not related to this PR so won't block merging this: https://mattermost.atlassian.net/browse/MM-18508

@esethna I'm afraid it is actually a regression issue. Made some progress investigating it, and will continue working on a fix.

@saturninoabril I've already fixed the styles for RHS case, and updated E2E tests. But i think it is best to wait until the above issue is fixed before finally pushing, agree?

Update: I've fixed the issue, and will wrap things up and push the updates later today. The regression issue is a variation of the above issue. A message like ![brokenlink](brokenlink) will render a broken image, and this is what I've fixed in my implementation. The above issue is till open.

@mattermod
Copy link
Contributor

Test server destroyed

@sudheerDev sudheerDev assigned sudheerDev and unassigned esethna Sep 24, 2019
@abdusabri
Copy link
Contributor Author

Thanks for the feedback @sudheerDev!

@sudheerDev sudheerDev merged commit 9e47782 into mattermost:master Sep 24, 2019
@sudheerDev sudheerDev removed their assignment Sep 24, 2019
@abdusabri
Copy link
Contributor Author

I would like also to note that attached images don't have an alt attribute, I think this should be fixed under a separate ticket.

@esethna, in case you missed ☝️

@amyblais amyblais added this to the v5.18.0 milestone Sep 24, 2019
jwilander pushed a commit that referenced this pull request Sep 24, 2019
* Allow in-line markdown images to open preview window

* Update markdown_image E2E tests

* Update inline markdown_image hover style

* Fix inline MD image RHS styles & broken link issues, update E2E tests

* Tweak css border rule, adjust px value in MD image E2E test
skheria pushed a commit to uber-archive/mattermost-webapp that referenced this pull request Oct 3, 2019
…ermost#3639)

* Allow in-line markdown images to open preview window

* Update markdown_image E2E tests

* Update inline markdown_image hover style

* Fix inline MD image RHS styles & broken link issues, update E2E tests

* Tweak css border rule, adjust px value in MD image E2E test
skheria pushed a commit to uber-archive/mattermost-webapp that referenced this pull request Oct 3, 2019
…ermost#3639)

* Allow in-line markdown images to open preview window

* Update markdown_image E2E tests

* Update inline markdown_image hover style

* Fix inline MD image RHS styles & broken link issues, update E2E tests

* Tweak css border rule, adjust px value in MD image E2E test
skheria pushed a commit to uber-archive/mattermost-webapp that referenced this pull request Oct 3, 2019
…ermost#3639)

* Allow in-line markdown images to open preview window

* Update markdown_image E2E tests

* Update inline markdown_image hover style

* Fix inline MD image RHS styles & broken link issues, update E2E tests

* Tweak css border rule, adjust px value in MD image E2E test
sudheerDev added a commit to sudheerDev/mattermost-webapp that referenced this pull request Nov 8, 2019
  * There was a change with inherited classes mattermost#3639
    on  markdown-inline-img causing this issue
  * Changing svg place holder to inherit width
sudheerDev added a commit to sudheerDev/mattermost-webapp that referenced this pull request Nov 8, 2019
  * There was a change with inherited classes mattermost#3639
    on  markdown-inline-img causing this issue
  * Changing svg place holder to inherit width
sudheerDev added a commit to sudheerDev/mattermost-webapp that referenced this pull request Nov 8, 2019
  * There was a change with inherited classes mattermost#3639
    on  markdown-inline-img causing this issue
  * Changing svg place holder to inherit width
deanwhillier pushed a commit that referenced this pull request Nov 11, 2019
* There was a change with inherited classes #3639
    on  markdown-inline-img causing this issue
  * Changing svg place holder to inherit width
mattermost-build pushed a commit to mattermost-build/mattermost-webapp that referenced this pull request Nov 11, 2019
  * There was a change with inherited classes mattermost#3639
    on  markdown-inline-img causing this issue
  * Changing svg place holder to inherit width
sudheerDev pushed a commit that referenced this pull request Nov 11, 2019
* There was a change with inherited classes #3639
    on  markdown-inline-img causing this issue
  * Changing svg place holder to inherit width
@amyblais amyblais added Changelog/Done Required changelog entry has been written Docs/Not Needed Does not require documentation labels Nov 19, 2019
@lindy65 lindy65 added the Tests/Done Release tests have been written label Nov 25, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
4: Reviews Complete All reviewers have approved the pull request Changelog/Done Required changelog entry has been written Docs/Not Needed Does not require documentation Tests/Done Release tests have been written
Projects
None yet
8 participants