Merge branch 'issue-30533-image-max-width' into 'master'

Enable image link and lazy loading (AsciiDoc documents)

Closes #30533

See merge request gitlab-org/gitlab!18164

changelogs/unreleased/30533-asciidoc-image-link-lazy-loading.yml

+---
+title: Enable image link and lazy loading in AsciiDoc documents
+merge_request: 18164
+author: Guillaume Grossetie
+type: fixed

lib/banzai/pipeline/ascii_doc_pipeline.rb

@@ -11,6 +11,8 @@ module Banzai
           Filter::ExternalLinkFilter,
           Filter::PlantumlFilter,
           Filter::ColorFilter,
+          Filter::ImageLazyLoadFilter,
+          Filter::ImageLinkFilter,
           Filter::AsciiDocPostProcessingFilter
         ]
       end

spec/lib/gitlab/asciidoc_spec.rb

@@ -58,7 +58,7 @@ module Gitlab
           },
           'image with onerror' => {
             input: 'image:https://localhost.com/image.png[Alt text" onerror="alert(7)]',
-            output: "<div>\n<p><span><img src=\"https://localhost.com/image.png\" alt='Alt text\" onerror=\"alert(7)'></span></p>\n</div>"
+            output: "<div>\n<p><span><a class=\"no-attachment-icon\" href=\"https://localhost.com/image.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt='Alt text\" onerror=\"alert(7)' class=\"lazy\" data-src=\"https://localhost.com/image.png\"></a></span></p>\n</div>"
           },
           'fenced code with inline script' => {
             input: '```mypre"><script>alert(3)</script>',
@@ -73,6 +73,20 @@ module Gitlab
         end
       end
 
+      context "images" do
+        it "does lazy load and link image" do
+          input = 'image:https://localhost.com/image.png[]'
+          output = "<div>\n<p><span><a class=\"no-attachment-icon\" href=\"https://localhost.com/image.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"image\" class=\"lazy\" data-src=\"https://localhost.com/image.png\"></a></span></p>\n</div>"
+          expect(render(input, context)).to include(output)
+        end
+
+        it "does not automatically link image if link is explicitly defined" do
+          input = 'image:https://localhost.com/image.png[link=https://gitlab.com]'
+          output = "<div>\n<p><span><a href=\"https://gitlab.com\" rel=\"nofollow noreferrer noopener\" target=\"_blank\"><img src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"image\" class=\"lazy\" data-src=\"https://localhost.com/image.png\"></a></span></p>\n</div>"
+          expect(render(input, context)).to include(output)
+        end
+      end
+
       context 'with admonition' do
         it 'preserves classes' do
           input = <<~ADOC