Merge pull request wix-incubator#4 from wix/onChangeContent

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

Author: artald

src/RichTextEditor.js

@@ -19,7 +19,9 @@ export default class RichTextEditor extends Component {
     titlePlaceholder: PropTypes.string,
     contentPlaceholder: PropTypes.string,
     editorInitializedCallback: PropTypes.func,
-    customCSS: PropTypes.string
+    customCSS: PropTypes.string,
+    hiddenTitle: PropTypes.bool,
+    enableOnChange: PropTypes.bool
   };
 
   constructor(props) {
@@ -31,6 +33,7 @@ export default class RichTextEditor extends Component {
     this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this);
     this.state = {
       listeners: [],
+      onChange: [],
       showLinkDialog: false,
       linkInitialUrl: '',
       linkTitle: '',
@@ -127,6 +130,10 @@ export default class RichTextEditor extends Component {
           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;
@@ -151,6 +158,10 @@ export default class RichTextEditor extends Component {
           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');
@@ -311,11 +322,29 @@ export default class RichTextEditor extends Component {
       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

@@ -7,9 +7,21 @@ export const InjectedMessageHandler = `
       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

@@ -1,8 +1,12 @@
 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',
@@ -59,6 +63,7 @@ export const messages = {
   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

@@ -1352,6 +1352,30 @@
 				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);
 			}