Links, prepareInsert()

src/RichTextEditor.js

@@ -2,6 +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} from 'react-native';
 
 const injectScript = `
   (function () {
@@ -22,7 +23,10 @@ export default class RichTextEditor extends Component {
     this.registerToolbar = this.registerToolbar.bind(this);
     this.onBridgeMessage = this.onBridgeMessage.bind(this);
     this.state = {
-      listeners: []
+      listeners: [],
+      showLinkDialog: false,
+      linkTitle: '',
+      linkUrl: ''
     };
   }
 
@@ -80,16 +84,91 @@ export default class RichTextEditor extends Component {
     }
   }
 
+  _renderLinkModal() {
+    return (
+        <Modal
+            animationType={"fade"}
+            transparent
+            visible={this.state.showLinkDialog}
+            onRequestClose={() => this.setState({showLinkDialog: false})}
+        >
+          <View style={styles.modal}>
+
+
+            <View style={styles.innerModal}>
+
+              <Text>Title</Text>
+              <View style={styles.inputWrapper}>
+                <TextInput
+                    style={{height: 20}}
+                    onChangeText={(text) => this.setState({linkTitle: text})}
+                    value={this.state.linkTitle}
+                />
+              </View>
+
+              <Text style={{marginTop: 10}}>URL</Text>
+              <View style={styles.inputWrapper}>
+                <TextInput
+                    style={{height: 20}}
+                    onChangeText={(text) => this.setState({linkUrl: text})}
+                    value={this.state.linkUrl}
+                />
+              </View>
+
+              {this._renderModalButtons()}
+            </View>
+          </View>
+        </Modal>
+    );
+  }
+
+  _hideModal() {
+    this.setState({
+      showLinkDialog: false,
+      linkTitle: '',
+      linkUrl: ''
+    })
+  }
+
+  _renderModalButtons() {
+    return (
+      <View style={{paddingTop: 10, alignSelf: 'stretch', flexDirection: 'row'}}>
+        <View style={{flex: 1}}/>
+        <TouchableOpacity
+            onPress={() => this._hideModal()}
+        >
+          <Text style={[styles.button, {paddingRight: 10}]}>
+            Cancel
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+            onPress={() => {
+              this.insertLink(this.state.linkUrl, this.state.linkTitle);
+              this._hideModal();
+            }}
+        >
+          <Text style={styles.button}>
+            OK
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
   render() {
     return (
-      <WebViewBridge
-        {...this.props}
-        hideKeyboardAccessoryView={true}
-        ref={(r) => {this.webviewBridge = r}}
-        onBridgeMessage={(message) => this.onBridgeMessage(message)}
-        injectedJavaScript={injectScript}
-        source={require('./editor.html')}
-      />
+      <View style={{flex: 1}}>
+        <WebViewBridge
+          style={{flex: 1}}
+          {...this.props}
+          hideKeyboardAccessoryView={true}
+          ref={(r) => {this.webviewBridge = r}}
+          onBridgeMessage={(message) => this.onBridgeMessage(message)}
+          injectedJavaScript={injectScript}
+          source={require('./editor.html')}
+        />
+        {this._renderLinkModal()}
+      </View>
     );
   }
 
@@ -114,9 +193,15 @@ export default class RichTextEditor extends Component {
   //-------------------------------------------------------------------------------
   //--------------- Public API
 
+  showLinkDialog() {
+    this.setState({
+      showLinkDialog: true
+    });
+  }
+
   focusTitle() {
     this._sendAction(actions.focusTitle);
-  }wewe
+  }
 
   focusContent() {
     this._sendAction(actions.focusContent);
@@ -213,6 +298,7 @@ export default class RichTextEditor extends Component {
   }
 
   insertLink(url, title) {
+
     this._sendAction(actions.insertLink, {url, title});
   }
 
@@ -252,6 +338,14 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.setContentPlaceholder);
   }
 
+  prepareInsert() {
+    this._sendAction(actions.prepareInsert);
+  }
+
+  restoreSelection() {
+    this._sendAction(actions.restoreSelection);
+  }
+
   async getTitleHtml() {
     return new Promise((resolve, reject) => {
       this.titleResolve = resolve;
@@ -289,4 +383,28 @@ export default class RichTextEditor extends Component {
     this.contentFocusHandler = callbackHandler;
     this._sendAction(actions.setContentFocusHandler);
   }
-}
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  innerModal: {
+    backgroundColor: '#ffffff',
+    padding: 20,
+    alignSelf: 'stretch',
+    margin: 40
+  },
+  button: {
+    fontSize: 16
+  },
+  inputWrapper: {
+    marginTop: 10,
+    marginBottom: 10,
+    borderBottomColor: '#000000',
+    borderBottomWidth: 1
+  }
+});

src/RichTextToolbar.js

@@ -144,11 +144,15 @@ export default class RichTextToolbar extends Component {
         this.state.editor._sendAction(action);
         break;
       case actions.insertLink:
+        this.state.editor.prepareInsert();
         if(this.props.onPressAddLink) {
           this.props.onPressAddLink();
+        } else {
+          this.state.editor.showLinkDialog();
         }
         break;
       case actions.insertImage:
+        this.state.editor.prepareInsert();
         if(this.props.onPressAddImage) {
           this.props.onPressAddImage();
         }

src/WebviewMessageHandler.js

@@ -69,11 +69,9 @@ export const InjectedMessageHandler = `
           zss_editor.setOrderedList();
           break;
         case '${actions.insertLink}':
-          zss_editor.prepareInsert();
           zss_editor.insertLink(action.data.url, action.data.title);
           break;
         case '${actions.insertImage}':
-          zss_editor.prepareInsert();
           zss_editor.insertImage(action.data.url, action.data.alt);
           break;
         case '${actions.setSubscript}':
@@ -120,7 +118,13 @@ export const InjectedMessageHandler = `
         case '${actions.focusTitle}':
           zss_editor.focusTitle();
           break;
+        case '${actions.prepareInsert}':
+          zss_editor.prepareInsert();
+          break;
+        case '${actions.restoreSelection}':
+          zss_editor.restorerange();
+          break;
       }
     };
   }
-`;
+`;

src/ZSSRichTextEditor/ZSSRichTextEditor.js

@@ -204,21 +204,17 @@ zss_editor.calculateEditorHeightWithCaretPosition = function(editorId) {
 
 zss_editor.backuprange = function(){
     var selection = window.getSelection();
-    if(selection && selection.length > 0) {
-        var range = selection.getRangeAt(0);
-        zss_editor.currentSelection = {"startContainer": range.startContainer, "startOffset":range.startOffset,"endContainer":range.endContainer, "endOffset":range.endOffset};
-    }
+    var range = selection.getRangeAt(0);
+    zss_editor.currentSelection = {"startContainer": range.startContainer, "startOffset":range.startOffset,"endContainer":range.endContainer, "endOffset":range.endOffset};
 }
 
 zss_editor.restorerange = function(){
     var selection = window.getSelection();
-    if(selection && selection.length > 0) {
-        selection.removeAllRanges();
-        var range = document.createRange();
-        range.setStart(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset);
-        range.setEnd(zss_editor.currentSelection.endContainer, zss_editor.currentSelection.endOffset);
-        selection.addRange(range);
-    }
+    selection.removeAllRanges();
+    var range = document.createRange();
+    range.setStart(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset);
+    range.setEnd(zss_editor.currentSelection.endContainer, zss_editor.currentSelection.endOffset);
+    selection.addRange(range);
 }
 
 zss_editor.getSelectedNode = function() {
@@ -396,7 +392,7 @@ zss_editor.setBackgroundColor = function(color) {
 // Needs addClass method
 
 zss_editor.insertLink = function(url, title) {
-    
+
     zss_editor.restorerange();
     var sel = document.getSelection();
     console.log(sel);
@@ -508,7 +504,6 @@ zss_editor.prepareInsert = function() {
 }
 
 zss_editor.insertImage = function(url, alt) {
-    zss_editor.focusContent();
     zss_editor.restorerange();
     var html = '<img src="'+url+'" alt="'+alt+'" />';
     zss_editor.insertHTML(html);
@@ -708,11 +703,11 @@ zss_editor.enabledEditingItems = function(e) {
 }
 
 zss_editor.focusContent = function() {
-    zss_editor.focusEditor('zss_editor_content');
+    $('#zss_editor_content').focus();
 }
 
 zss_editor.focusTitle = function() {
-    zss_editor.focusEditor('zss_editor_title');
+    $('#zss_editor_title').focus();
 }
 
 zss_editor.focusEditor = function(editorId) {

src/const.js

@@ -36,7 +36,9 @@ export const actions = {
   setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
   setContentPlaceholder: 'SET_TITLE_PLACEHOLDER',
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
-  setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER'
+  setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
+  prepareInsert: 'PREPARE_INSERT',
+  restoreSelection: 'RESTORE_SELECTION'
 };