How to Edit custom options on nextjs

[lucaspereirasouzat]

I try run and edit on example but doest change nothing

version 1.7.11

`import React, { useRef, useState } from 'react';
import styled from 'styled-components';

import packageJson from '../../../package.json';
import EmailEditor, { EditorRef, EmailEditorProps } from '../../../src'; // use react-email-editor instead
import sample from './sample.json';

const Container = styled.divdisplay: flex; flex-direction: column; position: relative; height: 100%;;

const Bar = styled.div`
flex: 1;
background-color: #61dafb;
color: #000;
padding: 10px;
display: flex;
max-height: 40px;

h1 {
flex: 1;
font-size: 16px;
text-align: left;
}

button {
flex: 1;
padding: 10px;
margin-left: 10px;
font-size: 14px;
font-weight: bold;
background-color: #000;
color: #fff;
border: 0px;
max-width: 150px;
cursor: pointer;
}
`;

const Example = () => {
const emailEditorRef = useRef<EditorRef | null>(null);
const [preview, setPreview] = useState(false);

const saveDesign = () => {
const unlayer = emailEditorRef.current?.editor;

unlayer?.saveDesign((design) => {
  console.log('saveDesign', design);
  alert('Design JSON has been logged in your developer console.');
});

};

const exportHtml = () => {
const unlayer = emailEditorRef.current?.editor;

unlayer?.exportHtml((data) => {
  const { design, html } = data;
  console.log('exportHtml', html);
  alert('Output HTML has been logged in your developer console.');
});

};

const togglePreview = () => {
const unlayer = emailEditorRef.current?.editor;

if (preview) {
  unlayer?.hidePreview();
  setPreview(false);
} else {
  unlayer?.showPreview('desktop');
  setPreview(true);
}

};

const onDesignLoad = (data) => {
console.log('onDesignLoad', data);
};

const onLoad: EmailEditorProps['onLoad'] = (unlayer) => {
console.log('onLoad', unlayer);
unlayer.addEventListener('design:loaded', onDesignLoad);
unlayer.loadDesign(sample);
};

const onReady: EmailEditorProps['onReady'] = (unlayer) => {
console.log('onReady', unlayer);
unlayer.setAppearance({
theme: 'modern_dark',
});
};

return (

React Email Editor v{packageJson.version} (Demo) — (

GitHub

)

    <button onClick={togglePreview}>
      {preview ? 'Hide' : 'Show'} Preview
    </button>
    <button onClick={saveDesign}>Save Design</button>
    <button onClick={exportHtml}>Export HTML</button>
  </Bar>

  <EmailEditor
    ref={emailEditorRef}
    onLoad={onLoad}
    onReady={onReady}
    options={{
      version: 'latest',
      appearance: {
        theme: 'modern_dark',
      },
      mergeTags: {
        first_name: { name: 'First Name', value: '{{first_name}}' },
      },
    }}
  />
</Container>

);
};

export default Example;
`
I fond the problem is missing projectId but still not works on nextjs

[lucaspereirasouzat]

The problem is with nextjs version