react-email-editor - npm Package Compare versions

Comparing version 1.7.8 to 1.7.9

dist/EmailEditor.d.ts

 import React from 'react';
-import { EmailEditorProps, EditorRef } from './types';
+import { EditorRef, EmailEditorProps } from './types';
 export declare const EmailEditor: React.ForwardRefExoticComponent<EmailEditorProps & React.RefAttributes<EditorRef>>;

dist/react-email-editor.cjs.development.js

@@ -26,3 +26,3 @@ 'use strict';
 var name = "react-email-editor";
-var version = "1.7.8";
+var version = "1.7.9";
 var description = "Unlayer's Email Editor Component for React.js";
@@ -32,4 +32,3 @@ var main = "dist/index.js";
 var files = [
-	"dist",
-	"src"
+	"dist"
 ];
@@ -58,2 +57,5 @@ var engines = {
 };
+var dependencies = {
+	"unlayer-types": "latest"
+};
 var devDependencies = {
@@ -67,2 +69,3 @@ "@rollup/plugin-replace": "^5.0.2",
 	"react-dom": "^18.2.0",
+	"rollup-plugin-copy": "^3.4.0",
 	tsdx: "^0.14.1",
@@ -90,2 +93,3 @@ tslib: "^2.4.1",
 	husky: husky,
+	dependencies: dependencies,
 	devDependencies: devDependencies,
@@ -141,4 +145,5 @@ author: author,
 
-var lastEditorId = 0;
+window.__unlayer_lastEditorId = window.__unlayer_lastEditorId || 0;
 var EmailEditor = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var _props$appearance, _props$options, _props$options2, _props$locale, _props$options3, _props$projectId, _props$options4, _props$tools, _props$options5;
   var onLoad = props.onLoad,
@@ -151,83 +156,62 @@ onReady = props.onReady,
     style = _props$style === void 0 ? {} : _props$style;
-  var editorId = React.useRef(props.editorId || "editor-" + ++lastEditorId);
-  var isLoadedRef = React.useRef(false);
   var _useState = React.useState(null),
     editor = _useState[0],
     setEditor = _useState[1];
-  var loadEditor = React.useCallback(function () {
-    if (isLoadedRef.current) return;
-    isLoadedRef.current = true;
-    var options = props.options || {};
-    if (props.projectId) options.projectId = props.projectId;
-    if (props.tools) options.tools = props.tools;
-    if (props.appearance) options.appearance = props.appearance;
-    if (props.locale) options.locale = props.locale;
-    setEditor(unlayer.createEditor(_extends({}, options, {
-      id: editorId.current,
-      displayMode: 'email',
-      source: {
-        name: pkg.name,
-        version: pkg.version
-      }
-    })));
-  }, [editorId.current, props.appearance, props.locale, props.options, props.projectId, props.tools]);
-  var addEventListener = React.useCallback(function (type, callback) {
-    editor == null ? void 0 : editor.addEventListener(type, callback);
+  var _useState2 = React.useState(false),
+    hasLoadedEmbedScript = _useState2[0],
+    setHasLoadedEmbedScript = _useState2[1];
+  var editorId = React.useMemo(function () {
+    return props.editorId || "editor-" + ++window.__unlayer_lastEditorId;
+  }, [props.editorId]);
+  var options = _extends({}, props.options || {}, {
+    appearance: (_props$appearance = props.appearance) != null ? _props$appearance : (_props$options = props.options) == null ? void 0 : _props$options.appearance,
+    displayMode: (props == null ? void 0 : props.displayMode) || ((_props$options2 = props.options) == null ? void 0 : _props$options2.displayMode) || 'email',
+    locale: (_props$locale = props.locale) != null ? _props$locale : (_props$options3 = props.options) == null ? void 0 : _props$options3.locale,
+    projectId: (_props$projectId = props.projectId) != null ? _props$projectId : (_props$options4 = props.options) == null ? void 0 : _props$options4.projectId,
+    tools: (_props$tools = props.tools) != null ? _props$tools : (_props$options5 = props.options) == null ? void 0 : _props$options5.tools,
+    id: editorId,
+    source: {
+      name: pkg.name,
+      version: pkg.version
+    }
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      editor: editor
+    };
   }, [editor]);
-  var removeEventListener = React.useCallback(function (type, callback) {
-    editor == null ? void 0 : editor.removeEventListener(type, callback);
-  }, [editor]);
-  var registerCallback = React.useCallback(function (type, callback) {
-    editor == null ? void 0 : editor.registerCallback(type, callback);
-  }, [editor]);
-  var loadDesign = React.useCallback(function (design) {
-    editor == null ? void 0 : editor.loadDesign(design);
-  }, [editor]);
-  var saveDesign = React.useCallback(function (callback) {
-    editor == null ? void 0 : editor.saveDesign(callback);
-  }, [editor]);
-  var exportHtml = React.useCallback(function (callback, options) {
-    editor == null ? void 0 : editor.exportHtml(callback, options);
-  }, [editor]);
-  var exportImage = React.useCallback(function (callback) {
-    editor == null ? void 0 : editor.exportImage(callback);
-  }, [editor]);
-  var setMergeTags = React.useCallback(function (mergeTags) {
-    editor == null ? void 0 : editor.setMergeTags(mergeTags);
-  }, [editor]);
-  var loadBlank = React.useCallback(function (options) {
-    editor == null ? void 0 : editor.loadBlank(options);
-  }, [editor]);
   React.useEffect(function () {
-    loadScript(loadEditor, scriptUrl);
-  }, [loadEditor, scriptUrl]);
+    return function () {
+      editor == null ? void 0 : editor.destroy();
+    };
+  }, []);
   React.useEffect(function () {
+    setHasLoadedEmbedScript(false);
+    loadScript(function () {
+      return setHasLoadedEmbedScript(true);
+    }, scriptUrl);
+  }, [scriptUrl]);
+  React.useEffect(function () {
+    if (!hasLoadedEmbedScript) return;
+    editor == null ? void 0 : editor.destroy();
+    setEditor(unlayer.createEditor(options));
+  }, [JSON.stringify(options), hasLoadedEmbedScript]);
+  var methodProps = Object.keys(props).filter(function (propName) {
+    return /^on/.test(propName);
+  });
+  React.useEffect(function () {
     if (!editor) return;
+    onLoad == null ? void 0 : onLoad(editor);
     // All properties starting with on[Name] are registered as event listeners.
-    for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _Object$entries[_i],
-        key = _Object$entries$_i[0],
-        value = _Object$entries$_i[1];
-      if (/^on/.test(key) && key !== 'onLoad' && key !== 'onReady') {
-        addEventListener(key, value);
+    methodProps.forEach(function (methodProp) {
+      if (/^on/.test(methodProp) && methodProp !== 'onLoad' && methodProp !== 'onReady' && typeof props[methodProp] === 'function') {
+        editor.addEventListener(methodProp, props[methodProp]);
       }
+    });
+    if (onReady) {
+      editor.addEventListener('editor:ready', function () {
+        onReady(editor);
+      });
     }
-    // @deprecated
-    onLoad && onLoad();
-    if (onReady) editor.addEventListener('editor:ready', onReady);
-  }, [editor, addEventListener, onLoad, onReady, props]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      saveDesign: saveDesign,
-      exportHtml: exportHtml,
-      setMergeTags: setMergeTags,
-      editor: editor,
-      loadDesign: loadDesign,
-      registerCallback: registerCallback,
-      addEventListener: addEventListener,
-      loadBlank: loadBlank,
-      exportImage: exportImage,
-      removeEventListener: removeEventListener
-    };
-  }, [saveDesign, exportHtml, setMergeTags, editor, loadDesign, registerCallback, addEventListener, loadBlank, exportImage, removeEventListener]);
+  }, [editor, Object.keys(methodProps).join(',')]);
   return React__default.createElement("div", {
@@ -240,3 +224,3 @@ style: {
   }, React__default.createElement("div", {
-    id: editorId.current,
+    id: editorId,
     style: _extends({}, style, {
@@ -243,0 +227,0 @@ flex: 1

dist/react-email-editor.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var a=[],l=!1,o=function(){if(l)for(var e;e=a.shift();)e()},i=0,c=n.forwardRef((function(e,c){var u=e.onLoad,s=e.onReady,d=e.scriptUrl,f=e.minHeight,p=void 0===f?500:f,v=e.style,b=void 0===v?{}:v,m=t.useRef(e.editorId||"editor-"+ ++i),g=t.useRef(!1),y=t.useState(null),k=y[0],E=y[1],C=t.useCallback((function(){if(!g.current){g.current=!0;var t=e.options||{};e.projectId&&(t.projectId=e.projectId),e.tools&&(t.tools=e.tools),e.appearance&&(t.appearance=e.appearance),e.locale&&(t.locale=e.locale),E(unlayer.createEditor(r({},t,{id:m.current,displayMode:"email",source:{name:"react-email-editor",version:"1.7.8"}})))}}),[m.current,e.appearance,e.locale,e.options,e.projectId,e.tools]),h=t.useCallback((function(e,t){null==k||k.addEventListener(e,t)}),[k]),j=t.useCallback((function(e,t){null==k||k.removeEventListener(e,t)}),[k]),x=t.useCallback((function(e,t){null==k||k.registerCallback(e,t)}),[k]),I=t.useCallback((function(e){null==k||k.loadDesign(e)}),[k]),L=t.useCallback((function(e){null==k||k.saveDesign(e)}),[k]),O=t.useCallback((function(e,t){null==k||k.exportHtml(e,t)}),[k]),H=t.useCallback((function(e){null==k||k.exportImage(e)}),[k]),R=t.useCallback((function(e){null==k||k.setMergeTags(e)}),[k]),D=t.useCallback((function(e){null==k||k.loadBlank(e)}),[k]);return t.useEffect((function(){!function(e,t){if(void 0===t&&(t="https://editor.unlayer.com/embed.js?2"),function(e){a.push(e)}(e),function(e){var t=document.querySelectorAll("script"),n=!1;return t.forEach((function(t){t.src.includes(e)&&(n=!0)})),n}(t))o();else{var n=document.createElement("script");n.setAttribute("src",t),n.onload=function(){l=!0,o()},document.head.appendChild(n)}}(C,d)}),[C,d]),t.useEffect((function(){if(k){for(var t=0,n=Object.entries(e);t<n.length;t++){var r=n[t],a=r[0],l=r[1];/^on/.test(a)&&"onLoad"!==a&&"onReady"!==a&&h(a,l)}u&&u(),s&&k.addEventListener("editor:ready",s)}}),[k,h,u,s,e]),t.useImperativeHandle(c,(function(){return{saveDesign:L,exportHtml:O,setMergeTags:R,editor:k,loadDesign:I,registerCallback:x,addEventListener:h,loadBlank:D,exportImage:H,removeEventListener:j}}),[L,O,R,k,I,x,h,D,H,j]),n.createElement("div",{style:{flex:1,display:"flex",minHeight:p}},n.createElement("div",{id:m.current,style:r({},b,{flex:1})}))}));exports.EmailEditor=c,exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var r=[],i=!1,l=function(){if(i)for(var e;e=r.shift();)e()};window.__unlayer_lastEditorId=window.__unlayer_lastEditorId||0;var a=n.forwardRef((function(e,a){var d,u,c,s,f,p,v,y,E,m=e.onLoad,h=e.onReady,j=e.scriptUrl,_=e.minHeight,b=void 0===_?500:_,I=e.style,w=void 0===I?{}:I,O=t.useState(null),g=O[0],x=O[1],M=t.useState(!1),L=M[0],S=M[1],H=t.useMemo((function(){return e.editorId||"editor-"+ ++window.__unlayer_lastEditorId}),[e.editorId]),R=o({},e.options||{},{appearance:null!=(d=e.appearance)?d:null==(u=e.options)?void 0:u.appearance,displayMode:(null==e?void 0:e.displayMode)||(null==(c=e.options)?void 0:c.displayMode)||"email",locale:null!=(s=e.locale)?s:null==(f=e.options)?void 0:f.locale,projectId:null!=(p=e.projectId)?p:null==(v=e.options)?void 0:v.projectId,tools:null!=(y=e.tools)?y:null==(E=e.options)?void 0:E.tools,id:H,source:{name:"react-email-editor",version:"1.7.9"}});t.useImperativeHandle(a,(function(){return{editor:g}}),[g]),t.useEffect((function(){return function(){null==g||g.destroy()}}),[]),t.useEffect((function(){S(!1),function(e,t){if(void 0===t&&(t="https://editor.unlayer.com/embed.js?2"),r.push((function(){return S(!0)})),function(e){var t=document.querySelectorAll("script"),n=!1;return t.forEach((function(t){t.src.includes(e)&&(n=!0)})),n}(t))l();else{var n=document.createElement("script");n.setAttribute("src",t),n.onload=function(){i=!0,l()},document.head.appendChild(n)}}(0,j)}),[j]),t.useEffect((function(){L&&(null==g||g.destroy(),x(unlayer.createEditor(R)))}),[JSON.stringify(R),L]);var k=Object.keys(e).filter((function(e){return/^on/.test(e)}));return t.useEffect((function(){g&&(null==m||m(g),k.forEach((function(t){/^on/.test(t)&&"onLoad"!==t&&"onReady"!==t&&"function"==typeof e[t]&&g.addEventListener(t,e[t])})),h&&g.addEventListener("editor:ready",(function(){h(g)})))}),[g,Object.keys(k).join(",")]),n.createElement("div",{style:{flex:1,display:"flex",minHeight:b}},n.createElement("div",{id:H,style:o({},w,{flex:1})}))}));exports.EmailEditor=a,exports.default=a;
 //# sourceMappingURL=react-email-editor.cjs.production.min.js.map

dist/react-email-editor.esm.js

@@ -1,2 +0,2 @@
-import React, { useRef, useState, useCallback, useEffect, useImperativeHandle } from 'react';
+import React, { useState, useMemo, useImperativeHandle, useEffect } from 'react';
 
@@ -19,3 +19,3 @@ function _extends() {
 var name = "react-email-editor";
-var version = "1.7.8";
+var version = "1.7.9";
 var description = "Unlayer's Email Editor Component for React.js";
@@ -25,4 +25,3 @@ var main = "dist/index.js";
 var files = [
-	"dist",
-	"src"
+	"dist"
 ];
@@ -51,2 +50,5 @@ var engines = {
 };
+var dependencies = {
+	"unlayer-types": "latest"
+};
 var devDependencies = {
@@ -60,2 +62,3 @@ "@rollup/plugin-replace": "^5.0.2",
 	"react-dom": "^18.2.0",
+	"rollup-plugin-copy": "^3.4.0",
 	tsdx: "^0.14.1",
@@ -83,2 +86,3 @@ tslib: "^2.4.1",
 	husky: husky,
+	dependencies: dependencies,
 	devDependencies: devDependencies,
@@ -134,4 +138,5 @@ author: author,
 
-var lastEditorId = 0;
+window.__unlayer_lastEditorId = window.__unlayer_lastEditorId || 0;
 var EmailEditor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$appearance, _props$options, _props$options2, _props$locale, _props$options3, _props$projectId, _props$options4, _props$tools, _props$options5;
   var onLoad = props.onLoad,
@@ -144,83 +149,62 @@ onReady = props.onReady,
     style = _props$style === void 0 ? {} : _props$style;
-  var editorId = useRef(props.editorId || "editor-" + ++lastEditorId);
-  var isLoadedRef = useRef(false);
   var _useState = useState(null),
     editor = _useState[0],
     setEditor = _useState[1];
-  var loadEditor = useCallback(function () {
-    if (isLoadedRef.current) return;
-    isLoadedRef.current = true;
-    var options = props.options || {};
-    if (props.projectId) options.projectId = props.projectId;
-    if (props.tools) options.tools = props.tools;
-    if (props.appearance) options.appearance = props.appearance;
-    if (props.locale) options.locale = props.locale;
-    setEditor(unlayer.createEditor(_extends({}, options, {
-      id: editorId.current,
-      displayMode: 'email',
-      source: {
-        name: pkg.name,
-        version: pkg.version
-      }
-    })));
-  }, [editorId.current, props.appearance, props.locale, props.options, props.projectId, props.tools]);
-  var addEventListener = useCallback(function (type, callback) {
-    editor == null ? void 0 : editor.addEventListener(type, callback);
+  var _useState2 = useState(false),
+    hasLoadedEmbedScript = _useState2[0],
+    setHasLoadedEmbedScript = _useState2[1];
+  var editorId = useMemo(function () {
+    return props.editorId || "editor-" + ++window.__unlayer_lastEditorId;
+  }, [props.editorId]);
+  var options = _extends({}, props.options || {}, {
+    appearance: (_props$appearance = props.appearance) != null ? _props$appearance : (_props$options = props.options) == null ? void 0 : _props$options.appearance,
+    displayMode: (props == null ? void 0 : props.displayMode) || ((_props$options2 = props.options) == null ? void 0 : _props$options2.displayMode) || 'email',
+    locale: (_props$locale = props.locale) != null ? _props$locale : (_props$options3 = props.options) == null ? void 0 : _props$options3.locale,
+    projectId: (_props$projectId = props.projectId) != null ? _props$projectId : (_props$options4 = props.options) == null ? void 0 : _props$options4.projectId,
+    tools: (_props$tools = props.tools) != null ? _props$tools : (_props$options5 = props.options) == null ? void 0 : _props$options5.tools,
+    id: editorId,
+    source: {
+      name: pkg.name,
+      version: pkg.version
+    }
+  });
+  useImperativeHandle(ref, function () {
+    return {
+      editor: editor
+    };
   }, [editor]);
-  var removeEventListener = useCallback(function (type, callback) {
-    editor == null ? void 0 : editor.removeEventListener(type, callback);
-  }, [editor]);
-  var registerCallback = useCallback(function (type, callback) {
-    editor == null ? void 0 : editor.registerCallback(type, callback);
-  }, [editor]);
-  var loadDesign = useCallback(function (design) {
-    editor == null ? void 0 : editor.loadDesign(design);
-  }, [editor]);
-  var saveDesign = useCallback(function (callback) {
-    editor == null ? void 0 : editor.saveDesign(callback);
-  }, [editor]);
-  var exportHtml = useCallback(function (callback, options) {
-    editor == null ? void 0 : editor.exportHtml(callback, options);
-  }, [editor]);
-  var exportImage = useCallback(function (callback) {
-    editor == null ? void 0 : editor.exportImage(callback);
-  }, [editor]);
-  var setMergeTags = useCallback(function (mergeTags) {
-    editor == null ? void 0 : editor.setMergeTags(mergeTags);
-  }, [editor]);
-  var loadBlank = useCallback(function (options) {
-    editor == null ? void 0 : editor.loadBlank(options);
-  }, [editor]);
   useEffect(function () {
-    loadScript(loadEditor, scriptUrl);
-  }, [loadEditor, scriptUrl]);
+    return function () {
+      editor == null ? void 0 : editor.destroy();
+    };
+  }, []);
   useEffect(function () {
+    setHasLoadedEmbedScript(false);
+    loadScript(function () {
+      return setHasLoadedEmbedScript(true);
+    }, scriptUrl);
+  }, [scriptUrl]);
+  useEffect(function () {
+    if (!hasLoadedEmbedScript) return;
+    editor == null ? void 0 : editor.destroy();
+    setEditor(unlayer.createEditor(options));
+  }, [JSON.stringify(options), hasLoadedEmbedScript]);
+  var methodProps = Object.keys(props).filter(function (propName) {
+    return /^on/.test(propName);
+  });
+  useEffect(function () {
     if (!editor) return;
+    onLoad == null ? void 0 : onLoad(editor);
     // All properties starting with on[Name] are registered as event listeners.
-    for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _Object$entries[_i],
-        key = _Object$entries$_i[0],
-        value = _Object$entries$_i[1];
-      if (/^on/.test(key) && key !== 'onLoad' && key !== 'onReady') {
-        addEventListener(key, value);
+    methodProps.forEach(function (methodProp) {
+      if (/^on/.test(methodProp) && methodProp !== 'onLoad' && methodProp !== 'onReady' && typeof props[methodProp] === 'function') {
+        editor.addEventListener(methodProp, props[methodProp]);
       }
+    });
+    if (onReady) {
+      editor.addEventListener('editor:ready', function () {
+        onReady(editor);
+      });
     }
-    // @deprecated
-    onLoad && onLoad();
-    if (onReady) editor.addEventListener('editor:ready', onReady);
-  }, [editor, addEventListener, onLoad, onReady, props]);
-  useImperativeHandle(ref, function () {
-    return {
-      saveDesign: saveDesign,
-      exportHtml: exportHtml,
-      setMergeTags: setMergeTags,
-      editor: editor,
-      loadDesign: loadDesign,
-      registerCallback: registerCallback,
-      addEventListener: addEventListener,
-      loadBlank: loadBlank,
-      exportImage: exportImage,
-      removeEventListener: removeEventListener
-    };
-  }, [saveDesign, exportHtml, setMergeTags, editor, loadDesign, registerCallback, addEventListener, loadBlank, exportImage, removeEventListener]);
+  }, [editor, Object.keys(methodProps).join(',')]);
   return React.createElement("div", {
@@ -233,3 +217,3 @@ style: {
   }, React.createElement("div", {
-    id: editorId.current,
+    id: editorId,
     style: _extends({}, style, {
@@ -236,0 +220,0 @@ flex: 1

dist/types.d.ts

@@ -0,214 +1,36 @@
+/// <reference types="unlayer-types/embed" />
 import { CSSProperties } from 'react';
-export declare type ThemeColor = 'light' | 'dark';
-export declare type DockPosition = 'right' | 'left';
-export declare type Device = 'desktop' | 'tablet' | 'mobile';
-export interface AppearanceConfig {
-    theme?: ThemeColor | undefined;
-    panels?: {
-        tools?: {
-            dock: DockPosition;
-        } | undefined;
-    } | undefined;
+import Embed from 'embed/index';
+import { Editor as EditorClass } from 'embed/Editor';
+import { AppearanceConfig, DisplayMode, ToolsConfig } from 'state/types/index';
+export declare type Unlayer = typeof Embed;
+export declare type UnlayerOptions = Parameters<Unlayer['createEditor']>[0];
+export declare type Editor = InstanceType<typeof EditorClass>;
+export interface EditorRef {
+    editor: Editor | null;
 }
-export interface User {
-    id?: number | undefined;
-    name?: string | undefined;
-    email?: string | undefined;
-    signature?: string | undefined;
-}
-export interface GroupedSpecialLink {
-    name: string;
-    specialLinks: Array<SimpleSpecialLink | GroupedSpecialLink>;
-}
-export interface SimpleSpecialLink {
-    name: string;
-    href: string;
-    target: string;
-}
-export declare type SpecialLink = SimpleSpecialLink | GroupedSpecialLink;
-export interface GroupedMergeTag {
-    name: string;
-    mergeTags: Array<SimpleMergeTag | GroupedMergeTag>;
-}
-export interface SimpleMergeTag {
-    name: string;
-    value: string;
-    sample?: string;
-}
-export interface ConditionalMergeTagRule {
-    name: string;
-    before: string;
-    after: string;
-}
-export interface ConditionalMergeTag {
-    name: string;
-    rules: ConditionalMergeTagRule[];
-    mergeTags?: SimpleMergeTag[] | undefined;
-}
-export declare type MergeTag = SimpleMergeTag | ConditionalMergeTag | GroupedMergeTag;
-export interface DesignTagConfig {
-    delimiter: [string, string];
-}
-export interface DisplayCondition {
-    type: string;
-    label: string;
-    description: string;
-    before: string;
-    after: string;
-}
-export declare type EmptyDisplayCondition = object;
-export interface ToolPropertiesConfig {
-    [key: string]: {
-        value: string;
-    };
-}
-export interface ToolConfig {
-    enabled?: boolean | undefined;
-    position?: number | undefined;
-    properties?: ToolPropertiesConfig | StringList | undefined;
-}
-export interface ToolsConfig {
-    [key: string]: ToolConfig;
-}
-export interface EditorConfig {
-    minRows?: number | undefined;
-    maxRows?: number | undefined;
-}
-declare type AiFeatures = {
-    smartButtons?: boolean;
-    smartHeadings?: boolean;
-    magicImage?: boolean;
-    smartText?: boolean;
-};
-export interface Features {
-    audit?: boolean | undefined;
-    preview?: boolean | undefined;
-    imageEditor?: boolean | undefined;
-    undoRedo?: boolean | undefined;
-    stockImages?: boolean | undefined;
-    textEditor?: TextEditor | undefined;
-    ai?: boolean | AiFeatures;
-    smartMergeTags?: boolean | undefined;
-}
-export interface TextEditor {
-    spellChecker?: boolean | undefined;
-    tables?: boolean | undefined;
-    cleanPaste?: boolean | undefined;
-    emojis?: boolean | undefined;
-}
-export declare type Translations = Record<string, Record<string, string>>;
-export declare type DisplayMode = 'email' | 'web';
-export interface UnlayerOptions {
-    id?: string | undefined;
-    displayMode?: DisplayMode | undefined;
-    projectId?: number | undefined;
-    locale?: string | undefined;
-    appearance?: AppearanceConfig | undefined;
-    user?: User | undefined;
-    mergeTags?: MergeTag[] | undefined;
-    specialLinks?: SpecialLink[] | undefined;
-    designTags?: StringList | undefined;
-    designTagsConfig?: DesignTagConfig | undefined;
-    tools?: ToolsConfig | undefined;
-    blocks?: object[] | undefined;
-    editor?: EditorConfig | undefined;
-    safeHtml?: boolean | undefined;
-    customJS?: string[] | undefined;
-    customCSS?: string[] | undefined;
-    features?: Features | undefined;
-    translations?: Translations | undefined;
-    displayConditions?: DisplayCondition[] | undefined;
-}
 export interface EmailEditorProps {
     editorId?: string | undefined;
-    style?: CSSProperties | undefined;
     minHeight?: number | string | undefined;
+    onLoad?(unlayer: Editor): void;
+    onReady?(unlayer: Editor): void;
     options?: UnlayerOptions | undefined;
-    tools?: ToolsConfig | undefined;
+    scriptUrl?: string | undefined;
+    style?: CSSProperties | undefined;
+    /** @deprecated */
     appearance?: AppearanceConfig | undefined;
+    /** @deprecated */
+    displayMode?: DisplayMode;
+    /** @deprecated */
+    locale?: string | undefined;
+    /** @deprecated */
     projectId?: number | undefined;
-    scriptUrl?: string | undefined;
-    locale?: string | undefined;
-    /** @deprecated Use **onReady** instead */
-    onLoad?(): void;
-    onReady?(): void;
+    /** @deprecated */
+    tools?: ToolsConfig | undefined;
 }
-export interface HtmlExport {
-    design: Design;
-    html: string;
-}
-export interface ImageExport {
-    design: Design;
-    url: string;
-}
-export interface HtmlOptions {
-    cleanup: boolean;
-    minify: boolean;
-}
-export interface FileInfo {
-    accepted: File[];
-    attachments: File[];
-}
-export interface FileUploadDoneData {
-    progress: number;
-    url?: string | undefined;
-}
-export interface Design {
-    counters?: object | undefined;
-    body: {
-        rows: object[];
-        values?: object | undefined;
-    };
-}
-export declare type SaveDesignCallback = (data: Design) => void;
-export declare type ExportHtmlCallback = (data: HtmlExport) => void;
-export declare type ExportImageCallback = (data: ImageExport) => void;
-export declare type EventCallback = (data: object) => void;
-export declare type FileUploadCallback = (file: FileInfo, done: FileUploadDoneCallback) => void;
-export declare type FileUploadDoneCallback = (data: FileUploadDoneData) => void;
-export declare type DisplayConditionDoneCallback = (data: DisplayCondition | null) => void;
-export declare type DisplayConditionCallback = (data: DisplayCondition | EmptyDisplayCondition, done: DisplayConditionDoneCallback) => void;
-export declare type RegisterCallback = {
-    (type: 'image', callback: FileUploadCallback): void;
-    (type: 'displayCondition', callback: DisplayConditionCallback): void;
-};
-export declare type AddEventListener = (type: string, callback: EventCallback) => void;
-export declare type RemoveEventListener = (type: string, callback: EventCallback) => void;
-export declare type LoadBlank = (options: object) => void;
-export declare type LoadDesign = (design: Design) => void;
-export declare type SaveDesign = (callback: SaveDesignCallback) => void;
-export declare type ExportHtml = (callback: ExportHtmlCallback, options?: HtmlOptions) => void;
-export declare type ExportImage = (callback: ExportImageCallback) => void;
-export declare type SetMergeTags = (mergeTags: Array<MergeTag>) => void;
-export interface EditorMethods {
-    saveDesign: SaveDesign;
-    exportHtml: ExportHtml;
-    setMergeTags: SetMergeTags;
-    loadDesign: LoadDesign;
-    registerCallback: RegisterCallback;
-    addEventListener: AddEventListener;
-    loadBlank: LoadBlank;
-    removeEventListener: RemoveEventListener;
-    exportImage: ExportImage;
-}
-export interface Editor extends EditorMethods {
-    hidePreview: () => void;
-    showPreview: (device: Device) => void;
-}
-export interface EditorRef extends EditorMethods {
-    editor: Editor | null;
-}
-export {};
-interface StringList {
-    [key: string]: string;
-}
 declare global {
-    const unlayer: {
-        createEditor: (options: UnlayerOptions & {
-            source: {
-                name: string;
-                version: string;
-            };
-        }) => Editor;
-    };
+    const unlayer: Unlayer;
+    interface Window {
+        __unlayer_lastEditorId: number;
+    }
 }

package.json

 {
   "name": "react-email-editor",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "description": "Unlayer's Email Editor Component for React.js",
@@ -8,4 +8,3 @@ "main": "dist/index.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -34,2 +33,5 @@ "engines": {
   },
+  "dependencies": {
+    "unlayer-types": "latest"
+  },
   "devDependencies": {
@@ -43,2 +45,3 @@ "@rollup/plugin-replace": "^5.0.2",
     "react-dom": "^18.2.0",
+    "rollup-plugin-copy": "^3.4.0",
     "tsdx": "^0.14.1",
@@ -45,0 +48,0 @@ "tslib": "^2.4.1",

README.md

@@ -34,9 +34,11 @@ # React Email Editor
 
-import EmailEditor from 'react-email-editor';
+import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';
 
 const App = (props) => {
-  const emailEditorRef = useRef(null);
+  const emailEditorRef = useRef<EditorRef>(null);
 
   const exportHtml = () => {
-    emailEditorRef.current.editor.exportHtml((data) => {
+    const unlayer = emailEditorRef.current?.editor;
+
+    unlayer?.exportHtml((data) => {
       const { design, html } = data;
@@ -47,7 +49,10 @@ console.log('exportHtml', html);
 
-  const onReady = () => {
+  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
     // editor is ready
     // you can load your template here;
-    // const templateJson = {};
-    // emailEditorRef.current.editor.loadDesign(templateJson);
+    // the design json can be obtained by calling
+    // unlayer.loadDesign(callback) or unlayer.exportHtml(callback)
+
+    // const templateJson = { DESIGN JSON GOES HERE };
+    // unlayer.loadDesign(templateJson);
   };
@@ -69,4 +74,8 @@
 
+See the [example source](https://github.com/unlayer/react-email-editor/blob/master/demo/src/example/index.tsx) for a reference implementation.
+
 ### Methods
 
+All unlayer methods are available in the editor instance (`emailEditorRef.current.editor`). See the [Unlayer Docs](https://docs.unlayer.com/) for more information, or log the object in the console to explore it. Here are the most used ones:
+
 | method         | params              | description                                             |
@@ -78,18 +87,12 @@ | -------------- | ------------------- | ------------------------------------------------------- |
 
-See the [example source](https://github.com/unlayer/react-email-editor/blob/master/demo/index.tsx) for a reference implementation.
-
 ### Properties
 
-- `editorId` `String` HTML div id of the container where the editor will be embedded (optional)
-- `style` `Object` style object for the editor container (default {})
-- `minHeight` `String` minimum height to initialize the editor with (default 500px)
-- `onLoad` `Function` called when the editor instance is created
-- `onReady` `Function` called when the editor has finished loading
-- `options` `Object` options passed to the Unlayer editor instance (default {})
-- `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)
+- `editorId` {`String`} HTML div id of the container where the editor will be embedded (optional)
+- `minHeight` {`String`} minimum height to initialize the editor with (default 500px)
+- `onLoad` {`Function`} called when the editor instance is created
+- `onReady` {`Function`} called when the editor has finished loading
+- `options` {`Object`} options passed to the Unlayer editor instance (default {})
+  - See the [Unlayer Docs](https://docs.unlayer.com/docs/getting-started#configuration-options) for all available options.
+- `style` {`Object`} style object for the editor container (default {})
 
-See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
-
 ## Custom Tools
@@ -96,0 +99,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of lines in readme file

107

increased by2.88%

Worsened metrics

Total package byte prevSize

49129

decreased by-35.35%

Dependency count

2

increased by100%

Dev dependency count

11

increased by10%

Number of package files

14

decreased by-22.22%

Lines of code

492

decreased by-57.03%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedunlayer-types@latest

• + Addedunlayer-types@1.157.0(transitive)