diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components/toolbar_button.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/toolbar_button.vue | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/components/toolbar_button.vue b/app/assets/javascripts/content_editor/components/toolbar_button.vue new file mode 100644 index 00000000000..0af12812f3b --- /dev/null +++ b/app/assets/javascripts/content_editor/components/toolbar_button.vue @@ -0,0 +1,65 @@ +<script> +import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui'; +import { Editor as TiptapEditor } from '@tiptap/vue-2'; + +export default { + components: { + GlButton, + }, + directives: { + GlTooltip, + }, + props: { + iconName: { + type: String, + required: true, + }, + tiptapEditor: { + type: TiptapEditor, + required: true, + }, + contentType: { + type: String, + required: true, + }, + label: { + type: String, + required: true, + }, + editorCommand: { + type: String, + required: false, + default: '', + }, + }, + computed: { + isActive() { + return this.tiptapEditor.isActive(this.contentType) && this.tiptapEditor.isFocused; + }, + }, + methods: { + execute() { + const { contentType } = this; + + if (this.editorCommand) { + this.tiptapEditor.chain()[this.editorCommand]().focus().run(); + } + + this.$emit('execute', { contentType }); + }, + }, +}; +</script> +<template> + <gl-button + v-gl-tooltip + category="tertiary" + size="small" + class="gl-mx-2" + :class="{ active: isActive }" + :aria-label="label" + :title="label" + :icon="iconName" + @click="execute" + /> +</template> |