Escapology: multilingual ContentEditable rich text editing

*
Accepted Session
Short Form
Advanced
Scheduled: Wednesday, June 24, 2015 from 4:45 – 5:30pm in B304

Excerpt

VisualEditor, Wikimedia's rich text editor, extends and normalizes browser contenteditable behaviour from Javascript. To work well for all languages, it must satisfy a seemingly impossible set of constraints. This is the story of how we managed.

Description

VisualEditor, Wikimedia’s rich text editor, extends and normalizes browser ContentEditable behaviour from Javascript. To work well for all languages, it must handle:

  • complex glyphs,
  • bidirectional text, and
  • a myriad of different input method engines (IMEs).

But this requirement set gives rise to opposing constraints when fixing up browser ContentEditable behaviour:

  • You must insert new inline tags (like italic) before typing starts. But the cursor cannot sit inside an empty tag pair.
  • It’s unsafe to fixup when the IME is active. But you can’t detect whether the IME is active.
  • You must constrain the selection by preventing some cursor actions. But you can’t predict how far the cursor will move (because of complex glyphs) or in which direction (because of bidirectionality).
  • You must perfom some fixups straight after the native action. But eventListeners run too soon (before the native action); and fixups called by setTimeout run too late.

Satisfying all these at once turns out to be impossible — unless you have a very carefully designed architecture. This talk looks at how we wriggled our editing architecture out of the tight constraints imposed by the browser, Unicode, and arbitrarily capricious IME software.

Also explained is how we handled the problem of automated tests for the many IME+browser+OS combinations, when no available test harness can operate IMEs.

Tags

architecture, i18n, IME, unicode

Speaking experience

I've been giving talks on Open Source since "The Government Gateway and Linux" at UKUUG Linux 2003. Previous talks on related topics include "VisualEditor: The present and future of editing our wikis" at Wikimania 2013, and "Unicode and Internationalization" at PyCon UK 2011.

* http://www.ukuug.org/events/linux2003/prog/abstract-DChan-1.shtml
* https://www.youtube.com/watch?v=hAZavyU5fxI&t=13m45s
* http://pyconuk.net/Workshops/UnicodeAndInternationalization

Speaker