Use proper markdown rendering for previews

11 files changed, 74 insertions, 6 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index b6364318537..ad928484952 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -108,6 +108,11 @@
         type: String,
         required: true,
       },
+      markdownVersion: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
       projectPath: {
         type: String,
         required: true,
@@ -282,6 +287,7 @@
         :issuable-templates="issuableTemplates"
         :markdown-docs-path="markdownDocsPath"
         :markdown-preview-path="markdownPreviewPath"
+        :markdown-version="markdownVersion"
         :project-path="projectPath"
         :project-namespace="projectNamespace"
         :show-delete-button="showDeleteButton"
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 5f58f671c73..97acc5ba385 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -20,6 +20,11 @@
         type: String,
         required: true,
       },
+      markdownVersion: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
       canAttachFile: {
         type: Boolean,
         required: false,
@@ -47,6 +52,7 @@
     <markdown-field
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
+      :markdown-version="markdownVersion"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
     >
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 5bfc072e3da..e509bb52f7d 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -35,6 +35,11 @@
         type: String,
         required: true,
       },
+      markdownVersion: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
       projectPath: {
         type: String,
         required: true,
@@ -97,6 +102,7 @@
       :form-state="formState"
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
+      :markdown-version="markdownVersion"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
     />
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 48cda28a1ae..8124ae6201f 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1251,13 +1251,15 @@ export default class Notes {
     var postUrl = $originalContentEl.data('postUrl');
     var targetId = $originalContentEl.data('targetId');
     var targetType = $originalContentEl.data('targetType');
+    var markdownVersion = $originalContentEl.data('markdownVersion');
 
     this.glForm = new GLForm($editForm.find('form'), this.enableGFM);
 
     $editForm
       .find('form')
       .attr('action', `${postUrl}?html=true`)
-      .attr('data-remote', 'true');
+      .attr('data-remote', 'true')
+      .attr('data-markdown-version', markdownVersion);
     $editForm.find('.js-form-target-id').val(targetId);
     $editForm.find('.js-form-target-type').val(targetType);
     $editForm
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index c6a524f68cb..6612bc44e0b 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -34,6 +34,11 @@ export default {
       type: String,
       required: true,
     },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -344,6 +349,7 @@ Please check your network connection and try again.`;
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
+                :markdown-version="markdownVersion"
                 :add-spacing-classes="false">
                 <textarea
                   id="note-body"
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index d2db68df98e..6f4a0709825 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -92,6 +92,7 @@ export default {
       :is-editing="isEditing"
       :note-body="noteBody"
       :note-id="note.id"
+      :markdown-version="note.cached_markdown_version"
       @handleFormUpdate="handleFormUpdate"
       @cancelForm="formCancelHandler"
     />
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index a4e3faa5d75..963e3a37b39 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -24,6 +24,11 @@ export default {
       required: false,
       default: 0,
     },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
     saveButtonTitle: {
       type: String,
       required: false,
@@ -156,6 +161,7 @@ export default {
       <markdown-field
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
+        :markdown-version="markdownVersion"
         :quick-actions-docs-path="quickActionsDocsPath"
         :add-spacing-classes="false">
         <textarea
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index a8995021699..9b8713b40fb 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -43,6 +43,11 @@ export default {
       required: false,
       default: true,
     },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -192,6 +197,7 @@ export default {
 
     <comment-form
       :noteable-type="noteableType"
+      :markdown-version="markdownVersion"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index eed3a82854d..6dd4c9d66ac 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const notesDataset = document.getElementById('js-vue-notes').dataset;
       const parsedUserData = JSON.parse(notesDataset.currentUserData);
       const noteableData = JSON.parse(notesDataset.noteableData);
+      const { markdownVersion } = notesDataset;
       let currentUserData = {};
 
       noteableData.noteableType = notesDataset.noteableType;
@@ -33,6 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
       return {
         noteableData,
         currentUserData,
+        markdownVersion,
         notesData: JSON.parse(notesDataset.notesData),
       };
     },
@@ -42,6 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
           noteableData: this.noteableData,
           notesData: this.notesData,
           userData: this.currentUserData,
+          markdownVersion: this.markdownVersion,
         },
       });
     },
diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 0e973cab4d2..0964baf8954 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -28,12 +28,16 @@ MarkdownPreview.prototype.ajaxCache = {};
 
 MarkdownPreview.prototype.showPreview = function ($form) {
   var mdText;
+  var markdownVersion;
+  var url;
   var preview = $form.find('.js-md-preview');
-  var url = preview.data('url');
   if (preview.hasClass('md-preview-loading')) {
     return;
   }
+
   mdText = $form.find('textarea.markdown-area').val();
+  markdownVersion = $form.attr('data-markdown-version');
+  url = this.versionedPreviewPath(preview.data('url'), markdownVersion);
 
   if (mdText.trim().length === 0) {
     preview.text(this.emptyMessage);
@@ -59,6 +63,14 @@ MarkdownPreview.prototype.showPreview = function ($form) {
   }
 };
 
+MarkdownPreview.prototype.versionedPreviewPath = function (markdownPreviewPath, markdownVersion) {
+  if (typeof markdownVersion === 'undefined') {
+    return markdownPreviewPath;
+  }
+
+  return `${markdownPreviewPath}${markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'}markdown_version=${markdownVersion}`;
+};
+
 MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
   if (!url) {
     return;
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 298971a36b2..d62537021ca 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,5 +1,6 @@
 <script>
   import $ from 'jquery';
+  import { s__ } from '~/locale';
   import Flash from '../../../flash';
   import GLForm from '../../../gl_form';
   import markdownHeader from './header.vue';
@@ -22,6 +23,11 @@
         type: String,
         required: true,
       },
+      markdownVersion: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
       addSpacingClasses: {
         type: Boolean,
         required: false,
@@ -92,10 +98,11 @@
 
         if (text) {
           this.markdownPreviewLoading = true;
-          this.$http.post(this.markdownPreviewPath, { text })
-            .then(resp => resp.json())
-            .then(data => this.renderMarkdown(data))
-            .catch(() => new Flash('Error loading markdown preview'));
+          this.$http
+            .post(this.versionedPreviewPath(), { text })
+              .then(resp => resp.json())
+              .then(data => this.renderMarkdown(data))
+              .catch(() => new Flash(s__('Error loading markdown preview')));
         } else {
           this.renderMarkdown();
         }
@@ -119,6 +126,13 @@
           $(this.$refs['markdown-preview']).renderGFM();
         });
       },
+
+      versionedPreviewPath() {
+        const { markdownPreviewPath, markdownVersion } = this;
+        return `${markdownPreviewPath}${
+          markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
+          }markdown_version=${markdownVersion}`;
+      },
     },
   };
 </script>