laurent22 / joplin

Joplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.
https://joplinapp.org
Other
45.99k stars 5k forks source link

[Renderer] Alt-text of a local image is not rendered #5803

Closed ylc395 closed 2 years ago

ylc395 commented 2 years ago
![this is alt text](:/06f049df282b4780bbfbdc306383bab5)

Its renderring result won't contain alt text. Is it a bug or intended feature? In fact, I''m a plugin developer and want to store some information as images' alt text. It would be better if alt text won't be ignored.

CalebJohn commented 2 years ago

@ylc395 alt text only displays when an image can't be rendered, hence the name alt (from "alternative"). This is a standard part of html/markdown.

I think maybe what you want is to set the hover text? This is called a title and it is available in markdown as follows:

![this is alt text](:/06f049df282b4780bbfbdc306383bab5 "I'm a title")

Please let me know if I was wrong about your question and I'll gladly re-open. I look forward to seeing your plugin!

ylc395 commented 2 years ago

@CalebJohn Yes, alt text is only displayed when image can not be loaded. But what I said is rendered-HTML doesn't cantain alt attribute at all, which means this is alt text is totally lost in rendered-HTML.

CalebJohn commented 2 years ago

Thanks for the clarification @ylc395

Looks like the alt text is preserved when the image is not available, so it performs in the way it should for that case. But indeed it's odd that the alt text isn't transferred to the html and leave the rendering to the actual HTML display.

The best next step would be to post about this on the forum, that will put the issue in front of the community and perhaps someone that knows more about the MD to HTML system will be able to chime in if this is beneficial or not.

github-actions[bot] commented 2 years ago

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

CalebJohn commented 2 years ago

Not stale.

mak2002 commented 2 years ago

Hey there @CalebJohn , Can I want to work on this issue ?

CalebJohn commented 2 years ago

Go for it @mak2002, good luck!

mak2002 commented 2 years ago

hey @CalebJohn I was following this markdown-it issue about alt text and modified a JSFiddle provided there. Can you suggest how we can use this code to fix this issue?

roman-r-m commented 2 years ago

I'm pretty sure Joplin overrides the default rule for images (somewhere here https://github.com/laurent22/joplin/tree/dev/packages/renderer/MdToHtml/rules) and this is where you should be looking.

mak2002 commented 2 years ago

Thanks @roman-r-m I will look into it and keep you updated with progress.

mak2002 commented 2 years ago

Hey @roman-r-m I was thinking maybe this issue is caused by putting this (:/06f049df282b4780bbfbdc306383bab5) into the editor because when I tried by putting actual address like this: ![alt-text](/path/to/file/image.png) it works this way. So maybe we can put the actual address of file in editor instead of (:/06f049df282b4780bbfbdc306383bab5) while importing the image.

roman-r-m commented 2 years ago

Hey @roman-r-m I was thinking maybe this issue is caused by putting this (:/06f049df282b4780bbfbdc306383bab5) into the editor because when I tried by putting actual address like this: ![alt-text](/path/to/file/image.png) it works this way. So maybe we can put the actual address of file in editor instead of (:/06f049df282b4780bbfbdc306383bab5) while importing the image.

We can not put the actual path - there's a reason Joplin uses resource IDs there.

Namely - if you sync such note to another OS, the path will most likely be incorrect, e.g. on Linux it's ~/.config/joplin-desktop and on Windows - %USERPROFILE%\.config\joplin-desktop

mak2002 commented 2 years ago

ohhk got it. Thanks for clarification @roman-r-m

mak2002 commented 2 years ago

hey @roman-r-m I think I have fixed this issue by getting alt text like: const alt = token.content; and inserting it in img html: return <img data-from-md ${htmlUtils.attributesHtml(Object.assign({}, r, { title: title, alt: alt}))}${js}/>;. So should I open a pull request or you want to suggest something?

roman-r-m commented 2 years ago

Did you test it?

mak2002 commented 2 years ago

Yes @roman-r-m I tested it.

roman-r-m commented 2 years ago

Well it'd be good to see some results.

You'll need to include them in the PR anyway (I assume you have read the contributor's guide)

mak2002 commented 2 years ago

@roman-r-m Yes I have read contributor's guide and soon will make a PR including the results.