Using AnnotatorJS on Dynamic content in Rails

279 views Asked by At

I am working on implementing the AnnotatorJS library in a rails applications where an Admin user has the ability to Annotate a piece of content, and a lower-level user has the ability to edit that content based on the annotations. I am able to load, create, update, and delete these annotations as the Admin user, however; I am running to a problem when the lower-level user makes edits to that piece of content. It looks like the annotator only uses the range to determine where an annotation is visible. For example:

Imagine that the bolded text is the annotation, the content reads:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus eget urna sit amet facilisis. Aenean luctus odio vitae sapien malesuada, convallis vehicula ligula egestas. Ut quis neque eget mi hendrerit interdum. Vivamus a accumsan nisi, ac lacinia urna. Duis hendrerit justo a lacinia sodales. Phasellus eu maximus elit.

If the user goes in and removes a word or deletes the phrase to follow the instructions of the annotation's comment, the highlighted annotation will move down string and will look similar to this:

Consectetur adipiscing elit. Sed faucibus eget urna sit amet facilisis. Aenean luctus odio vitae sapien malesuada, convallis vehicula ligula egestas. Ut quis neque eget mi hendrerit interdum. Vivamus a accumsan nisi, ac lacinia urna. Duis hendrerit justo a lacinia sodales. Phasellus eu maximus elit.

Ideally, I would want the annotation to go away since I have made edits to that area of the text.

For more reference, here is how my rails models are structured

# Table name: annotations
#
#  id         :integer          not null, primary key
#  version    :string
#  text       :text
#  quote      :text
#  created_at :datetime
#  updated_at :datetime

# Table name: annotation_ranges
#
#  id                  :integer          not null, primary key
#  annotation_id       :integer
#  start               :string
#  end                 :string
#  start_offset        :integer
#  end_offset          :integer
#  created_at          :datetime
#  updated_at          :datetime

JS that I am using to load annotations, I am just loading them through html data attributes, which are defined in the controller:

var annotation;

annotation = $('#annotations-body').annotator({
  readOnly: true
});

annotation.annotator('loadAnnotations', $('annotations-body').data('annotations'));

If anyone has figure out a way to only display annotations where the text in the ranges are equal to the quote that is stored. I would really appreciate some insight. Thank you!

0

There are 0 answers