Notes form JS update

Updated the JS to have a standard class with standard actions for each form
Created ability to have toolbar buttons that insert different prefixes dependant upon the data-prefix attribute

app/assets/javascripts/gl_form.js.coffee

+class @GLForm
+  constructor: (@form) ->
+    @textarea = @form.find(".js-note-text")
+
+    @setupForm()
+
+  setupForm: ->
+    isNewForm = @form.is(':not(.gfm-form)')
+
+    @form.removeClass "js-new-note-form"
+
+    if isNewForm
+      @form.find('.div-dropzone').remove()
+      @form.addClass('gfm-form')
+      disableButtonIfEmptyField @form.find(".js-note-text"), @form.find(".js-comment-button")
+
+      # remove notify commit author checkbox for non-commit notes
+      GitLab.GfmAutoComplete.setup()
+      new DropzoneInput(@form)
+
+      autosize(@textarea)
+
+      # Setup action buttons
+      actions = new GLFormActions @form, @textarea
+      @form.data 'form-actions', actions
+
+      # form and textarea event listeners
+      @addEventListeners()
+
+    # hide discard button
+    @form.find('.js-note-discard').hide()
+
+    @form.show()
+
+  addEventListeners: ->
+    @textarea.on 'focus', ->
+      $(@).closest('.md-area').addClass 'is-focused'
+
+    @textarea.on 'blur', ->
+      $(@).closest('.md-area').removeClass 'is-focused'

app/assets/javascripts/gl_form_actions.js.coffee

+class @GLFormActions
+  constructor: (@form, @textarea) ->
+    @clearEventListeners()
+    @addEventListeners()
+
+  clearEventListeners: ->
+    @form.off 'click', '.js-toolbar-button'
+
+  addEventListeners: ->
+    @form.on 'click', '.js-toolbar-button', @toolbarButtonClick
+
+  toolbarButtonClick: (e) =>
+    $btn = $(e.currentTarget)
+
+    # Get the prefix from the button
+    prefix = $btn.data('prefix')
+    @addPrefixToTextarea(prefix)
+
+  addPrefixToTextarea: (prefix) ->
+    caretStart = @textarea.get(0).selectionStart
+    caretEnd = @textarea.get(0).selectionEnd
+    textEnd = @textarea.val().length
+
+    beforeSelection = @textarea.val().substring 0, caretStart
+    afterSelection = @textarea.val().substring caretEnd, textEnd
+
+    beforeSelectionSplit = beforeSelection.split ''
+    beforeSelectionLength = beforeSelection.length
+
+    # Get the last character in the before selection
+    beforeSelectionLastChar = beforeSelectionSplit[beforeSelectionLength - 1]
+
+    if beforeSelectionLastChar? and beforeSelectionLastChar isnt ''
+      # Append a white space char to the prefix if the previous char isn't a space
+      prefix = " #{prefix}"
+
+    # Update the textarea
+    @textarea.val beforeSelection + prefix + afterSelection
+    @textarea.get(0).setSelectionRange caretStart + prefix.length, caretEnd + prefix.length
+
+    # Focus the textarea
+    @textarea.focus()
+    @textarea.trigger('keyup')

app/assets/javascripts/notes.js.coffee

@@ -283,32 +283,10 @@ class @Notes
   show the form
   ###
   setupNoteForm: (form) ->
-    disableButtonIfEmptyField form.find(".js-note-text"), form.find(".js-comment-button")
-    form.removeClass "js-new-note-form"
-    form.find('.div-dropzone').remove()
-
-    # hide discard button
-    form.find('.js-note-discard').hide()
-
-    # setup preview buttons
-    previewButton = form.find(".js-md-preview-button")
+    new GLForm form
     textarea = form.find(".js-note-text")
-    textarea.on "input", ->
-      if $(this).val().trim() isnt ""
-        previewButton.removeClass("turn-off").addClass "turn-on"
-      else
-        previewButton.removeClass("turn-on").addClass "turn-off"
-
-    textarea.on 'focus', ->
-      $(this).closest('.md-area').addClass 'is-focused'
-
-    textarea.on 'blur', ->
-      $(this).closest('.md-area').removeClass 'is-focused'
-
-    autosize(textarea)
-
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -317,11 +295,6 @@ class @Notes
       form.find("#note_noteable_id").val()
     ]
-    # remove notify commit author checkbox for non-commit notes
-    GitLab.GfmAutoComplete.setup()
-    new DropzoneInput(form)
-    form.show()
-
   ###
   Called in response to the new note form being submitted
@@ -375,34 +348,15 @@ class @Notes
     note = $(this).closest(".note")
     note.addClass "is-editting"
     form = note.find(".note-edit-form")
-    isNewForm = form.is(':not(.gfm-form)')
-    if isNewForm
-      form.addClass('gfm-form')
+
     form.addClass('current-note-edit-form')
     # Show the attachment delete link
     note.find(".js-note-attachment-delete").show()
-    # Setup markdown form
-    if isNewForm
-      GitLab.GfmAutoComplete.setup()
-      new DropzoneInput(form)
-
-    textarea = form.find("textarea")
-    textarea.focus()
-    if isNewForm
-      autosize(textarea)
-
-    # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
-    # The textarea has the correct value, Chrome just won't show it unless we
-    # modify it, so let's clear it and re-set it!
-    value = textarea.val()
-    textarea.val ""
-    textarea.val value
-
-    if isNewForm
-      disableButtonIfEmptyField textarea, form.find(".js-comment-button")
+    new GLForm form
+    form.find(".js-note-text").focus()
   ###
   Called in response to clicking the edit note link
@@ -570,6 +524,10 @@ class @Notes
       # only remove the form
       form.remove()
+    # Remove the note actions
+    actions = form.data('form-actions')
+    actions.clearEventListeners()
+    form.data('form-actions', null)
   cancelDiscussionForm: (e) =>
     e.preventDefault()

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

-= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form gfm-form" }, authenticity_token: true do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form" }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
   = note_target_fields(@note)

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

 .comment-toolbar.clearfix
+  %button.toolbar-button.js-toolbar-button{ type: 'button', data: { prefix: ':' }, tabindex: '-1' }
+    = icon('smile-o', class: 'toolbar-button-icon')
+    Emoji
   .toolbar-text
     Styling with
     = link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1