Force mce view sandbox to clear floated elements inside it

[goldenapples]

Shortcodes that contain floated elements break in preview because the iframe body collapses to zero height, leaving the floated element invisible.

This avoids that problem by using the display: inline-block / overflow: hidden on the body of the wpview iframe.

Addresses the problem discussed in #9.

[goldenapples]

@danielbachhuber thoughts on this, to solve the problem of floated elements in previews being cut off?

[goldenapples]

One thing that I think could be improved on is the width: 100%. I'm fairly sure that by making some creative use of width: fit-content on the body and html elements of the iframe, it should be possible to have inline or floated shortcodes, making the edit preview that much more useful. That probably needs some more work, though, to find the first element inside the iframe, check its float property, and apply that same float property to the wpview-body element surrounding it.

[danielbachhuber]

thoughts on this, to solve the problem of floated elements in previews being cut off?

Seems like a reasonable approach to me. @mattheu ?

That probably needs some more work, though, to find the first element inside the iframe, check its float property, and apply that same float property to the wpview-body element surrounding it.

Related #317 (comment) and #169

I actually chatted with @gcorne (one of the original TinyMCE views authors) a bit today about this non-block element mess. It seems like it might be ripe for a solution :)

[danielbachhuber]

This seems to work pretty well for our immediate needs.