Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 4x 224x 363x 2x 2x 1x 2x | <script> import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui'; import EditorStateObserver from './editor_state_observer.vue'; export default { components: { GlButton, EditorStateObserver, }, directives: { GlTooltip, }, inject: ['tiptapEditor'], props: { iconName: { type: String, required: true, }, contentType: { type: String, required: true, }, label: { type: String, required: true, }, editorCommand: { type: String, required: false, default: '', }, editorCommandParams: { type: Object, required: false, default: undefined, }, variant: { type: String, required: false, default: 'default', }, category: { type: String, required: false, default: 'tertiary', }, size: { type: String, required: false, default: 'small', }, showActiveState: { type: Boolean, required: false, default: true, }, }, data() { return { isActive: null, }; }, methods: { updateActive({ editor }) { this.isActive = editor.isActive(this.contentType) && editor.isFocused; }, execute() { const { contentType } = this; if (this.editorCommand) { this.tiptapEditor.chain()[this.editorCommand](this.editorCommandParams).focus().run(); } this.$emit('execute', { contentType }); }, }, }; </script> <template> <editor-state-observer @transaction="updateActive"> <gl-button v-gl-tooltip :variant="variant" :category="category" :size="size" :class="{ 'gl-bg-gray-100!': showActiveState && isActive }" :aria-label="label" :title="label" :icon="iconName" class="gl-mr-2" @click="execute" /> </editor-state-observer> </template> |