1 files changed, 36 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 049f5e71849..7e6edcfbd25 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,8 @@
 <script>
 import $ from 'jquery';
-import { GlPopover, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+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';
 
@@ -9,7 +11,7 @@ export default {
     ToolbarButton,
     Icon,
     GlPopover,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -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();
+
+      if (!documentFragment || !documentFragment.textContent) {
+        this.tag = '> ';
+        return;
+      }
+      this.tag = '';
+
+      const transformed = CopyAsGFM.transformGFMSelection(documentFragment);
+      const area = this.$el.parentNode.querySelector('textarea');
+
+      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"
+            @click="handleQuote"
           />
         </div>
         <div class="d-inline-block ml-md-2 ml-0">
@@ -141,9 +167,14 @@ export default {
                   )
                 }}
               </p>
-              <gl-deprecated-button variant="primary" size="sm" @click="handleSuggestDismissed">
+              <gl-button
+                variant="info"
+                category="primary"
+                size="sm"
+                @click="handleSuggestDismissed"
+              >
                 {{ __('Got it') }}
-              </gl-deprecated-button>
+              </gl-button>
             </gl-popover>
           </template>
           <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />