1 files changed, 15 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js
index 8ff14220eab..0b0867ae84c 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js
+++ b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js
@@ -1,6 +1,9 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createApolloClient from '~/lib/graphql';
 import { queryToObject, objectToQuery } from '~/lib/utils/url_utility';
 import { parseBoolean } from '~/lib/utils/common_utils';
+
 import { CLEAR_AUTOSAVE_ENTRY_EVENT } from '../../constants';
 import MarkdownEditor from './markdown_editor.vue';
 import eventHub from './eventhub';
@@ -51,8 +54,13 @@ function mountAutosaveClearOnSubmit(autosaveKey) {
   }
 }
 
-export function mountMarkdownEditor() {
+export function mountMarkdownEditor(options = {}) {
   const el = document.querySelector('.js-markdown-editor');
+  const componentConfiguration = {
+    provide: {
+      ...options.provide,
+    },
+  };
 
   if (!el) {
     return null;
@@ -71,6 +79,7 @@ export function mountMarkdownEditor() {
   const supportsQuickActions = parseBoolean(el.dataset.supportsQuickActions ?? true);
   const enableAutocomplete = parseBoolean(el.dataset.enableAutocomplete ?? true);
   const disableAttachments = parseBoolean(el.dataset.disableAttachments ?? false);
+  const autofocus = parseBoolean(el.dataset.autofocus ?? true);
   const hiddenInput = el.querySelector('input[type="hidden"]');
   const formFieldName = hiddenInput.getAttribute('name');
   const formFieldId = hiddenInput.getAttribute('id');
@@ -86,6 +95,9 @@ export function mountMarkdownEditor() {
   const setFacade = (props) => Object.assign(facade, props);
   const autosaveKey = `autosave/${document.location.pathname}/${searchTerm}/description`;
 
+  componentConfiguration.apolloProvider =
+    options.apolloProvider || new VueApollo({ defaultClient: createApolloClient() });
+
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -110,10 +122,11 @@ export function mountMarkdownEditor() {
           autocompleteDataSources: gl.GfmAutoComplete?.dataSources,
           supportsQuickActions,
           disableAttachments,
-          autofocus: true,
+          autofocus,
         },
       });
     },
+    ...componentConfiguration,
   });
 
   mountAutosaveClearOnSubmit(autosaveKey);