SanitizationFilter allows html5 details and summary (Issue #21605)

Also adds details/summary tags to Copy-as-GFM

app/assets/javascripts/copy_as_gfm.js

@@ -110,7 +110,7 @@ require('./lib/utils/common_utils');
 
         return `<dl>\n${lines.join('\n')}\n</dl>`;
       },
-      'sub, dt, dd, kbd, q, samp, var, ruby, rt, rp, abbr'(el, text) {
+      'sub, dt, dd, kbd, q, samp, var, ruby, rt, rp, abbr, summary, details'(el, text) {
         const tag = el.nodeName.toLowerCase();
         return `<${tag}>${text}</${tag}>`;
       },

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -86,6 +86,16 @@
   position: fixed;
 }
 
+/*
+ * Fix <summary> elements on firefox
+ * See https://github.com/necolas/normalize.css/issues/640
+ * and https://github.com/twbs/bootstrap/issues/21060
+ *
+ */
+summary {
+  display: list-item;
+}
+
 @import "bootstrap/responsive-utilities";
 
 // Labels

changelogs/unreleased/21605-allow-html5-details.yml

+---
+title: SanitizationFilter allows html5 details and summary tags
+merge_request: 6568
+author:

doc/user/markdown.md

@@ -576,7 +576,7 @@ Quote break.
 
 You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
 
-See the documentation for HTML::Pipeline's [SanitizationFilter](http://www.rubydoc.info/gems/html-pipeline/1.11.0/HTML/Pipeline/SanitizationFilter#WHITELIST-constant) class for the list of allowed HTML tags and attributes.  In addition to the default `SanitizationFilter` whitelist, GitLab allows `span` elements.
+See the documentation for HTML::Pipeline's [SanitizationFilter](http://www.rubydoc.info/gems/html-pipeline/1.11.0/HTML/Pipeline/SanitizationFilter#WHITELIST-constant) class for the list of allowed HTML tags and attributes.  In addition to the default `SanitizationFilter` whitelist, GitLab allows `span`, `abbr`, `details` and `summary` elements.
 
 ```no-highlight
 <dl>

lib/banzai/filter/sanitization_filter.rb

@@ -35,6 +35,10 @@ module Banzai
         # Allow span elements
         whitelist[:elements].push('span')
 
+        # Allow html5 details/summary elements
+        whitelist[:elements].push('details')
+        whitelist[:elements].push('summary')
+
         # Allow abbr elements with title attribute
         whitelist[:elements].push('abbr')
         whitelist[:attributes]['abbr'] = %w(title)

spec/features/copy_as_gfm_spec.rb

@@ -275,6 +275,10 @@ describe 'Copy as GFM', feature: true, js: true do
       <rp>rp</rp>
 
       <abbr>abbr</abbr>
+
+      <summary>summary</summary>
+
+      <details>details</details>
       GFM
     )
 

spec/features/markdown_spec.rb

@@ -115,6 +115,14 @@ describe 'GitLab Markdown', feature: true do
         expect(doc).to have_selector('span:contains("span tag")')
       end
 
+      it 'permits details elements' do
+        expect(doc).to have_selector('details:contains("Hiding the details")')
+      end
+
+      it 'permits summary elements' do
+        expect(doc).to have_selector('details summary:contains("collapsible")')
+      end
+
       it 'permits style attribute in th elements' do
         aggregate_failures do
           expect(doc.at_css('th:contains("Header")')['style']).to eq 'text-align: center'

spec/fixtures/markdown.md.erb

@@ -79,6 +79,11 @@ As permissive as it is, we've allowed even more stuff:
 
 <span>span tag</span>
 
+<details>
+<summary>Summary lines are collapsible:</summary>
+Hiding the details until expanded.
+</details>
+
 <a href="#" rel="bookmark">This is a link with a defined rel attribute, which should be removed</a>
 
 <a href="javascript:alert('Hi')">This is a link trying to be sneaky. It gets its link removed entirely.</a>

spec/lib/banzai/filter/sanitization_filter_spec.rb

@@ -86,6 +86,16 @@ describe Banzai::Filter::SanitizationFilter, lib: true do
       expect(filter(act).to_html).to eq exp
     end
 
+    it 'allows `summary` elements' do
+      exp = act = '<summary>summary line</summary>'
+      expect(filter(act).to_html).to eq exp
+    end
+
+    it 'allows `details` elements' do
+      exp = act = '<details>long text goes here</details>'
+      expect(filter(act).to_html).to eq exp
+    end
+
     it 'removes `rel` attribute from `a` elements' do
       act = %q{<a href="#" rel="nofollow">Link</a>}
       exp = %q{<a href="#">Link</a>}