Habitica: No mouseover text on images inserted with markdown

[lemoness]

Mouseover text on images inserted with markdown doesn't appear to be working correctly.

[Alys]

As an example to illustrate this, if an image is inserted into chat or a task with code like this:
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
then when you hover your mouse over the image, the words "Logo Title Text 1" should appear. If nothing is specified in the quote marks after the URL, then there should be no on-hover effect (i.e., the alt text should not be used as title text).

Reference: Markdown Cheat Sheet: Images

I'm increasing the priority of this since it's an accessibility issue.

[TheHollidayInn]

Is the markdown working at all?

[Alys]

Yes, the image appears correctly and the alt text is applied (visible if you examine the HTML source). The only change needed is for the title text to appear on hover.

[paglias]

If the alt text is applied in the source there should be nothing more to do. It's the browser's role to implement showing that alt title. Which browser are we talking about?

[Alys]

No, this issue is for the title text, not the alt text. The title text is the part that optionally appears after the URL in the markdown link ("Logo Title Text 1" in the example above). It serves a different purpose than the alt text and is meant to be handled in a different way. The alt text is what appears when the image can't be displayed (e.g., the user is browsing with images off). The title text provides additional information (more details).

It's likely that the markdown library we use provides support for title text. It might just need to be turned on in the options that we specify when calling the library's functions and/or enabled in our website's code.

[paglias]

Ah okay, this is then a problem with the mardown library we're using, will see if there's an option to enable it

[Cappycot]

From the looks of it, it seems that our custom markdown-it-linkify-images library may not even support image titles at all.

Running the following code on RunKit + npm

var md = require('markdown-it')()
var mili = require('markdown-it-linkify-images')
md.use(mili)
var html = md.render('![Congratulations!](http://i.imgur.com/rfEjwTF.gif "Congratulations!")')

yields no image title in the resulting html.

Edit: Nice. I didn't know GitHub can reference issues across repos lol

[crookedneighbor]

v1.1.0 of markdown-it-linkify-images has been released with this feature.

Thanks @Cappycot!

[paglias]

@crookedneighbor thanks a lot for this ! I've updated habitica-markdown to use this latest version, and released a new version (1.3.1) but I cannot push it to npm since you're the owner there. Would you mind pushing it when you have a few minutes? https://github.com/HabitRPG/habitica-markdown/

[Cappycot]

@paglias are my changes eligible for contributor credit? Just wondering _lol

[paglias]

@Cappycot yep! I had missed your UUID, awarding a tier now

[Cappycot]

@paglias sorry to be a bother, but did you mean credit towards tier 2 rather than a whole new tier? (I got confused.)

[paglias]

Sorry the misunderstanding @Cappycot , the way tiers work is that they require increasingly more work to be obtained, level 1 is given for the first PR regardless of how big it's, then it becomes more difficult

[Alys]

Fixed in https://github.com/crookedneighbor/markdown-it-linkify-images/commit/0ab7a302f7dd0208ed4b0b842e52aa9c0d01919d

[paglias]

The new version of the habitica-markdown package hasn't been published to npm yet so I'm keeping this open

[bookofbash]

Hi, I am new. Looking for things to contribute to. It seems that this issue should be marked as closed now. Is that correct?

[Alys]

@bookofbash No, it's still not working. The latest status from paglias is still correct, from what I can tell.

I can see that the new version of the markdown-it-linkify-images package has been published to npm (if you do npm install markdown-it-linkify-images the code that's installed contains the fix referenced above. However the published version of habitica-markdown doesn't have that latest version of markdown-it-linkify-images in it yet, so the fix isn't live in Habitica.

[paglias]

Fixed in https://github.com/HabitRPG/habitica/commit/6c36ebc952f3720dea6f6e8c16f29d16d7df5676