Bug 35935 – contentEditable with <PRE> not wrapping correctly

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: HTML Editing

[Andy]

Hi,

When I enable contenteditable on a div that contains a <PRE> tag it disable word wrapping. Doesn't do this on any other browser. This is Chrome and Safari on Windows and Macs.

Would really like to see this working as I can only use it with an iframe which is horrible.

Cheers,
Andy

[Andy]

Can somebody please at least tell me if I'm wasting my time chasing this bug fix?

[Andy]

Oh well, I'll take the lack of response as a "YES I AM WASTING MY GOD DAMN TIME TRYING TO MAKE THIS BROWSER BETTER - FOR FREE FFS"

Thanks very much for dealing with this and thanks for getting back to me, it's appreciated. Arggghhh!!!

[Ryosuke Niwa]

(In reply to comment #0)
> When I enable contenteditable on a div that contains a <PRE> tag it disable word wrapping. Doesn't do this on any other browser. This is Chrome and Safari on Windows and Macs.
> 
> Would really like to see this working as I can only use it with an iframe which is horrible.

Are you saying that the content in word-wrapping of the div doesn't work if it contains any pre?  That seems to work for me:

<div style="width: 10ex; border: solid 1px black;" contenteditable=""><pre>hello world WebKit</pre></div>

It'll be greatly appreciated if you can give us sample markup that demonstrates the issue.

(In reply to comment #1)
> Can somebody please at least tell me if I'm wasting my time chasing this bug fix?

No, you're not wasting your time.  But we have 350+ bugs just for editing, and it's hard for us to go through every one of them especially you don't cc anyone on the bug.  We have bugs that are 5+ years old and have never been fixed.  In the future, please describe detailed reproduction steps, and cc people who are familiar with the area.   http://trac.webkit.org/wiki/WebKit%20Team has a list of WebKit contributors and their area of expertise.

[Andy]

Please see http://www.milonic.com/bugreports/safari-content-edit.php

you'll see that wrapping changes when you switch contenteditable on and off. But only on webkit based browsers.

Firefox, Opera and IE seem to be ok

[Pravin D]

The cause for the issue is that on webkit we always set word-wrap:break-word for all containers having the attribute contenteditable = true. This not so on FF, IE or Opera. This can be seen by running the code snippet below.

<div contenteditable="true" style="height:50px;overflow:auto;width:500px;">
SOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERTEXT
</div>


Setting the word-wrap:break-word for contenteditable=true was added in the change list : 
http://trac.webkit.org/changeset/12984/trunk/WebCore/khtml/html/HTMLElementImpl.cpp

If we are going to fix it we should either remove word-wrap:break-word for editable containers(heavy re-baseline will be req ) or just fix for the some special case.

However Ryosuke Niwa's opinion is req. on this....

[Ryosuke Niwa]

word-break: break-word has been applied to editable content since http://trac.webkit.org/changeset/7838.

We need to first figure out what other browsers do.

[Pravin D]

(In reply to comment #6)
> word-break: break-word has been applied to editable content since http://trac.webkit.org/changeset/7838.
> 
> We need to first figure out what other browsers do.
>

Initial guess is that other browsers do not enforce any kind of word-wrap/break on editable content.


<div contenteditable="true" style="height:50px;overflow:auto;width:500px;">
SOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERTEXT
</div>

Running the above code snippet will show that the word wraps only on webkit browsers... On IE, FF and Opera its not the case...

[Pravin D]

(In reply to comment #6)
> word-break: break-word has been applied to editable content since http://trac.webkit.org/changeset/7838.
> 

As per our discussion it will be very cumbersome and risky to remove the default setting word-wrap:break-word for editable content. However the author can reset this value of word-wrap using Author CSS to suit his/her purpose. 

Setting the word-wrap:normal on editable contents is buggy.. 
See bug https://bugs.webkit.org/show_bug.cgi?id=89649

[Per Bothner]

Created attachment 437873 [details]
test for incorrect pre handling if contenteditable

Even with explicit style="white-space: pre" the first line (contenteditable) incorrectly wraps.

[Per Bothner]

This may be fixed now - I can't reproduce it on webkitgtk 2.34.5 (appleWebKit 605.1.15). I.e. a pre section with contentEditable set no longer incorrectly wraps.  (The issue title is misleading, unless it is describing something else: The problem used to be "wrapping incorrectly", as opposed to "not wrapping correctly".)

[Darin Adler]

Yes, test page seems to work now. Unclear what changed.

The HTMLElement::collectPresentationalHintsForAttribute function still sets word-wrap to break-word for contenteditable, so the distant descendant of the code that Pravin D claimed was causing this is still present. But something else changed to make this problem go away.