Set contentWidth to 100%

[KLeo13]

Hello,

I'm trying to set the default contentWidth into 100%. According to here, you can set it using the .setBodyValues. It works initially however, when I go to the Body options, it reverts back to 500px (dafault).

I've also tried adding some eventListener on design:updated however, the issue still persist with the only changes is, it returns to 100% once I leave the Body options

Is there a way I can retain the 100% contentWidth even if I'm in Body options?

Here's my code, its in nextjs .tsx

"use client"
import React, { useRef } from 'react';
import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';

const EmailEditorComponent = () => {
  const emailEditorRef = useRef<EditorRef>(null);

  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
    unlayer.setAppearance({
        theme: 'modern_dark'
    });
    unlayer.setBodyValues({
      contentWidth: '100%'
    })
    unlayer.addEventListener('design:updated', () => {
      unlayer.setBodyValues({
        contentWidth: '100%'
      })
    })
  };

  return (
    <div className='h-full'>
      <EmailEditor ref={emailEditorRef} onReady={onReady} minHeight={'100%'}/>
    </div>
  );
};

export default EmailEditorComponent;

Here are some screenshots

Thank you :)

[officialbatman]

I understand you're looking to maintain a 100% content width in the Unlayer Email Editor, specifically when working within the Body options. Can you try to passing the set body values in the onReady event:

const onReady: EmailEditorProps['onReady'] = (unlayer) => {
        unlayer.setBodyValues({
      contentWidth: '100%'
    })
});

[KLeo13]

Hi @officialbatman, I tried passing only the .setBodyValues on onReady event and I still get the issue

"use client"
import React, { useRef } from 'react';
import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';

const EmailEditorComponent = () => {
  const emailEditorRef = useRef<EditorRef>(null);

  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
    unlayer.setBodyValues({
      contentWidth: '100%'
    })
  };

  return (
    <div>
      <EmailEditor ref={emailEditorRef} onReady={onReady} minHeight={'100vh'}/>
    </div>
  );
};

export default EmailEditorComponent;

record-2024-05-29_10.40.18.mp4

[KLeo13]

I tried clicking the + button and it can only reach up to 900px' when i set the contentWidth` to 900px. It doesn't revert to 500px even when i go to Body Options.

Was the maximum contentWidth only 900px? Is setting it to 100% not possible yet?

[officialbatman]

Try passing the width for the body value in px. For email mode, 900px is the maximum limit achievable by default. Also, try the correct reference for your function, such as:

Your callback should be:

this.EditorRef.current?.setBodyValues({