Move toolbar button logic to MarkdownField

4 files changed, 67 insertions, 12 deletions

diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index 84a617acb42..f8d6601b361 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -262,7 +262,7 @@ export function insertMarkdownText({
   });
 }
 
-function updateText({ textArea, tag, cursorOffset, blockTag, wrap, select, tagContent }) {
+export function updateText({ textArea, tag, cursorOffset, blockTag, wrap, select, tagContent }) {
   var $textArea, selected, text;
   $textArea = $(textArea);
   textArea = $textArea.get(0);
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 683ed56261b..ffbe78b99bc 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -9,6 +9,7 @@ import markdownHeader from './header.vue';
 import markdownToolbar from './toolbar.vue';
 import icon from '../icon.vue';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
+import { updateText } from '~/lib/utils/text_markdown';
 
 export default {
   components: {
@@ -283,6 +284,18 @@ export default {
       $(this.$refs.markdownPreview).renderGFM();
     },
 
+    toolbarButtonClicked(button) {
+      updateText({
+        textArea: this.$refs.textarea,
+        tag: button.tag,
+        blockTag: button.tagBlock,
+        wrap: !button.prepend,
+        select: button.tagSelect,
+        cursorOffset: button.cursorOffset,
+        tagContent: button.tagContent,
+      });
+    },
+
     triggerEditPrevious() {
       if (!this.currentValue.length) this.$emit('edit-previous');
     },
@@ -316,6 +329,7 @@ export default {
       :can-suggest="canSuggest"
       :mode="mode"
       @mode-changed="setMode"
+      @toolbar-button-clicked="toolbarButtonClicked"
     />
     <div v-show="modeIsMarkdown" class="md-write-holder">
       <div :class="{ 'zen-backdrop': modeIsMarkdown }">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index c250da89337..78d4be5384d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -76,6 +76,10 @@ export default {
 
       this.$emit('mode-changed', 'markdown');
     },
+
+    toolbarButtonClicked(button) {
+      this.$emit('toolbar-button-clicked', button);
+    },
   },
 };
 </script>
@@ -94,47 +98,79 @@ export default {
         </button>
       </li>
       <li :class="{ active: !modeIsPreview }" class="md-header-toolbar">
-        <toolbar-button tag="**" button-title="__('Add bold text')" icon="bold" />
-        <toolbar-button tag="*" button-title="__('Add italic text')" icon="italic" />
         <toolbar-button
+          name="bold"
+          tag="**"
+          button-title="__('Add bold text')"
+          icon="bold"
+          @click="toolbarButtonClicked"
+        />
+        <toolbar-button
+          name="italic"
+          tag="*"
+          button-title="__('Add italic text')"
+          icon="italic"
+          @click="toolbarButtonClicked"
+        />
+        <toolbar-button
+          name="blockquote"
           :prepend="true"
           tag="> "
-          :button-title="__('Insert a quote')"
+          button-title="__('Insert a quote')"
           icon="quote"
+          @click="toolbarButtonClicked"
+        />
+        <toolbar-button
+          name="code"
+          tag="`"
+          tag-block="```"
+          button-title="__('Insert code')"
+          icon="code"
+          @click="toolbarButtonClicked"
         />
-        <toolbar-button tag="`" tag-block="```" button-title="__('Insert code')" icon="code" />
         <toolbar-button
+          name="link"
           tag="[{text}](url)"
           tag-select="url"
           :button-title="__('Add a link')"
           icon="link"
+          @click="toolbarButtonClicked"
         />
         <toolbar-button
+          name="bullet_list"
           :prepend="true"
           tag="* "
           :button-title="__('Add a bullet list')"
           icon="list-bulleted"
+          @click="toolbarButtonClicked"
         />
         <toolbar-button
+          name="ordered_list"
           :prepend="true"
           tag="1. "
           :button-title="__('Add a numbered list')"
           icon="list-numbered"
+          @click="toolbarButtonClicked"
         />
         <toolbar-button
+          name="task_list"
           :prepend="true"
           tag="* [ ] "
           :button-title="__('Add a task list')"
           icon="task-done"
+          @click="toolbarButtonClicked"
         />
         <toolbar-button
+          name="table"
           :tag="mdTable"
           :prepend="true"
           :button-title="__('Add a table')"
           icon="table"
+          @click="toolbarButtonClicked"
         />
         <toolbar-button
           v-if="canSuggest"
+          name="suggestion"
           :tag="mdSuggestion"
           :prepend="true"
           :button-title="__('Insert suggestion')"
@@ -142,6 +178,7 @@ export default {
           :tag-content="lineContent"
           icon="doc-code"
           class="qa-suggestion-btn"
+          @click="toolbarButtonClicked"
         />
         <button
           v-gl-tooltip
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 4572caa907b..0a65aff49d7 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -10,6 +10,10 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    name: {
+      type: String,
+      required: true,
+    },
     buttonTitle: {
       type: String,
       required: true,
@@ -48,24 +52,24 @@ export default {
       default: 0,
     },
   },
+  methods: {
+    clicked() {
+      this.$emit('click', this);
+    },
+  },
 };
 </script>
 
 <template>
   <button
     v-gl-tooltip
-    :data-md-tag="tag"
-    :data-md-cursor-offset="cursorOffset"
-    :data-md-select="tagSelect"
-    :data-md-block="tagBlock"
-    :data-md-tag-content="tagContent"
-    :data-md-prepend="prepend"
     :title="buttonTitle"
     :aria-label="buttonTitle"
     type="button"
-    class="toolbar-btn js-md"
+    class="toolbar-btn"
     tabindex="-1"
     data-container="body"
+    @click="clicked"
   >
     <icon :name="icon" />
   </button>