Highlight text when creating a comment

app/assets/javascripts/legislation_annotatable.js.coffee

@@ -2,6 +2,42 @@ _t = (key) -> new Gettext().gettext(key)
 
 App.LegislationAnnotatable =
 
+  makeEditableAndHighlight: (colour) ->
+    sel = window.getSelection()
+    if sel.rangeCount and sel.getRangeAt
+      range = sel.getRangeAt(0)
+    document.designMode = 'on'
+    if range
+      sel.removeAllRanges()
+      sel.addRange range
+    # Use HiliteColor since some browsers apply BackColor to the whole block
+    if !document.execCommand('HiliteColor', false, colour)
+      document.execCommand 'BackColor', false, colour
+    document.designMode = 'off'
+    return
+
+  highlight: (colour) ->
+    range = undefined
+    sel = undefined
+    if window.getSelection
+      # IE9 and non-IE
+      try
+        if !document.execCommand('BackColor', false, colour)
+          App.LegislationAnnotatable.makeEditableAndHighlight colour
+      catch ex
+        App.LegislationAnnotatable.makeEditableAndHighlight colour
+    else if document.selection and document.selection.createRange
+      # IE <= 8 case
+      range = document.selection.createRange()
+      range.execCommand 'BackColor', false, colour
+    return
+
+  remove_highlight: ->
+    $('[data-legislation-draft-version-id] span[style]').replaceWith(->
+      return $(this).contents()
+    )
+    return
+
   renderAnnotationComments: (event) ->
     $('.comment-box').offset(top: event.offset)
     $.ajax
@@ -30,14 +66,29 @@ App.LegislationAnnotatable =
     # Clean comments section and open it
     $('#comments-box').html ''
     App.LegislationAllegations.show_comments()
+    $('#comments-box').show()
 
     annotation_url = $('[data-legislation-annotatable-base-url]').data('legislation-annotatable-base-url')
     $.ajax(
       method: 'GET'
       url: annotation_url + '/annotations/new'
       dataType: 'script').done (->
-        $('#new_annotation #annotation_quote').val(@annotation.quote)
-        $('#new_annotation #annotation_ranges').val(JSON.stringify(@annotation.ranges))
+        $('#new_legislation_annotation #legislation_annotation_quote').val(@annotation.quote)
+        $('#new_legislation_annotation #legislation_annotation_ranges').val(JSON.stringify(@annotation.ranges))
+        $('#comments-box').css({top: $('.annotator-adder').position().top})
+
+        App.LegislationAnnotatable.highlight('#7fff9a')
+        $('#comments-box textarea').focus()
+
+        $("#new_legislation_annotation").on("ajax:complete", (e, data, status, xhr) ->
+          App.LegislationAnnotatable.remove_highlight()
+          $("#comments-box").html("").hide();
+          return true
+        ).on("ajax:error", (e, data, status, xhr) ->
+          console.log(data)
+          return false
+        )
+        return
     ).bind(this)
 
   editorExtension: (editor) ->
@@ -59,6 +110,13 @@ App.LegislationAnnotatable =
   initialize: ->
     $(document).on("renderLegislationAnnotation", App.LegislationAnnotatable.renderAnnotationComments)
     $(document).on('click', '[data-annotation-id]', App.LegislationAnnotatable.onClick)
+    $(document).on('click', '[data-cancel-annotation]', (e) ->
+      e.preventDefault()
+      $('#comments-box').html('')
+      $('#comments-box').hide()
+      App.LegislationAnnotatable.remove_highlight()
+      return
+    )
 
     current_user_id = $('html').data('current-user-id')
     if current_user_id == ""