Fixes suggestions with new line characters not working

Fixes a bug where new lines in the suggestions content
would insert a new line instead of the new line character.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/333351

app/assets/javascripts/lib/utils/text_markdown.js

@@ -232,7 +232,9 @@ export function insertMarkdownText({
         .join('\n');
     }
   } else if (tag.indexOf(textPlaceholder) > -1) {
-    textToInsert = tag.replace(textPlaceholder, () => selected.replace(/\\n/g, '\n'));
+    textToInsert = tag.replace(textPlaceholder, () =>
+      selected.replace(/\\n/g, '\n').replace(/\/(n|t|r)/g, '\\$1'),
+    );
   } else {
     textToInsert = String(startChar) + tag + selected + (wrap ? tag : '');
   }

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

@@ -15,6 +15,14 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MarkdownHeader from './header.vue';
 import MarkdownToolbar from './toolbar.vue';
 
+function cleanUpLine(content) {
+  return unescape(
+    stripHtml(content)
+      .replace(/\\(n|t|r)/g, '/$1')
+      .replace(/\n/g, ''),
+  );
+}
+
 export default {
   components: {
     GfmAutocomplete,
@@ -129,7 +137,7 @@ export default {
               return text;
             }
 
-            return unescape(stripHtml(richText).replace(/\n/g, ''));
+            return cleanUpLine(richText);
           })
           .join('\\n');
       }
@@ -141,7 +149,7 @@ export default {
           return text;
         }
 
-        return unescape(stripHtml(richText).replace(/\n/g, ''));
+        return cleanUpLine(richText);
       }
 
       return '';
@@ -272,6 +280,7 @@ export default {
       :can-suggest="canSuggest"
       :show-suggest-popover="showSuggestPopover"
       :suggestion-start-index="suggestionsStartIndex"
+      data-testid="markdownHeader"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
       @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"

spec/frontend/lib/utils/text_markdown_spec.js

@@ -88,6 +88,25 @@ describe('init markdown', () => {
         expect(textArea.value).toEqual(`${initialValue}\n- `);
       });
 
+      it('unescapes new line characters', () => {
+        const initialValue = '';
+
+        textArea.value = initialValue;
+        textArea.selectionStart = 0;
+        textArea.selectionEnd = 0;
+
+        insertMarkdownText({
+          textArea,
+          text: textArea.value,
+          tag: '```suggestion:-0+0\n{text}\n```',
+          blockTag: true,
+          selected: '# Does not parse the /n currently.',
+          wrap: false,
+        });
+
+        expect(textArea.value).toContain('# Does not parse the \\n currently.');
+      });
+
       it('inserts the tag on the same line if the current line only contains spaces', () => {
         const initialValue = '  ';
 

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -28,6 +28,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
       data-uploads-path=""
     >
       <markdown-header-stub
+        data-testid="markdownHeader"
         linecontent=""
         suggestionstartindex="0"
       />

spec/frontend/vue_shared/components/markdown/field_spec.js

@@ -32,7 +32,7 @@ describe('Markdown field component', () => {
     axiosMock.restore();
   });
 
-  function createSubject() {
+  function createSubject(lines = []) {
     // We actually mount a wrapper component so that we can force Vue to rerender classes in order to test a regression
     // caused by mixing Vanilla JS and Vue.
     subject = mount(
@@ -60,6 +60,7 @@ describe('Markdown field component', () => {
           markdownPreviewPath,
           isSubmitting: false,
           textareaValue,
+          lines,
         },
       },
     );
@@ -243,4 +244,14 @@ describe('Markdown field component', () => {
       });
     });
   });
+
+  describe('suggestions', () => {
+    it('escapes new line characters', () => {
+      createSubject([{ rich_text: 'hello world\\n' }]);
+
+      expect(subject.find('[data-testid="markdownHeader"]').props('lineContent')).toBe(
+        'hello world/n',
+      );
+    });
+  });
 });