added focus handlers + editor initialized callback

example/app.js

@@ -22,6 +22,7 @@ export default class RichTextExample extends Component {
               style={styles.richText}
               initialTitleHTML={'Title!!'}
               initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
+              editorInitializedCallback={() => this.onEditorInitialized()}
           />
           <RichTextToolbar
             getEditor={() => this.richtext}
@@ -31,17 +32,24 @@ export default class RichTextExample extends Component {
     );
   }
 
+  onEditorInitialized() {
+    this.setFocusHandlers();
+    this.getHTML();
+  }
+
   async getHTML() {
     const titleHtml = await this.richtext.getTitleHtml();
     const contentHtml = await this.richtext.getContentHtml();
     //alert(titleHtml + ' ' + contentHtml)
   }
 
-  componentDidMount() {
-
-    setTimeout(()=>{
-      this.getHTML();
-    }, 3000);
+  setFocusHandlers() {
+    this.richtext.setTitleFocusHandler(() => {
+      //alert('title focus');
+    });
+    this.richtext.setContentFocusHandler(() => {
+      //alert('content focus');
+    });
   }
 }
 

src/RichTextEditor.js

@@ -13,6 +13,7 @@ export default class RichTextEditor extends Component {
   static propTypes = {
     initialTitleHTML: PropTypes.string,
     initialContentHTML: PropTypes.string,
+    editorInitializedCallback: PropTypes.func
   };
 
   constructor(props) {
@@ -50,6 +51,7 @@ export default class RichTextEditor extends Component {
         case messages.ZSS_INITIALIZED:
           this.setTitleHTML(this.props.initialTitleHTML);
           this.setContentHTML(this.props.initialContentHTML);
+          this.props.editorInitializedCallback && this.props.editorInitializedCallback();
           break;
         case messages.LOG:
           console.log('FROM ZSS', message.data);
@@ -57,8 +59,13 @@ export default class RichTextEditor extends Component {
         case messages.SCROLL:
           this.webviewBridge.setNativeProps({contentOffset: {y: message.data}});
           break;
+        case messages.TITLE_FOCUSED:
+          this.titleFocusHandler && this.titleFocusHandler();
+          break;
+        case messages.CONTENT_FOCUSED:
+          this.contentFocusHandler && this.contentFocusHandler();
+          break;
       }
-
     } catch(e) {
       //alert('NON JSON MESSAGE');
     }
@@ -228,8 +235,13 @@ export default class RichTextEditor extends Component {
     });
   }
 
-  async getHtml() {
-
+  setTitleFocusHandler(callbackHandler) {
+    this.titleFocusHandler = callbackHandler;
+    this._sendAction(actions.setTitleFocusHandler);
   }
 
+  setContentFocusHandler(callbackHandler) {
+    this.contentFocusHandler = callbackHandler;
+    this._sendAction(actions.setContentFocusHandler);
+  }
 }

src/WebviewMessageHandler.js

@@ -100,6 +100,12 @@ export const InjectedMessageHandler = `
           var html = zss_editor.getContentHTML();
           WebViewBridge.send(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html}));
           break;
+        case '${actions.setTitleFocusHandler}':
+          zss_editor.setTitleFocusHandler();
+          break;
+        case '${actions.setContentFocusHandler}':
+          zss_editor.setContentFocusHandler();
+          break;
       }
     };
   }

src/ZSSRichTextEditor/ZSSRichTextEditor.js

@@ -745,4 +745,21 @@ zss_editor.setCustomCSS = function(customCSS) {
     
 }
 
+function addFocusEvent(editorId, callbackHandler) {
+    var editor = $(`#${editorId}`);
+    editor.focus(callbackHandler);
+}
+
+zss_editor.setTitleFocusHandler = function() {
+    addFocusEvent('zss_editor_title', function() {
+        WebViewBridge.send(JSON.stringify({type: 'TITLE_FOCUSED'}))
+    });
+}
+
+zss_editor.setContentFocusHandler = function() {
+    addFocusEvent('zss_editor_content', function() {
+        WebViewBridge.send(JSON.stringify({type: 'CONTENT_FOCUSED'}))
+    });
+}
+
 //end

src/const.js

@@ -29,13 +29,17 @@ export const actions = {
   setIndent: 'SET_INDENT',
   setOutdent: 'SET_OUTDENT',
   setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
-  setContentPlaceholder: 'SET_TITLE_PLACEHOLDER'
+  setContentPlaceholder: 'SET_TITLE_PLACEHOLDER',
+  setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
+  setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER'
 };
 
 export const messages = {
-  TITLE_HTML_RESPONSE : 'TITLE_HTML_RESPONSE',
-  CONTENT_HTML_RESPONSE : 'CONTENT_HTML_RESPONSE',
+  TITLE_HTML_RESPONSE: 'TITLE_HTML_RESPONSE',
+  CONTENT_HTML_RESPONSE: 'CONTENT_HTML_RESPONSE',
   ZSS_INITIALIZED: 'ZSS_INITIALIZED',
   SCROLL: 'SCROLL',
-  LOG: 'LOG'
+  LOG: 'LOG',
+  TITLE_FOCUSED: 'TITLE_FOCUSED',
+  CONTENT_FOCUSED: 'CONTENT_FOCUSED'
 }