viernes, 27 de enero de 2012

What DOM Rich Text still does not do? - versions plan

Several features are not available on DOM Rich Text, that is because it is still a working draft. Of course those features are in the plan. So there are two possibilities: 1) wait, 2) collaborate. The following is a tentative schedule for the development of versions
DateversionFeature
2012-02-150.1Bug free on IE8 of current features
2012-03-300.2Rich Paste and Copy from selected with more events related
2012-06-150.3Complete Table manipulation with more events related
2012-08-300.4Extensive style detection and manipulation
2012-10-150.5Find and Replace with Regular Expression
0.6Image manipulation with dropping and rotating (taking advantage of CSS3 and HTML five novelties)
0.7Formula insertion and editing1
0.8Dictionary and thesaurus architecture to allow spell and grammar checker, synonyms, antonyms, hyphenation and other language-related
0.9Minimal SVG manipulation
1.0Form operations
1.1Page operation (heading, footing, page break, footnote, page sizing, etc.)

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.  

What is DOM Rich Text?

DOM Rich Text is an alternative to the classical solution of an IFRAME with designMode activated or an element with ContentEditable activated. It relies in an object that allows the developer to work with multiple div tags in a document that can be edited through keyboard, mouse and several methods of the drt object, a javascript Object that controls the DOM structure of the area to edit.
DOM Rich Text is not a WYSIWYG Editor, but it is the canvas to construct it. Any javascript developer that entered to the world of rich text edition knows that there are a lot of limitations, obfuscations and browser incompatibilities with the classical approach, the solution always falls on the different already-made editors which deal with execCommand method problems. But, despite the beauty and completeness of those editors, many developers like me find themselves limited to what "designMode=true" can do.
Obviously, DOM Rich Text is not aimed to a simple-to-put interface, but it has a lot of methods (and will have more), that allow the developer to control the canvas that have the rich text. The current version of the code is distributed under the MIT licence.
DOM Rich Text uses extensively comunes0_6.js, a javascript framework developed and maintained by myself, it has a lot of functions and prototyped methods that are very common in the javascript development. Perhaps in the future, mostly if I have collaborators, I will turn the basement to jQuery, Prototype or other popular framework.
Properties, Methods and particular Events are named by Spanish complete or truncated words, it is because it allows me to avoid reserved words maintaining the meaning. This document contains a table of equivalences to allow a better comprehension.