Merge branch 'modulify-and-tech-debt-gfm-auto-complete' into 'master'

Make `gfm_auto_complete` into a module and fix up tech debt

See merge request !11065

10 files changed, 270 insertions, 251 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 22d01c484d3..283a4fd4912 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -53,6 +53,7 @@ import BlobViewer from './blob/viewer/index';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
+import GfmAutoComplete from './gfm_auto_complete';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -79,6 +80,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
       path = page.split(':');
       shortcut_handler = null;
 
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+
       function initBlob() {
         new LineHighlighter();
 
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index f1b99023c72..b8a923cf619 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -1,119 +1,33 @@
-/* eslint-disable func-names, space-before-function-paren, no-template-curly-in-string, comma-dangle, object-shorthand, quotes, dot-notation, no-else-return, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-param-reassign, no-useless-escape, prefer-template, consistent-return, wrap-iife, prefer-arrow-callback, camelcase, no-unused-vars, no-useless-return, vars-on-top, max-len */
-
 import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';
 import { glEmojiTag } from '~/behaviors/gl_emoji';
 import glRegexp from '~/lib/utils/regexp';
 
-// Creates the variables for setting up GFM auto-completion
-window.gl = window.gl || {};
-
 function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
 }
 
-window.gl.GfmAutoComplete = {
-  dataSources: {},
-  defaultLoadingData: ['loading'],
-  cachedData: {},
-  isLoadingData: {},
-  atTypeMap: {
-    ':': 'emojis',
-    '@': 'members',
-    '#': 'issues',
-    '!': 'mergeRequests',
-    '~': 'labels',
-    '%': 'milestones',
-    '/': 'commands'
-  },
-  // Emoji
-  Emoji: {
-    templateFunction: function(name) {
-      return `<li>
-        ${name} ${glEmojiTag(name)}
-      </li>
-      `;
-    }
-  },
-  // Team Members
-  Members: {
-    template: '<li>${avatarTag} ${username} <small>${title}</small></li>'
-  },
-  Labels: {
-    template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
-  },
-  // Issues and MergeRequests
-  Issues: {
-    template: '<li><small>${id}</small> ${title}</li>'
-  },
-  // Milestones
-  Milestones: {
-    template: '<li>${title}</li>'
-  },
-  Loading: {
-    template: '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>'
-  },
-  DefaultOptions: {
-    sorter: function(query, items, searchKey) {
-      this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
-      if (gl.GfmAutoComplete.isLoading(items)) {
-        this.setting.highlightFirst = false;
-        return items;
-      }
-      return $.fn.atwho["default"].callbacks.sorter(query, items, searchKey);
-    },
-    filter: function(query, data, searchKey) {
-      if (gl.GfmAutoComplete.isLoading(data)) {
-        gl.GfmAutoComplete.fetchData(this.$inputor, this.at);
-        return data;
-      } else {
-        return $.fn.atwho["default"].callbacks.filter(query, data, searchKey);
-      }
-    },
-    beforeInsert: function(value) {
-      if (value && !this.setting.skipSpecialCharacterTest) {
-        var withoutAt = value.substring(1);
-        if (withoutAt && /[^\w\d]/.test(withoutAt)) value = value.charAt() + '"' + withoutAt + '"';
-      }
-      return value;
-    },
-    matcher: function (flag, subtext) {
-      // The below is taken from At.js source
-      // Tweaked to commands to start without a space only if char before is a non-word character
-      // https://github.com/ichord/At.js
-      var _a, _y, regexp, match, atSymbolsWithBar, atSymbolsWithoutBar;
-      atSymbolsWithBar = Object.keys(this.app.controllers).join('|');
-      atSymbolsWithoutBar = Object.keys(this.app.controllers).join('');
-      subtext = subtext.split(/\s+/g).pop();
-      flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-
-      _a = decodeURI("%C3%80");
-      _y = decodeURI("%C3%BF");
-
-      regexp = new RegExp("^(?:\\B|[^a-zA-Z0-9_" + atSymbolsWithoutBar + "]|\\s)" + flag + "(?!" + atSymbolsWithBar + ")((?:[A-Za-z" + _a + "-" + _y + "0-9_\'\.\+\-]|[^\\x00-\\x7a])*)$", 'gi');
-
-      match = regexp.exec(subtext);
+class GfmAutoComplete {
+  constructor(dataSources) {
+    this.dataSources = dataSources || {};
+    this.cachedData = {};
+    this.isLoadingData = {};
+  }
 
-      if (match) {
-        return match[1];
-      } else {
-        return null;
-      }
-    }
-  },
-  setup: function(input, enableMap = {
+  setup(input, enableMap = {
     emojis: true,
     members: true,
     issues: true,
     milestones: true,
     mergeRequests: true,
-    labels: true
+    labels: true,
   }) {
     // Add GFM auto-completion to all input fields, that accept GFM input.
     this.input = input || $('.js-gfm-input');
     this.enableMap = enableMap;
     this.setupLifecycle();
-  },
+  }
+
   setupLifecycle() {
     this.input.each((i, input) => {
       const $input = $(input);
@@ -122,9 +36,9 @@ window.gl.GfmAutoComplete = {
       // Needed for slash commands with suffixes (ex: /label ~)
       $input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
     });
-  },
+  }
 
-  setupAtWho: function($input) {
+  setupAtWho($input) {
     if (this.enableMap.emojis) this.setupEmoji($input);
     if (this.enableMap.members) this.setupMembers($input);
     if (this.enableMap.issues) this.setupIssues($input);
@@ -138,10 +52,11 @@ window.gl.GfmAutoComplete = {
       alias: 'commands',
       searchKey: 'search',
       skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
-      displayTpl: function(value) {
-        if (this.isLoading(value)) return this.Loading.template;
-        var tpl = '<li>/${name}';
+      data: GfmAutoComplete.defaultLoadingData,
+      displayTpl(value) {
+        if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
+        // eslint-disable-next-line no-template-curly-in-string
+        let tpl = '<li>/${name}';
         if (value.aliases.length > 0) {
           tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
         }
@@ -153,105 +68,106 @@ window.gl.GfmAutoComplete = {
         }
         tpl += '</li>';
         return _.template(tpl)(value);
-      }.bind(this),
-      insertTpl: function(value) {
-        var tpl = "/${name} ";
-        var reference_prefix = null;
+      },
+      insertTpl(value) {
+        // eslint-disable-next-line no-template-curly-in-string
+        let tpl = '/${name} ';
+        let referencePrefix = null;
         if (value.params.length > 0) {
-          reference_prefix = value.params[0][0];
-          if (/^[@%~]/.test(reference_prefix)) {
-            tpl += '<%- reference_prefix %>';
+          referencePrefix = value.params[0][0];
+          if (/^[@%~]/.test(referencePrefix)) {
+            tpl += '<%- referencePrefix %>';
           }
         }
-        return _.template(tpl)({ reference_prefix: reference_prefix });
+        return _.template(tpl)({ referencePrefix });
       },
       suffix: '',
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        beforeSave: function(commands) {
-          if (gl.GfmAutoComplete.isLoading(commands)) return commands;
-          return $.map(commands, function(c) {
-            var search = c.name;
+        ...this.getDefaultCallbacks(),
+        beforeSave(commands) {
+          if (GfmAutoComplete.isLoading(commands)) return commands;
+          return $.map(commands, (c) => {
+            let search = c.name;
             if (c.aliases.length > 0) {
-              search = search + " " + c.aliases.join(" ");
+              search = `${search} ${c.aliases.join(' ')}`;
             }
             return {
               name: c.name,
               aliases: c.aliases,
               params: c.params,
               description: c.description,
-              search: search
+              search,
             };
           });
         },
-        matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
-          var regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
-          var match = regexp.exec(subtext);
+        matcher(flag, subtext) {
+          const regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
+          const match = regexp.exec(subtext);
           if (match) {
             return match[1];
-          } else {
-            return null;
           }
-        }
-      }
+          return null;
+        },
+      },
     });
-    return;
-  },
+  }
 
   setupEmoji($input) {
     // Emoji
     $input.atwho({
       at: ':',
-      displayTpl: function(value) {
-        return value && value.name ? this.Emoji.templateFunction(value.name) : this.Loading.template;
-      }.bind(this),
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value && value.name) {
+          tmpl = GfmAutoComplete.Emoji.templateFunction(value.name);
+        }
+        return tmpl;
+      },
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: ':${name}:',
       skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
+      data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        filter: this.DefaultOptions.filter,
-
-        matcher: (flag, subtext) => {
+        ...this.getDefaultCallbacks(),
+        matcher(flag, subtext) {
           const relevantText = subtext.trim().split(/\s/).pop();
           const regexp = new RegExp(`(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^:]*)$`, 'gi');
           const match = regexp.exec(relevantText);
 
           return match && match.length ? match[1] : null;
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupMembers($input) {
     // Team Members
     $input.atwho({
       at: '@',
-      displayTpl: function(value) {
-        return value.username != null ? this.Members.template : this.Loading.template;
-      }.bind(this),
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.username != null) {
+          tmpl = GfmAutoComplete.Members.template;
+        }
+        return tmpl;
+      },
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${username}',
       searchKey: 'search',
       alwaysHighlightFirst: true,
       skipSpecialCharacterTest: true,
-      data: this.defaultLoadingData,
+      data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        matcher: this.DefaultOptions.matcher,
-        beforeSave: function(members) {
-          return $.map(members, function(m) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(members) {
+          return $.map(members, (m) => {
             let title = '';
             if (m.username == null) {
               return m;
             }
             title = m.name;
             if (m.count) {
-              title += " (" + m.count + ")";
+              title += ` (${m.count})`;
             }
 
             const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
@@ -262,173 +178,271 @@ window.gl.GfmAutoComplete = {
               username: m.username,
               avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
               title: sanitize(title),
-              search: sanitize(m.username + " " + m.name)
+              search: sanitize(`${m.username} ${m.name}`),
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupIssues($input) {
     $input.atwho({
       at: '#',
       alias: 'issues',
       searchKey: 'search',
-      displayTpl: function(value) {
-        return value.title != null ? this.Issues.template : this.Loading.template;
-      }.bind(this),
-      data: this.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${id}',
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        matcher: this.DefaultOptions.matcher,
-        beforeSave: function(issues) {
-          return $.map(issues, function(i) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(issues) {
+          return $.map(issues, (i) => {
             if (i.title == null) {
               return i;
             }
             return {
               id: i.iid,
               title: sanitize(i.title),
-              search: i.iid + " " + i.title
+              search: `${i.iid} ${i.title}`,
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupMilestones($input) {
     $input.atwho({
       at: '%',
       alias: 'milestones',
       searchKey: 'search',
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${title}',
-      displayTpl: function(value) {
-        return value.title != null ? this.Milestones.template : this.Loading.template;
-      }.bind(this),
-      data: this.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Milestones.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        matcher: this.DefaultOptions.matcher,
-        sorter: this.DefaultOptions.sorter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        filter: this.DefaultOptions.filter,
-        beforeSave: function(milestones) {
-          return $.map(milestones, function(m) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(milestones) {
+          return $.map(milestones, (m) => {
             if (m.title == null) {
               return m;
             }
             return {
               id: m.iid,
               title: sanitize(m.title),
-              search: "" + m.title
+              search: m.title,
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupMergeRequests($input) {
     $input.atwho({
       at: '!',
       alias: 'mergerequests',
       searchKey: 'search',
-      displayTpl: function(value) {
-        return value.title != null ? this.Issues.template : this.Loading.template;
-      }.bind(this),
-      data: this.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${id}',
       callbacks: {
-        sorter: this.DefaultOptions.sorter,
-        filter: this.DefaultOptions.filter,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        matcher: this.DefaultOptions.matcher,
-        beforeSave: function(merges) {
-          return $.map(merges, function(m) {
+        ...this.getDefaultCallbacks(),
+        beforeSave(merges) {
+          return $.map(merges, (m) => {
             if (m.title == null) {
               return m;
             }
             return {
               id: m.iid,
               title: sanitize(m.title),
-              search: m.iid + " " + m.title
+              search: `${m.iid} ${m.title}`,
             };
           });
-        }
-      }
+        },
+      },
     });
-  },
+  }
 
   setupLabels($input) {
     $input.atwho({
       at: '~',
       alias: 'labels',
       searchKey: 'search',
-      data: this.defaultLoadingData,
-      displayTpl: function(value) {
-        return this.isLoading(value) ? this.Loading.template : this.Labels.template;
-      }.bind(this),
+      data: GfmAutoComplete.defaultLoadingData,
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Labels.template;
+        if (GfmAutoComplete.isLoading(value)) {
+          tmpl = GfmAutoComplete.Loading.template;
+        }
+        return tmpl;
+      },
+      // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${title}',
       callbacks: {
-        matcher: this.DefaultOptions.matcher,
-        beforeInsert: this.DefaultOptions.beforeInsert,
-        filter: this.DefaultOptions.filter,
-        sorter: this.DefaultOptions.sorter,
-        beforeSave: function(merges) {
-          if (gl.GfmAutoComplete.isLoading(merges)) return merges;
-          var sanitizeLabelTitle;
-          sanitizeLabelTitle = function(title) {
-            if (/[\w\?&]+\s+[\w\?&]+/g.test(title)) {
-              return "\"" + (sanitize(title)) + "\"";
-            } else {
-              return sanitize(title);
-            }
-          };
-          return $.map(merges, function(m) {
-            return {
-              title: sanitize(m.title),
-              color: m.color,
-              search: "" + m.title
-            };
-          });
-        }
-      }
+        ...this.getDefaultCallbacks(),
+        beforeSave(merges) {
+          if (GfmAutoComplete.isLoading(merges)) return merges;
+          return $.map(merges, m => ({
+            title: sanitize(m.title),
+            color: m.color,
+            search: m.title,
+          }));
+        },
+      },
     });
-  },
+  }
 
-  fetchData: function($input, at) {
+  getDefaultCallbacks() {
+    const fetchData = this.fetchData.bind(this);
+
+    return {
+      sorter(query, items, searchKey) {
+        this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
+        if (GfmAutoComplete.isLoading(items)) {
+          this.setting.highlightFirst = false;
+          return items;
+        }
+        return $.fn.atwho.default.callbacks.sorter(query, items, searchKey);
+      },
+      filter(query, data, searchKey) {
+        if (GfmAutoComplete.isLoading(data)) {
+          fetchData(this.$inputor, this.at);
+          return data;
+        }
+        return $.fn.atwho.default.callbacks.filter(query, data, searchKey);
+      },
+      beforeInsert(value) {
+        let resultantValue = value;
+        if (value && !this.setting.skipSpecialCharacterTest) {
+          const withoutAt = value.substring(1);
+          if (withoutAt && /[^\w\d]/.test(withoutAt)) {
+            resultantValue = `${value.charAt()}"${withoutAt}"`;
+          }
+        }
+        return resultantValue;
+      },
+      matcher(flag, subtext) {
+        // The below is taken from At.js source
+        // Tweaked to commands to start without a space only if char before is a non-word character
+        // https://github.com/ichord/At.js
+        const atSymbolsWithBar = Object.keys(this.app.controllers).join('|');
+        const atSymbolsWithoutBar = Object.keys(this.app.controllers).join('');
+        const targetSubtext = subtext.split(/\s+/g).pop();
+        const resultantFlag = flag.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+
+        const accentAChar = decodeURI('%C3%80');
+        const accentYChar = decodeURI('%C3%BF');
+
+        const regexp = new RegExp(`^(?:\\B|[^a-zA-Z0-9_${atSymbolsWithoutBar}]|\\s)${resultantFlag}(?!${atSymbolsWithBar})((?:[A-Za-z${accentAChar}-${accentYChar}0-9_'.+-]|[^\\x00-\\x7a])*)$`, 'gi');
+
+        const match = regexp.exec(targetSubtext);
+
+        if (match) {
+          return match[1];
+        }
+        return null;
+      },
+    };
+  }
+
+  fetchData($input, at) {
     if (this.isLoadingData[at]) return;
     this.isLoadingData[at] = true;
     if (this.cachedData[at]) {
       this.loadData($input, at, this.cachedData[at]);
-    } else if (this.atTypeMap[at] === 'emojis') {
+    } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
       this.loadData($input, at, Object.keys(emojiMap).concat(Object.keys(emojiAliases)));
     } else {
-      $.getJSON(this.dataSources[this.atTypeMap[at]], (data) => {
+      $.getJSON(this.dataSources[GfmAutoComplete.atTypeMap[at]], (data) => {
         this.loadData($input, at, data);
       }).fail(() => { this.isLoadingData[at] = false; });
     }
-  },
-  loadData: function($input, at, data) {
+  }
+  loadData($input, at, data) {
     this.isLoadingData[at] = false;
     this.cachedData[at] = data;
     $input.atwho('load', at, data);
     // This trigger at.js again
     // otherwise we would be stuck with loading until the user types
     return $input.trigger('keyup');
-  },
-  isLoading(data) {
-    var dataToInspect = data;
+  }
+
+  static isLoading(data) {
+    let dataToInspect = data;
     if (data && data.length > 0) {
       dataToInspect = data[0];
     }
 
-    var loadingState = this.defaultLoadingData[0];
+    const loadingState = GfmAutoComplete.defaultLoadingData[0];
     return dataToInspect &&
       (dataToInspect === loadingState || dataToInspect.name === loadingState);
   }
+}
+
+GfmAutoComplete.defaultLoadingData = ['loading'];
+
+GfmAutoComplete.atTypeMap = {
+  ':': 'emojis',
+  '@': 'members',
+  '#': 'issues',
+  '!': 'mergeRequests',
+  '~': 'labels',
+  '%': 'milestones',
+  '/': 'commands',
+};
+
+// Emoji
+GfmAutoComplete.Emoji = {
+  templateFunction(name) {
+    return `<li>
+      ${name} ${glEmojiTag(name)}
+    </li>
+    `;
+  },
 };
+// Team Members
+GfmAutoComplete.Members = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li>${avatarTag} ${username} <small>${title}</small></li>',
+};
+GfmAutoComplete.Labels = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>',
+};
+// Issues and MergeRequests
+GfmAutoComplete.Issues = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li><small>${id}</small> ${title}</li>',
+};
+// Milestones
+GfmAutoComplete.Milestones = {
+  // eslint-disable-next-line no-template-curly-in-string
+  template: '<li>${title}</li>',
+};
+GfmAutoComplete.Loading = {
+  template: '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>',
+};
+
+export default GfmAutoComplete;
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index ff06092e4d6..51822f21e66 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -3,6 +3,8 @@
 /* global DropzoneInput */
 /* global autosize */
 
+import GfmAutoComplete from './gfm_auto_complete';
+
 window.gl = window.gl || {};
 
 function GLForm(form) {
@@ -31,7 +33,7 @@ GLForm.prototype.setupForm = function() {
     // remove notify commit author checkbox for non-commit notes
     gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
 
-    gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup(this.form.find('.js-gfm-input'));
     new DropzoneInput(this.form);
     autosize(this.textarea);
   }
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 4310663e0b6..92f6f0d4117 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -6,6 +6,7 @@
 /* global Pikaday */
 
 import UsersSelect from './users_select';
+import GfmAutoComplete from './gfm_auto_complete';
 
 (function() {
   this.IssuableForm = (function() {
@@ -20,7 +21,7 @@ import UsersSelect from './users_select';
       this.renderWipExplanation = this.renderWipExplanation.bind(this);
       this.resetAutosave = this.resetAutosave.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
-      gl.GfmAutoComplete.setup();
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
       new UsersSelect();
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 30636f6afec..9b9fc31ae93 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -96,7 +96,6 @@ import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
 import './flash';
-import './gfm_auto_complete';
 import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index aaf6e252abb..91d1afba7b6 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -12,7 +12,6 @@ require('./autosave');
 window.autosize = require('vendor/autosize');
 window.Dropzone = require('dropzone');
 require('./dropzone_input');
-require('./gfm_auto_complete');
 require('vendor/jquery.caret'); // required by jquery.atwho
 require('vendor/jquery.atwho');
 require('./task_list');
diff --git a/app/views/layouts/_init_auto_complete.html.haml b/app/views/layouts/_init_auto_complete.html.haml
index 769f6fb0151..6caaba240bb 100644
--- a/app/views/layouts/_init_auto_complete.html.haml
+++ b/app/views/layouts/_init_auto_complete.html.haml
@@ -3,6 +3,7 @@
 
 - if project
   :javascript
+    gl.GfmAutoComplete = gl.GfmAutoComplete || {};
     gl.GfmAutoComplete.dataSources = {
       members: "#{members_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}",
       issues: "#{issues_namespace_project_autocomplete_sources_path(project.namespace, project)}",
@@ -11,5 +12,3 @@
       milestones: "#{milestones_namespace_project_autocomplete_sources_path(project.namespace, project)}",
       commands: "#{commands_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
     };
-
-    gl.GfmAutoComplete.setup();
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 7e011ac3e75..03688e9ff21 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,8 +2,8 @@
 %html{ lang: I18n.locale, class: "#{page_class}" }
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
+    = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/header/default", title: header_title
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
     = yield :scripts_body
-    = render "layouts/init_auto_complete" if @gfm_form
diff --git a/spec/features/projects/gfm_autocomplete_load_spec.rb b/spec/features/projects/gfm_autocomplete_load_spec.rb
index dd9622f16a0..67bc9142356 100644
--- a/spec/features/projects/gfm_autocomplete_load_spec.rb
+++ b/spec/features/projects/gfm_autocomplete_load_spec.rb
@@ -10,7 +10,7 @@ describe 'GFM autocomplete loading', feature: true, js: true do
   end
 
   it 'does not load on project#show' do
-    expect(evaluate_script('gl.GfmAutoComplete.dataSources')).to eq({})
+    expect(evaluate_script('gl.GfmAutoComplete')).to eq(nil)
   end
 
   it 'loads on new issue page' do
diff --git a/spec/javascripts/gfm_auto_complete_spec.js b/spec/javascripts/gfm_auto_complete_spec.js
index 5dfa4008fbd..d0f15c902b5 100644
--- a/spec/javascripts/gfm_auto_complete_spec.js
+++ b/spec/javascripts/gfm_auto_complete_spec.js
@@ -1,13 +1,15 @@
 /* eslint no-param-reassign: "off" */
 
-require('~/gfm_auto_complete');
+import GfmAutoComplete from '~/gfm_auto_complete';
+
 require('vendor/jquery.caret');
 require('vendor/jquery.atwho');
 
-const global = window.gl || (window.gl = {});
-const GfmAutoComplete = global.GfmAutoComplete;
-
 describe('GfmAutoComplete', function () {
+  const gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call({
+    fetchData: () => {},
+  });
+
   describe('DefaultOptions.sorter', function () {
     describe('assets loading', function () {
       beforeEach(function () {
@@ -16,7 +18,7 @@ describe('GfmAutoComplete', function () {
         this.atwhoInstance = { setting: {} };
         this.items = [];
 
-        this.sorterValue = GfmAutoComplete.DefaultOptions.sorter
+        this.sorterValue = gfmAutoCompleteCallbacks.sorter
           .call(this.atwhoInstance, '', this.items);
       });
 
@@ -38,7 +40,7 @@ describe('GfmAutoComplete', function () {
       it('should enable highlightFirst if alwaysHighlightFirst is set', function () {
         const atwhoInstance = { setting: { alwaysHighlightFirst: true } };
 
-        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance);
+        gfmAutoCompleteCallbacks.sorter.call(atwhoInstance);
 
         expect(atwhoInstance.setting.highlightFirst).toBe(true);
       });
@@ -46,7 +48,7 @@ describe('GfmAutoComplete', function () {
       it('should enable highlightFirst if a query is present', function () {
         const atwhoInstance = { setting: {} };
 
-        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, 'query');
+        gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, 'query');
 
         expect(atwhoInstance.setting.highlightFirst).toBe(true);
       });
@@ -58,7 +60,7 @@ describe('GfmAutoComplete', function () {
         const items = [];
         const searchKey = 'searchKey';
 
-        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, query, items, searchKey);
+        gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, query, items, searchKey);
 
         expect($.fn.atwho.default.callbacks.sorter).toHaveBeenCalledWith(query, items, searchKey);
       });
@@ -67,7 +69,7 @@ describe('GfmAutoComplete', function () {
 
   describe('DefaultOptions.matcher', function () {
     const defaultMatcher = (context, flag, subtext) => (
-      GfmAutoComplete.DefaultOptions.matcher.call(context, flag, subtext)
+      gfmAutoCompleteCallbacks.matcher.call(context, flag, subtext)
     );
 
     const flagsUseDefaultMatcher = ['@', '#', '!', '~', '%'];