insert link modal

wxik · Jul 7, 2020 · 71b8cbb · 71b8cbb
1 parent 43fdfc1
commit 71b8cbb
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 3 deletions.
diff --git a/examples/src/example.js b/examples/src/example.js
@@ -16,6 +16,7 @@ import {
     View,
 } from 'react-native';
 import {RichEditor, RichToolbar} from 'react-native-pell-rich-editor';
+import {InsertLinkModal} from './insertLink';
 
 const initHTML = `<br/>
 <center><b>Pell.js Rich Editor</b></center>
@@ -27,6 +28,7 @@ const initHTML = `<br/>
 
 class Example extends React.Component {
     richText = React.createRef();
+    linkModal = React.createRef();
 
     constructor(props) {
         super(props);
@@ -39,6 +41,7 @@ class Example extends React.Component {
         that.onTheme = ::that.onTheme;
         that.onPressAddImage = ::that.onPressAddImage;
         that.onInsertLink = ::that.onInsertLink;
+        that.onLinkDone = ::that.onLinkDone;
         that.themeChange = ::that.themeChange;
     }
 
@@ -78,7 +81,12 @@ class Example extends React.Component {
     }
 
     onInsertLink() {
-        this.richText.current?.insertLink('Google', 'http://google.com');
+        // this.richText.current?.insertLink('Google', 'http://google.com');
+        this.linkModal.current?.setModalVisible(true);
+    }
+
+    onLinkDone({title, url}) {
+        this.richText.current?.insertLink(title, url);
     }
 
     onHome() {
@@ -109,6 +117,13 @@ class Example extends React.Component {
         const themeBg = {backgroundColor};
         return (
             <SafeAreaView style={[styles.container, themeBg]}>
+                <InsertLinkModal
+                    placeholderColor={placeholderColor}
+                    color={color}
+                    backgroundColor={backgroundColor}
+                    onDone={that.onLinkDone}
+                    ref={that.linkModal}
+                />
                 <View style={styles.nav}>
                     <Button title={'HOME'} onPress={that.onHome} />
                     <Button title={theme} onPress={that.onTheme} />
@@ -181,7 +196,7 @@ const styles = StyleSheet.create({
     },
     item: {
         borderBottomWidth: StyleSheet.hairlineWidth,
-        borderColor: '#eee',
+        borderColor: '#e8e8e8',
         flexDirection: 'row',
         height: 40,
         alignItems: 'center',

diff --git a/examples/src/insertLink.js b/examples/src/insertLink.js
@@ -0,0 +1,122 @@
+/**
+ *
+ * @author tangzehua
+ * @sine 2020-07-07 20:21
+ */
+
+// @flow
+import React from 'react';
+import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
+import Modal from 'react-native-modal';
+
+export class InsertLinkModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isModalVisible: false,
+        };
+        this.onDone = ::this.onDone;
+    }
+
+    setModalVisible(visible) {
+        this.setState({isModalVisible: visible});
+    }
+
+    setTitle(title) {
+        this.title = title;
+    }
+
+    setURL(url) {
+        this.url = url;
+    }
+
+    onDone() {
+        const title = this.title;
+        const url = this.url;
+        this.setModalVisible(false);
+        this.props?.onDone({title, url});
+    }
+
+    render() {
+        const {isModalVisible} = this.state;
+        const {color, placeholderColor, backgroundColor} = this.props;
+        return (
+            <Modal
+                isVisible={isModalVisible}
+                backdropColor={color}
+                backdropOpacity={0.3}
+                onBackdropPress={() => this.setModalVisible(false)}>
+                <View style={[styles.dialog, {backgroundColor}]}>
+                    <View style={styles.linkTitle}>
+                        <Text style={{color}}>Insert Link</Text>
+                    </View>
+                    <View style={styles.item}>
+                        <TextInput
+                            style={[styles.input, {color}]}
+                            placeholderTextColor={placeholderColor}
+                            placeholder={'title'}
+                            onChangeText={(text) => this.setTitle(text)}
+                        />
+                    </View>
+                    <View style={styles.item}>
+                        <TextInput
+                            style={[styles.input, {color}]}
+                            placeholderTextColor={placeholderColor}
+                            placeholder="http(s)://"
+                            onChangeText={(text) => this.setURL(text)}
+                        />
+                    </View>
+                    <View style={styles.buttonView}>
+                        <TouchableOpacity style={styles.btn} onPress={() => this.setModalVisible(false)}>
+                            <Text style={styles.text}>Cancel</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.btn} onPress={this.onDone}>
+                            <Text style={styles.text}>OK</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </Modal>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    item: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderColor: '#e8e8e8',
+        flexDirection: 'row',
+        height: 40,
+        alignItems: 'center',
+        paddingHorizontal: 15,
+    },
+    input: {
+        flex: 1,
+        height: 40,
+    },
+    linkTitle: {
+        height: 36,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderColor: '#b3b3b3',
+    },
+    dialog: {
+        borderRadius: 8,
+        marginHorizontal: 40,
+        paddingHorizontal: 10,
+    },
+
+    buttonView: {
+        flexDirection: 'row',
+        height: 36,
+        paddingVertical: 4,
+    },
+    btn: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        color: '#286ab2'
+    }
+});
diff --git a/src/RichEditor.js b/src/RichEditor.js
@@ -226,7 +226,7 @@ export default class RichTextEditor extends Component {
     }
 
     insertLink(title, url) {
-        this._sendAction(actions.insertLink, 'result', {title, url});
+        url && this._sendAction(actions.insertLink, 'result', {title, url});
     }
 
     init() {

diff --git a/src/editor.js b/src/editor.js
@@ -144,11 +144,13 @@ function createHTML(options = {}) {
             },
             link: {
                 result: function(data) {
+                alert(document.selection.createRange());
                     data = data || {};
                     var title = data.title;
                     // title = title || window.prompt('Enter the link title');
                     var url = data.url || window.prompt('Enter the link URL');
                     if (url) {
+                    editor.content.focus();
                         if(title){
                             exec('insertHTML', "<a href='"+ url +"'>"+title+"</a>");
                         } else {