Display images in the Static Site Editor

Problem to solve

The WYSIWYG experience in the Static Site Editor offers a familiar way to edit rich text, but does not currently offer any support for users looking to enhance their content using visual assets like pictures, screenshots, animated gifs, or charts.

Intended users

• Parker (Product Manager)
• Presley (Product Designer)

User experience goal

A user should be able to use the WYSIWYG mode of the Static Site Editor to add an inline image and preview the results.

Note: This is intended only for adding existing hosted images, not uploading new assets from the static site editor. That functionality is covered in #218529 (closed)

Proposal

Using the built-in support for images in Toast UI, we should display thumbnails of any existing images on the page in the WYSIWYG mode and allow a user to insert a reference to a new image by providing a URL and optional Description for accessibility.

Direct URL

• A user can provide a URL to an image, for example: https://www.site.com/images/logo.png

Documentation

• Add all known Documentation Requirements in this section. See https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements
• If this feature requires changing permissions, update the permissions document. See https://docs.gitlab.com/ee/user/permissions.html -->

Designs

• Designs: Inserting image
• Figma: https://www.figma.com/file/RhYal9t4OZk7IeYsSvEHpW/WYSIWYG-markdown-editor-214559?node-id=310%3A520

Availability & Testing

What does success look like, and how can we measure that?

Acceptance criteria

1. Images can be previewed in the WYSIWYG editor
2. Images can be added by providing a valid URL and optional description

Links / references

Toast UI

TODO

• Add ability to handle custom events on the ToastUI editor - !32945 (merged)
• Insert an image using the Static Site Editor - !33029 (merged)