diff --git a/examples/src/example.js b/examples/src/example.js
index a6a6ced..c1ed741 100644
--- 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 = `
Pell.js Rich Editor
@@ -27,6 +28,7 @@ const initHTML = `
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 (
+
@@ -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
new file mode 100644
index 0000000..d30a9a0
--- /dev/null
+++ 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 (
+ this.setModalVisible(false)}>
+
+
+ Insert Link
+
+
+ this.setTitle(text)}
+ />
+
+
+ this.setURL(text)}
+ />
+
+
+ this.setModalVisible(false)}>
+ Cancel
+
+
+ OK
+
+
+
+
+ );
+ }
+}
+
+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
index 8e55e58..f5c2780 100755
--- 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
index 469c4a0..207dcf4 100644
--- 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', ""+title+"");
} else {