Merge branch 'markdown_preview_shortcut' into 'master'

Add shortcut to toggle markdown preview

Allow to toggle markdown preview with shortcut `ctrl+shift+p` (`cmd+shift+p` on OSX).

- If the user is focused on a md textarea, `ctrl-shift-p` will show the preview, otherwise native browser event is fired
- The textarea is re-focused after disabling the preview tab
- Results of markdown render is cached for fast toggles

I'm on linux, so if someone can test it on OS X, it would be great!

Closes #14038

See merge request !3111

CHANGELOG

@@ -20,6 +20,7 @@ v 8.6.0 (unreleased)
   - Fix bug where Bitbucket `closed` issues were imported as `opened` (Iuri de Silvio)
   - Don't show Issues/MRs from archived projects in Groups view
   - Increase the notes polling timeout over time (Roberto Dip)
+  - Add shortcut to toggle markdown preview (Florent Baldino)
   - Show labels in dashboard and group milestone views
   - Add main language of a project in the list of projects (Tiago Botelho)
   - Add ability to show archived projects on dashboard, explore and group pages

app/assets/javascripts/markdown_preview.js.coffee

@@ -6,6 +6,7 @@
 class @MarkdownPreview
   # Minimum number of users referenced before triggering a warning
   referenceThreshold: 10
+  ajaxCache: {}
 
   showPreview: (form) ->
     preview = form.find('.js-md-preview')
@@ -24,12 +25,16 @@ class @MarkdownPreview
   renderMarkdown: (text, success) ->
     return unless window.markdown_preview_path
 
+    return success(@ajaxCache.response) if text == @ajaxCache.text
+
     $.ajax
       type: 'POST'
       url: window.markdown_preview_path
       data: { text: text }
       dataType: 'json'
-      success: success
+      success: (response) =>
+        @ajaxCache = text: text, response: response
+        success(response)
 
   hideReferencedUsers: (form) ->
     referencedUsers = form.find('.referenced-users')
@@ -49,6 +54,7 @@ markdownPreview = new MarkdownPreview()
 
 previewButtonSelector = '.js-md-preview-button'
 writeButtonSelector   = '.js-md-write-button'
+lastTextareaPreviewed = null
 
 $.fn.setupMarkdownPreview = ->
   $form = $(this)
@@ -58,10 +64,10 @@ $.fn.setupMarkdownPreview = ->
   form_textarea.on 'input', -> markdownPreview.hideReferencedUsers($form)
   form_textarea.on 'blur',  -> markdownPreview.showPreview($form)
 
-$(document).on 'click', previewButtonSelector, (e) ->
-  e.preventDefault()
+$(document).on 'markdown-preview:show', (e, $form) ->
+  return unless $form
 
-  $form = $(this).closest('form')
+  lastTextareaPreviewed = $form.find('textarea.markdown-area')
 
   # toggle tabs
   $form.find(writeButtonSelector).parent().removeClass('active')
@@ -73,10 +79,10 @@ $(document).on 'click', previewButtonSelector, (e) ->
 
   markdownPreview.showPreview($form)
 
-$(document).on 'click', writeButtonSelector, (e) ->
-  e.preventDefault()
+$(document).on 'markdown-preview:hide', (e, $form) ->
+  return unless $form
 
-  $form = $(this).closest('form')
+  lastTextareaPreviewed = null
 
   # toggle tabs
   $form.find(writeButtonSelector).parent().addClass('active')
@@ -84,4 +90,30 @@ $(document).on 'click', writeButtonSelector, (e) ->
 
   # toggle content
   $form.find('.md-write-holder').show()
+  $form.find('textarea.markdown-area').focus()
   $form.find('.md-preview-holder').hide()
+
+$(document).on 'markdown-preview:toggle', (e, keyboardEvent) ->
+  $target = $(keyboardEvent.target)
+
+  if $target.is('textarea.markdown-area')
+    $(document).triggerHandler('markdown-preview:show', [$target.closest('form')])
+    keyboardEvent.preventDefault()
+  else if lastTextareaPreviewed
+    $target = lastTextareaPreviewed
+    $(document).triggerHandler('markdown-preview:hide', [$target.closest('form')])
+    keyboardEvent.preventDefault()
+
+$(document).on 'click', previewButtonSelector, (e) ->
+  e.preventDefault()
+
+  $form = $(this).closest('form')
+
+  $(document).triggerHandler('markdown-preview:show', [$form])
+
+$(document).on 'click', writeButtonSelector, (e) ->
+  e.preventDefault()
+
+  $form = $(this).closest('form')
+
+  $(document).triggerHandler('markdown-preview:hide', [$form])

app/assets/javascripts/shortcuts.js.coffee

@@ -4,11 +4,15 @@ class @Shortcuts
     Mousetrap.reset()
     Mousetrap.bind('?', @selectiveHelp)
     Mousetrap.bind('s', Shortcuts.focusSearch)
+    Mousetrap.bind(['ctrl+shift+p', 'command+shift+p'], @toggleMarkdownPreview)
     Mousetrap.bind('t', -> Turbolinks.visit(findFileURL)) if findFileURL?
 
   selectiveHelp: (e) =>
     Shortcuts.showHelp(e, @enabledHelp)
 
+  toggleMarkdownPreview: (e) =>
+    $(document).triggerHandler('markdown-preview:toggle', [e])
+
   @showHelp: (e, location) ->
     if $('#modal-shortcuts').length > 0
       $('#modal-shortcuts').modal('show')
@@ -35,3 +39,14 @@ $(document).on 'click.more_help', '.js-more-help-button', (e) ->
   $(@).remove()
   $('.hidden-shortcut').show()
   e.preventDefault()
+
+Mousetrap.stopCallback = (->
+  defaultStopCallback = Mousetrap.stopCallback
+
+  return (e, element, combo) ->
+    # allowed shortcuts if textarea, input, contenteditable are focused
+    if ['ctrl+shift+p', 'command+shift+p'].indexOf(combo) != -1
+      return false
+    else
+      return defaultStopCallback.apply(@, arguments)
+)()

app/views/help/_shortcuts.html.haml

@@ -22,6 +22,14 @@
                 %td.shortcut
                   .key ?
                 %td Show this dialog
+              %tr
+                %td.shortcut
+                  - if browser.mac?
+                    .key ⌘ shift p
+                  - else
+                    .key ctrl shift p
+
+                %td Toggle Markdown preview
             %tbody
               %tr
                 %th