How does DOM Rich Text works?

DOM Rich Text explode all the text content into SPAN elements, each one with one character, images (IMG) and breaking lines (BR) are not embedded in SPAN, but are parts of the history. The caret is also an SPAN element that is a child of document element and blinks thanks to a setInterval instruction. Caret is not invasive, it is displayed in an absolute position over elements, this characteristic allows browsers to read SPAN sequences as words.

DOM Rich Text starts an object that has a lot of necessary properties for the performance of different canvas. Each canvas is composed by:

• A hidden input with the original div's id that contains the XHTML updated when user focus out of canvas
• A Div itself which change its id after it is activated, and receive mouse events
• A Tiny and no-opacity input text that receive the key events

When user down, move or up the mouse on the div, the Tiny input receives focus and wait for a client's key event and do whatever function is attached to that keydown or keyup event. So avoid to use focus and click event in the div, it will not work as expected. However, events are other advantage of DOM Rich Text, because it implements a lot of new events (they are not really Event objects, but they trigger whatever are attached to them) that allows developers to attach functions to them.

Selection is also virtual because I saw some limitation with .getSelection and .getRangeAt interfaces. At the beginning I tried to work over Tim Down's masterpiece named Rangy, but I found problems with unicode characters, so I decided to turn it to SPAN+className. Parent elements are not selected, but by their displayed content which 'drt_letra' className becomes 'drt_letrasel'.

For practical reasons, I separated the marked elements from registered selections (ranges). It may be more difficult to understand, but it allows to do multiple selections, have different approaches to selections, drag and drop and other operations.