Allow Web IDE Markdown Preview to display uncommitted images
What does this MR do?
Web IDE: Preview uncommitted images in markdown
Issue #31810 (closed): Add support in the Web IDE markdown viewer to be able to preview inline images that have not been committed yet.
The Approach
- In
repo_editor.vue
, whenever IDE switches from Edit mode to Preview mode for markdown files, the utility functionextractMarkdownImagesFromEntries
is used to replace all locally available images in editor'sstate.entries
object with handlebars template tags of the form{{gl_md_img_#}}
, where#
is a number representing the index of the image. - In
markdown_viewer.vue
, the above markdown with the handlebars tags is sent to the backend for transformation into html. Backend doesn't touch the handlebars tags, since it isn't valid markdown. -
repo_editor.vue
had passed a hashmap ofimages
tomarkdown_viewer.vue
(viacontent_viewer.vue
). After the html is received from the backend, it is replaced with actual image tags with originalalt
andtitle
information, and thesrc
pointing to a base64 url of the locally available image.
This MR uses the utility function relativePathToAbsolute
in url_utility.js
that was added in !31630 (merged).
What's supported?
- Markdown image tags of the formats:
![image alt](path/to/your image/image.jpg "image title")
![image alt](path/to/your image/image.jpg)
- The image path may contain spaces.
What's not supported?
- Markdown images with single quotes in the title:
![image alt](path/to/your image/image.jpg 'image title')
- Markdown images with reference style URLs:
-
![image alt][my_img]
in markdown -
[my_img]: ../images/my_img.png
in the footer
-
-
Gollum wiki image syntax:
[[image-url|alt=text]]
[[image-url|frame, alt=text]]
Does this MR meet the acceptance criteria?
Conformity
Edited by Himanshu Kapoor