react-email-editor: 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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 18 (4 by maintainers)

Most upvoted comments

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

emattson on Nov 12, 2021

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

damiandzwigaj on May 14, 2021

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

damiandzwigaj on Aug 1, 2023

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.

brunolemos on Jan 17, 2024

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

markgustav on Aug 4, 2023

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.

philnwoha on Jul 28, 2023

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

unit147 on Feb 23, 2023

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

pierrelh on Apr 4, 2022

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

Abner97 on Jan 13, 2022

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

chrismccaw on Dec 25, 2021