Merge pull request #4 from wix/onChangeContent

onChange content listeners; toggle, hide and show methods for title

src/RichTextEditor.js

     titlePlaceholder: PropTypes.string,
     contentPlaceholder: PropTypes.string,
     editorInitializedCallback: PropTypes.func,
-    customCSS: PropTypes.string
+    customCSS: PropTypes.string,
+    hiddenTitle: PropTypes.bool,
+    enableOnChange: PropTypes.bool
   };
 
   constructor(props) {
     this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this);
     this.state = {
       listeners: [],
+      onChange: [],
       showLinkDialog: false,
       linkInitialUrl: '',
       linkTitle: '',
           this.setContentPlaceholder(this.props.contentPlaceholder);
           this.setTitleHTML(this.props.initialTitleHTML);
           this.setContentHTML(this.props.initialContentHTML);
+
+          this.props.hiddenTitle && this.hideTitle();
+          this.props.enableOnChange && this.enableOnChange();
+
           this.props.editorInitializedCallback && this.props.editorInitializedCallback();
 
           break;
           const items = message.data.items;
           this.state.listeners.map((listener) => listener(items));
           break
+        case messages.CONTENT_CHANGE:
+          const content = message.data.content;
+          this.state.onChange.map((listener) => listener(content));
+          break
       }
     } catch(e) {
       //alert('NON JSON MESSAGE');
       listeners: [...this.state.listeners, listener]
     });
   }
+  
+  enableOnChange() {
+    this._sendAction(actions.enableOnChange);
+  }
+
+  registerContentChangeListener(listener) {
+    this.setState({
+      onChange: [...this.state.onChange, listener]
+    });
+  }
 
   setTitleHTML(html) {
     this._sendAction(actions.setTitleHtml, html);
   }
-
+  hideTitle() {
+    this._sendAction(actions.hideTitle);
+  }
+  showTitle() {
+    this._sendAction(actions.showTitle);
+  }
+  toggleTitle() {
+    this._sendAction(actions.toggleTitle);
+  }
   setContentHTML(html) {
     this._sendAction(actions.setContentHtml, html);
   }

src/WebviewMessageHandler.js

       const action = JSON.parse(message);
 
       switch(action.type) {
+        case '${actions.enableOnChange}':
+          zss_editor.enableOnChange();
+          break;
         case '${actions.setTitleHtml}':
           zss_editor.setTitleHTML(action.data);
           break;
+        case '${actions.toggleTitle}':
+          zss_editor.toggleTitle(action.data);
+          break;
+        case '${actions.hideTitle}':
+          zss_editor.hideTitle(action.data);
+          break;
+        case '${actions.showTitle}':
+          zss_editor.showTitle(action.data);
+          break;
         case '${actions.setContentHtml}':
           zss_editor.setContentHTML(action.data);
           break;

src/const.js

 export const actions = {
+  enableOnChange: 'ENABLE_ON_CHANGE',
   setTitleHtml: 'SET_TITLE_HTML',
   setContentHtml: 'SET_CONTENT_HTML',
   getTitleHtml: 'GET_TITLE_HTML',
   getTitleText: 'GET_TITLE_TEXT',
+  toggleTitle: 'TOGGLE_TITLE',
+  hideTitle: 'HIDE_TITLE',
+  showTitle: 'SHOW_TITLE',
   getContentHtml: 'GET_CONTENT_HTML',
   getSelectedText: 'GET_SELECTED_TEXT',
   blurTitleEditor: 'BLUR_TITLE_EDITOR',
   TITLE_FOCUSED: 'TITLE_FOCUSED',
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
   SELECTION_CHANGE: 'SELECTION_CHANGE',
+  CONTENT_CHANGE: 'CONTENT_CHANGE',
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',
   LINK_TOUCHED: 'LINK_TOUCHED'
 };

src/editor.html

 				setHTML('zss_editor_title', html);
 			}
 
+			zss_editor.toggleTitle = function() {
+				$('#zss_editor_title').toggle();
+				$('#separatorContainer').toggle();
+			}
+
+			zss_editor.enableOnChange = function() {
+				$('#zss_editor_content').on('input', function(){
+					WebViewBridge.send(JSON.stringify({
+						type: 'CONTENT_CHANGE',
+						data: {content: getHtml("zss_editor_content")}
+					}))
+				});
+			}
+
+			zss_editor.hideTitle = function() {
+				$('#zss_editor_title').hide();
+				$('#separatorContainer').hide();
+			}
+
+			zss_editor.showTitle = function() {
+				$('#zss_editor_title').show();
+				$('#separatorContainer').show();
+			}
+
 			zss_editor.setContentHTML = function(html) {
 				setHTML('zss_editor_content', html);
 			}