react-email-editor - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

es/index.js

@@ -18,12 +18,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-  function _default() {
-    var _temp, _this, _ret;
-
+  function _default(props) {
     _classCallCheck(this, _default);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.loadEditor = function () {
+    _this.loadEditor = function () {
       var options = _this.props.options || {};
@@ -81,15 +77,30 @@
       onLoad && onLoad();
-    }, _this.registerCallback = function (type, callback) {
+    };
+
+    _this.registerCallback = function (type, callback) {
       _this.editor.registerCallback(type, callback);
-    }, _this.addEventListener = function (type, callback) {
+    };
+
+    _this.addEventListener = function (type, callback) {
       _this.editor.addEventListener(type, callback);
-    }, _this.loadDesign = function (design) {
+    };
+
+    _this.loadDesign = function (design) {
       _this.editor.loadDesign(design);
-    }, _this.saveDesign = function (callback) {
+    };
+
+    _this.saveDesign = function (callback) {
       _this.editor.saveDesign(callback);
-    }, _this.exportHtml = function (callback) {
+    };
+
+    _this.exportHtml = function (callback) {
       _this.editor.exportHtml(callback);
-    }, _this.setMergeTags = function (mergeTags) {
+    };
+
+    _this.setMergeTags = function (mergeTags) {
       _this.editor.setMergeTags(mergeTags);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.editorId = 'editor-' + ++lastEditorId;
+    return _this;
   }
@@ -109,4 +120,2 @@
 
-    this.editorId = 'editor-' + ++lastEditorId;
-
     return React.createElement(
@@ -113,0 +122,0 @@ 'div',

lib/index.js

@@ -31,12 +31,8 @@ 'use strict';
 
-  function _default() {
-    var _temp, _this, _ret;
-
+  function _default(props) {
     _classCallCheck(this, _default);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.loadEditor = function () {
+    _this.loadEditor = function () {
       var options = _this.props.options || {};
@@ -94,15 +90,30 @@
       onLoad && onLoad();
-    }, _this.registerCallback = function (type, callback) {
+    };
+
+    _this.registerCallback = function (type, callback) {
       _this.editor.registerCallback(type, callback);
-    }, _this.addEventListener = function (type, callback) {
+    };
+
+    _this.addEventListener = function (type, callback) {
       _this.editor.addEventListener(type, callback);
-    }, _this.loadDesign = function (design) {
+    };
+
+    _this.loadDesign = function (design) {
       _this.editor.loadDesign(design);
-    }, _this.saveDesign = function (callback) {
+    };
+
+    _this.saveDesign = function (callback) {
       _this.editor.saveDesign(callback);
-    }, _this.exportHtml = function (callback) {
+    };
+
+    _this.exportHtml = function (callback) {
       _this.editor.exportHtml(callback);
-    }, _this.setMergeTags = function (mergeTags) {
+    };
+
+    _this.setMergeTags = function (mergeTags) {
       _this.editor.setMergeTags(mergeTags);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.editorId = 'editor-' + ++lastEditorId;
+    return _this;
   }
@@ -122,4 +133,2 @@
 
-    this.editorId = 'editor-' + ++lastEditorId;
-
     return _react2.default.createElement(
@@ -126,0 +135,0 @@ 'div',

package.json

 {
   "name": "react-email-editor",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Unlayer's Email Editor Component for React.js",
@@ -28,4 +28,5 @@ "main": "lib/index.js",
     "nwb": "^0.22.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "styled-components": "^4.2.0"
@@ -32,0 +33,0 @@ },

README.md

@@ -32,30 +32,37 @@ # React Email Editor
 ```javascript
-import React, { Component } from 'react'
+import React, { useRef } from 'react';
 import { render } from 'react-dom'
 
-import EmailEditor from 'react-email-editor'
+import EmailEditor from 'react-email-editor';
 
-class App extends Component {
-  render() {
-    return <div>
-      <h1>react-email-editor Demo</h1>
+const App = (props) => {
+  const emailEditorRef = useRef(null);
 
+  const exportHtml = () => {
+    emailEditorRef.current.editor.exportHtml((data) => {
+      const { design, html } = data;
+      console.log('exportHtml', html);
+    });
+  };
+
+  const onLoad = () => {
+    // you can load your template here;
+    // const templateJson = {};
+    // emailEditorRef.current.editor.loadDesign(templateJson);
+  };
+
+  return (
+    <div>
       <div>
-        <button onClick={this.exportHtml}>Export HTML</button>
+        <button onClick={exportHtml}>Export HTML</button>
       </div>
-
+      
       <EmailEditor
-        ref={editor => this.editor = editor}
+        ref={emailEditorRef}
+        onLoad={onLoad}
       />
     </div>
-  }
+  );
+};
 
-  exportHtml = () => {
-    this.editor.exportHtml(data => {
-      const { design, html } = data
-      console.log('exportHtml', html)
-    })
-  }
-}
-
 render(<App />, document.getElementById('app'))
@@ -62,0 +69,0 @@ ```

umd/react-email-editor.js

 /*!
- * react-email-editor v1.1.1 - https://github.com/unlayer/react-email-editor#readme
+ * react-email-editor v1.2.0 - https://github.com/unlayer/react-email-editor#readme
  * MIT Licensed
@@ -96,3 +96,3 @@ */
 
-module.exports = {"name":"react-email-editor","version":"1.1.1","description":"Unlayer's Email Editor Component for React.js","main":"lib/index.js","module":"es/index.js","files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","test":"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server","release":"npm run build && npm publish"},"dependencies":{},"peerDependencies":{"react":"15.x || 16.x"},"devDependencies":{"nwb":"^0.22.0","react":"^16.8.6","react-dom":"^16.8.6","styled-components":"^4.2.0"},"author":"","homepage":"https://github.com/unlayer/react-email-editor#readme","license":"MIT","repository":"https://github.com/unlayer/react-email-editor.git","keywords":["react-component"]};
+module.exports = {"name":"react-email-editor","version":"1.2.0","description":"Unlayer's Email Editor Component for React.js","main":"lib/index.js","module":"es/index.js","files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","test":"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server","release":"npm run build && npm publish"},"dependencies":{},"peerDependencies":{"react":"15.x || 16.x"},"devDependencies":{"nwb":"^0.22.0","react":"^16.13.1","react-dom":"^16.13.1","react-router-dom":"^5.2.0","styled-components":"^4.2.0"},"author":"","homepage":"https://github.com/unlayer/react-email-editor#readme","license":"MIT","repository":"https://github.com/unlayer/react-email-editor.git","keywords":["react-component"]};
 
@@ -179,12 +179,8 @@ /***/ }),
 
-  function _default() {
-    var _temp, _this, _ret;
-
+  function _default(props) {
     src_classCallCheck(this, _default);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = src_possibleConstructorReturn(this, _Component.call(this, props));
 
-    return _ret = (_temp = (_this = src_possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.loadEditor = function () {
+    _this.loadEditor = function () {
       var options = _this.props.options || {};
@@ -242,15 +238,30 @@
       onLoad && onLoad();
-    }, _this.registerCallback = function (type, callback) {
+    };
+
+    _this.registerCallback = function (type, callback) {
       _this.editor.registerCallback(type, callback);
-    }, _this.addEventListener = function (type, callback) {
+    };
+
+    _this.addEventListener = function (type, callback) {
       _this.editor.addEventListener(type, callback);
-    }, _this.loadDesign = function (design) {
+    };
+
+    _this.loadDesign = function (design) {
       _this.editor.loadDesign(design);
-    }, _this.saveDesign = function (callback) {
+    };
+
+    _this.saveDesign = function (callback) {
       _this.editor.saveDesign(callback);
-    }, _this.exportHtml = function (callback) {
+    };
+
+    _this.exportHtml = function (callback) {
       _this.editor.exportHtml(callback);
-    }, _this.setMergeTags = function (mergeTags) {
+    };
+
+    _this.setMergeTags = function (mergeTags) {
       _this.editor.setMergeTags(mergeTags);
-    }, _temp), src_possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.editorId = 'editor-' + ++src_lastEditorId;
+    return _this;
   }
@@ -270,4 +281,2 @@
 
-    this.editorId = 'editor-' + ++src_lastEditorId;
-
     return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(
@@ -274,0 +283,0 @@ 'div',

umd/react-email-editor.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.EmailEditor=t(require("react")):e.EmailEditor=t(e.React)}(window,function(e){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(t,r){t.exports=e},function(e){e.exports={name:"react-email-editor",version:"1.1.1",description:"Unlayer's Email Editor Component for React.js",main:"lib/index.js",module:"es/index.js",files:["css","es","lib","umd"],scripts:{build:"nwb build-react-component",clean:"nwb clean-module && nwb clean-demo",start:"nwb serve-react-demo",test:"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server",release:"npm run build && npm publish"},dependencies:{},peerDependencies:{react:"15.x || 16.x"},devDependencies:{nwb:"^0.22.0",react:"^16.8.6","react-dom":"^16.8.6","styled-components":"^4.2.0"},author:"",homepage:"https://github.com/unlayer/react-email-editor#readme",license:"MIT",repository:"https://github.com/unlayer/react-email-editor.git",keywords:["react-component"]}},function(e,t,r){"use strict";r.r(t);var o=r(0),n=r.n(o),i="//editor.unlayer.com/embed.js?2",a=[],c=!1,s=function(){if(c)for(var e=void 0;e=a.shift();)e()},p=function(e){if(function(e){a.push(e)}(e),r=!1,document.querySelectorAll("script").forEach(function(e){e.src.includes(i)&&(r=!0)}),r)s();else{var t=document.createElement("script");t.setAttribute("src",i),t.onload=function(){c=!0,s()},document.head.appendChild(t)}var r},l=r(1);r.d(t,"default",function(){return m});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e};function d(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var f=0,m=function(e){function t(){var r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,i=Array(n),a=0;a<n;a++)i[a]=arguments[a];return r=o=d(this,e.call.apply(e,[this].concat(i))),o.loadEditor=function(){var e=o.props.options||{};o.props.projectId&&(e.projectId=o.props.projectId),o.props.tools&&(e.tools=o.props.tools),o.props.appearance&&(e.appearance=o.props.appearance),o.props.locale&&(e.locale=o.props.locale),o.editor=unlayer.createEditor(u({},e,{id:o.editorId,displayMode:"email",source:{name:l.name,version:l.version}}));var t=Object.entries(o.props),r=Array.isArray(t),n=0;for(t=r?t:t[Symbol.iterator]();;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if((n=t.next()).done)break;i=n.value}var a=i,c=a[0],s=a[1];/^on/.test(c)&&"onLoad"!=c&&o.addEventListener(c,s)}var p=o.props.onLoad;p&&p()},o.registerCallback=function(e,t){o.editor.registerCallback(e,t)},o.addEventListener=function(e,t){o.editor.addEventListener(e,t)},o.loadDesign=function(e){o.editor.loadDesign(e)},o.saveDesign=function(e){o.editor.saveDesign(e)},o.exportHtml=function(e){o.editor.exportHtml(e)},o.setMergeTags=function(e){o.editor.setMergeTags(e)},d(o,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.componentDidMount=function(){p(this.loadEditor)},t.prototype.render=function(){var e=this.props,t=e.minHeight,r=void 0===t?500:t,o=e.style,i=void 0===o?{}:o;return this.editorId="editor-"+ ++f,n.a.createElement("div",{style:{flex:1,display:"flex",minHeight:r}},n.a.createElement("div",{id:this.editorId,style:u({},i,{flex:1})}))},t}(o.Component)},function(e,t,r){e.exports=r(2)}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.EmailEditor=t(require("react")):e.EmailEditor=t(e.React)}(window,function(e){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(t,r){t.exports=e},function(e){e.exports={name:"react-email-editor",version:"1.2.0",description:"Unlayer's Email Editor Component for React.js",main:"lib/index.js",module:"es/index.js",files:["css","es","lib","umd"],scripts:{build:"nwb build-react-component",clean:"nwb clean-module && nwb clean-demo",start:"nwb serve-react-demo",test:"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server",release:"npm run build && npm publish"},dependencies:{},peerDependencies:{react:"15.x || 16.x"},devDependencies:{nwb:"^0.22.0",react:"^16.13.1","react-dom":"^16.13.1","react-router-dom":"^5.2.0","styled-components":"^4.2.0"},author:"",homepage:"https://github.com/unlayer/react-email-editor#readme",license:"MIT",repository:"https://github.com/unlayer/react-email-editor.git",keywords:["react-component"]}},function(e,t,r){"use strict";r.r(t);var o=r(0),n=r.n(o),i="//editor.unlayer.com/embed.js?2",a=[],c=!1,s=function(){if(c)for(var e=void 0;e=a.shift();)e()},p=function(e){if(function(e){a.push(e)}(e),r=!1,document.querySelectorAll("script").forEach(function(e){e.src.includes(i)&&(r=!0)}),r)s();else{var t=document.createElement("script");t.setAttribute("src",i),t.onload=function(){c=!0,s()},document.head.appendChild(t)}var r},l=r(1);r.d(t,"default",function(){return f});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e};var d=0,f=function(e){function t(r){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,r));return o.loadEditor=function(){var e=o.props.options||{};o.props.projectId&&(e.projectId=o.props.projectId),o.props.tools&&(e.tools=o.props.tools),o.props.appearance&&(e.appearance=o.props.appearance),o.props.locale&&(e.locale=o.props.locale),o.editor=unlayer.createEditor(u({},e,{id:o.editorId,displayMode:"email",source:{name:l.name,version:l.version}}));var t=Object.entries(o.props),r=Array.isArray(t),n=0;for(t=r?t:t[Symbol.iterator]();;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if((n=t.next()).done)break;i=n.value}var a=i,c=a[0],s=a[1];/^on/.test(c)&&"onLoad"!=c&&o.addEventListener(c,s)}var p=o.props.onLoad;p&&p()},o.registerCallback=function(e,t){o.editor.registerCallback(e,t)},o.addEventListener=function(e,t){o.editor.addEventListener(e,t)},o.loadDesign=function(e){o.editor.loadDesign(e)},o.saveDesign=function(e){o.editor.saveDesign(e)},o.exportHtml=function(e){o.editor.exportHtml(e)},o.setMergeTags=function(e){o.editor.setMergeTags(e)},o.editorId="editor-"+ ++d,o}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.componentDidMount=function(){p(this.loadEditor)},t.prototype.render=function(){var e=this.props,t=e.minHeight,r=void 0===t?500:t,o=e.style,i=void 0===o?{}:o;return n.a.createElement("div",{style:{flex:1,display:"flex",minHeight:r}},n.a.createElement("div",{id:this.editorId,style:u({},i,{flex:1})}))},t}(o.Component)},function(e,t,r){e.exports=r(2)}]).default});
 //# sourceMappingURL=react-email-editor.min.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

553

increased by2.22%

Number of lines in readme file

106

increased by7.07%

Worsened metrics

Total package byte prevSize

42529

decreased by-0.35%

Dev dependency count

5

increased by25%

No dependency changes