Drag & Drop tools not working inside iframe

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.

[emattson]

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

[damiandzwigaj]

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