TinyMCE resize sandbox iFrame when images load

[mattheu]

Possible bug - If an MCE View contains an image, and the view is sandboxed, the iFrame is not resized correctly to fit the image.

The reason for this is that the iFrame is resized using a MutationObserver. This is only triggered when a new element is inserted, or an attribute changes. But not when an image loads.

Fix - do resize on image load event. This could be done very simply like so:

$( iframeDoc.body ).find('img').load( resize );

However

• This functionality would need to be duplicated inside the MutationObserver callback to handle any images that are added later.
• I noticed that we can't rely on the MutationObserver callback alone because this is set up AFTER the iframe is created and the content added.

I think the solution here should be

1. In the mutation observer calback we should check for new image elements, and trigger resize when that image loads.
2. Set the mutation observer BEFORE the content is added to the iFrame so this gets triggered by the main preview body content. To do this the MutationObserver needs to observe iframeDoc and not iframeDoc.body

Any thoughts?

[iseulde]

Thanks!

[iseulde]

I'll look into this too together with all the rest. :)

[mattheu]

Refreshed patch

[iseulde]

I first need to know why this happened: [29615] (the change to body). @wonderboymusic?

[wonderboymusic]

Post Formats - when you click one, it changes the TinyMCE body class, see 2013 theme

[iseulde]

@matheu We can't use foreach because IE < 9 does not support that. In any case while would be the fastest here. And resize; needs parentheses. :)

Here's something we can use to test:

views.register( 'img', {
	content: '<!--<script--><img src="http://deelay.me/200/s.w.org/about/images/logo-comparison.png">'
} );

[iseulde]

Does the last patch work for you?

[mattheu]

Works OK for me!

[iseulde]

@azaozz, how does this look?

[azaozz]

As far as I see we only need to add resize to the sandbox iframe window.onload.

What would be the user case to support resizing after the view has been fully loaded? Keep in mind that this will disrupt the users if they are typing under the view, especially if another image is loaded 30 sec. later, etc.

[azaozz]

31480.2.patch seems to work well here.

[iseulde]

Works for me if the images is not inserted later.

[mattheu]

Doesn't actually fix my issue, although it does work for the testcase provided by @iseulde.

My problems is actually with a local image that is loaded normally. I think the image has already loaded before you're attaching resize to the load event.

I think the simplest way to get around this is to call resize manually after creating the iFrame, as well as listening for the load event on the iFrame window. I'm adding another patch.

Do you think we should debounce these calls to resize?

[iseulde]

Do you think we should debounce these calls to resize?

The callback is only called once.

I think the image has already loaded before you're attaching resize to the load event.

Wouldn't moving it before iframeDoc.write work?

[mattheu]

Hmm - after testing some more - I think the fix by azaozz does work OK :)

[iseulde]

Maybe better to add it before writing the document?

[mattheu]

Maybe better to add it before writing the document?

Makes sense. Tested and works fine for me.

[azaozz]

In 32056:

TinyMCE wpView: resize sandbox iframes on load. Fixes a problem with resizing after all images are loaded.
Props iseulde, mattheu. Fixes #31480.