Escape autocomplete results for Markdown

A label name can contain a `_`, `~~`, or other Markdown-significant
characters. But label references are processed _after_ Markdown processing has
run, so we can't easily fix this on the backend.

We can make it more convenient, though, by changing the frontend to escape these
characters so they aren't processed as Markdown, when we insert them from
autocomplete.

app/assets/javascripts/gfm_auto_complete.js

@@ -54,6 +54,7 @@ class GfmAutoComplete {
       alias: 'commands',
       searchKey: 'search',
       skipSpecialCharacterTest: true,
+      skipMarkdownCharacterTest: true,
       data: GfmAutoComplete.defaultLoadingData,
       displayTpl(value) {
         if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
@@ -376,15 +377,23 @@ class GfmAutoComplete {
         return $.fn.atwho.default.callbacks.filter(query, data, searchKey);
       },
       beforeInsert(value) {
-        let resultantValue = value;
+        let withoutAt = value.substring(1);
+        const at = value.charAt();
+
         if (value && !this.setting.skipSpecialCharacterTest) {
-          const withoutAt = value.substring(1);
-          const regex = value.charAt() === '~' ? /\W|^\d+$/ : /\W/;
+          const regex = at === '~' ? /\W|^\d+$/ : /\W/;
           if (withoutAt && regex.test(withoutAt)) {
-            resultantValue = `${value.charAt()}"${withoutAt}"`;
+            withoutAt = `"${withoutAt}"`;
           }
         }
-        return resultantValue;
+
+        // We can ignore this for quick actions because they are processed
+        // before Markdown.
+        if (!this.setting.skipMarkdownCharacterTest) {
+          withoutAt = withoutAt.replace(/([~\-_*`])/g, '\\$&');
+        }
+
+        return `${at}${withoutAt}`;
       },
       matcher(flag, subtext) {
         const match = GfmAutoComplete.defaultMatcher(flag, subtext, this.app.controllers);

changelogs/unreleased/escape-autocomplete-values-for-markdown.yml

+---
+title: Escape Markdown characters properly when using autocomplete
+merge_request:
+author:
+type: fixed

spec/javascripts/gfm_auto_complete_spec.js

@@ -81,13 +81,21 @@ describe('GfmAutoComplete', function () {
     });
 
     it('should quote if value contains any non-alphanumeric characters', () => {
-      expect(beforeInsert(atwhoInstance, '~label-20')).toBe('~"label-20"');
+      expect(beforeInsert(atwhoInstance, '~label-20')).toBe('~"label\\-20"');
       expect(beforeInsert(atwhoInstance, '~label 20')).toBe('~"label 20"');
     });
 
     it('should quote integer labels', () => {
       expect(beforeInsert(atwhoInstance, '~1234')).toBe('~"1234"');
     });
+
+    it('should escape Markdown emphasis characters, except in the first character', () => {
+      expect(beforeInsert(atwhoInstance, '@_group')).toEqual('@\\_group');
+      expect(beforeInsert(atwhoInstance, '~_bug')).toEqual('~\\_bug');
+      expect(beforeInsert(atwhoInstance, '~a `bug`')).toEqual('~"a \\`bug\\`"');
+      expect(beforeInsert(atwhoInstance, '~a ~bug')).toEqual('~"a \\~bug"');
+      expect(beforeInsert(atwhoInstance, '~a **bug')).toEqual('~"a \\*\\*bug"');
+    });
   });
 
   describe('DefaultOptions.matcher', function () {