1 files changed, 110 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/components/toolbar_image_button.vue b/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
new file mode 100644
index 00000000000..ebeee16dbec
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
@@ -0,0 +1,110 @@
+<script>
+import {
+  GlDropdown,
+  GlDropdownForm,
+  GlButton,
+  GlFormInputGroup,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
+import { Editor as TiptapEditor } from '@tiptap/vue-2';
+import { acceptedMimes } from '../extensions/image';
+import { getImageAlt } from '../services/utils';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownForm,
+    GlFormInputGroup,
+    GlDropdownDivider,
+    GlDropdownItem,
+    GlButton,
+  },
+  directives: {
+    GlTooltip,
+  },
+  props: {
+    tiptapEditor: {
+      type: TiptapEditor,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      imgSrc: '',
+    };
+  },
+  methods: {
+    resetFields() {
+      this.imgSrc = '';
+      this.$refs.fileSelector.value = '';
+    },
+    insertImage() {
+      this.tiptapEditor
+        .chain()
+        .focus()
+        .setImage({
+          src: this.imgSrc,
+          canonicalSrc: this.imgSrc,
+          alt: getImageAlt(this.imgSrc),
+        })
+        .run();
+
+      this.resetFields();
+      this.emitExecute();
+    },
+    emitExecute(source = 'url') {
+      this.$emit('execute', { contentType: 'image', value: source });
+    },
+    openFileUpload() {
+      this.$refs.fileSelector.click();
+    },
+    onFileSelect(e) {
+      this.tiptapEditor
+        .chain()
+        .focus()
+        .uploadImage({
+          file: e.target.files[0],
+        })
+        .run();
+
+      this.resetFields();
+      this.emitExecute('upload');
+    },
+  },
+  acceptedMimes,
+};
+</script>
+<template>
+  <gl-dropdown
+    v-gl-tooltip
+    :aria-label="__('Insert image')"
+    :title="__('Insert image')"
+    size="small"
+    category="tertiary"
+    icon="media"
+    @hidden="resetFields()"
+  >
+    <gl-dropdown-form class="gl-px-3!">
+      <gl-form-input-group v-model="imgSrc" :placeholder="__('Image URL')">
+        <template #append>
+          <gl-button variant="confirm" @click="insertImage">{{ __('Insert') }}</gl-button>
+        </template>
+      </gl-form-input-group>
+    </gl-dropdown-form>
+    <gl-dropdown-divider />
+    <gl-dropdown-item @click="openFileUpload">
+      {{ __('Upload image') }}
+    </gl-dropdown-item>
+
+    <input
+      ref="fileSelector"
+      type="file"
+      name="content_editor_image"
+      :accept="$options.acceptedMimes"
+      class="gl-display-none"
+      @change="onFileSelect"
+    />
+  </gl-dropdown>
+</template>