One editor to rule them all

We will be processing a lot of user input within our application. Therefore, it's crucial to provide a pleasant authoring experience to our users. Users need to be able to edit project titles, descriptions, and task titles. Within the commenting system, which we are creating later in this chapter, users also need to be able to edit their comments. We could use regular text area input and work with dialogue boxes to edit those fields, but this seems too old-fashioned for a modern user interface. Native input fields are fantastic, but sometimes they don't provide an outstanding user experience. What we're looking for is a way to edit stuff in-place:

A screenshot of our in-place editor in action, showing the save and cancel buttons

To build our in-place editor, we're going to use the contenteditable API that will enable a user to modify...