textarea.js

This is mainly about v0.3, as of this writing the dev branch of MathQuill.

textarea.js is our new pain-free cross-browser keyboard and clipboard events normalization library, isolated from the rest of MathQuill. It uses no browser sniffing and normalizes both the data and the timing.

It provides "textarea manager", an abstraction layer wrapping the textarea in an object with methods to manipulate and listen to events on, that hides all the nasty cross- browser incompatibilities behind a uniform API.

Design goal: This is a hard internal abstraction barrier. Cross-browser inconsistencies are not allowed to leak through and be dealt with by event handlers. All future cross-browser issues that arise must be deal with here, and if necessary, the API updated.

According to this excellent resource and our own testing, the keyboard events browser inconsistencies affecting this project are as follows:

• In most browsers,
  • only on keydown is it possible to preventDefault(), and only with the keydown event object is it possible to reliably tell special keys (like arrow keys, backspace, tab etc.) apart from text entry
    • e.g. on keypress the keycodes for the left, up, right and down arrow keys are identical to that of %, &, ' and (, respectively
  • but it's only possible to reliably tell what character was typed by checking the textarea immediately after the keypress event
    • in fact even the jQuery-normalized event.which on keypress is unreliable, for example on the French keyboard the backslash \ (crucial to MathQuill) is typed with Ctrl+Alt+8, which for all a web app can tell is a browser or OS shortcut #11
• Unfortunately,
  • some browsers, for special keys, only fire keydown
    • (WebKit, Internet Explorer)
  • some browsers, when you hold down a key, only repeatedly fire keypress
    • (Opera, Firefox 3.6 and earlier)

Here's a state diagram of the event handlers' logic: (Click to enlarge)

This is simpler than it looks, there's a lot of duplication because the algorithm is basically being described casewise, but it boils down to very little code.

To be a bit more verbose, consider the following 4 states that the textarea could be in:

• Empty
• Containing a single character that was just typed
• Containing text that was just pasted in
• Containing a selection