1 files changed, 66 insertions, 44 deletions

diff --git a/app/assets/javascripts/content_editor/components/toolbar_link_button.vue b/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
index 8f57959a73f..ff525e52873 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
@@ -8,10 +8,9 @@ import {
   GlDropdownItem,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import { Editor as TiptapEditor } from '@tiptap/vue-2';
+import Link from '../extensions/link';
 import { hasSelection } from '../services/utils';
-
-export const linkContentType = 'link';
+import EditorStateObserver from './editor_state_observer.vue';
 
 export default {
   components: {
@@ -21,34 +20,32 @@ export default {
     GlDropdownDivider,
     GlDropdownItem,
     GlButton,
+    EditorStateObserver,
   },
   directives: {
     GlTooltip,
   },
-  props: {
-    tiptapEditor: {
-      type: TiptapEditor,
-      required: true,
-    },
-  },
+  inject: ['tiptapEditor'],
   data() {
     return {
       linkHref: '',
+      isActive: false,
     };
   },
-  computed: {
-    isActive() {
-      return this.tiptapEditor.isActive(linkContentType);
+  methods: {
+    resetFields() {
+      this.imgSrc = '';
+      this.$refs.fileSelector.value = '';
     },
-  },
-  mounted() {
-    this.tiptapEditor.on('selectionUpdate', ({ editor }) => {
-      const { canonicalSrc, href } = editor.getAttributes(linkContentType);
+    openFileUpload() {
+      this.$refs.fileSelector.click();
+    },
+    updateLinkState({ editor }) {
+      const { canonicalSrc, href } = editor.getAttributes(Link.name);
 
+      this.isActive = editor.isActive(Link.name);
       this.linkHref = canonicalSrc || href;
-    });
-  },
-  methods: {
+    },
     updateLink() {
       this.tiptapEditor
         .chain()
@@ -60,45 +57,70 @@ export default {
         })
         .run();
 
-      this.$emit('execute', { contentType: linkContentType });
+      this.$emit('execute', { contentType: Link.name });
     },
     selectLink() {
       const { tiptapEditor } = this;
 
       // a selection has already been made by the user, so do nothing
       if (!hasSelection(tiptapEditor)) {
-        tiptapEditor.chain().focus().extendMarkRange(linkContentType).run();
+        tiptapEditor.chain().focus().extendMarkRange(Link.name).run();
       }
     },
     removeLink() {
       this.tiptapEditor.chain().focus().unsetLink().run();
 
-      this.$emit('execute', { contentType: linkContentType });
+      this.$emit('execute', { contentType: Link.name });
+    },
+    onFileSelect(e) {
+      this.tiptapEditor
+        .chain()
+        .focus()
+        .uploadAttachment({
+          file: e.target.files[0],
+        })
+        .run();
+
+      this.resetFields();
+      this.$emit('execute', { contentType: Link.name });
     },
   },
 };
 </script>
 <template>
-  <gl-dropdown
-    v-gl-tooltip
-    :aria-label="__('Insert link')"
-    :title="__('Insert link')"
-    :toggle-class="{ active: isActive }"
-    size="small"
-    category="tertiary"
-    icon="link"
-    @show="selectLink()"
-  >
-    <gl-dropdown-form class="gl-px-3!">
-      <gl-form-input-group v-model="linkHref" :placeholder="__('Link URL')">
-        <template #append>
-          <gl-button variant="confirm" @click="updateLink()">{{ __('Apply') }}</gl-button>
-        </template>
-      </gl-form-input-group>
-    </gl-dropdown-form>
-    <gl-dropdown-divider v-if="isActive" />
-    <gl-dropdown-item v-if="isActive" @click="removeLink()">
-      {{ __('Remove link') }}
-    </gl-dropdown-item>
-  </gl-dropdown>
+  <editor-state-observer @transaction="updateLinkState">
+    <gl-dropdown
+      v-gl-tooltip
+      :aria-label="__('Insert link')"
+      :title="__('Insert link')"
+      :toggle-class="{ active: isActive }"
+      size="small"
+      category="tertiary"
+      icon="link"
+      @show="selectLink()"
+    >
+      <gl-dropdown-form class="gl-px-3!">
+        <gl-form-input-group v-model="linkHref" :placeholder="__('Link URL')">
+          <template #append>
+            <gl-button variant="confirm" @click="updateLink">{{ __('Apply') }}</gl-button>
+          </template>
+        </gl-form-input-group>
+      </gl-dropdown-form>
+      <gl-dropdown-divider />
+      <gl-dropdown-item v-if="isActive" @click="removeLink">
+        {{ __('Remove link') }}
+      </gl-dropdown-item>
+      <gl-dropdown-item v-else @click="openFileUpload">
+        {{ __('Upload file') }}
+      </gl-dropdown-item>
+
+      <input
+        ref="fileSelector"
+        type="file"
+        name="content_editor_attachment"
+        class="gl-display-none"
+        @change="onFileSelect"
+      />
+    </gl-dropdown>
+  </editor-state-observer>
 </template>