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