Skip to content

Allow Web IDE Markdown Preview to display uncommitted images

Himanshu Kapoor requested to merge 31810-markdown-images into master

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

  1. In repo_editor.vue, whenever IDE switches from Edit mode to Preview mode for markdown files, the utility function extractMarkdownImagesFromEntries is used to replace all locally available images in editor's state.entries object with handlebars template tags of the form {{gl_md_img_#}}, where # is a number representing the index of the image.
  2. 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.
  3. repo_editor.vue had passed a hashmap of images to markdown_viewer.vue (via content_viewer.vue). After the html is received from the backend, it is replaced with actual image tags with original alt and title information, and the src 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

Merge request reports