Use proper markdown rendering for previews

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"

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"
     >

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"
     />

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

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"

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"
     />

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

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>

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,
         },
       });
     },

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;

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

 <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>

app/controllers/concerns/preview_markdown.rb

@@ -14,6 +14,8 @@ module PreviewMarkdown
       else {}
       end
+    markdown_params[:markdown_engine] = result[:markdown_engine]
+
     render json: {
       body: view_context.markdown(result[:text], markdown_params),
       references: {

app/helpers/issuables_helper.rb

@@ -249,6 +249,7 @@ module IssuablesHelper
       issuableRef: issuable.to_reference,
       markdownPreviewPath: preview_markdown_path(parent),
       markdownDocsPath: help_page_path('user/markdown'),
+      markdownVersion: issuable.cached_markdown_version,
       issuableTemplates: issuable_templates(issuable),
       initialTitleHtml: markdown_field(issuable, :title),
       initialTitleText: issuable.title,

app/helpers/markup_helper.rb

@@ -107,6 +107,7 @@ module MarkupHelper
   def markup(file_name, text, context = {})
     context[:project] ||= @project
+    context[:markdown_engine] ||= :redcarpet
     html = context.delete(:rendered) || markup_unsafe(file_name, text, context)
     prepare_for_rendering(html, context)
   end
@@ -120,7 +121,8 @@ module MarkupHelper
       project: @project,
       project_wiki: @project_wiki,
       page_slug: wiki_page.slug,
-      issuable_state_filter_enabled: true
+      issuable_state_filter_enabled: true,
+      markdown_engine: :redcarpet
     }
     html =

app/helpers/notes_helper.rb

@@ -169,6 +169,7 @@ module NotesHelper
       registerPath: new_session_path(:user, redirect_to_referer: 'yes', anchor: 'register-pane'),
       newSessionPath: new_session_path(:user, redirect_to_referer: 'yes'),
       markdownDocsPath: help_page_path('user/markdown'),
+      markdownVersion: issuable.cached_markdown_version,
       quickActionsDocsPath: help_page_path('user/project/quick_actions'),
       closePath: close_issuable_path(issuable),
       reopenPath: reopen_issuable_path(issuable),

app/models/concerns/cache_markdown_field.rb

@@ -40,6 +40,18 @@ module CacheMarkdownField
     end
   end
+  class MarkdownEngine
+    def self.from_version(version = nil)
+      return :common_mark if version.nil? || version == 0
+
+      if version < CacheMarkdownField::CACHE_COMMONMARK_VERSION_START
+        :redcarpet
+      else
+        :common_mark
+      end
+    end
+  end
+
   def skip_project_check?
     false
   end
@@ -57,7 +69,7 @@ module CacheMarkdownField
     # Banzai is less strict about authors, so don't always have an author key
     context[:author] = self.author if self.respond_to?(:author)
-    context[:markdown_engine] = markdown_engine
+    context[:markdown_engine] = MarkdownEngine.from_version(latest_cached_markdown_version)
     context
   end
@@ -123,14 +135,6 @@ module CacheMarkdownField
     end
   end
-  def markdown_engine
-    if latest_cached_markdown_version < CacheMarkdownField::CACHE_COMMONMARK_VERSION_START
-      :redcarpet
-    else
-      :common_mark
-    end
-  end
-
   included do
     cattr_reader :cached_markdown_fields do
       FieldData.new

app/models/repository.rb

@@ -564,7 +564,7 @@ class Repository
   end
   def rendered_readme
-    MarkupHelper.markup_unsafe(readme.name, readme.data, project: project) if readme
+    MarkupHelper.markup_unsafe(readme.name, readme.data, project: project, markdown_engine: :redcarpet) if readme
   end
   cache_method :rendered_readme

app/serializers/note_entity.rb

@@ -62,6 +62,8 @@ class NoteEntity < API::Entities::Note
   expose :attachment, using: NoteAttachmentEntity, if: -> (note, _) { note.attachment? }
+  expose :cached_markdown_version
+
   private
   def current_user

app/services/preview_markdown_service.rb

@@ -6,7 +6,8 @@ class PreviewMarkdownService < BaseService
     success(
       text: text,
       users: users,
-      commands: commands.join(' ')
+      commands: commands.join(' '),
+      markdown_engine: markdown_engine
     )
   end
@@ -42,4 +43,8 @@ class PreviewMarkdownService < BaseService
   def commands_target_id
     params[:quick_actions_target_id]
   end
+
+  def markdown_engine
+    CacheMarkdownField::MarkdownEngine.from_version(params[:markdown_version].to_i)
+  end
 end

app/views/projects/issues/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'issue-form common-note-form js-quick-submit js-requires-input' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @issue],
+           html: { class: 'issue-form common-note-form js-quick-submit js-requires-input' },
+           data: { markdown_version: @issue.cached_markdown_version } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue