!! Editable + Highlightable text

[rihakd]

LINKS:

• code mirror is a framework designed specifically for this?
• Edit area is a free .js editor for source code
• Stackoverflow same issue
• ! Same issue : try it!
• jsfiddle example
• WORKS! jsfiddle
• another Stackoverflow solution

[rihakd]

To make sure that the program flow is satisfied when working with the editable window, on each click check the position of the cursor relative to its parent Node. If the parent is the div => we are outside a word. If parent is span => we are inside word, so this should be the easy case. Although what about the case when we click on index one inside a span.

[rihakd]

In this comment I want discuss a few scenarios in the editable area:

1. Click in a random place in text
   • Click in the beginning of a non-span
   • Click at the end of a non-span
   • Click in the middle of a non-span text, which is only possible when multiple " "
2. Press key
   • Press any normal key after " "
   • Press any normal key after a normal char
   • ... to be continued