Merge branch 'md-preview-class' into 'master'

Make sure Markdown previews always use the same styling as the eventual destination.

Font size, image width and code-block styling weren't accurate between the markdown preview and the issue/wiki/note body.

See merge request !1514

CHANGELOG

@@ -57,6 +57,7 @@ v 7.8.0 (unreleased)
   - Show users button to share their newly created public or internal projects on twitter
   - Add quick help links to the GitLab pricing and feature comparison pages.
   - Fix duplicate authorized applications in user profile and incorrect application client count in admin area.
+  - Make sure Markdown previews always use the same styling as the eventual destination.
 
 v 7.7.2
   - Update GitLab Shell to version 2.4.2 that fixes a bug when developers can push to protected branch

app/assets/javascripts/notes.js.coffee

@@ -272,7 +272,7 @@ class @Notes
     note_li = $(".note-row-" + note.id)
     note_li.replaceWith(note.html)
     note_li.find('.note-edit-form').hide()
-    note_li.find('.note-text').show()
+    note_li.find('.note-body > .note-text').show()
 
   ###
   Called in response to clicking the edit note link
@@ -284,7 +284,7 @@ class @Notes
   showEditForm: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
-    note.find(".note-text").hide()
+    note.find(".note-body > .note-text").hide()
     note.find(".note-header").hide()
     base_form = note.find(".note-edit-form")
     form = base_form.clone().insertAfter(base_form)
@@ -311,7 +311,7 @@ class @Notes
   cancelEdit: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
-    note.find(".note-text").show()
+    note.find(".note-body > .note-text").show()
     note.find(".note-header").show()
     note.find(".current-note-edit-form").remove()
 
@@ -345,7 +345,7 @@ class @Notes
   removeAttachment: ->
     note = $(this).closest(".note")
     note.find(".note-attachment").remove()
-    note.find(".note-text").show()
+    note.find(".note-body > .note-text").show()
     note.find(".js-note-attachment-delete").hide()
     note.find(".note-edit-form").hide()
 

app/views/projects/_issuable_form.html.haml

@@ -15,7 +15,7 @@
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10
 
-    = render layout: 'projects/md_preview' do
+    = render layout: 'projects/md_preview', locals: { preview_class: "wiki" } do
       = render 'projects/zen', f: f, attr: :description,
                                classes: 'description form-control'
       .col-sm-12.hint

app/views/projects/_md_preview.html.haml

@@ -10,4 +10,4 @@
   .md-write-holder
     = yield
   .md-preview-holder.hide
-    .js-md-preview
+    .js-md-preview{class: (preview_class if defined?(preview_class))}

app/views/projects/merge_requests/_new_submit.html.haml

@@ -19,7 +19,7 @@
     .form-group.issuable-description
       = f.label :description, 'Description', class: 'control-label'
       .col-sm-10
-        = render layout: 'projects/md_preview' do
+        = render layout: 'projects/md_preview', locals: { preview_class: "wiki" } do
           = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
 
           .col-sm-12-hint

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

@@ -21,7 +21,7 @@
       .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
-          = render layout: 'projects/md_preview' do
+          = render layout: 'projects/md_preview', locals: { preview_class: "wiki" } do
             = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
             .hint
               .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.

app/views/projects/notes/_edit_form.html.haml

@@ -1,6 +1,6 @@
 .note-edit-form
   = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
-    = render layout: 'projects/md_preview' do
+    = render layout: 'projects/md_preview', locals: { preview_class: "note-text" } do
       = render 'projects/zen', f: f, attr: :note,
         classes: 'note_text js-note-text'
 

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

@@ -5,7 +5,7 @@
   = f.hidden_field :noteable_id
   = f.hidden_field :noteable_type
 
-  = render layout: 'projects/md_preview' do
+  = render layout: 'projects/md_preview', locals: { preview_class: "note-text" } do
     = render 'projects/zen', f: f, attr: :note,
       classes: 'note_text js-note-text'
 

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

@@ -22,7 +22,7 @@
   .form-group.wiki-content
     = f.label :content, class: 'control-label'
     .col-sm-10
-      = render layout: 'projects/md_preview' do
+      = render layout: 'projects/md_preview', locals: { preview_class: "wiki" } do
         = render 'projects/zen', f: f, attr: :content, classes: 'description form-control'
         .col-sm-12.hint
           .pull-left Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}

features/steps/project/merge_requests.rb

@@ -253,7 +253,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I should still see a comment like "Line is correct" in the first file' do
-    within '.files [id^=diff]:nth-child(1) .note-text' do
+    within '.files [id^=diff]:nth-child(1) .note-body > .note-text' do
       page.should have_visible_content "Line is correct"
     end
   end
@@ -271,7 +271,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I should see comments on the side-by-side diff page' do
-    within '.files [id^=diff]:nth-child(1) .parallel .note-text' do
+    within '.files [id^=diff]:nth-child(1) .parallel .note-body > .note-text' do
       page.should have_visible_content "Line is correct"
     end
   end

features/steps/shared/note.rb

@@ -116,7 +116,7 @@ module SharedNote
   end
 
   step 'The comment with the header should not have an ID' do
-    within(".note-text") do
+    within(".note-body > .note-text") do
       page.should     have_content("Comment with a header")
       page.should_not have_css("#comment-with-a-header")
     end

spec/features/notes_on_merge_requests_spec.rb

@@ -81,7 +81,7 @@ describe 'Comments' do
           within("#note_#{note.id}") do
             expect(find('.current-note-edit-form', visible: true)).to be_visible
             expect(find('.note-edit-form', visible: true)).to be_visible
-            expect(find(:css, '.note-text', visible: false)).not_to be_visible
+            expect(find(:css, '.note-body > .note-text', visible: false)).not_to be_visible
           end
         end