Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to change displayMode #195

Closed
wants to merge 4 commits into from
Closed

Ability to change displayMode #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a21573
Ability to change displayMode
lucasbesen May 27, 2021
2d46252
Add displayMode property example
lucasbesen May 27, 2021
f6b4b67
Merge branch 'master' into feat/display-mode
lucasbesen Feb 10, 2022
fccec89
Allow passing displayMode to options prop
brunolemos Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const App = (props) => {
// you can load your template here;
// const templateJson = {};
// emailEditorRef.current.editor.loadDesign(templateJson);
}
};

const onReady = () => {
// editor is ready
Expand All @@ -61,7 +61,12 @@ const App = (props) => {
<button onClick={exportHtml}>Export HTML</button>
</div>

<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} />
<EmailEditor
displayMode="web"
ref={emailEditorRef}
onLoad={onLoad}
onReady={onReady}
/>
</div>
);
};
Expand Down Expand Up @@ -90,6 +95,7 @@ See the [example source](https://github.com/unlayer/react-email-editor/blob/mast
- `tools` `Object` configuration for the built-in and custom tools (default {})
- `appearance` `Object` configuration for appearance and theme (default {})
- `projectId` `Integer` Unlayer project ID (optional)
- `displayMode` `String` configuration for display mode (`web` or `email`) (default `email`)

See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.

Expand Down
4 changes: 3 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export default class extends Component {

loadEditor = () => {
const options = this.props.options || {};
const displayMode =
this.props.displayMode || options.displayMode || 'email';

if (this.props.projectId) {
options.projectId = this.props.projectId;
Expand All @@ -55,7 +57,7 @@ export default class extends Component {
this.editor = unlayer.createEditor({
...options,
id: this.editorId,
displayMode: 'email',
displayMode,
Copy link
Member

@brunolemos brunolemos Jan 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need a new displayMode prop, we already have the options prop for that. so we could revert this displayMode prop and do this instead:

-displayMode: 'email',
+displayMode: options.displayMode || 'email',

but if we do want a new displayMode prop, currently it's ignoring if the user pass it via the options prop. so we should do something like this:

-const displayMode = this.props.displayMode || 'email';
+const displayMode = this.props.displayMode || options.displayMode || 'email';

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lucasbesen @adeelraza ^

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pushed a commit with the second option above.

source: {
name: pkg.name,
version: pkg.version,
Expand Down