Add function to transform selected text to markdown and insert it as quote into textarea

app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

@@ -180,6 +180,10 @@ export class CopyAsGFM {
       })
       .catch(() => {});
   }
+
+  static quoted(markdown) {
+    return `> ${markdown.split('\n').join('\n> ')}`;
+  }
 }
 
 // Export CopyAsGFM as a global for rspec to access

app/assets/javascripts/lib/utils/text_markdown.js

@@ -308,9 +308,11 @@ export function addMarkdownListeners(form) {
     .off('click')
     .on('click', function() {
       const $this = $(this);
+      const tag = this.dataset.mdTag;
+
       return updateText({
         textArea: $this.closest('.md-area').find('textarea'),
-        tag: $this.data('mdTag'),
+        tag,
         cursorOffset: $this.data('mdCursorOffset'),
         blockTag: $this.data('mdBlock'),
         wrap: !$this.data('mdPrepend'),

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

 <script>
 import $ from 'jquery';
 import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { getSelectedFragment } from '~/lib/utils/common_utils';
+import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm';
 import ToolbarButton from './toolbar_button.vue';
 import Icon from '../icon.vue';
 
@@ -35,6 +37,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      tag: '> ',
+    };
+  },
   computed: {
     mdTable() {
       return [
@@ -81,6 +88,24 @@ export default {
     handleSuggestDismissed() {
       this.$emit('handleSuggestDismissed');
     },
+    handleQuote() {
+      const documentFragment = getSelectedFragment();
+      const area = this.$parent.$slots.textarea[0].elm;
+
+      if (!documentFragment || !documentFragment.textContent) {
+        this.tag = '> ';
+        return;
+      }
+      this.tag = '';
+
+      const transformed = CopyAsGFM.transformGFMSelection(documentFragment);
+
+      CopyAsGFM.nodeToGFM(transformed)
+        .then(gfm => {
+          CopyAsGFM.insertPastedText(area, documentFragment.textContent, CopyAsGFM.quoted(gfm));
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -108,9 +133,10 @@ export default {
           <toolbar-button tag="*" :button-title="__('Add italic text')" icon="italic" />
           <toolbar-button
             :prepend="true"
-            tag="> "
+            :tag="tag"
             :button-title="__('Insert a quote')"
             icon="quote"
+            @update-tag="handleQuote"
           />
         </div>
         <div class="d-inline-block ml-md-2 ml-0">

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

@@ -65,7 +65,7 @@ export default {
     type="button"
     class="toolbar-btn js-md"
     data-container="body"
-    @click="() => $emit('click')"
+    @click="$emit('update-tag'), () => $emit('click')"
   >
     <icon :name="icon" />
   </button>

spec/frontend/behaviors/copy_as_gfm_spec.js

@@ -123,4 +123,14 @@ describe('CopyAsGFM', () => {
       });
     });
   });
+
+  describe('CopyAsGFM.quoted', () => {
+    const sampleGFM = '* List 1\n* List 2\n\n`Some code`';
+
+    it('adds quote char `> ` to each line', done => {
+      const expectedQuotedGFM = '> * List 1\n> * List 2\n> \n> `Some code`';
+      expect(CopyAsGFM.quoted(sampleGFM)).toEqual(expectedQuotedGFM);
+      done();
+    });
+  });
 });