1 files changed, 24 insertions, 4 deletions
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 f37dd9e171c..6c35741e7e5 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,10 +1,9 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '../icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -47,6 +46,26 @@ export default {
       required: false,
       default: 0,
     },
+
+    /**
+     * A string (or an array of strings) of
+     * [mousetrap](https://craig.is/killing/mice) keyboard shortcuts
+     * that should be attached to this button. For example:
+     * "command+k"
+     * ...or...
+     * ["command+k", "ctrl+k"]
+     */
+    shortcuts: {
+      type: [String, Array],
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    shortcutsString() {
+      const shortcutArray = Array.isArray(this.shortcuts) ? this.shortcuts : [this.shortcuts];
+      return JSON.stringify(shortcutArray);
+    },
   },
 };
 </script>
@@ -60,6 +79,7 @@ export default {
     :data-md-block="tagBlock"
     :data-md-tag-content="tagContent"
     :data-md-prepend="prepend"
+    :data-md-shortcuts="shortcutsString"
     :title="buttonTitle"
     :aria-label="buttonTitle"
     type="button"
@@ -67,6 +87,6 @@ export default {
     data-container="body"
     @click="() => $emit('click')"
   >
-    <icon :name="icon" />
+    <gl-icon :name="icon" />
   </button>
 </template>