For the plain text like introductions or short descriptions we use TextArea property. It could be useful for editor to see how many characters and words he already typed. It gives an overview of how much space for new value is required. That’s why I decided to implement property TextArea with statistics.
TextArea with statistics

To implement new property I didn’t extend standard TextArea property, because it’s just an input widget with no wrapping DIV element. So there was no place to add another element with statistics. The new editor was created from scratch. It has own widget, template and styles.
In Alloy demo there is StringList editor. It also use textarea as editing widget, so it was a good starting point for my property.

The widget connects textarea with onChange, onKeyDown and onKeyUp events to calculate statistics. To count characters I simply took length of text and for words and lines I used regular expressions.

Template use data-dojo-attach-point attributes to allow widget to access DOM nodes and update HTML.

There is also CSS styles file.

To use new property we need to set textAreaWithStatistics.textAreaWidget as editing class.

Using textarea with statistics
The full source code is available on Gist.