Buggy behavior with iframe parts

Enonic version: 6.4.1

We have a part that’s a full-screen iframe. When I drop it into my page, it leads to a few problems:

  • You can’t right click (probably because the click is captured by the iframe instead of the typescript application)
  • Dropping other parts in is hard, but not impossible. But I would hugely appreciate if you can make it work better.
  • You can’t delete the part

If it’s hard to make it work - consider disabling the iframe (not loading its content), and then add a “enable iframe” option to the right click menu to show it.

Here’s my part:

You can always see and select a part with the Page Components (clipboard icon, top-right) while editing content. It opens a tree view of all components on a page. That way you can always delete a part or add another, even when you can’t click it or drop a component in the page editor.

Unfortunately, that doesn’t work in my case. The page components menu starts hanging and everything goes fubar.

Ok, a simple workaround is to render your part differently while in edit mode!

Definitely a possibility! I hate to add that kind of code though - so please consider looking into fixing this.

Another tip! Simply return an empty body, and The page editor will display a placeholder, oneliner!

We’ll see if this can be fixed ofcourse!

How can I check if I’m in edit mode from my controller?

Should be info about this in the request object…

Great, I’ll look into it then :slight_smile:

In object req the property mode is set to the string value live if we are a visitor outside admin. So just check if that is not true =)

if (req.mode != 'live')

Example use:

Hmm, what about preview? Wouldn’t it be better to test for mode != “edit” for standard rendering?

True, preview is a mode too. Tired =p

Hi!
I have an iframe part and it is impossible to select it for edit. When using a component view, there is an error in a console:

Uncaught TypeError: s.hasDescriptor is not a function
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/js/bundle.js:2:1441861
    at Array.forEach (<anonymous>)
    at PageComponentsTreeGrid.fetchDescriptions (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/js/bundle.js:2:1441708)
    at PageComponentsTreeGrid.fetchChildren (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/js/bundle.js:2:1441540)
    at PageComponentsTreeGrid.TreeGrid.fetchData (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:646286)
    at PageComponentsTreeGrid.TreeGrid.reloadNode (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650745)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:651201
    at Array.forEach (<anonymous>)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650903
From previous event:
    at PageComponentsTreeGrid.TreeGrid.reloadNode (https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650767)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:651201
    at Array.forEach (<anonymous>)
    at https://www.website.com/admin/tool/com.enonic.app.contentstudio/main/_/asset/com.enonic.app.contentstudio:1615907211/admin/common/js/_all.js:1:650903
(anonymous) @ bundle.js:2
PageComponentsTreeGrid.fetchDescriptions @ bundle.js:2
PageComponentsTreeGrid.fetchChildren @ bundle.js:2
TreeGrid.fetchData @ _all.js:1
TreeGrid.reloadNode @ _all.js:1
(anonymous) @ _all.js:1
(anonymous) @ _all.js:1
_fulfilled @ _all.js:21136
(anonymous) @ _all.js:21165
Promise.promise.promiseDispatch @ _all.js:21098
(anonymous) @ _all.js:20906
flush @ _all.js:20457
setTimeout (async)
flush @ _all.js:20480

As mentioned above, for parts that are hard to make behave in the page editor, just implement a dummy version when “mode = edit” (you get this information in the request context.