Merge branch 'dm-copy-suggestion-as-gfm' into 'master'

Allow suggestions to be copied and pasted as GFM

See merge request gitlab-org/gitlab-ce!24600

app/assets/javascripts/behaviors/markdown/nodes/code_block.js

@@ -8,6 +8,7 @@ const PLAINTEXT_LANG = 'plaintext';
 // - Banzai::Filter::SyntaxHighlightFilter
 // - Banzai::Filter::MathFilter
 // - Banzai::Filter::MermaidFilter
+// - Banzai::Filter::SuggestionFilter
 export default class CodeBlock extends BaseCodeBlock {
   get schema() {
     return {
@@ -20,7 +21,7 @@ export default class CodeBlock extends BaseCodeBlock {
         lang: { default: PLAINTEXT_LANG },
       },
       parseDOM: [
-        // Matches HTML generated by Banzai::Filter::SyntaxHighlightFilter, Banzai::Filter::MathFilter or Banzai::Filter::MermaidFilter
+        // Matches HTML generated by Banzai::Filter::SyntaxHighlightFilter, Banzai::Filter::MathFilter, Banzai::Filter::MermaidFilter, or Banzai::Filter::SuggestionFilter
         {
           tag: 'pre.code.highlight',
           preserveWhitespace: 'full',
@@ -39,7 +40,7 @@ export default class CodeBlock extends BaseCodeBlock {
           contentElement: 'annotation[encoding="application/x-tex"]',
           attrs: { lang: 'math' },
         },
-        // Matches HTML generated by Banzai::Filter::MathFilter,
+        // Matches HTML generated by Banzai::Filter::MermaidFilter,
         // after being transformed by app/assets/javascripts/behaviors/markdown/render_mermaid.js
         {
           tag: 'svg.mermaid',
@@ -47,6 +48,25 @@ export default class CodeBlock extends BaseCodeBlock {
           contentElement: 'text.source',
           attrs: { lang: 'mermaid' },
         },
+        // Matches HTML generated by Banzai::Filter::SuggestionFilter,
+        // after being transformed by app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+        {
+          tag: '.md-suggestion',
+          skip: true,
+        },
+        {
+          tag: '.md-suggestion-header',
+          ignore: true,
+        },
+        {
+          tag: '.md-suggestion-diff',
+          preserveWhitespace: 'full',
+          getContent: (el, schema) =>
+            [...el.querySelectorAll('.line_content.new span')].map(span =>
+              schema.text(span.innerText),
+            ),
+          attrs: { lang: 'suggestion' },
+        },
       ],
       toDOM: node => ['pre', { class: 'code highlight', lang: node.attrs.lang }, ['code', 0]],
     };

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="md-suggestion">
     <suggestion-diff-header
       class="qa-suggestion-diff-header"
       :can-apply="suggestion.appliable && suggestion.current_user.can_apply && !disabled"

app/assets/javascripts/vue_shared/components/markdown/suggestions.vue

@@ -130,6 +130,6 @@ export default {
 <template>
   <div>
     <div class="flash-container js-suggestions-flash"></div>
-    <div v-show="isRendered" ref="container" v-html="noteHtml"></div>
+    <div v-show="isRendered" ref="container" class="note-text md" v-html="noteHtml"></div>
   </div>
 </template>

app/assets/stylesheets/framework/markdown_area.scss

@@ -280,6 +280,8 @@
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;
+  width: 100% !important;
+  font-family: $monospace-font !important;
 }
 
 .md-suggestion-header {

changelogs/unreleased/dm-copy-suggestion-as-gfm.yml

+---
+title: Allow suggestions to be copied and pasted as GFM
+merge_request:
+author:
+type: fixed

lib/banzai/filter/suggestion_filter.rb

 # frozen_string_literal: true
 
+# Generated HTML is transformed back to GFM by app/assets/javascripts/behaviors/markdown/nodes/code_block.js
 module Banzai
   module Filter
     class SuggestionFilter < HTML::Pipeline::Filter

spec/features/markdown/copy_as_gfm_spec.rb

@@ -402,6 +402,68 @@ describe 'Copy as GFM', :js do
         expect(output_gfm.strip).to eq(gfm.strip)
       end
 
+      verify(
+        'SuggestionFilter: suggestion as converted from GFM to HTML',
+
+        <<~GFM
+          ```suggestion
+          New
+            And newer
+          ```
+        GFM
+      )
+
+      aggregate_failures('SuggestionFilter: suggestion as transformed from HTML to Vue component') do
+        gfm = <<~GFM
+          ```suggestion
+          New
+            And newer
+          ```
+        GFM
+
+        html = <<~HTML
+          <div class="md-suggestion">
+            <div class="md-suggestion-header border-bottom-0 mt-2 qa-suggestion-diff-header">
+              <div class="qa-suggestion-diff-header font-weight-bold">
+                Suggested change
+                <a href="/gitlab/help/user/discussions/index.md#suggest-changes" aria-label="Help" class="js-help-btn">
+                  <svg aria-hidden="true" class="s16 ic-question-o link-highlight">
+                    <use xlink:href="/gitlab/assets/icons.svg#question-o"></use>
+                  </svg>
+                </a>
+              </div>
+              <!---->
+              <button type="button" class="btn qa-apply-btn">Apply suggestion</button>
+            </div>
+            <table class="mb-3 md-suggestion-diff js-syntax-highlight code white">
+              <tbody>
+                <tr class="line_holder old">
+                  <td class="diff-line-num old_line qa-old-diff-line-number old">9</td>
+                  <td class="diff-line-num new_line old"></td>
+                  <td class="line_content old"><span>Old
+          </span></td>
+                </tr>
+                <tr class="line_holder new">
+                  <td class="diff-line-num old_line new"></td>
+                  <td class="diff-line-num new_line qa-new-diff-line-number new">9</td>
+                  <td class="line_content new"><span>New
+          </span></td>
+                </tr>
+                <tr class="line_holder new">
+                  <td class="diff-line-num old_line new"></td>
+                  <td class="diff-line-num new_line qa-new-diff-line-number new">10</td>
+                  <td class="line_content new"><span>  And newer
+          </span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        HTML
+
+        output_gfm = html_to_gfm(html)
+        expect(output_gfm.strip).to eq(gfm.strip)
+      end
+
       verify(
         'SanitizationFilter',