Merge branch '24167__color_label' into 'master'

Add Colors to GitLab Flavored Markdown

Closes #24167

See merge request gitlab-org/gitlab-ce!16095

4 files changed, 77 insertions, 0 deletions

diff --git a/lib/banzai/color_parser.rb b/lib/banzai/color_parser.rb
new file mode 100644
index 00000000000..0cd9085190c
--- /dev/null
+++ b/lib/banzai/color_parser.rb
@@ -0,0 +1,44 @@
+module Banzai
+  module ColorParser
+    ALPHA = /0(?:\.\d+)?|\.\d+|1(?:\.0+)?/ # 0.0..1.0
+    PERCENTS = /(?:\d{1,2}|100)%/ # 00%..100%
+    ALPHA_CHANNEL = /(?:,\s*(?:#{ALPHA}|#{PERCENTS}))?/
+    BITS = /\d{1,2}|1\d\d|2(?:[0-4]\d|5[0-5])/ # 00..255
+    DEGS = /-?\d+(?:deg)?/i # [-]digits[deg]
+    RADS = /-?(?:\d+(?:\.\d+)?|\.\d+)rad/i # [-](digits[.digits] OR .digits)rad
+    HEX_FORMAT = /\#(?:\h{3}|\h{4}|\h{6}|\h{8})/
+    RGB_FORMAT = /
+      (?:rgba?
+        \(
+          (?:
+            (?:(?:#{BITS},\s*){2}#{BITS})
+            |
+            (?:(?:#{PERCENTS},\s*){2}#{PERCENTS})
+          )
+          #{ALPHA_CHANNEL}
+        \)
+      )
+    /xi
+    HSL_FORMAT = /
+      (?:hsla?
+        \(
+          (?:#{DEGS}|#{RADS}),\s*#{PERCENTS},\s*#{PERCENTS}
+          #{ALPHA_CHANNEL}
+        \)
+      )
+    /xi
+
+    FORMATS = [HEX_FORMAT, RGB_FORMAT, HSL_FORMAT].freeze
+
+    COLOR_FORMAT = /\A(#{Regexp.union(FORMATS)})\z/ix
+
+    # Public: Analyzes whether the String is a color code.
+    #
+    # text - The String to be parsed.
+    #
+    # Returns the recognized color String or nil if none was found.
+    def self.parse(text)
+      text if COLOR_FORMAT =~ text
+    end
+  end
+end
diff --git a/lib/banzai/filter/color_filter.rb b/lib/banzai/filter/color_filter.rb
new file mode 100644
index 00000000000..6ab29ac281f
--- /dev/null
+++ b/lib/banzai/filter/color_filter.rb
@@ -0,0 +1,31 @@
+module Banzai
+  module Filter
+    # HTML filter that renders `color` followed by a color "chip".
+    #
+    class ColorFilter < HTML::Pipeline::Filter
+      COLOR_CHIP_CLASS = 'gfm-color_chip'.freeze
+
+      def call
+        doc.css('code').each do |node|
+          color = ColorParser.parse(node.content)
+          node << color_chip(color) if color
+        end
+
+        doc
+      end
+
+      private
+
+      def color_chip(color)
+        checkerboard = doc.document.create_element('span', class: COLOR_CHIP_CLASS)
+        chip = doc.document.create_element('span', style: inline_styles(color: color))
+
+        checkerboard << chip
+      end
+
+      def inline_styles(color:)
+        "background-color: #{color};"
+      end
+    end
+  end
+end
diff --git a/lib/banzai/pipeline/broadcast_message_pipeline.rb b/lib/banzai/pipeline/broadcast_message_pipeline.rb
index adc09c8afbd..5dd572de3a1 100644
--- a/lib/banzai/pipeline/broadcast_message_pipeline.rb
+++ b/lib/banzai/pipeline/broadcast_message_pipeline.rb
@@ -7,6 +7,7 @@ module Banzai
           Filter::SanitizationFilter,
 
           Filter::EmojiFilter,
+          Filter::ColorFilter,
           Filter::AutolinkFilter,
           Filter::ExternalLinkFilter
         ]
diff --git a/lib/banzai/pipeline/gfm_pipeline.rb b/lib/banzai/pipeline/gfm_pipeline.rb
index c746f6f64e9..4001b8a85e3 100644
--- a/lib/banzai/pipeline/gfm_pipeline.rb
+++ b/lib/banzai/pipeline/gfm_pipeline.rb
@@ -14,6 +14,7 @@ module Banzai
           Filter::SyntaxHighlightFilter,
 
           Filter::MathFilter,
+          Filter::ColorFilter,
           Filter::MermaidFilter,
           Filter::VideoLinkFilter,
           Filter::ImageLazyLoadFilter,