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
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
- Images can be previewed in the WYSIWYG editor
- Images can be added by providing a valid URL and optional description
Links / references
TODO
-
Add ability to handle custom events on the ToastUI editor - !32945 (merged) -
Insert an image using the Static Site Editor - !33029 (merged)