unlayer / react-email-editor Goto Github PK

Hi
I have just installed the latest version of react-email-editor.
Initializing the email editor working fine, however when i try to log the json / html output of the email it does not invoke my callback methods passed to saveDesign / exportHtml methods. There are no errors in the browser console either.

Can someone please help?
Below is some sample code that i am using to print the data

saveDesign = () => {
// this is logged in console
console.log('inside saveDesign');
this.editor.saveDesign((data) => {
// DOES NOT COME HERE
console.log(data);
});
// this gets logged, means the method is called fine
console.log("Design JSON has been logged in your developer console.")
}

exportHtml = () => {
// this is logged in console
console.log('inside exportHtml');
this.editor.exportHtml(data => {
// DOES NOT COME HERE
const { design, html } = data
console.log('exportHtml', html)
})
// This gets logged fine
console.log("Output HTML has been logged in your developer console.");
}

React version i am using is 16.6.3

Hey guys, Im unable to load JSON design via onLoad prop. However, I am able to load JSON manually using the same function called by the onLoad prop by pressing the load button once the editor is loaded. Below is my code an error message.
Im loading in the JSON via redux but I make sure the template json data is defined before rendering EmailEditor.

class Template extends Component {
  componentDidMount () {
    Promise.resolve (this.props.getTemplate ('emaily'));
  }
  loadDesign = () => {
    this.editor.loadDesign (this.props.template);
  }
  render () {
    return (
         // manual load button
        <button onClick={() => this.loadDesign ()} className="btn right">
            load
        </button>
        <EmailEditor
          onLoad={() => this.loadDesign()}
          //or
          //onLoad={this.loadDesign}}
          ref={editor => (this.editor = editor)}
        />
      </div>
    );
  }
}

function mapStateToProps (state) {
  return {template: state.template.currentTemplate};
}
export default connect (mapStateToProps, actions) (TemplateRF);

Error message if .....onLoad={this.loadDesign}
Uncaught (in promise) Error: Minified

Error message if .....onLoad={() => this.loadDesign()
Uncaught TypeError: Cannot read property 'get' of undefined
at editor.js:2
at l.configureFinalMapState (editor.js:2)
at l.computeStateProps (editor.js:2)
at l.updateStatePropsIfNeeded (editor.js:2)
at l.render (editor.js:2)
at d._renderValidatedComponentWithoutOwnerOrContext (editor.js:2)

I tried the demo
http://react-email-editor-demo.netlify.com/

It works in Firefox, but does not work in Chrome and Safari. It only shows a top bar.
Chrome 65.0.3325.31
Safari 11.0.3

Is there a way to change the S3 credentials that are used with this? I am not seeing a way to send that.

This makes all the images appear stretched and low-resolution.

Hey, Is there any way to cancel the limitaion on uploading an image, to another storge?
Now, If I try to upload an image to my storge it gives me this error message : "There was an error uploading your image. Make sure it's a valid image file with size under 1 MB."

After I have installed the package, the compiler gives to me this error, anyone knows how fix it??

Would you all consider making mixpanel opt-in. Those of us needing to comply with GDPR need full control over what data about our users is sent to third parties.

Hi guys,

sorry for writing this question here, but your support didn't answer me.

I'm trying to create a custom tool, but I can't understand how to make "contenteditable" work with tool's properties.

Is it possible at all?

Best wishes,

Dmytro.

I'm facing the issue when i append the editor second time on page then editor append in first editor div
Can any help me out how i can initialize multiple editor without merging with each other
Thanks

Trying to figure out why onDesignLoad is being called a gazillion times.

Code is after loading persisted json into the editor and used in the exact same way as the demo code.

        <EmailEditor
          ref={editor => this.editor = editor}
          onLoad={this.onLoad}
          onDesignLoad={() => this.onDesignLoad()}
        />

  onDesignLoad = () => {
    const { json } = t
    const parsedJson = JSON.parse(json)

    console.log('on design load called')

    this.editor.loadDesign(parsedJson)
  }

I am opening this issue because this is still not working with me on React 16. The exact same code was working fine on React 15. I am on

"react": "^16.3.2"
"react-dom": "^16.3.2",
"react-email-editor": "^0.8.1",

and i keep getting this error even with the sample README code:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

When I include the editor and we try to edit the button text, the text does not type until a backspace or left or right is pressed.

Could be nice to add justify to the valid values of the Text Alignment Property Editor : https://docs.unlayer.com/custom-tools/property-editors/#text-alignment

(Current valid values are : left, center, right)

Or is there any straightforward way to customize property editors? It's a small override, that should not require to use Custom Tools.

Thanks for your help!

The editor template body has a padding that brings a vertical scroll behaviour:

I personally think the template editor would become more enjoyable to use without that vertical scroll.

Hey guys,

I've found a very strange bug in your plugin.

If you add a row, but do not specify anything for it at all, the generated design will be broken. It means, that if you try to load this design, plugin will work BUT if you will try to click on that new row - plugin will crash.

Here is the screenshot of console and errors I've got:
https://monosnap.com/file/NoHzuRxiaWYZ4oghgU7IQjurNkgj5y

While debugging and trying to find the real issue, I've made a conclusion, that you are trying to detect the background color's scheme (RGB, HEX etc.) and it fails if you do not specify row (or column) background at all after adding new row, because backgroundColor and columnsBackgroundColor values are null.

Looking forward for the fix,
Dmytro.

We're running 2 conflicting versions of styled-components, due to it being a hard dep. Could you move it to peerDependencies? You don't use any legacy APIs. You could opt for 2.x || 3.x as well.

Hi,

I've seen some comments posted here on this already, but we could really use the ability to resize images within the Email editor. I see within the "Web" editor that there is a size-width option; we'd like something similar to this to appear on the email view of the app - but actually be able to re-size, as it appears even the "web" option is just really for making the image smaller if needed by adding padding. This is really crucial for our users to be able to make seamless content without having to back out of the app and resize images manually.

Any possible ETA on a feature like this?

Copying a design element using the duplicate button does not cause the design:updated event to be fired, making it impossible to detect if the design has changed from this action.

It's not clear in the readme that this is just a wrapper for a proprietary UI hosted on a third party. Does the MIT license apply to that editor too?

It is nice if this editor has select existing image future on Image Uploader property.

Currently, if you want to use an existing image, you must input the image URL manually.

My idea is here.

unlayer.registerCallback('selectimage', function(done) {
  openImageSelector()
    .selected(function(e) {
      done({
        url: e.publicUrl,
        alternateText: e.alternateText,
      });
    });
});

• If register selectimage callback, Select Image button appears on the Image Uploader property.
• If the user click Select Image button, image selector displayed
• If the user selects some image, the done function called and image URL replaced to selected image URL.
• If the user cancels to select the image, nothing to do

Hello everyone, tell me please if there is a way to set max or min size of an uploaded files in editor. I would be grateful for any suggestions. Thank you :)

The server was unable to fetch the https://designer.unroll.io/assets/embed.bundle.js , it seems that the server was done.

GET https://designer.unroll.io/assets/embed.bundle.js net::ERR_ABORTED
When I tried the URL, I got Heroku application error. I hope unroll service is reliable with long-term support since I'm planning to integrate it in a commercial app.

I'm trying to use Design Tags to replace colors on button components already in place on a template. Since the property editor doesn't allow non-hex value, I tried replacing the color with a design tag directly in the JSON. However, design tags are not replaced by the value passed in the options.

Would it be possible to potentially add in a versioning parameter into Unlayer to ensure that any updates to the product are not automatically propagated out to implementations that are already using it? For example, we may as developers want to communicate to our users that these changes are in place before they're released so that we can facilitate training or something similar.

Can I export partial HTML e.g. a single row? If there is no function to do it now, where could I look at it to make a quick hack? :)

Thanks,

Hello, I have had a template like this image. How can I add a feature which is allow user to customize width and color of the border of content?

Please! Help

The editor sidebar for some reason has a horizontal scroll that is unexpected.
Illustrative GIF below:

I am trying to write a custom tool on the Unlayer Dashboard. I need the toll to use a custom tag I have defined in my Django environment and I need Unlayer to spit HTML for it so my email engine can inject the right content. I need something like:

{% custom_items count={{count_property}} as items %}
{% for item in items %}
  <li>{{item.name}}</li>
{% endfor %}

But obviously custom_items is not a valid tag in Nunjucks and I don't think I can assign with as items. Is there anything that can be done to achieve this ?

Can't we provide a functionality to save the json design in file instead of the console.

Given that I insert a link which is very long like this:

When I click "OK", the preview looks fine:

However after I deselect the "Text" Block, the preview looks pretty weird:

Currently I have to use text to represent the link. But it's still a common use case to insert a raw link in the emails.

(Reproduced with: http://react-email-editor-demo.netlify.com/)

I followed the installations steps and as soon as I import EmailEditor into one of my components:

import React from 'react';
import EmailEditor from 'react-email-editor';

I get an error:

Uncaught TypeError: Object(...) is not a function
    at Object.<anonymous>

my env:

  "dependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-email-editor": "^0.9.0",
    "react-load-script": "0.0.6",
    "styled-components": "^4.1.2"
  }

Any idea what could be causing this bad import/export ?

Hi guys,

Likely a noob question, but can I setMergeTags() onLoad if I am using react-email-editor?

My emailEditor div:

<div> <EmailEditor onLoad={this.onLoad} ref={editor => this.editor = editor} /> </div>

My onLoad function:

onLoad = () => { this.editor.loadDesign(this.state.designJson); this.editor.setMergeTags([ {name: "First Name", value: "{{first_name}}"}, {name: "Last Name", value: "{{last_name}}"} ]); }

Says setMergeTags is not a function.

Thanks in advance for your help.

Hello,

I opened the email template this morning and I saw in the browser console this error:

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

This is a screenshot to see clearly what is happening.

Can you please tell me what is going on? Are you making updates to unlayer now and that's why the error show up?

Hi, thanks for the work!
I was wondering if there is any way to change the builder blocks code. I would like to make pdfs out with this drag and drop editor, so it needs some changes. My idea is that maybe it is possible if the builder blocks output different code.

Thanks!

Persistentfk

When attempting to change the color of text content at the bottom of an email in the editor, the color panel does not detect that it is cut off, despite merge variables and font size/family dropdowns moving up when possibly cut off.

Hi React 16 support for this component is broken

I'm trying to get the event listener for onMouseUp so I can automatically export the html to my state, just in case the user navigates and returns they won't have to redesign everything. The problem I'm running into is literally none of the on{EVENT} handlers are even being added. I tried going into your code, and in index.js line 85 I added a console.log like this:
index.js:

     for (
       var _iterator = Object.entries(_this.props), 
       _isArray = Array.isArray(_iterator), _i = 0,
       _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;
     ) {
        var _ref2;
        if (_isArray) {
          if (_i >= _iterator.length) break;
          _ref2 = _iterator[_i++];
        } else {
          _i = _iterator.next();
          if (_i.done) break;
          _ref2 = _i.value;
        }

        var _ref = _ref2;
        var key = _ref[0];
        var value = _ref[1];

        if (/^on/.test(key) && key != 'onLoad') {
          console.log(`adding event listener for ${key} : ${value}`) 
          // ^^ This is where the onEVENT handlers should be getting added, ^^
          // but they're not because this console.log isn't even getting called
          _this.addEventListener(key, value);
        }
      }

just to see if the onMouseUp (or onMouseOver, or any on event) would even be registered, but nothing is getting printed to the console, and all event handlers are never getting called.

especially in the context of replacing URLs for images among other places.

I tried to use the customCSS & customJS props based on the examples in the playground, but it is only working with project ID 1071.

Is it possible to open these features to other projects as well?

When setting up custom file storage one needs to register a callback, however the react wrapper does not expose this method, unlike others (addEventListener, loadDesign, ...).

It seems to be just a matter of adding:

registerCallback = (type, callback) => {
    unlayer.registerCallback(type, callback)
}

I'm using the builder along with some other text fields as a "form" but in order to determine if the form is dirty I'd need to know if an update to the builder occurred. It would be great to expose an onChangeCallback prop. I'm sure others would want to use it to save changes automatically without clicking a button.

onChange = (html, design) => {
    this.props.setSomeFieldValue(html);
    this.props.setMyAwesomeFormDirty();
}

Thanks and great work!

Hi,
Since upgrading to v0.5.0 from v0.3.0, the react-email-editor no longer loads the editor.

In the console, I get this error :-
Not allowed to load local resource: file://editor.unlayer.com/editor.html

I'm embedding this within an electron app (v1.7.2), which, if you're unfamiliar with that environment, essentially combines node + chrome.

If I Downgrade back to v0.3.0 then everything loads up fine once more.

What has changed from v0.3.0 to v0.5.0 - I don't see any change/release history.

Any ideas on how to get the latest version to work?

Hey so I'm trying to figure out how to implement a custom tool into the react component, and the link you provide takes me to the Unlayer documentation, which provides zero helpful documentation for this component. It assumes the user is using the CDN for Unlayer and has access to the unlayer global object, which makes all their documentation useless to me. I have the react-email-editor component set up in my project and working quite well, and I need to add several custom tools. I've been emailing back and forth with Unlayer Support trying to figure out how to add my own tool but the rep I talk to keeps going back to using the unlayer global object, and when I tried to patchwork a tool into the tools prop, nothing worked.

An example of how to properly use the tools prop would be amazing.

It works perfectly on development mode. But when I have pushed it to heroku it gives following error(it is coming from editor.js)
TypeError: Cannot read property 'location' of undefined
at Function.mapToProps (editor.js:formatted:43314)
at r (editor.js:formatted:12784)
at Function.r.mapToProps (editor.js:formatted:12790)
at r (editor.js:formatted:12784)
at editor.js:formatted:13038
at Object.run (editor.js:formatted:11949)
at o.initSelector (editor.js:formatted:11961)
at new o (editor.js:formatted:11888)
at constructClassInstance (editor.js:formatted:8912)
at beginWork (editor.js:formatted:9021)

The passed wrapper prop onLoad function gets called in direct response (synchronous) to the onLoad callback of the script being loaded. This does not always guarantee that the underlying component is already loaded by then.

For example the editor can be in specific route of a react application, and load the unlayer script the first time the user gets there. If the user then navigates away from that route and comes back, the script will be loaded from the cache, therefore immediately kicking in the onLoad callback.
In the demo, the onLoad function will execute this.editor.loadDesign(sample) and in my particular case add event listeners. It then blows up saying this.editor is undefined.

I'm trying to load a saved design to the editor, but I'm not sure how to detect if the editor frame has been loaded so I can call the loadDesign function, I keep getting unroll is undefined.

Thank you,

Is there's a way to make the content element absolute?

I want the recipient able to print the email.
Can I set the page size to A4 or other page size ?

Hello - first thanks for this great wrapper, really easy to setup.

I'm unable to override the min width property of the iframe and it's getting overflown from the parent container, any idea how to fix this?

Thanks