[go: up one dir, main page]

Add Text and Image Alignment to GitLab-Flavored MarkDown

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Implementation guide

We would want to extend our current, limited image attribute syntax to accept a class name, such as {.float-left}. Class names would be limited to a very specific set of GitLab controlled CSS classes.

The current implementation is in https://gitlab.com/gitlab-org/gitlab/blob/master/lib/banzai/filter/attributes_filter.rb, and is roughly based on https://github.com/jgm/commonmark-hs/blob/master/commonmark-extensions/test/attributes.md. Any enhancement should fall follow that spec.

To keep it simple, initially we should continue to only support images.

We would also need to add awareness in the rich text editor, which is currently aware of the image size syntax. Though an open question is whether or not the rich text editor could handle displaying images with a float.


original issue description

Problem to solve

As a wiki editor, I want to be able to align text and images in GitLab-Flavored MarkDown, so I can avoid having to use HTML.

Intended users

HarvHouHacker, among others who mainly use GitLab for their wiki pages.

User experience goal

The user should be able to use GitLab-Flavored MarkDown as an easy way to align images and text using some combination of symbols to do it. For instance:

Left Alignment (Default in Latin languages): [Left aligned text]{left-align}
Centered: [Centered text]{center}
Right Alignment (Default for Hebrew and Arabic): `[Right aligned text]{right-align}

This is probably not the best example of how this can be achieved, but some kind of alignment in MarkDown should be added for GitLab wikis and other MarkDown documents.

Proposal

GitLab adds new lines of code that alters the already-existing code in order to add the alignment feature, and this is made available via GitLab Beta before alowing the feature to be used in a stable release. Users will find the MarkDown alignment easier to use than HTML tags which allow the same function, although the HTML tags and properties are still there for those who want to use them.

Further details

Permissions and Security

Documentation

Availability & Testing

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

What is the type of buyer?

Is this a cross-stage feature?

Links / references

Edited by 🤖 GitLab Bot 🤖