Feat/text and image alignment in glfm

• Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you receive complimentary access to GitLab Duo.

What does this MR do and why?

Add new .float-left .float-none .float-right attributes to images in GLFM and support for glfm-float-* classes that can be used on HTML embedded directly in the markdown.

This MR explicitly does not intetionally does not expose float controls as part of the RTE as discussed in #224950 (comment 3229574336) - this is something that can be followed up on.

References

#224950

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Edit a markdown field in plaintext
2. Embed an image either using [](){} syntax or <img>
3. When using the markdown image syntax, apply one of the .float-left .float-right .float-none attributes to the image
4. When using the HTML image syntax, apply one of glfm-float-left glfm-float-right glfm-float-none classes to the image tag
5. Save the changes to view float applied correctly.

The following markdown can be used to verify the results (kudos to @kivikakk for using cute cat pics as the test subjects):

## `![](){}`

![](https://cataas.com/cat?1){.float-left width=200 height=200}

![](https://cataas.com/cat?2){.float-right width=200 height=200}

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

## `<img>`

<img src="https://cataas.com/cat?3" class="glfm-float-left" width="200" height="200">

<img src="https://cataas.com/cat?4" class="glfm-float-right" width="200" height="200">

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.