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 functionextractMarkdownImagesFromEntriesis used to replace all locally available images in editor'sstate.entriesobject 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.vuehad passed a hashmap ofimagestomarkdown_viewer.vue(viacontent_viewer.vue). After the html is received from the backend, it is replaced with actual image tags with originalaltandtitleinformation, and thesrcpointing 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:
- The image path may contain spaces.
What's not supported?
- Markdown images with single quotes in the title:

- Markdown images with reference style URLs:
-
![image alt][my_img]in markdown -
[my_img]: ../images/my_img.pngin 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