Bug 16555 – formatBlock inserts unwanted spans

• Component: HTML Editing
• Status: RESOLVED WORKSFORME

[Danny Bloemendaal]

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

[Duncan Booth]

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.

[Mark Rowe (bdash)]

It would be great if you could attach the examples as HTML files to make it easier to test the behaviour you report.

[Mark Rowe (bdash)]

This sounds like a dupe of bug 16004.

[Mark Rowe (bdash)]

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.

[Duncan Booth]

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.

[Duncan Booth]

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).

[Duncan Booth]

Created attachment 18033 [details]
Blank page for use with attachment 18032 [details]

This is the blankpage.html file referenced by the previous attachment.

[Duncan Booth]

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.

[Danny Bloemendaal]

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.

[Danny Bloemendaal]

Oops, sorry. nevermind my previous post (/me should have read better)

[Justin Garcia]

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.

[Ryosuke Niwa]

This bug does not seem to reproduce on TOT anymore.

Can we close this bug now?