diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown/header.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown/header.vue | 41 |
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" /> |