[html5] pre, contentEditable and newline characters

[Andre "Osku" Schmidt]

Hello list,

you may scroll down if this feels too long.

previously i _always_ abandoned my "web-app" ideas/prototypes pretty
quickly, thinking "why bother? it won't work on most browsers without
individual hacks anyway! web (html, css, javascript) just sucks!"

but with HTML5 (and CSS3) there are so many new cool things that i gotta
learn this right and report bugs on browsers/engines if they don't
behave according to the spec.

here's a current problem where i'm not sure how things should behave:

<pre contentEditable="true"> and the Enter key
==============================================

http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-pre-element
says: "The pre element represents a block of preformatted text, in which
structure is represented by typographic conventions rather than by
elements."

this means in <pre> everything should use a newline character (\n)
instead of the <br> element to represent a line break, right ?

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable
says: "To insert a line break, the user agent must insert a br element."

doesn't this break the <pre> rule above ?

so let's test. here's the html source, <pre> part:
<pre>
hello
world
</pre>

and with javascript let's get the <pre> content with
alert(pre.innerHTML) and here's what i get:
(note: maybe innerHTML does some of this bad behaviour)

chrome
------
on first alert (without editing the <pre> in browser by the user) i get:
hello
world

looks perfect, now lets press enter key after "hello" and i get:
hello<div>
world
</div>

hmm, <div> in a <pre> now that sounds very bad, no ?

firefox
-------
on first alert we get:
hello<br>world<br>

ok, this definitely breaks the rule of <pre>. or innerHTML converts
newline chars to <br> ? i really should check innerHTML rules...

and then after pressing enter key after "hello" we get:
hello<br><br>world<br>

well, it indeed follows the contentEditable rule, but also breaks the
<pre> rule, no ?

opera
-----
before enter key:
hello
world

don't ask me what char that is after "hello" i copy and pasted it from
the alert window...

and then after adding enter before "world" (couldn't get cursor after
"hello"...), i get:
hello
<BR>world

yeah, like firefox, obeys contentEditable rule but breaks <pre> rules.

===================
YOU MAY SCROLL HERE
===================

to make a simpler question:

should pressing enter in <pre contentEditable="true"> add a newline
character rather than a <br> element ?

i know i can use shift+enter to get newline character, but that would
then not allow me (easily) to use a <pre> element as a "textWidget"
known from widget toolkits like gtk+, qt, etc...

but if the current behaviour is ok for most of you (adding a <br>
instead a newline character to <pre>), and it won't definitely be
changed in the spec, anyone care to send a link to a javascript snippet
that changes shift+enter to enter, and works across browsers ? ;P

cheers
Andre "Osku" Schmidt

ps. if you need an use-case, here's a little hobby prototype:
http://osku.de/webapps/regulator/
a simple regex visualizer... adding new lines to the text (with shift
+enter) ATM only works in chrome... another post on that, if i get past
"why bother" ;P