This is a direct-manipulation web editor. I call it a direct-manipulation web editor because the term “direct manipulation” seems to capture best my intention that you should be able to modify your pages on the web just as quickly as you can, with reliable feedback as to how your document is changing. This means that the editor should not wedge any unnecessary steps or decoration between you and your page. To fix a typo, you can do without logins, ribbons, and such until you're finished. The last thing you need is for your page to be bracketed by a horizontal and vertical scrollbar. You do need some consistency so that you can edit in a fluent way: you need a cursor with a predictable appearance and movement, a Backspace, Return, and Space key, and keys (or key chords) to help you enter all of the letters, numbers, and punctuation in your language.
I outlined the problems that a direct-manipulation web editor can solve in a 2011 blog entry.
Try it out: click between any two characters on the page. A cursor will appear. Move the cursor left and right with left- and right-arrow keys. Backspace over the character to the left of the cursor. Type some new characters.
This editor is incomplete, but it is an adequate platform for experimentation. Some of the experiments are quite inobtrusive but helpful, and I will probably have to call your attention to them: for example, I take unusual steps to protect against whitespace that hides in the right margin—a symptom of copy-and-paste from one application to another and cat-sat-on-your-keyboard—and I treat consecutive whitespace characters differently than the custom. Other experiments are front and center: I will experiment here with different treatments of the cursor than usual, and with turning visible character positions that are ordinarily invisible (such as positions held by line breaks and by the empty space between paragraphs).
You will find on this page a curious-looking but helpful cursor not seen (to my knowledge) since 1987, a “split cursor” that indicates individually both the insertion point and the deletion point. (Just in case insertion point and deletion point are unfamiliar jargon: immediately right of the insertion point, the text shifts right when a character is typed, and the new character appears. When Backspace is pressed, the text shifts left to replace the character position immediately left of the deletion point.) The split cursor assumes a fairly conventional whole letter-I shape when the insertion and deletion points are adjacent. When the points are not adjacent because, for example, the cursor is at the start of a new line, then the cursor splits into halves: the left half looks like a left square bracket, ], and the right half like a right square bracket, [.
Experiments for the future include providing selections, mixing read-only and multimedia elements with text, providing multiple selections, evaluating text selections as commands, embedding calculations in a web page, and applying transformations (think UNIX filters) to a document.
I have found it necessary to eschew some web conventions in order to be free to experiment. For example, you will not find a "contenteditable" property on any HTML element in this demonstration. I require more consistency and control than contenteditable presently provides.
There are several bugs in this demonstration that I hope to fix, soon, either in my Copious Free Time or with help from others.
There are many open questions. How should Tab be treated in text that is not whitespace-preserving?
The following verse demonstrates the appearance and function of the editor on a whitespace-preserving text.
Some glory in their birth, some in their skill, Some in their wealth, some in their body's force, Some in their garments, through new-fangled ill, Some in their hawks and their hounds, some in their horse, And every humor hath his adjunct pleasure Wherein it finds a joy above the rest, But these particulars are not my measure, All these I better in one general best. Thy love is greater than high birth to me, Richer than wealth, prouder than garment's cost, Of more delight than hawks or horses be, And having thee, of all men's pride I boast: Wretched in this alone, that thou mayst take All this away, and me most wretched make.
Here are some experiments:
A nested colored span. A link to Google.