Skip to content

Render color chips in the Content Editor

Eric Schurter requested to merge 332091-render-color-chips-in-the-content-editor into master

What does this MR do and why?

When a code span is written that includes a valid CSS color property, GFM renders a preview swatch to the right of the color. This MR adds support for the Content Editor to render those color chips while editing. Check the GitLab Markdown documentation about color chips.

Screenshots or screen recordings

Screen_Shot_2021-10-04_at_11.49.22_AM

You can also type color chips on the fly

color_chip

How to set up and validate locally

  1. Open a project or group wiki
  2. Edit a wiki page or create a new one
  3. Choose Use new editor
  4. Write content that includes any valid Hex, RGB(A), or HSL(A) value inside a code span.
    • for example: #ff0033 or rgba(255,0,112,0.5)
  5. The completed code span should have a color swatch rendered to the right of the text that represents the actual color typed.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #332091 (closed)

Edited by Enrique Alcántara

Merge request reports