Editor shows edit/remove image buttons when it should not

[sirzooro]

Insert image and set its style to float: right. Enter some text next to it (in the same paragraph). When you click on the text, editor will
show the edit/remove image buttons - see attached image.

When you click on image, buttons are displayed correctly.

I have found this using FF 8.0 and IE 8.

This is possibly related to #16569.

[azaozz]

Seems to be working properly here. Could you paste the exact html from inside the editor (run tinymce.activeEditor.getContent() from the console and capture the output).

[sirzooro]

[19:46:27.366] "<p><img style=\"float: right;\" src=\"​http://i243.photobucket.com/albums/ff144/aloneboyvn/red_heart.png\" alt=\"\" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod velit eget elit hendrerit bibendum. Nunc quis aliquam leo. Quisque vitae quam eu augue volutpat fringilla a eu justo. Aliquam erat volutpat. Sed molestie nulla eget mauris scelerisque tincidunt porta nibh malesuada. Quisque ornare augue a dui luctus venenatis. In ultrices, orci vitae consequat vehicula, urna leo pharetra quam, non elementum magna augue quis eros. Fusce quis magna in ligula congue lacinia nec a lacus. Sed vel feugiat neque. Cras scelerisque ultrices cursus. Phasellus porta venenatis enim, et scelerisque elit scelerisque eu.</p><p>Vestibulum et risus feugiat sem euismod dictum. Praesent in ligula odio. Nulla ut massa eget eros sollicitudin rutrum. Proin malesuada, enim eu euismod euismod, mi purus pellentesque ligula, eget lacinia nisl sapien sed elit. Nulla facilisi. Aenean posuere diam vitae ante rhoncus id tincidunt mi pretium. Fusce neque velit, eleifend id mollis in, bibendum non diam.</p>"

[sirzooro]

Just to be sure, I checked that it also happens with all plugins disabled. I also found that float:left also triggers this - edit/remove buttons appeared when I clicked on text in 1st paragraph.

Code on HTML tab looks as follows:

<img ... /> Lorem ipsum ...

Vestibulum et ...

[azaozz]

Replying to sirzooro:

The difference seems to be:

<img style="float: right;" src="...

vs.

<img class="alignright" title="...

We use classes to align images in TinyMCE, set in ​the "formats" option.

However setting inline style should work too, thinking this has something to do with editor-style.css in the theme.

Edit: actually this shouldn't make any difference. Will look more into it.

[solarissmoke]

This is caused by the following line in wpeditimage/editor_plugin_src.js:

if ( e.target && ( e.target.nodeName == 'IMG' || (e.target.firstChild && e.target.firstChild.nodeName == 'IMG') ) ) {

If you click on anything whose first child is an image (as in the example code above - the image is the first child of the paragraph tag), then it will display the image edit buttons, even if the target has other contents.

Attached patch fixes it (at least in FF 10, Opera 11 and IE 9), and shouldn't mess with the original intention which is to show the image buttons when a container block is clicked.

[azaozz]

In [19984]:

Don't show edit/remove image buttons in the visual editor when an image is floated, doesn't have a caption and there is text in the same paragraph, props solarissmoke, fixes #19611