Rich text in notes
This has been on the todo list for a long time now so it is good to finally get it delivered. Understandably enough, people sometimes want to write notes using rich text, with bold, different fonts, indentation, bullets and the like. We've always used those effects ourselves just by writing the html tags in the note but that's obviously not everyone's cup of tea.
So, after a brief foray into the world of rich text editors, there seem to be two possible approaches:
- Trust the browser, set the "contentEditable" property on a page element and just provide buttons and choices to expose what it is capable of.
- Don't trust the browser and do everything yourself: record the cursor position and key strokes and modify the DOM tree accordingly.
Each has its pros and cons for the user. Browser support for contentEditable is variable and it only exposes a certain set of operations. But what it does is done at a pretty low level and very responsive. The DIY route lets you give a more uniform behavior across browsers and lets you give users choices that aren't supported with contentEditable. But on a slow machine the indirectness could make it sluggish in some cases, and when you're typing fast even a slight delay could be noticeable.
For the developer of course, there's a pretty big difference: in one case you're just adding some buttons to control the content editing API. The other involves writing a whole new DOM editor (though for A.nnotate a lot of that code is similar to what goes on with HTML text annotation already). Among rich text editors out there, NicEdit seems to take the first route and TinyMCE the second. Both make a very nice job of it.
For A.nnotate we settled on the first route since user demands for rich text in notes are likely to be fairly light compared with some other applications, and we hope that browser support will only get better with time.
Buttons at the top of the note editor switch between plain
and rich text editing.