Add onReady method (called after editor:ready event)

README.md

@@ -43,19 +43,25 @@ const App = (props) => {
     });
   };
 
+  // called when the editor is created
   const onLoad = () => {
     // you can load your template here;
     // const templateJson = {};
     // emailEditorRef.current.editor.loadDesign(templateJson);
   };
 
+  // called when the editor has finished loading all custom css/js/fonts
+  const onReady = () => {
+    console.log('onReady');
+  };
+
   return (
     <div>
       <div>
         <button onClick={exportHtml}>Export HTML</button>
       </div>
 
-      <EmailEditor ref={emailEditorRef} onLoad={onLoad} />
+      <EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} />
     </div>
   );
 };
@@ -78,7 +84,8 @@ See the [example source](https://github.com/unlayer/react-email-editor/blob/mast
 - `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 has finished loading
+- `onLoad` `Function` called when the editor is created
+- `onReady` `Function` called when the editor has finished loading all custom css/js/fonts
 - `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 {})

demo/src/example/index.js

@@ -61,6 +61,7 @@ const Example = (props) => {
     console.log('onDesignLoad', data);
   };
 
+  // called when the editor is created
   const onLoad = () => {
     emailEditorRef.current.editor.addEventListener(
       'onDesignLoad',
@@ -69,6 +70,11 @@ const Example = (props) => {
     emailEditorRef.current.editor.loadDesign(sample);
   };
 
+  // called when the editor has finished loading all custom css/js/fonts
+  const onReady = () => {
+    console.log('onReady');
+  };
+
   return (
     <Container>
       <Bar>
@@ -79,7 +85,7 @@ const Example = (props) => {
       </Bar>
 
       <React.StrictMode>
-        <EmailEditor ref={emailEditorRef} onLoad={onLoad} />
+        <EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} />
       </React.StrictMode>
     </Container>
   );

src/index.js

@@ -64,13 +64,16 @@ export default class extends Component {
 
     // All properties starting with on[Name] are registered as event listeners.
     for (const [key, value] of Object.entries(this.props)) {
-      if (/^on/.test(key) && key != 'onLoad') {
+      if (/^on/.test(key) && key !== 'onLoad' && key !== 'onReady') {
         this.addEventListener(key, value);
       }
     }
 
-    const { onLoad } = this.props;
+    const { onLoad, onReady } = this.props;
+
     onLoad && onLoad();
+
+    if (onReady) this.editor.addEventListener('editor:ready', onReady);
   };
 
   registerCallback = (type, callback) => {