diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue | 60 |
1 files changed, 33 insertions, 27 deletions
diff --git a/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue b/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue index 473fc472c1b..13728d4001d 100644 --- a/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue +++ b/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue @@ -1,29 +1,25 @@ <script> import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui'; -import { Editor as TiptapEditor } from '@tiptap/vue-2'; import { __ } from '~/locale'; import { TEXT_STYLE_DROPDOWN_ITEMS } from '../constants'; +import EditorStateObserver from './editor_state_observer.vue'; export default { components: { GlDropdown, GlDropdownItem, + EditorStateObserver, }, directives: { GlTooltip, }, - props: { - tiptapEditor: { - type: TiptapEditor, - required: true, - }, + inject: ['tiptapEditor'], + data() { + return { + activeItem: null, + }; }, computed: { - activeItem() { - return TEXT_STYLE_DROPDOWN_ITEMS.find((item) => - this.tiptapEditor.isActive(item.contentType, item.commandParams), - ); - }, activeItemLabel() { const { activeItem } = this; @@ -31,6 +27,11 @@ export default { }, }, methods: { + updateActiveItem({ editor }) { + this.activeItem = TEXT_STYLE_DROPDOWN_ITEMS.find((item) => + editor.isActive(item.contentType, item.commandParams), + ); + }, execute(item) { const { editorCommand, contentType, commandParams } = item; const value = commandParams?.level; @@ -38,8 +39,8 @@ export default { if (editorCommand) { this.tiptapEditor .chain() - .focus() [editorCommand](commandParams || {}) + .focus() .run(); } @@ -56,20 +57,25 @@ export default { }; </script> <template> - <gl-dropdown - v-gl-tooltip="$options.i18n.placeholder" - size="small" - :disabled="!activeItem" - :text="activeItemLabel" - > - <gl-dropdown-item - v-for="(item, index) in $options.items" - :key="index" - is-check-item - :is-checked="isActive(item)" - @click="execute(item)" + <editor-state-observer @transaction="updateActiveItem"> + <gl-dropdown + v-gl-tooltip="$options.i18n.placeholder" + size="small" + data-qa-selector="text_style_dropdown" + :disabled="!activeItem" + :text="activeItemLabel" > - {{ item.label }} - </gl-dropdown-item> - </gl-dropdown> + <gl-dropdown-item + v-for="(item, index) in $options.items" + :key="index" + is-check-item + :is-checked="isActive(item)" + data-qa-selector="text_style_menu_item" + :data-qa-text-style="item.label" + @click="execute(item)" + > + {{ item.label }} + </gl-dropdown-item> + </gl-dropdown> + </editor-state-observer> </template> |