Merge pull request wix-incubator#9 from wix/woa-2914

Add support for adding listeners to selected text change

Author: d4vidi

src/RichTextEditor.js

@@ -32,14 +32,15 @@ export default class RichTextEditor extends Component {
     this._onKeyboardWillShow = this._onKeyboardWillShow.bind(this);
     this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this);
     this.state = {
-      listeners: [],
+      selectionChangeListeners: [],
       onChange: [],
       showLinkDialog: false,
       linkInitialUrl: '',
       linkTitle: '',
       linkUrl: '',
       keyboardHeight: 0
     };
+    this._selectedTextChangeListeners = [];
   }
 
   componentWillMount() {
@@ -154,14 +155,25 @@ export default class RichTextEditor extends Component {
         case messages.CONTENT_FOCUSED:
           this.contentFocusHandler && this.contentFocusHandler();
           break;
-        case messages.SELECTION_CHANGE:
+        case messages.SELECTION_CHANGE: {
           const items = message.data.items;
-          this.state.listeners.map((listener) => listener(items));
-          break
-        case messages.CONTENT_CHANGE:
+          this.state.selectionChangeListeners.map((listener) => {
+            listener(items);
+          });
+          break;
+        }
+        case messages.CONTENT_CHANGE: {
           const content = message.data.content;
           this.state.onChange.map((listener) => listener(content));
-          break
+          break;
+        }
+        case messages.SELECTED_TEXT_CHANGED: {
+          const selectedText = message.data;
+          this._selectedTextChangeListeners.forEach((listener) => {
+            listener(selectedText);
+          });
+          break;
+        }
       }
     } catch(e) {
       //alert('NON JSON MESSAGE');
@@ -319,7 +331,7 @@ export default class RichTextEditor extends Component {
 
   registerToolbar(listener) {
     this.setState({
-      listeners: [...this.state.listeners, listener]
+      selectionChangeListeners: [...this.state.selectionChangeListeners, listener]
     });
   }
 
@@ -559,6 +571,10 @@ export default class RichTextEditor extends Component {
     this.contentFocusHandler = callbackHandler;
     this._sendAction(actions.setContentFocusHandler);
   }
+
+  addSelectedTextChangeListener(listener) {
+    this._selectedTextChangeListeners.push(listener);
+  }
 }
 
 const styles = StyleSheet.create({

src/const.js

@@ -65,5 +65,6 @@ export const messages = {
   SELECTION_CHANGE: 'SELECTION_CHANGE',
   CONTENT_CHANGE: 'CONTENT_CHANGE',
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',
-  LINK_TOUCHED: 'LINK_TOUCHED'
+  LINK_TOUCHED: 'LINK_TOUCHED',
+  SELECTED_TEXT_CHANGED: 'SELECTED_TEXT_CHANGED'
 };

src/editor.html

@@ -889,6 +889,7 @@
 					zss_editor.calculateEditorHeightWithCaretPosition();
 					zss_editor.setScrollPosition();
 					zss_editor.enabledEditingItems(e);
+					notifyIfSelectedTextHasChanged();
 				});
 
 				// Make sure that when we tap anywhere in the document we focus on the editor
@@ -919,6 +920,18 @@
 
 			}//end
 
+			function notifyIfSelectedTextHasChanged() {
+				var selectedTextChangeMessage = JSON.stringify({
+					data: String(getSelection()),
+					type: 'SELECTED_TEXT_CHANGED'
+				});
+
+				if (selectedTextChangeMessage !== zss_editor.previousSelectedTextChangeMessage) {
+					WebViewBridge.send(selectedTextChangeMessage);
+					zss_editor.previousSelectedTextChangeMessage = selectedTextChangeMessage;
+				}
+			}
+
 			function whenPastingInsertAsPlainText(editorId) {
 				var editor = document.getElementById(editorId);
 				editor.addEventListener('paste', function(event) {
@@ -1537,7 +1550,19 @@
 
 				}
 
-				WebViewBridge.send(JSON.stringify({type: 'SELECTION_CHANGE', data: {items: items}}))
+				notifyIfSelectionHasChanged(items);
+			}
+
+			function notifyIfSelectionHasChanged(items) {
+				var selectionChangeMessage = JSON.stringify({
+					data: {items: items},
+					type: 'SELECTION_CHANGE'
+				});
+
+				if (selectionChangeMessage !== zss_editor.previousSelectionChangeMessage) {
+					WebViewBridge.send(selectionChangeMessage);
+					zss_editor.previousSelectionChangeMessage = selectionChangeMessage;
+				}
 			}
 
 			zss_editor.focusContent = function() {