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

app/controllers/legislation/annotations_controller.rb

@@ -31,7 +31,7 @@ class Legislation::AnnotationsController < ApplicationController
       track_event
       render json: @annotation.to_json
     else
-      render json: {}, status: :unprocessable_entity
+      render json: @annotation.errors.full_messages, status: :unprocessable_entity
     end
   end
 
@@ -51,12 +51,11 @@ class Legislation::AnnotationsController < ApplicationController
     end
   end
 
-
   private
 
     def annotation_params
       params
-        .require(:annotation)
+        .require(:legislation_annotation)
         .permit(:quote, :text, ranges: [:start, :startOffset, :end, :endOffset])
     end
 
@@ -67,8 +66,8 @@ class Legislation::AnnotationsController < ApplicationController
     end
 
     def convert_ranges_parameters
-      if params[:annotation] && params[:annotation][:ranges]
-        params[:annotation][:ranges] = JSON.parse(params[:annotation][:ranges])
+      if params[:legislation_annotation] && params[:legislation_annotation][:ranges]
+        params[:legislation_annotation][:ranges] = JSON.parse(params[:legislation_annotation][:ranges])
       end
     rescue JSON::ParserError
     end

app/views/legislation/annotations/_form.html.erb

@@ -9,7 +9,7 @@
 <div class="comments-wrapper">
   <div class="comment-input">
     <%= form_for Legislation::Annotation.new, url: legislation_process_draft_version_annotations_path(@process, @draft_version), remote: true do |f| %>
-      <%= f.text_area :text, autofocus: true %>
+      <%= f.text_area :text %>
 
       <div class="comment-actions">
         <a class="cancel-comment" href="#" data-cancel-annotation><%= t('legislation.annotations.comments.cancel') %></a>