Open qixxin opened 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;
@qixxin Maybe it's because of react strict mode. Do you have same issue on production?
Same issue as #241