Make Emoji img attributes configurable

1. User can specify a hash `context[:img_attrs]` to change the `img` tag
attributes, e.g. `{ "draggable" => false }`

2. The hash key can be either `String` / `Symbol` (indifferent access)

  `{ "draggable" => false }` / `{ draggable: false }`

  =>

  `<img draggable="false">`

3. The hash value can be either anything / proc-like object

  Proc-like object with default argument `name`:

  Given name is `:shipit:`

  `{ title: ->(name) { |n| n.gsub(":", "") } }`

  =>

  `<img title="shipit">`

  So you can do any customisations with the attribute.

4. The hash value nil means clear the attribute of img tag

  For example, to clear the default `height`, `width`, and `align`
  attributes, pass `{ height: nil, width: nil, align: nil }` to
  `context[:img_attrs]`.

5. Refine tests with consistent styles

Author: JuanitoFatas

lib/html/pipeline/emoji_filter.rb

@@ -14,6 +14,7 @@ class Pipeline
     #   :asset_root (required) - base url to link to emoji sprite
     #   :asset_path (optional) - url path to link to emoji sprite. :file_name can be used as a placeholder for the sprite file name. If no asset_path is set "emoji/:file_name" is used.
     #   :ignored_ancestor_tags (optional) - Tags to stop the emojification. Node has matched ancestor HTML tags will not be emojified. Default to pre, code, and tt tags. Extra tags please pass in the form of array, e.g., %w(blockquote summary).
+    #   :img_attrs (optional) - Attributes for generated img tag. E.g. Pass { "draggble" => true, "height" => nil } to set draggable attribute to "true" and clear height attribute of generated img tag.
     class EmojiFilter < Filter
 
       DEFAULT_IGNORED_ANCESTOR_TAGS = %w(pre code tt).freeze
@@ -71,7 +72,27 @@ def asset_path(name)
 
       # Build an emoji image tag
       def emoji_image_tag(name)
-        "<img class='emoji' title=':#{name}:' alt=':#{name}:' src='#{emoji_url(name)}' height='20' width='20' align='absmiddle' />"
+        require "active_support/core_ext/hash/indifferent_access"
+        html_attrs =
+          default_img_attrs(name).
+            merge!((context[:img_attrs] || {}).with_indifferent_access).
+            map { |attr, value| !value.nil? && %(#{attr}="#{value.try(:call, name) || value}") }.
+            reject(&:blank?).join(" ".freeze)
+
+        "<img #{html_attrs}>"
+      end
+
+      # Default attributes for img tag
+      def default_img_attrs(name)
+        {
+          "class" => "emoji".freeze,
+          "title" => ":#{name}:",
+          "alt" => ":#{name}:",
+          "src" => "#{emoji_url(name)}",
+          "height" => "20".freeze,
+          "width" => "20".freeze,
+          "align" => "absmiddle".freeze,
+        }
       end
 
       def emoji_url(name)

test/html/pipeline/emoji_filter_test.rb

@@ -62,4 +62,33 @@ def test_not_emojify_in_custom_multiple_tags_foo_and_bar
     doc = filter.call
     assert_equal body, doc.to_html
   end
+
+  def test_img_tag_attributes
+    body = ":shipit:"
+    filter = EmojiFilter.new(body, {:asset_root => "https://foo.com"})
+    doc = filter.call
+    assert_equal %(<img class="emoji" title=":shipit:" alt=":shipit:" src="https://foo.com/emoji/shipit.png" height="20" width="20" align="absmiddle">), doc.to_html
+  end
+
+  def test_img_tag_attributes_can_be_customized
+    body = ":shipit:"
+    filter = EmojiFilter.new(body, {:asset_root => "https://foo.com", img_attrs: Hash("draggable"=> "false", "height" => nil, "width" => nil, "align" => nil)})
+    doc = filter.call
+    assert_equal %(<img class="emoji" title=":shipit:" alt=":shipit:" src="https://foo.com/emoji/shipit.png" draggable="false">), doc.to_html
+  end
+
+  def test_img_attrs_value_can_accept_proclike_object
+    remove_colons = ->(name) { name.gsub(":", "") }
+    body = ":shipit:"
+    filter = EmojiFilter.new(body, {:asset_root => "https://foo.com", img_attrs: Hash("title" => remove_colons)})
+    doc = filter.call
+    assert_equal %(<img class="emoji" title="shipit" alt=":shipit:" src="https://foo.com/emoji/shipit.png" height="20" width="20" align="absmiddle">), doc.to_html
+  end
+
+  def test_img_attrs_can_accept_symbolized_keys
+    body = ":shipit:"
+    filter = EmojiFilter.new(body, {:asset_root => "https://foo.com", img_attrs: Hash(draggable: false, height: nil, width: nil, align: nil)})
+    doc = filter.call
+    assert_equal %(<img class="emoji" title=":shipit:" alt=":shipit:" src="https://foo.com/emoji/shipit.png" draggable="false">), doc.to_html
+  end
 end