Container span with drag handle being added to widget after updating to 4.6.1

[Peter Storey]

Steps to reproduce

1. Add some form of widget into a ckeditor
2. Switch to source view and back again

Expected result

Should be the same as before going into source mode

Actual result

It added a container span around the element as well as an image after it that looks like a drag handle. Repeatedly switching between source and html adds more wrappers and more drag handle images, some of which end up being block-level. These elements persist after saving the content of the ckeditor and viewing it outside this context, e.g. the iframe that gets added into the content we're editing can be selected like a ckeditor element even outside of ckeditor.

Other details (browser, OS, CKEditor version, installed plugins)

Tested in chrome and edge. Bug did not happen in 4.5.x, it only took place after updating to 4.6.x.

Has widget plugin installed, both the 4.5.x version and the 4.6.x version exhibit the same behaviour.

The widget in question is a custom google maps plugin which is supposed to output an iframe in a wrapping div. It also takes place when using the oembed plugin, which uses a widget.

[Peter Storey]

What the element looks like with the extra stuff

[kkrzton]

There was similar issue reported #14753. Looking at your screenshot and the jsfiddle demo from #14753 the effect is the same so maybe the cause of the issue is similar? Could you also provide the sample output html which are you getting from CKEditor while the issue occurs?

[Peter Storey]

<span aria-label="div widget" contenteditable="false" role="region" style="width: 500px;" tabindex="-1">
<div class="powermaps"><iframe border="0" class="powermap" height="500" src="/ekmps/data/ckeditor/plugins/powermaps/googlemapsmall.html?lat=53.61491006576629&amp;lon=-2.152478271484366&amp;zoom=12&amp;height=500&amp;width=500" style="border:0" width="500"></iframe>
<div class="powermapMarkers" style="display: none"></div>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" /><span style="background: url(&quot;http://youraccount.ekmpowershop109.com/ekmps/data/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039); top: -15px; left: 0px; display: block;"><img draggable="true" height="15" role="presentation" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="Click and drag to move" width="15" /></span></span>

This is the output I'm getting. The div.powermaps and everything within is what you'd expect, everything around it is the stuff causing the problems.

[Peter Storey]

By the way, my temporary fix has been to put a function in our data processor to unwrap both the elements we have as widgets, which is very hacky and unpleasant.

I already tested the data processor, commenting out the whole file the problem persisted.

[Jakub Ś]

The oembed plugin is a third-party plugin but I have decided to give it a try anyway and could not reproduce the problem even after multiple switches. There was only one handler all the time.

I have next tried same test case with ACF disabled but the result was the same. I have tried CKEditor 4.6.1 and 4.6.2.

	allowedContent : true, 
	extraPlugins : 'oembed'

@bunnielovekins are you still able to reproduce this issue? Could you perhaps try reproducing it in standalone CKEditor outside of your application in order to exclude the influence of third party scripts? Please also try using default CKEditor setup with necessary extra plugins only.