3

I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.

I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).

These are the ideas I'v tried so far:

  • Using the rangy serializer to serialize the range. The problem with this approach is that the DOM is changing each time a new comment/suggestion is added, and therfore not allowing for a successful deserialization.
  • Using the rangy selection wrapper and save that directly in the database, but like the idea above, the target elements content is changing with each comment/suggestion, which again makes the approach not work as intended.

Any suggestions to how I could solve this problem would be appriciated.

TheNish
  • 330
  • 3
  • 15

1 Answers1

3

I haven't used rangy. But here is one way I would approach it.

  1. Get a selected text from a element (tutorial here)

  2. Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)

  3. Then show a form to enter comments.

  4. On Submit, send the span id and comment to server and store it in database.

  5. When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.

  6. This will give you a system like google document where you can comment on text.

Let me know if that helps or you need more explanation on how to accomplish individual steps.

Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.

Shaunak
  • 17,377
  • 5
  • 53
  • 84
  • Thanks for the respons, but my problem lies not in getting the selected text and saving that in a database. The problem is to find a way to get the the selected text range, then saving that range in a database (or any other format), so when another user sees the page with the given text, the system can retrieve the text selection ranges from the database, and re-add them to the text. – TheNish Aug 15 '13 at 16:30
  • After a second read-through, I think i better understand what your approach is all about. If I'm right, you want to alter the text itself, and save the text with span wrappers that has unique id? In that case I can see how that would work, but I would prefer not to alter the original text. – TheNish Aug 15 '13 at 16:57
  • that's right. Its like putting the document in review mode in word. Adding wrapping spans is not really changing the text. But in any case When a suggested change is resolved you can remove the spans. – Shaunak Aug 15 '13 at 17:01
  • there is another way you could do the same thing without adding spans. You can easily find out the selected text. Then you can find out the position of the selected within orignal text using indexOf and length. You can then save these points in your database against comments. – Shaunak Aug 15 '13 at 17:03
  • That idea is similar to my second idea. The issue with doing that, is that for each new comment/suggestion that is added to the text, there is dynamically added span wrappers around the target text, to hightlight it. So when you get to the second commment/suggestion, the original text would have changed. Maybe I didn't explain my question thorough enough, but I hope you have an idea of what I am trying to accomplish. – TheNish Aug 15 '13 at 17:11
  • Did a quick implementation of your suggested approach, and it actually seems to be a good way to go. So I'm accepting your answer, even though my brain still can't stop trying to resolve the problem I presented. – TheNish Aug 15 '13 at 17:44
  • Correct me if I'm wrong @Shaunak, but on step 5 when you talk about re rendering. Because that span was created dynamically, when the page refreshes or when some other client access that same page, that span would no longer be there right? That's the one thing I just don't understand. Everything else makes sense. – Scott Moss Nov 23 '15 at 06:16