Quellcode durchsuchen

Merge pull request #9 from wix/woa-2914

Add support for adding listeners to selected text change
d4vidi vor 8 Jahren
Ursprung
Commit
7788ddb95a
3 geänderte Dateien mit 51 neuen und 9 gelöschten Zeilen
  1. 23
    7
      src/RichTextEditor.js
  2. 2
    1
      src/const.js
  3. 26
    1
      src/editor.html

+ 23
- 7
src/RichTextEditor.js Datei anzeigen

32
     this._onKeyboardWillShow = this._onKeyboardWillShow.bind(this);
32
     this._onKeyboardWillShow = this._onKeyboardWillShow.bind(this);
33
     this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this);
33
     this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this);
34
     this.state = {
34
     this.state = {
35
-      listeners: [],
35
+      selectionChangeListeners: [],
36
       onChange: [],
36
       onChange: [],
37
       showLinkDialog: false,
37
       showLinkDialog: false,
38
       linkInitialUrl: '',
38
       linkInitialUrl: '',
40
       linkUrl: '',
40
       linkUrl: '',
41
       keyboardHeight: 0
41
       keyboardHeight: 0
42
     };
42
     };
43
+    this._selectedTextChangeListeners = [];
43
   }
44
   }
44
 
45
 
45
   componentWillMount() {
46
   componentWillMount() {
154
         case messages.CONTENT_FOCUSED:
155
         case messages.CONTENT_FOCUSED:
155
           this.contentFocusHandler && this.contentFocusHandler();
156
           this.contentFocusHandler && this.contentFocusHandler();
156
           break;
157
           break;
157
-        case messages.SELECTION_CHANGE:
158
+        case messages.SELECTION_CHANGE: {
158
           const items = message.data.items;
159
           const items = message.data.items;
159
-          this.state.listeners.map((listener) => listener(items));
160
-          break
161
-        case messages.CONTENT_CHANGE:
160
+          this.state.selectionChangeListeners.map((listener) => {
161
+            listener(items);
162
+          });
163
+          break;
164
+        }
165
+        case messages.CONTENT_CHANGE: {
162
           const content = message.data.content;
166
           const content = message.data.content;
163
           this.state.onChange.map((listener) => listener(content));
167
           this.state.onChange.map((listener) => listener(content));
164
-          break
168
+          break;
169
+        }
170
+        case messages.SELECTED_TEXT_CHANGED: {
171
+          const selectedText = message.data;
172
+          this._selectedTextChangeListeners.forEach((listener) => {
173
+            listener(selectedText);
174
+          });
175
+          break;
176
+        }
165
       }
177
       }
166
     } catch(e) {
178
     } catch(e) {
167
       //alert('NON JSON MESSAGE');
179
       //alert('NON JSON MESSAGE');
319
 
331
 
320
   registerToolbar(listener) {
332
   registerToolbar(listener) {
321
     this.setState({
333
     this.setState({
322
-      listeners: [...this.state.listeners, listener]
334
+      selectionChangeListeners: [...this.state.selectionChangeListeners, listener]
323
     });
335
     });
324
   }
336
   }
325
   
337
   
559
     this.contentFocusHandler = callbackHandler;
571
     this.contentFocusHandler = callbackHandler;
560
     this._sendAction(actions.setContentFocusHandler);
572
     this._sendAction(actions.setContentFocusHandler);
561
   }
573
   }
574
+
575
+  addSelectedTextChangeListener(listener) {
576
+    this._selectedTextChangeListeners.push(listener);
577
+  }
562
 }
578
 }
563
 
579
 
564
 const styles = StyleSheet.create({
580
 const styles = StyleSheet.create({

+ 2
- 1
src/const.js Datei anzeigen

65
   SELECTION_CHANGE: 'SELECTION_CHANGE',
65
   SELECTION_CHANGE: 'SELECTION_CHANGE',
66
   CONTENT_CHANGE: 'CONTENT_CHANGE',
66
   CONTENT_CHANGE: 'CONTENT_CHANGE',
67
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',
67
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',
68
-  LINK_TOUCHED: 'LINK_TOUCHED'
68
+  LINK_TOUCHED: 'LINK_TOUCHED',
69
+  SELECTED_TEXT_CHANGED: 'SELECTED_TEXT_CHANGED'
69
 };
70
 };

+ 26
- 1
src/editor.html Datei anzeigen

889
 					zss_editor.calculateEditorHeightWithCaretPosition();
889
 					zss_editor.calculateEditorHeightWithCaretPosition();
890
 					zss_editor.setScrollPosition();
890
 					zss_editor.setScrollPosition();
891
 					zss_editor.enabledEditingItems(e);
891
 					zss_editor.enabledEditingItems(e);
892
+					notifyIfSelectedTextHasChanged();
892
 				});
893
 				});
893
 
894
 
894
 				// Make sure that when we tap anywhere in the document we focus on the editor
895
 				// Make sure that when we tap anywhere in the document we focus on the editor
919
 
920
 
920
 			}//end
921
 			}//end
921
 
922
 
923
+			function notifyIfSelectedTextHasChanged() {
924
+				var selectedTextChangeMessage = JSON.stringify({
925
+					data: String(getSelection()),
926
+					type: 'SELECTED_TEXT_CHANGED'
927
+				});
928
+
929
+				if (selectedTextChangeMessage !== zss_editor.previousSelectedTextChangeMessage) {
930
+					WebViewBridge.send(selectedTextChangeMessage);
931
+					zss_editor.previousSelectedTextChangeMessage = selectedTextChangeMessage;
932
+				}
933
+			}
934
+
922
 			function whenPastingInsertAsPlainText(editorId) {
935
 			function whenPastingInsertAsPlainText(editorId) {
923
 				var editor = document.getElementById(editorId);
936
 				var editor = document.getElementById(editorId);
924
 				editor.addEventListener('paste', function(event) {
937
 				editor.addEventListener('paste', function(event) {
1537
 
1550
 
1538
 				}
1551
 				}
1539
 
1552
 
1540
-				WebViewBridge.send(JSON.stringify({type: 'SELECTION_CHANGE', data: {items: items}}))
1553
+				notifyIfSelectionHasChanged(items);
1554
+			}
1555
+
1556
+			function notifyIfSelectionHasChanged(items) {
1557
+				var selectionChangeMessage = JSON.stringify({
1558
+					data: {items: items},
1559
+					type: 'SELECTION_CHANGE'
1560
+				});
1561
+
1562
+				if (selectionChangeMessage !== zss_editor.previousSelectionChangeMessage) {
1563
+					WebViewBridge.send(selectionChangeMessage);
1564
+					zss_editor.previousSelectionChangeMessage = selectionChangeMessage;
1565
+				}
1541
 			}
1566
 			}
1542
 
1567
 
1543
 			zss_editor.focusContent = function() {
1568
 			zss_editor.focusContent = function() {