W3C home > Mailing lists > Public > public-webapps@w3.org > April to June 2014

Re: contentEditable=minimal

From: Piotr Koszuliński <p.koszulinski@cksource.com>
Date: Thu, 22 May 2014 12:59:39 +0200
Message-ID: <CAFk9newZjMoG9seKhF3B8oYPWaah5OWhXeSyP_YF3U6Stk=GgA@mail.gmail.com>
To: Jonas Sicking <jonas@sicking.cc>
Cc: Ben Peters <Ben.Peters@microsoft.com>, "public-webapps@w3.org" <public-webapps@w3.org>
Great news and a great idea. I totally second a concept of making
contenteditable simpler and a lot more controllable for us, editors
developers. Even if it would be possible to make cE=true interoperable,
there are cases which depend on editor's logic. For example, in CKEditor
Bold command may be totally blocked depending on content filter settings
(you should not be able to create disallowed content). Similarly, enter,
backspace/delete, end/home, undo&redo, arrow keys, most of CTRL+
keystrokes, context menu, click->select - we already control them totally
or at least in specific cases. And even if related features would become
reliably stable, many times their behaviour should depend on editor's
logic, configuration, and a use case in which editor is used. That's why a
standard and reliable way to intercept them will be very helpful.

Moreover, I understand very well how hard and time consuming maintaining cE
implementation is. And currently we have 4 implementations - one in every
browser engine. Then editors developers override significant amount of that
work. This doesn't make sense. It would be beneficial for everyone if
browser vendors could focus on the necessary minimum and editors developers
on creating an editing framework and specific solutions on top of that. The
frameworks would be something like jQuery for editable. They would simplify
most common tasks, like applying Bold/Italic/etc styles, inserting HTML
into selection, filtering, supporting enter key, etc. All of these
operations are very complex and require rare knowledge about cE, selection,
ranges and deep understanding of DOM.

I was trying to imagine what cE=minimal would be then. CE=true pretends to
be an entire WYSIWYG, from which you need to subtract the things which you
don't like. CE=minimal could be the opposite - a textarea-like field. You
would add your features to it rather than subtract from it. What's more,
for some really basic use cases, like Twitter's "compose tweet" box, it
would be a sufficient base without much additional code.

## What should cE=minimal handle?

1. Selection and caret drawing.
2. Selection API - I know that this is a separate topic, but in order to
make building features on top of cE=minimal acceptably hard (and not
extremely hard), the selection must be improved. I.e. selection in empty
inline elements, selection in empty blocks, selection of non-editable
(cE=false) content and nested editables, bogus <br>s, selection in tables,
selection in multiple frames, etc. All those things are broken now.
3. Typing characters. It works in textarea and I think it should work out
of the box in cE=minimal. Otherwise, cE=minimal will be useless for simple
cases (mentioned Twitter), because you'll always need a pretty complex
library to handle text input. Additionally, I don't remember any problem
with typing characters, so this seems to  work well already in cE=true.
There's also the IME which scares me, but I don't have any experience with
4. Delete, backspace. Here I've got more doubts, because it's now broken in
some engines (merging blocks, deleting inline elements, possibility to
leave paragraph, etc.). But without native support for them cE=minimal
requires JS implementation of them, and taking CTRL modifier into
consideration, the implementation becomes big. So I think that delete and
backspace should also work out of the box, but should implement the
simplest possible algorithm, sufficient to work with paragraphs of text
(Twitter case again). But their behaviour in lists, tables may be
simplified, so the algorithm is generic and may not be good in terms of UX.
That would be customised by editors that need tables and lists and other
fancy features. Note: typing on a non-empty selection may trigger delete
event + type event afterwards, so customising delete will customise typing.
5. Navigating with arrow keys, selection with SHIFT, CTRL modifier. Again,
works in textarea, should work in cE=minimal. Additionally, implementing
up/down keys in JavaScript seems to be extremely hard at the moment.
6. Spell check. When you want a native spell check you cannot override
context menu. When you want custom context menu, you need custom spell
check (which is extremely hard). And context menu is very important for
many users because they used to look there for contextual options, so most
editors override it. Therefore, a way control at least one of them (I guess
it won't be a context menu, though that would be awesome) will be great.

## What should not be handled by cE=minimal?

1. Bold, italic, list, link, blockquote and other commands creating
content. All of them are not crucial for simple cE=minimal use cases.
Additionally, it's controversial whether <b> or <strong>, <em> or <i>,
there are many ways how lists and blockquotes can be created out of
selected contents, etc. You end up rewriting all of them if you need them
in your editor. Therefore, I think it makes sense to not waste time trying
to standardise them and then fix implementations. Those features can be
implemented by the editing framework.
2. Enter key support. My biggest doubt, but I finally put it in this
section. In most basic use cases enter key support is not needed at all and
in all other it must be overwritten. It rarely works as you would expect
and it's pretty easy to implement it in JavaScript for simple use cases.
3. Tables and images resizing. Buggy in these engines which implemented
that, missing in others. And totally uncontrollable.
4. Another thing that browser engines cannot do is trying to be... too
smart? Guess what will happen if you press backspace and then letter in
<strong>x^</strong>. You will have <b>l^</b>. In <a href="">x^</a>? You'll
end up with <u>l^</u> (I love this case!). What's more, after you press
backspace, there's no way to tell that engine will recreate inline element,
because element is removed at that point, so the state is kept in engine
internals. What I'm trying to say is that the state in cE=minimal should be
clear - if an information cannot be retrieved from selection API and DOM,
it does not exist.
5. There should be no native toolbars in cE=minimal (and other native UI
interfering) like the one Safari opens on iOS if you have non-empty

## Not sure about:

1. Pasting, dropping. It's a similar case to enter key, because most
editors have to intercept all that. What some engines paste now is
unacceptable, inserted content has to be filtered according to editor's
setting and for example DnD of block contents should be handled differently
than inline contents. However, without pasting and drop support the idea of
cE=minimal behaving like textarea won't work - it has to work even in the
most basic cases. Intercepting the paste/drop event is easy, but then HTML
insertion is less trivial. So if there will be a reliable command or
method, then I think it does not have to implemented by cE=minimal. BTW.
Developers would also be very glad if browsers were keeping only semantic
data in clipboards, not bazillions of spans with inline styles from which
it's very hard to do anything reasonable even when handling paste manually.

## To sum up.

I see cE=minimal as an implementation of textarea's features in any DOM
element. It should be as minimal as possible, meaning that features you
would not expect from textarea should not be implemented in cE=minimal. At
the same time features required for basic usage (like the "compose tweet"
box on Twitter) should work out of the box if their JavaScript
implementation is hard.

Piotrek Koszuliński
CKEditor JavaScript Lead Developer
Received on Thursday, 22 May 2014 15:24:02 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 18:14:24 UTC