Merge branch 'banzai-image-link' into 'master'

Add link to image URL for images in discussions.

The main problem with this is that it doesn't apply retroactively, only to images that are uploaded after this change. It's also hacky and probably not the most optimal solution.

Resolves #14411.

See merge request !3464

CHANGELOG

@@ -1,6 +1,7 @@
 Please view this file on the master branch, on stable branches it's out of date.
 
 v 8.7.0 (unreleased)
+  - All images in discussions and wikis now link to their source files !3464 (Connor Shea).
   - Improved Markdown rendering performance !3389 (Yorick Peterse)
   - Don't attempt to look up an avatar in repo if repo directory does not exist (Stan hu)
   - Preserve time notes/comments have been updated at when moving issue

app/assets/stylesheets/framework/typography.scss

@@ -138,6 +138,12 @@
     }
   }
 
+  a.no-attachment-icon {
+    &:before {
+      display: none;
+    }
+  }
+
   /* Link to current header. */
   h1, h2, h3, h4, h5, h6 {
     position: relative;

features/steps/project/wiki.rb

@@ -85,7 +85,7 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
   end
 
   step 'I have an existing Wiki page with images linked on page' do
-    wiki.create_page("pictures", "Look at this [image](image.jpg)\n\n ![image](image.jpg)", :markdown, "first commit")
+    wiki.create_page("pictures", "Look at this [image](image.jpg)\n\n ![alt text](image.jpg)", :markdown, "first commit")
     @wiki_page = wiki.find_page("pictures")
   end
 

lib/banzai/filter/image_link_filter.rb

@@ -0,0 +1,27 @@
+module Banzai
+  module Filter
+    # HTML filter that wraps links around inline images.
+    class ImageLinkFilter < HTML::Pipeline::Filter
+      
+      # Find every image that isn't already wrapped in an `a` tag, create
+      # a new node (a link to the image source), copy the image as a child
+      # of the anchor, and then replace the img with the link-wrapped version.
+      def call
+        doc.xpath('descendant-or-self::img[not(ancestor::a)]').each do |img|
+
+          link = doc.document.create_element(
+            'a',
+            class: 'no-attachment-icon',
+            href: img['src'],
+            target: '_blank'
+          )
+
+          link.children = img.clone
+          img.replace(link)
+        end
+
+        doc
+      end
+    end
+  end
+end

lib/banzai/pipeline/gfm_pipeline.rb

@@ -7,6 +7,7 @@ module Banzai
           Filter::SanitizationFilter,
 
           Filter::UploadLinkFilter,
+          Filter::ImageLinkFilter,
           Filter::EmojiFilter,
           Filter::TableOfContentsFilter,
           Filter::AutolinkFilter,

spec/features/atom/users_spec.rb

@@ -61,7 +61,7 @@ describe "User Feed", feature: true  do
       end
 
       it 'should have XHTML summaries in merge request descriptions' do
-        expect(body).to match /Here is the fix: <img[^>]*\/>/
+        expect(body).to match /Here is the fix: <a[^>]*><img[^>]*\/><\/a>/
       end
     end
   end

spec/lib/banzai/filter/image_link_filter_spec.rb

@@ -0,0 +1,24 @@
+require 'spec_helper'
+
+describe Banzai::Filter::ImageLinkFilter, lib: true do
+  include FilterSpecHelper
+
+  def image(path)
+    %(<img src="#{path}" />)
+  end
+
+  it 'wraps the image with a link to the image src' do
+    doc = filter(image('/uploads/e90decf88d8f96fe9e1389afc2e4a91f/test.jpg'))
+    expect(doc.at_css('img')['src']).to eq doc.at_css('a')['href']
+  end
+
+  it 'does not wrap a duplicate link' do
+    exp = act = %q(<a href="/whatever">#{image('/uploads/e90decf88d8f96fe9e1389afc2e4a91f/test.jpg')}</a>)
+    expect(filter(act).to_html).to eq exp
+  end
+
+  it 'works with external images' do
+    doc = filter(image('https://i.imgur.com/DfssX9C.jpg'))
+    expect(doc.at_css('img')['src']).to eq doc.at_css('a')['href']
+  end
+end