unlayer / react-email-editor

Drag-n-Drop Email Editor Component for React.js
https://unlayer.com/embed
MIT License
4.51k stars 728 forks source link

Renders twice with latest nextjs #395

Open qixxin opened 4 months ago

qixxin commented 4 months ago

Same issue as #241

import React, { useRef, useState, useEffect } from "react";
import dynamic from "next/dynamic";
import type { NextPage } from "next";

// Assuming the EmailEditorProps and EditorRef are correctly exported from react-email-editor
import { EditorRef } from "react-email-editor";
import templateJson from "./utils/emailTemplate.json";

const EmailEditor = dynamic(
    () => import("react-email-editor").then((mod) => mod.EmailEditor),
    { ssr: false }
);

const TemplateEditor: NextPage = (props: any) => {
    const emailEditorRef = useRef<EditorRef>(null);
    const [isReady, setIsReady] = useState(false);
    const initialized = useRef(false);

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

    const onReady = (unlayer: any) => {
        console.log("onReady");
        if (!initialized.current) {
            unlayer.loadDesign(templateJson);
            setIsReady(true);
            initialized.current = true;
        }
    };

    const onLoad = (unlayer: any) => {
        console.log("onLoad");
        unlayer.init({
            id: "editor-container",
            displayMode: "email",
            customJS: [
                "https://examples.unlayer.com/examples/simple-custom-tool/custom.js",
            ],
        });
    };

    return (
        <div id="editor-container" className="flex h-screen">
            {isReady && (
                <div>
                    <button onClick={exportHtml}>Export HTML</button>
                </div>
            )}{" "}
            <EmailEditor
                editorId="email-editor"
                ref={emailEditorRef}
                onLoad={onLoad}
                onReady={onReady}
                style={{ height: "100%" }}
            />
        </div>
    );
};

export default TemplateEditor;
sarpkayature commented 4 months ago

@qixxin Maybe it's because of react strict mode. Do you have same issue on production?