[wp-trac] [WordPress Trac] #31480: TinyMCE resize sandbox iFrame when images load

[WordPress Trac]

#31480: TinyMCE resize sandbox iFrame when images load
--------------------------+-----------------------------
 Reporter:  mattheu       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  TinyMCE       |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31480>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform