Add ^ as a special reference for to GFM Autocomplete

This change adds ability to use ^ as a special reference in Markdown
Editor.

app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js

@@ -14,6 +14,7 @@ export default function initGFMInput($els) {
       milestones: enableGFM,
       mergeRequests: enableGFM,
       labels: enableGFM,
+      vulnerabilities: enableGFM,
     });
   });
 }

app/assets/javascripts/gfm_auto_complete.js

@@ -52,6 +52,7 @@ export const defaultAutocompleteConfig = {
   milestones: true,
   labels: true,
   snippets: true,
+  vulnerabilities: true,
 };
 
 class GfmAutoComplete {
@@ -647,7 +648,8 @@ class GfmAutoComplete {
     // https://github.com/ichord/At.js
     const atSymbolsWithBar = Object.keys(controllers)
       .join('|')
-      .replace(/[$]/, '\\$&');
+      .replace(/[$]/, '\\$&')
+      .replace(/[+]/, '\\+');
     const atSymbolsWithoutBar = Object.keys(controllers).join('');
     const targetSubtext = subtext.split(GfmAutoComplete.regexSubtext).pop();
     const resultantFlag = flag.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
@@ -678,6 +680,7 @@ GfmAutoComplete.atTypeMap = {
   '~': 'labels',
   '%': 'milestones',
   '/': 'commands',
+  '+': 'vulnerabilities',
   $: 'snippets',
 };
 

app/assets/javascripts/shared/milestones/form.js

@@ -16,5 +16,6 @@ export default (initGFM = true) => {
     milestones: initGFM,
     labels: initGFM,
     snippets: initGFM,
+    vulnerabilities: initGFM,
   });
 };

app/assets/javascripts/snippet/snippet_edit.js

@@ -14,6 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
     milestones: false,
     labels: false,
     snippets: false,
+    vulnerabilities: false,
   };
   const projectSnippetOptions = {};
 

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -174,6 +174,7 @@ export default {
       milestones: this.enableAutocomplete,
       labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
       snippets: this.enableAutocomplete,
+      vulnerabilities: this.enableAutocomplete,
     });
   },
   beforeDestroy() {

ee/app/assets/javascripts/gfm_auto_complete.js

@@ -16,6 +16,10 @@ class GfmAutoCompleteEE extends GfmAutoComplete {
       this.setupAutoCompleteEpics($input, this.getDefaultCallbacks());
     }
 
+    if (this.enableMap.vulnerabilities) {
+      this.setupAutoCompleteVulnerabilities($input, this.getDefaultCallbacks());
+    }
+
     super.setupAtWho($input);
   }
 
@@ -51,6 +55,40 @@ class GfmAutoCompleteEE extends GfmAutoComplete {
       },
     });
   };
+
+  setupAutoCompleteVulnerabilities = ($input, defaultCallbacks) => {
+    $input.atwho({
+      at: '+',
+      alias: 'vulnerabilities',
+      searchKey: 'search',
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      insertTpl: GfmAutoComplete.Issues.insertTemplateFunction,
+      skipSpecialCharacterTest: true,
+      callbacks: {
+        ...defaultCallbacks,
+        beforeSave(merges) {
+          return merges.map(m => {
+            if (m.title == null) {
+              return m;
+            }
+            return {
+              id: m.id,
+              title: m.title.replace(/<(?:.|\n)*?>/gm, ''),
+              reference: m.reference,
+              search: `${m.id} ${m.title}`,
+            };
+          });
+        },
+      },
+    });
+  };
 }
 
 export default GfmAutoCompleteEE;

ee/changelogs/unreleased/222483-add-special-reference-for-vulnerabilities-on-frontend.yml

+---
+title: Add + as a special reference for to GFM Autocomplete
+merge_request: 42190
+author:
+type: added

spec/frontend/gfm_auto_complete_spec.js

@@ -119,7 +119,7 @@ describe('GfmAutoComplete', () => {
     const defaultMatcher = (context, flag, subtext) =>
       gfmAutoCompleteCallbacks.matcher.call(context, flag, subtext);
 
-    const flagsUseDefaultMatcher = ['@', '#', '!', '~', '%', '$'];
+    const flagsUseDefaultMatcher = ['@', '#', '!', '~', '%', '$', '+'];
     const otherFlags = ['/', ':'];
     const flags = flagsUseDefaultMatcher.concat(otherFlags);
 
@@ -153,7 +153,6 @@ describe('GfmAutoComplete', () => {
       'я',
       '.',
       "'",
-      '+',
       '-',
       '_',
     ];