destination url":"/webapps/blackboard/content/list contenteditable

by Dr. Kristian Quitzon IV 3 min read

Version 4.9.10 April 23, 2020

fixed an issue where the editor selection could end up inside a short ended element (eg br).

Version 4.9.9 March 25, 2020

fixed the table selection not functioning correctly in Microsoft Edge 44 or higher.

Version 4.9.7 December 19, 2019

fixed the visualchars plugin converting HTML-like text to DOM elements in certain cases.

Version 4.9.6 September 2, 2019

fixed image browse button sometimes displaying the browse window twice on mobile.

Version 4.9.4 March 20, 2019

fixed an issue where Home/End keys wouldn't move the caret correctly before or after contenteditable=false inline elements.

Version 4.9.3 January 31, 2019

added a visualchars_default_state setting to the Visualchars Plugin. Patch contributed by mat3e.

Version 4.9.2 December 17, 2018

fixed a bug with pressing the space key on IE 11 would result in nbsp characters being inserted between words at the end of a block.

Caret Navigation in Web Applications

A little over two years ago, I left Google. In my farewell blog post, I noted:

Caret navigation in Google Tasks

In a normal text editor, when you use the up or down arrow keys to navigate between lines, the editor generally does its best to preserve the x-coordinate of the cursor as the y-coordinate changes. For example, consider navigating the cursor downwards through following chunk of text starting from the middle of the word "little:"

Additional challenges

The previous section explained the basics required to emulate native cursor movement in a web application. This section discusses a number of additional product requirements imposed by Google Tasks that made the problem even more difficult.

Testing caret behavior

Implementing the caret-positioning logic was fairly complicated: there were many edge cases it had to tolerate and a lot of browser-specific code under the hood. Once you finally solved an edge case on one of the browsers, you were more than happy to write a test for it because you would want to be alerted to any sort of regression.

The big picture

Although I am extremely excited about the community's recent progress in providing (and documenting!) better tools for building web applications, I think that it is important to remember that using the latest and greatest tools is not sufficient to guarantee the best product.