1 files changed, 17 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5bc1786d692..01cf0beea3a 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
+import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm';
@@ -36,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    suggestionStartIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -53,7 +59,9 @@ export default {
       ].join('\n');
     },
     mdSuggestion() {
-      return ['```suggestion:-0+0', `{text}`, '```'].join('\n');
+      return [['```', `suggestion:-${this.suggestionStartIndex}+0`].join(''), `{text}`, '```'].join(
+        '\n',
+      );
     },
     isMac() {
       // Accessing properties using ?. to allow tests to use
@@ -116,6 +124,11 @@ export default {
         .catch(() => {});
     },
   },
+  shortcuts: {
+    bold: keysFor(BOLD_TEXT),
+    italic: keysFor(ITALIC_TEXT),
+    link: keysFor(LINK_TEXT),
+  },
 };
 </script>
 
@@ -143,7 +156,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
             "
-            shortcuts="mod+b"
+            :shortcuts="$options.shortcuts.bold"
             icon="bold"
           />
           <toolbar-button
@@ -151,7 +164,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
             "
-            shortcuts="mod+i"
+            :shortcuts="$options.shortcuts.italic"
             icon="italic"
           />
           <toolbar-button
@@ -208,7 +221,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
             "
-            shortcuts="mod+k"
+            :shortcuts="$options.shortcuts.link"
             icon="link"
           />
         </div>