Bug 12319 – Paste of simple rich text results in way too verbose markup

• Component: HTML Editing
• Status: RESOLVED FIXED

[Dan Wood]

To reproduce:

0. Launch Blot_editableDiv_showSource, my modified version of "Blot" available from <http://dan.karelia.com/webkit/Blot_editableDiv_showSource.zip> with DYLD_FRAMEWORK_PATH pointing to TOT.  (I'm using r18941)

1. Type or paste the following text into a TextEdit document in "rich text" mode:

this is line one
this is line two
this is line three

2. Copy that text from TextEdit
3. Click on the upper panel in the modified Blot
4. Paste

Results: contents of editable div is 

<div><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; font-family: Helvetica; font-size: 12px; ">this is line one</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; font-family: Helvetica; font-size: 12px; ">this is line two</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; font-family: Helvetica; font-size: 12px; ">this is line three</p></div>

There are so many problems with this:
* There is a plain div around the paragraphs.  This doesn't serve anything.  It might be useful to contain styles of what is common about its contents, so that each individual paragraph doesn't have to repeat the same formatting over and over.
* The declarations of the font style are insane.  Just a nice shorthand "font" property would be fine.
* The margin style is terribly verbose; it could be replaced with margin:0;

Expected:

One possibility would be:

<div style="font: 12px Helvetica;"><p style="margin:0;">this is line one</p>
<p style="margin:0;">this is line two</p>
<p style="margin:0;">this is line three</p></div>

(Apparently the paragraphs have to have their margins set for each instance)

[Ryosuke Niwa]

ToT WebKit generates:

<p style="margin: 0px; font-family: Helvetica; font-size: 12px; ">hello</p>
<p style="margin: 0px; font-family: Helvetica; font-size: 12px; ">world</p>
<p style="margin: 0px; font-family: Helvetica; font-size: 12px; ">webkit</p>

Since some old UAs don't support "font" shorthand, it seems like this is the minimal markup we can generate.

I'm closing this bug now since there are million ways to improve the generated markup and the current results look good enough. If you have more specific bug reports, please file new ones.

[Dan Wood]

I hope you don't mind reopening this to reconsider.  This is definitely not minimal, because it doesn't take nested context into account.  How about:

<div style="font-family: Helvetica; font-size: 12px;"> <!-- But only if this div's container is NOT already helvetica or 12px -->
<p style="margin: 0px;">foo</p> <!-- in this case, we want each paragraph to have its own zero margin
<p style="margin: 0px;">bar</p>
<p style="margin: 0px;">baz</p>
</div>

[Ryosuke Niwa]

(In reply to comment #2)
> I hope you don't mind reopening this to reconsider.  This is definitely not minimal, because it doesn't take nested context into account.  How about:
> 
> <div style="font-family: Helvetica; font-size: 12px;"> <!-- But only if this div's container is NOT already helvetica or 12px -->
> <p style="margin: 0px;">foo</p> <!-- in this case, we want each paragraph to have its own zero margin
> <p style="margin: 0px;">bar</p>
> <p style="margin: 0px;">baz</p>
> </div>

I don't think we want do this. The goal here is not to generate the minimal markup. If that were the goal, we must be generating

<a style="font: Helvetica 12px;"><p style="margin:0">foo</p><p style="marin:0">bar</p><p style="margin:0">baz</p></a>

[Ryosuke Niwa]

Also, coercing styles into a new block element is way too complicated to implement. It will also have a side effect when we try to merge blocks later because now we'll have two paragraph separators div and p, and that may prevent WebKit and other engines from properly merging elements in some cases.