Bug 16555 - formatBlock inserts unwanted spans
Summary: formatBlock inserts unwanted spans
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.5
: P2 Major
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2007-12-21 04:57 PST by Danny Bloemendaal
Modified: 2011-05-24 23:04 PDT (History)
6 users (show)

See Also:


Attachments
Demonstrates some effects of execCommand (2.23 KB, text/html)
2007-12-21 07:07 PST, Duncan Booth
no flags Details
Shows spurious spans inserted by execCommand (2.23 KB, text/html)
2007-12-21 07:09 PST, Duncan Booth
no flags Details
Blank page for use with attachment 18032 (114 bytes, text/html)
2007-12-21 07:10 PST, Duncan Booth
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Danny Bloemendaal 2007-12-21 04:57:22 PST
From within a console with body in editmode and the cursor in line 2:
=================================
doc.getDocument().body.innerHTML
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p> </p>
doc.document.execCommand("formatBlock", false, "h3")
1
doc.getDocument().body.innerHTML
<p>line 1</p>
<h3><span class="Apple-style-span" style="font-size: 12px; font-weight: normal; line-height: 18px; ">l</span>ine 2</h3>
<p>line 3</p>
<p> </p>
======================
The result is the same if you select line 2.

It gets worse. if I follow it up with another formatBlock, this time for "p" then it inserts not just more span tags but a gratuitous <font class="Apply-style-span" size="3">. font?? font??? ouch!

Bottom line is that it should just insert this:
<h3>line 2</h3>

Trying it with a div, just as bad:
====================

doc.getDocument().body.innerHTML
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p> </p>
doc.document.execCommand("formatBlock", false, "div")
1
doc.getDocument().body.innerHTML
<p>line 1</p>
<div><span class="Apple-style-span" style="line-height: 18px; ">l</span>ine 2</div>
<p>line 3</p>
<p> </p>
================================

/me investigates more
Comment 1 Duncan Booth 2007-12-21 05:14:26 PST
N.B.: doc.document and doc.getDocument() in the quoted console session were just two ways to get at the editable document object.

indent and outdent don't work either.
Here is another console session:

doc.document
[object HTMLDocument]
doc.document.body.innerHTML
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p> </p>
doc.document.execCommand("indent", false, false)
1
doc.document.body.innerHTML
<p>line 1</p>
<blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><span class="Apple-style-span" style="color: rgb(0, 0, 0); line-height: 18px; ">line 2</span></blockquote>
<p>line 3</p>
<p> </p>
==================
at this point it should have been:
<blockquote><p>line 2</p></blockquote>

Now let's try an outdent and hope to see our clean <p> back:
========================================
doc.document.execCommand("outdent", false, false)
1
doc.document.body.innerHTML
<p>line 1</p>
<span class="Apple-style-span" style="color: rgb(0, 0, 0); line-height: 18px; ">line 2</span>
<p>line 3</p>
<p> </p>
======================
Nope, the paragraph is gone. So is the semantic meaning of that line.
Comment 2 Mark Rowe (bdash) 2007-12-21 05:16:29 PST
It would be great if you could attach the examples as HTML files to make it easier to test the behaviour you report.
Comment 3 Mark Rowe (bdash) 2007-12-21 05:39:42 PST
This sounds like a dupe of bug 16004.
Comment 4 Mark Rowe (bdash) 2007-12-21 06:56:38 PST
After looking into this further it's clear that there are multiple issues at play here.  One of them is similar to  bug 16004.  I think we need to split these issues into individual bug reports so they can be addressed.
Comment 5 Duncan Booth 2007-12-21 07:07:37 PST
Created attachment 18031 [details]
Demonstrates some effects of execCommand

This page shows the effect of several execCommand calls. In particular styling a header which is not at the start puts a span around the first character, and indent puts a class name and explicit style attribute on the blockquote tag it inserts.
Comment 6 Duncan Booth 2007-12-21 07:09:46 PST
Created attachment 18032 [details]
Shows spurious spans inserted by execCommand

This is the same as the previous attachment, except the iframe points to a page which has a CSS rule defined for the P tag. As soon as the P tag is styled, we get additional span tags inserted.

(needs the file in the next attachment).
Comment 7 Duncan Booth 2007-12-21 07:10:40 PST
Created attachment 18033 [details]
Blank page for use with attachment 18032 [details]

This is the blankpage.html file referenced by the previous attachment.
Comment 8 Duncan Booth 2007-12-21 07:13:43 PST
The issues appear to be:

formatBlock for a heading tag not at the start of the document inserts a span tag around the first character of the heading.

the indent command inserts explicit styling and a class name for the blockquote tag.

any formatBlock inserts spans for all css which is inherited by the formatted block.
Comment 9 Danny Bloemendaal 2008-01-02 00:38:48 PST
duncan made some tests that shows the nasty span insertions:

http://dev.www.oxfam.org.uk/execCommand.html

Bottom line is that I hope that webkit will emulate firefox. Compare the results in both browsers to see the difference.
Comment 10 Danny Bloemendaal 2008-01-02 00:40:04 PST
Oops, sorry. nevermind my previous post (/me should have read better)
Comment 11 Justin Garcia 2008-01-29 17:48:41 PST
Mark is right, we need separate bug reports for separate issues.  I'm changing this bug to cover the problems with formatBlock:

> formatBlock for a heading tag not at the start of the document inserts a span
> tag around the first character of the heading.

and

> any formatBlock inserts spans for all css which is inherited by the formatted
> block.

Please file a new bug for the indent issue, thanks.
Comment 12 Ryosuke Niwa 2010-12-15 14:29:36 PST
This bug does not seem to reproduce on TOT anymore.

Can we close this bug now?