1 files changed, 38 insertions, 20 deletions

diff --git a/app/assets/javascripts/content_editor/components/toolbar_button.vue b/app/assets/javascripts/content_editor/components/toolbar_button.vue
index 0af12812f3b..cdb877152d4 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_button.vue
@@ -1,23 +1,21 @@
 <script>
 import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
-import { Editor as TiptapEditor } from '@tiptap/vue-2';
+import EditorStateObserver from './editor_state_observer.vue';
 
 export default {
   components: {
     GlButton,
+    EditorStateObserver,
   },
   directives: {
     GlTooltip,
   },
+  inject: ['tiptapEditor'],
   props: {
     iconName: {
       type: String,
       required: true,
     },
-    tiptapEditor: {
-      type: TiptapEditor,
-      required: true,
-    },
     contentType: {
       type: String,
       required: true,
@@ -31,13 +29,31 @@ export default {
       required: false,
       default: '',
     },
-  },
-  computed: {
-    isActive() {
-      return this.tiptapEditor.isActive(this.contentType) && this.tiptapEditor.isFocused;
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
     },
+    category: {
+      type: String,
+      required: false,
+      default: 'tertiary',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'small',
+    },
+  },
+  data() {
+    return {
+      isActive: null,
+    };
   },
   methods: {
+    updateActive({ editor }) {
+      this.isActive = editor.isActive(this.contentType) && editor.isFocused;
+    },
     execute() {
       const { contentType } = this;
 
@@ -51,15 +67,17 @@ export default {
 };
 </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"
-  />
+  <editor-state-observer @transaction="updateActive">
+    <gl-button
+      v-gl-tooltip
+      :variant="variant"
+      :category="category"
+      :size="size"
+      :class="{ active: isActive }"
+      :aria-label="label"
+      :title="label"
+      :icon="iconName"
+      @click="execute"
+    />
+  </editor-state-observer>
 </template>