Visual Editor inserts empty paragraphs before/after captioned images

[markel]

Tested in Safari 5 and Firefox 3 on most recent nightly (as of 10/10/10) 3.1-alpha.

When adding an image with a caption using the Visual Editor, paragraphs containing non-breaking spaces are added before and after the image. This isn't readily apparent in the Editor itself, but is pretty clear when viewing the post.

To reproduce:

1. Create a post that includes any image with a caption in it using the Visual Editor. Publish the post or save the draft.
2. Check the resulting post. You will see the added paragraphs.

Sample code after publish:

Testing an image.

 

[caption id="attachment_48" align="alignnone" width="640" caption="I can rotate things."]<a href="http://26mag.com/wp-content/uploads/2010/10/bungienetshot.png"><img class="size-large wp-image-48" title="bungienetshot" src="http://26mag.com/wp-content/uploads/2010/10/bungienetshot-1024x575.png" alt="" width="640" height="359" /></a>[/caption]

&nbsp;

[markel]

This also affects some styling created using the visual editor. Steps to reproduce:

1. Enter a line of text, then return.
2. Change the style to H3 or any other style, type a line of text, then return.
3. Type a third line of text.
4. Flip to the HTML editor and you will see the non-breaking space.

This doesn't occur in 2.9.2 and seems undesirable, so I'm nudging the severity.

[azaozz]

Replying to markel:
Cannot reproduce either behavior. Are you using any TinyMCE plugins like TinyMCE Advanced with the "Preserve new lines" option turned on?

[markel]

Replying to azaozz:

Cannot reproduce either behavior. Are you using any TinyMCE plugins like TinyMCE Advanced with the "Preserve new lines" option turned on?

I'm not using any TinyMCE-altering plugins; was just able to reproduce it with a captioned image with no plugins installed of any kind.

[designsimply]

Reproduced with r15782.

Steps:

1. Open any post with a captioned image.
   
2. Click in the following order: Update button, HTML tab, Visual tab. Then repeat.
   

---> Each time you repeat, a non-breaking space is added above and below the captioned image.

Screencast example: ​http://screencast.com/t/6qVpiPPMQd

[markel]

You can also cause this to happen by using Paste from Word. Click the button, paste some text, insert it, then publish. As long as you don't swap over to the HTML editor, non-breaking spaces will be added to the pasted text.

[azaozz]

These problems seem to come from a change in behaviour in TinyMCE. When performing a cleanup things like <p><div>....</div></p> are converted to <p></p><div>..., i.e. the invalid <p> tag is closed properly instead of removed.

I'm still working on a proper fix for this.

[azaozz]

(In [15822]) Editor: stop inserting empty paragraphs before/after captioned images, see #15095

[azaozz]

The above patch fixes this when inserting the caption shortcode but is an "after the fact" fix. A proper solution would be part of TinyMCE in collaboration with their dev team.

[markel]

This is still affecting various things. A quick way to see it in action is to add a horizontal rule in the HTML editor, then flip to Visual and back again—two non-breaking spaces will be inserted into your code.

[azaozz]

(In [16394]) Remove invalid parent paragraph when pasting in the visual editor or switching visual to HTML and back, keep multiple empty lines in a <pre> tag, fixes #15095 fixes #15367