diff --git a/package.json b/package.json index 9ec89f52..5c383eac 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "main": "index.js", "license": "SEE LICENSE IN LICENSE", "dependencies": { - "react-native-webview-bridge-updated": "^1.0.0" + "react-native-webview-bridge": "0.40.1" }, "peerDependencies": { "react": "*", diff --git a/src/RichTextEditor.js b/src/RichTextEditor.js index 51e212ef..4bf78b63 100644 --- a/src/RichTextEditor.js +++ b/src/RichTextEditor.js @@ -1,6 +1,6 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import WebViewBridge from 'react-native-webview-bridge-updated'; +import WebViewBridge from 'react-native-webview-bridge'; import {InjectedMessageHandler} from './WebviewMessageHandler'; import {actions, messages} from './const'; import {Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, Platform, PixelRatio, Keyboard, Dimensions} from 'react-native'; @@ -51,7 +51,7 @@ export default class RichTextEditor extends Component { this._selectedTextChangeListeners = []; } - componentWillMount() { + componentDidMount() { if(PlatformIOS) { this.keyboardEventListeners = [ Keyboard.addListener('keyboardWillShow', this._onKeyboardWillShow), @@ -66,7 +66,9 @@ export default class RichTextEditor extends Component { } componentWillUnmount() { - this.keyboardEventListeners.forEach((eventListener) => eventListener.remove()); + if (this.keyboardEventListeners) { + this.keyboardEventListeners.forEach((eventListener) => eventListener.remove()); + } } _onKeyboardWillShow(event) { @@ -654,4 +656,4 @@ const styles = StyleSheet.create({ marginRight: -20, marginTop: 20 } -}); +}); \ No newline at end of file diff --git a/src/editor.html b/src/editor.html index 1b30f937..4bee5a49 100644 --- a/src/editor.html +++ b/src/editor.html @@ -778,6 +778,30 @@ return multi_parser.output.join(''); } + function getMirrorInfo(element) { + if (element.mirrorInfo) { + return element.mirrorInfo; + } + + var div = document.createElement('div'); + var style = div.style; + var hidden = 'hidden'; + var focusOut = 'focusout'; + style.whiteSpace = 'pre-wrap'; + style.wordWrap = 'break-word'; + style.position = 'absolute'; + style.visibility = hidden; + style.overflow = hidden; + document.body.appendChild(div); + element.mirrorInfo = { div: div, span: document.createElement('span') }; + element.addEventListener(focusOut, function cleanup() { + delete element.mirrorInfo; + document.body.removeChild(div); + element.removeEventListener(focusOut, cleanup); + }); + return element.mirrorInfo; + } + /*! * * ZSSRichTextEditor v0.5.2 @@ -1025,16 +1049,24 @@ } zss_editor.getCaretYPosition = function() { - var sel = window.getSelection(); - // Next line is comented to prevent deselecting selection. It looks like work but if there are any issues will appear then uconmment it as well as code above. - //sel.collapseToStart(); - var range = sel.getRangeAt(0); - var span = document.createElement('span');// something happening here preventing selection of elements - range.collapse(false); - range.insertNode(span); - var topPosition = span.offsetTop; - span.parentNode.removeChild(span); - return topPosition; + var selection = window.getSelection(); + var range = selection.getRangeAt(0); + var container = range.endContainer; + var selectedNode = container.nodeType === 3 ? container.parentNode : container; + var position = selectedNode.selectionEnd; + var _a = getMirrorInfo(selectedNode); + var div = _a.div; + var span = _a.span; + var content = selectedNode.textContent.substring(0, position); + + div.textContent = content; + span.textContent = (selectedNode.textContent.substring(position)) || '.'; + div.appendChild(span); + + var rect = selectedNode.getBoundingClientRect(); + var top = span.offsetTop - selectedNode.scrollTop + rect.top; + + return top; } zss_editor.calculateEditorHeightWithCaretPosition = function() {