Reactive toolbar

src/RichTextEditor.js

@@ -19,6 +19,11 @@ export default class RichTextEditor extends Component {
   constructor(props) {
     super(props);
     this._sendAction = this._sendAction.bind(this);
+    this.registerToolbar = this.registerToolbar.bind(this);
+    this.onBridgeMessage = this.onBridgeMessage.bind(this);
+    this.state = {
+      listeners: []
+    };
   }
 
   onBridgeMessage(str){
@@ -65,6 +70,10 @@ export default class RichTextEditor extends Component {
         case messages.CONTENT_FOCUSED:
           this.contentFocusHandler && this.contentFocusHandler();
           break;
+        case messages.SELECTION_CHANGE:
+          const items = message.data.items;
+          this.state.listeners.map((listener) => listener(items));
+          break
       }
     } catch(e) {
       //alert('NON JSON MESSAGE');
@@ -91,6 +100,12 @@ export default class RichTextEditor extends Component {
   //-------------------------------------------------------------------------------
   //--------------- Public API
 
+  registerToolbar(listener) {
+    this.setState({
+      listeners: [...this.state.listeners, listener]
+    });
+  }
+
   setTitleHTML(html) {
     this._sendAction(actions.setTitleHtml, html);
   }

src/RichTextToolbar.js

@@ -22,7 +22,6 @@ function getDefaultIconText() {
   return texts;
 }
 
-
 export default class RichTextToolbar extends Component {
 
   static propTypes = {
@@ -32,7 +31,8 @@ export default class RichTextToolbar extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      editor: undefined
+      editor: undefined,
+      selectedItems: []
     };
   }
 
@@ -41,15 +41,24 @@ export default class RichTextToolbar extends Component {
     if (!editor) {
       throw new Error('Toolbar has no editor!');
     } else {
+      editor.registerToolbar((selectedItems) => this.setSelectedItems(selectedItems));
       this.setState({editor});
     }
   }
 
+  setSelectedItems(selectedItems) {
+    this.setState({
+      selectedItems
+    });
+  }
+
+
+
   _getButton(action, selected) {
     return (
       <TouchableOpacity
           key={action}
-          style={{flex: 1, backgroundColor: '#D3D3D3', justifyContent: 'center'}}
+          style={{flex: 1, backgroundColor: selected? 'red' : '#D3D3D3', justifyContent: 'center'}}
           onPress={() => this._onPress(action)}
       >
         <Text style={{textAlign: 'center'}}>
@@ -62,7 +71,7 @@ export default class RichTextToolbar extends Component {
   render() {
     return (
       <View style={{flexDirection: 'row', height: 50}}>
-        {defaultActions.map((action) => this._getButton(action, false))}
+        {defaultActions.map((action) => this._getButton(action, this.state.selectedItems.includes(action)))}
       </View>
     );
   }

src/ZSSRichTextEditor/ZSSRichTextEditor.js

@@ -698,12 +698,8 @@ zss_editor.enabledEditingItems = function(e) {
         }
         
     }
-    
-    if (items.length > 0) {
-        WebViewBridge.send('callback://0/"+items.join(',')');
-    } else {
-        WebViewBridge.send('zss-callback/');
-    }
+
+    WebViewBridge.send(JSON.stringify({type: 'SELECTION_CHANGE', data: {items}}))
 }
 
 zss_editor.focusEditor = function(editorId) {

src/const.js

@@ -5,37 +5,39 @@ export const actions = {
   getContentHtml: 'GET_CONTENT_HTML',
   blurTitleEditor: 'BLUR_TITLE_EDITOR',
   blurContentEditor: 'BLUR_CONTENT_EDITOR',
-  setBold: 'SET_BOLD',
-  setItalic: 'SET_ITALIC',
-  setUnderline: 'SET_UNDERLINE',
-  heading1: 'HEADING1',
-  heading2: 'HEADING2',
-  heading3: 'HEADING3',
-  heading4: 'HEADING4',
-  heading5: 'HEADING5',
-  heading6: 'HEADING6',
+
+  setBold: 'bold',
+  setItalic: 'italic',
+  setUnderline: 'underline',
+  heading1: 'h1',
+  heading2: 'h2',
+  heading3: 'h3',
+  heading4: 'h4',
+  heading5: 'h5',
+  heading6: 'h6',
   setParagraph: 'SET_PARAGRAPH',
   removeFormat: 'REMOVE_FORMAT',
-  alignLeft: 'ALIGN_LEFT',
-  alignCenter: 'ALIGN_CENTER',
-  alignRight: 'ALIGN_RIGHT',
-  alignFull: 'ALIGN_FULL',
-  insertBulletsList: 'INST_BULLETS',
-  insertOrderedList: 'INST_ORDERED',
+  alignLeft: 'justifyLeft',
+  alignCenter: 'justifyCenter',
+  alignRight: 'justifyRight',
+  alignFull: 'justifyFull',
+  insertBulletsList: 'unorderedList',
+  insertOrderedList: 'orderedList',
   insertLink: 'INST_LINK',
   insertImage: 'INST_IMAGE',
-  setSubscript: 'SET_SUB',
-  setSuperscript: 'SET_SUPER',
-  setStrikethrough: 'SET_STRIKETHRU',
-  setHR: 'SET_HR',
-  setIndent: 'SET_INDENT',
-  setOutdent: 'SET_OUTDENT',
+  setSubscript: 'subscript',
+  setSuperscript: 'superscript',
+  setStrikethrough: 'strikeThrough',
+  setHR: 'horizontalRule',
+  setIndent: 'indent',
+  setOutdent: 'outdent',
   setTitlePlaceholder: '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',
@@ -43,5 +45,6 @@ export const messages = {
   SCROLL: 'SCROLL',
   LOG: 'LOG',
   TITLE_FOCUSED: 'TITLE_FOCUSED',
-  CONTENT_FOCUSED: 'CONTENT_FOCUSED'
+  CONTENT_FOCUSED: 'CONTENT_FOCUSED',
+  SELECTION_CHANGE: 'SELECTION_CHANGE'
 }