The goal of this contenteditable div editor is to be able to:

  1. double-click on words to add a span around it and further functions
  2. highlight range of text (more than 1 word) to do the same as above
  3. add 'note' at point of click

Current approaches used and amount of success:

  1. An earlier working model relied on finding all instances of a string in a given block matching window.getSelection().toString() and comparing their y and x positions in the view. Was a bit of work figuring that out but got it working fine.

  2. Similar principal was applied to sections with more than 1 word. Additionally, what was required was being able to access individual words within the phrase span. Worked mostly but had some unresolved issues before I decided to do a rebuild.

  3. In the new refactored build I want to go through each functionality step by step and make sure its basically 100% reliable. I'd gained a little bit of experience with accessing and manipulating document.getSelection() and am able to insert div wrappers for the note with range.insertNode(), BUT, if clicked inside a word it will split the word and may split it over text rows as well. My idea was to then move the cursor to the end of a given word, but my grasp of textNodes is insufficient and I don't know how much time it would take for me to figure it out, how feasible it is, and what other issues would arise out of using this approach.

Possible Solution:

By replacing all spaces with a DOM element I am able to control exactly where the user can sensibly place the note and to signal it while hovering. Also, and I haven't tested this yet, I imagine the word and phrase selection will be simpler, and potentially more reliable, since every word will now be its own node. Text is not generally going to be immense (rarely more than 300 words) and function duration using regex for 5000 words is acceptable at 50ms.

I'm completely new to web development and learning as I go, so I before I go down this route, I wanted to check that I'm not doing anything too absurd, or if there is a simpler approach I might have missed, given my requirements described above (hopefully its clear enough)

Appreciate any comments, no matter how subjective :)

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.