CGI.escape emoji name

The commonly used `+1`, when located somewhere like S3, will not work
as the + is not escaped, causing the browser to think it's a space
instead of a literal `+`. To replicate, upload +1.png to S3 and try to
bring it up in Chrome.

This commit escapes the emoji name before returning the img tag.

Author: jayroh

lib/html/pipeline/emoji_filter.rb

@@ -1,3 +1,5 @@
+require "cgi"
+
 begin
   require "gemoji"
 rescue LoadError => _
@@ -42,7 +44,7 @@ def emoji_image_filter(text)
 
         text.gsub EmojiPattern do |match|
           name = $1
-          "<img class='emoji' title=':#{name}:' alt=':#{name}:' src='#{File.join(asset_root, "emoji", "#{name}.png")}' height='20' width='20' align='absmiddle' />"
+          "<img class='emoji' title=':#{name}:' alt=':#{name}:' src='#{emoji_url(name)}' height='20' width='20' align='absmiddle' />"
         end
       end
 
@@ -53,6 +55,12 @@ def emoji_image_filter(text)
       def asset_root
         context[:asset_root]
       end
+
+      private
+
+      def emoji_url(name)
+        File.join(asset_root, "emoji", "#{::CGI.escape(name)}.png")
+      end
     end
   end
 end

test/html/pipeline/emoji_filter_test.rb

@@ -9,10 +9,16 @@ def test_emojify
     assert_match "https://foo.com/emoji/shipit.png", doc.search('img').attr('src').value
   end
 
+  def test_uri_encoding
+    filter = EmojiFilter.new("<p>:+1:</p>", {:asset_root => 'https://foo.com'})
+    doc = filter.call
+    assert_match "https://foo.com/emoji/%2B1.png", doc.search('img').attr('src').value
+  end
+  
   def test_required_context_validation
     exception = assert_raise(ArgumentError) { 
       EmojiFilter.call("", {}) 
     }
     assert_match /:asset_root/, exception.message
   end
-end
+end