Merge pull request #8 from wix/update-offset-and-cursor-calculation-fix

Fix update offset and cursor position calculation

src/RichTextEditor.js

@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import WebViewBridge from 'react-native-webview-bridge-updated';
 import {InjectedMessageHandler} from './WebviewMessageHandler';
 import {actions, messages} from './const';
-import {Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, Platform, PixelRatio, Keyboard} from 'react-native';
+import {Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, Platform, PixelRatio, Keyboard, Dimensions} from 'react-native';
 
 const injectScript = `
   (function () {
@@ -10,7 +10,7 @@ const injectScript = `
   }());
 `;
 
-const PlatfomIOS = Platform.OS === 'ios';
+const PlatformIOS = Platform.OS === 'ios';
 
 export default class RichTextEditor extends Component {
   static propTypes = {
@@ -21,7 +21,8 @@ export default class RichTextEditor extends Component {
     editorInitializedCallback: PropTypes.func,
     customCSS: PropTypes.string,
     hiddenTitle: PropTypes.bool,
-    enableOnChange: PropTypes.bool
+    enableOnChange: PropTypes.bool,
+    footerHeight: PropTypes.number
   };
 
   constructor(props) {
@@ -44,7 +45,7 @@ export default class RichTextEditor extends Component {
   }
 
   componentWillMount() {
-    if(PlatfomIOS) {
+    if(PlatformIOS) {
       this.keyboardEventListeners = [
         Keyboard.addListener('keyboardWillShow', this._onKeyboardWillShow),
         Keyboard.addListener('keyboardWillHide', this._onKeyboardWillHide)
@@ -67,12 +68,24 @@ export default class RichTextEditor extends Component {
     if (this.state.keyboardHeight === newKeyboardHeight) {
       return;
     }
+    if (newKeyboardHeight) {
+      this.setEditorAvailableHeightBasedOnKeyboardHeight(newKeyboardHeight);
+    }
     this.setState({keyboardHeight: newKeyboardHeight});
   }
 
   _onKeyboardWillHide(event) {
     this.setState({keyboardHeight: 0});
   }
+
+  setEditorAvailableHeightBasedOnKeyboardHeight(keyboardHeight) {
+    const {top = 0, bottom = 0} = this.props.contentInset;
+    const {marginTop = 0, marginBottom = 0} = this.props.style;
+    const spacing = marginTop + marginBottom + top + bottom;
+
+    const editorAvailableHeight = Dimensions.get('window').height - keyboardHeight - spacing;
+    this.setEditorHeight(editorAvailableHeight);
+  }
   
   onBridgeMessage(str){
     try {
@@ -189,7 +202,7 @@ export default class RichTextEditor extends Component {
             onRequestClose={() => this.setState({showLinkDialog: false})}
         >
           <View style={styles.modal}>
-            <View style={[styles.innerModal, {marginBottom: PlatfomIOS ? this.state.keyboardHeight : 0}]}>
+            <View style={[styles.innerModal, {marginBottom: PlatformIOS ? this.state.keyboardHeight : 0}]}>
               <Text style={styles.inputTitle}>Title</Text>
               <View style={styles.inputWrapper}>
                 <TextInput
@@ -209,7 +222,7 @@ export default class RichTextEditor extends Component {
                     autoCorrect={false}
                 />
               </View>
-              {PlatfomIOS && <View style={styles.lineSeparator}/>}
+              {PlatformIOS && <View style={styles.lineSeparator}/>}
               {this._renderModalButtons()}
             </View>
           </View>
@@ -228,11 +241,11 @@ export default class RichTextEditor extends Component {
 
   _renderModalButtons() {
     const insertUpdateDisabled = this.state.linkTitle.trim().length <= 0 || this.state.linkUrl.trim().length <= 0;
-    const containerPlatformStyle = PlatfomIOS ? {justifyContent: 'space-between'} : {paddingTop: 15};
-    const buttonPlatformStyle = PlatfomIOS ? {flex: 1, height: 45, justifyContent: 'center'} : {};
+    const containerPlatformStyle = PlatformIOS ? {justifyContent: 'space-between'} : {paddingTop: 15};
+    const buttonPlatformStyle = PlatformIOS ? {flex: 1, height: 45, justifyContent: 'center'} : {};
     return (
       <View style={[{alignSelf: 'stretch', flexDirection: 'row'}, containerPlatformStyle]}>
-        {!PlatfomIOS && <View style={{flex: 1}}/>}
+        {!PlatformIOS && <View style={{flex: 1}}/>}
         <TouchableOpacity
             onPress={() => this._hideModal()}
             style={buttonPlatformStyle}
@@ -266,16 +279,15 @@ export default class RichTextEditor extends Component {
   }
 
   _upperCaseButtonTextIfNeeded(buttonText) {
-    return PlatfomIOS ? buttonText : buttonText.toUpperCase();
+    return PlatformIOS ? buttonText : buttonText.toUpperCase();
   }
 
   render() {
     //in release build, external html files in Android can't be required, so they must be placed in the assets folder and accessed via uri
-    const pageSource = PlatfomIOS ? require('./editor.html') : { uri: 'file:///android_asset/editor.html' };
+    const pageSource = PlatformIOS ? require('./editor.html') : { uri: 'file:///android_asset/editor.html' };
     return (
       <View style={{flex: 1}}>
         <WebViewBridge
-          style={{flex: 1}}
           {...this.props}
           hideKeyboardAccessoryView={true}
           keyboardDisplayRequiresUserAction={false}
@@ -504,6 +516,22 @@ export default class RichTextEditor extends Component {
 
   init() {
     this._sendAction(actions.init);
+    this.setPlatform();
+    if (this.props.footerHeight) {
+      this.setFooterHeight();
+    }
+  }
+
+  setEditorHeight(height) {
+    this._sendAction(actions.setEditorHeight, height);
+  }
+
+  setFooterHeight() {
+    this._sendAction(actions.setFooterHeight, this.props.footerHeight);
+  }
+
+  setPlatform() {
+    this._sendAction(actions.setPlatform, Platform.OS);
   }
 
   async getTitleHtml() {
@@ -587,12 +615,12 @@ const styles = StyleSheet.create({
   innerModal: {
     backgroundColor: 'rgba(255, 255, 255, 0.9)',
     paddingTop: 20,
-    paddingBottom: PlatfomIOS ? 0 : 20,
+    paddingBottom: PlatformIOS ? 0 : 20,
     paddingLeft: 20,
     paddingRight: 20,
     alignSelf: 'stretch',
     margin: 40,
-    borderRadius: PlatfomIOS ? 8 : 2
+    borderRadius: PlatformIOS ? 8 : 2
   },
   button: {
     fontSize: 16,
@@ -603,13 +631,13 @@ const styles = StyleSheet.create({
     marginTop: 5,
     marginBottom: 10,
     borderBottomColor: '#4a4a4a',
-    borderBottomWidth: PlatfomIOS ? 1 / PixelRatio.get() : 0
+    borderBottomWidth: PlatformIOS ? 1 / PixelRatio.get() : 0
   },
   inputTitle: {
     color: '#4a4a4a'
   },
   input: {
-    height: PlatfomIOS ? 20 : 40,
+    height: PlatformIOS ? 20 : 40,
     paddingTop: 0
   },
   lineSeparator: {

src/WebviewMessageHandler.js

@@ -161,6 +161,15 @@ export const InjectedMessageHandler = `
         case '${actions.init}':
           zss_editor.init();
           break;
+        case '${actions.setEditorHeight}':
+          zss_editor.setEditorHeight(action.data);
+          break;
+        case '${actions.setFooterHeight}':
+          zss_editor.setFooterHeight(action.data);
+          break;
+        case '${actions.setPlatform}':
+          zss_editor.setPlatform(action.data);
+          break;
       }
     };
   }

src/const.js

@@ -49,7 +49,10 @@ export const actions = {
   setCustomCSS: 'SET_CUSTOM_CSS',
   setTextColor: 'SET_TEXT_COLOR',
   setBackgroundColor: 'SET_BACKGROUND_COLOR',
-  init: 'ZSSS_INIT'
+  init: 'ZSSS_INIT',
+  setEditorHeight: 'SET_EDITOR_HEIGHT',
+  setFooterHeight: 'SET_FOOTER_HEIGHT',
+  setPlatform: 'SET_PLATFORM'
 };
 
 

src/editor.html

@@ -808,7 +808,7 @@
 			zss_editor.enabledItems = {};
 
 			// Height of content window, will be set by viewController
-			zss_editor.contentHeight = 244;
+			zss_editor.editorHeight = 244;
 
 			// Sets to true when extra footer gap shows and requires to hide
 			zss_editor.updateScrollOffset = false;
@@ -902,6 +902,11 @@
 				$(window).on('touchstart', function(e) {
 					zss_editor.isDragging = false;
 				});
+				$(window).on('scroll', function(e) {
+					if (zss_editor.platform === 'ios') {
+						zss_editor.updateOffset();
+					}
+				});
 
 				setupTouchEndFocus('zss_editor_title');
 				setupTouchEndFocus('zss_editor_content');
@@ -965,9 +970,9 @@
 
 				var offsetY = window.document.body.scrollTop;
 
-				var footer = $('#zss_editor_footer');
+				var footer = document.getElementById('zss_editor_footer');
 
-				var maxOffsetY = footer.offset().top - zss_editor.contentHeight;
+				var maxOffsetY = footer.offsetTop + footer.offsetHeight - zss_editor.editorHeight;
 
 				if (maxOffsetY < 0)
 					maxOffsetY = 0;
@@ -1033,22 +1038,23 @@
 			}
 
 			zss_editor.calculateEditorHeightWithCaretPosition = function() {
-
-				var padding = 50;
-				var c = zss_editor.getCaretYPosition();
-
+				var caretYPosition = zss_editor.getCaretYPosition();
+				var lineHeight = 20;
+				var halfLineHeight = lineHeight/2;
 				var offsetY = window.document.body.scrollTop;
-				var height = zss_editor.contentHeight;
-
-				var newPos = window.pageYOffset;
-
-				if (c < offsetY) {
-					newPos = c;
-				} else if (c > (offsetY + height - padding)) {
-					newPos = c - height + padding - 18;
+				var editorHeight = zss_editor.editorHeight;
+				var newPos;
+
+				var futureEditorHeight = caretYPosition + lineHeight;
+				if (caretYPosition < offsetY) {
+					newPos = caretYPosition;
+				} else if (futureEditorHeight > editorHeight + offsetY) {
+					newPos = futureEditorHeight - editorHeight + halfLineHeight;
 				}
 
-				window.scrollTo(0, newPos);
+				if (newPos) {
+					window.scrollTo(0, newPos);
+				}
 			}
 
 			zss_editor.backuprange = function(){
@@ -1629,6 +1635,14 @@
 				});
 			}
 
+			zss_editor.setEditorHeight = function(editorHeight) {
+				zss_editor.editorHeight = editorHeight;
+			}
+
+			zss_editor.setPlatform = function(platform) {
+				zss_editor.platform = platform;
+			}
+
 			//end
 		</script>