Drag & Drop tools not working inside iframe

[bodanu]

I'm using react-email-editor rendered inside an iframe, which is by itself rendered in another iframe as an embeded app. The component renders without errors or warnings, but none of the drag-and-drop features work.

No errors show up when dragging and dropping either. Is this an expected behaviour being used this way? Or is it an issue.

"react-email-editor": "^1.2.0", "react": "^17.0.2", "react-dom": "^17.0.2",

Code used:

import React, { useRef } from 'react';
import { render } from 'react-dom';

import EmailEditor from 'react-email-editor';

const NewMail = (props) => {
    const emailEditorRef = useRef(null);

    const exportHtml = () => {
        emailEditorRef.current.editor.exportHtml((data) => {
        const { design, html } = data;
        console.log('exportHtml', html);
        });
    };

    const onLoad = () => {
        // you can load your template here;
        // const templateJson = {};
        // emailEditorRef.current.editor.loadDesign(templateJson);
    };

    return (
        <div>
        <div>
            <button onClick={exportHtml}>Export HTML</button>
        </div>
            <EmailEditor
            ref={emailEditorRef}
            onLoad={onLoad}
            options={{}}
            />
        </div>
    );
}

export default NewMail;

Later edit:

This seems to happen only when using Chrome.

[damiandzwigaj]

We have similar problem but in our case unlayers editor.js file breaks every drag & drop events in our react application

[emattson]

Any update on this? I'm seeing the same issue intermittently in chrome as well

[chrismccaw]

I need an update on this as well. We cant use this until this is fixed

[Abner97]

Same problem here, Drag and Drop not working on Chrome.

[pierrelh]

Same problem here, seems also to be on Chrome and MacOS

[unit147]

Same problem, angular-email-editor 0.9, Chrome MacOs

[vcdotwine]

We are facing the same issue. Chrome latest version. Mac OS.

Any workarounds or ETA on a fix?

[philnwoha]

Hi we just had a client encounter this issue, can confirm it seems to be related to chrome. Using Safari, Edge, Firefox or Brave does not seem to encounter the issue. Since chrome is the most popular browser I would imagine this would be relatively high priority. Its understandable that most users would not use an iframe but there are some cases where this is needed especially when integrating with third parties. Please note we are not using react at all. We are using vanilla js.

[ckeyes88]

Has this been resolved or identified? We're seeing this as well.

[damiandzwigaj]

Has this been resolved or identified? We're seeing this as well.

I posted the issue long time ago https://unlayer.canny.io/bug-reports/p/email-editor-affects-dragging-of-other-components-in-the-application and they marked it as complete so guess they wont fix it

[markgustav]

We're experiencing this in our app and hearing from customers who are unhappy they can't use Chrome. Can we get some acknowledgment, Unlayer, with an estimation of when it will be remedied? Thanks.

Also, another post referencing this in your bug reporting tool: https://unlayer.canny.io/bug-reports/p/unable-to-drop-element-in-the-content-on-macos-x-chrome

[adeelraza]

This issue is mostly related to a bug in Chrome where dnd doesn't work in case of an iframe inside an iframe. Because Unlayer works inside an iframe already, if your app works inside one too then it triggers the Chrome bug.

@markgustav is your app inside an iframe?

[markgustav]

That may be the issue @adeelraza. I'm going to check with my dev team. We're a Shopify app and we're loading the editor inside of their admin.

[markgustav]

Yep, that's it @adeelraza. Do you have any plans to remedy this situation or is it something that can't be fixed?

[adeelraza]

@markgustav we will internally do some research again whether there's an available remedy on this. I believe this is an active bug in the chromium database. Let us know if you or anyone here finds a possible workaround / solution.

[brunolemos]

After some internal investigation we found this issue is caused by a Chrome security feature called Site Isolation, which disables some browser features across iframes from different domains.

We are currently monitoring their bug discussion as it seems there was finally some recent activity after many years being stale.

The current workaround can only be done on a per-machine basis, which invoves disabling the Site Isolation browser feature. You can go to the chrome://flags/#site-isolation-trial-opt-out URL and disable it there:

We'll keep revisiting this from time to time and researching workarounds that could be applied to all users.

[markgustav]

Thanks @brunolemos for posting this. This workaround will be somewhat helpful until a more permanent solution can be discovered.

[brunolemos]

This issue has been fixed in version 1.5.50!

Thanks everyone for the report. Please try it out and let us know if it's working fine for you inside your iframes.