editor add props onChange

wxik · Jul 8, 2020 · 0ad8a19 · 0ad8a19
1 parent 4fa9759
commit 0ad8a19
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@
 ## 1.0.8
 - Add `onInsertLink` event to toolbar, replace built-in processing
 - Add `insertLink` props to the editor to support customization
+- Add `onChange` props to the editor to get data
+
+### Fix Bug
+- Fix `focusContentEditor` Unable to get focus（android requires `react-native-webview>=7.5.2`）
+- Fix `insertImage` Cannot be executed without focus
 
 
 ## 1.0.7

diff --git a/README.md b/README.md
@@ -37,7 +37,10 @@ The editor component. Simply place this component in your view hierarchy to rece
 * `editorStyle`
 
 	Styling for container or for Rich Editor more dark or light settings
-
+
+* `onChange`
+    Callback after editor data modification
+
 * `useContainer`
 
 	A boolean value that determines if a View container is wrapped around the WebView. The default value is true. If you are using your own View to wrap this library around, set this value to false. 
@@ -47,6 +50,7 @@ The editor component. Simply place this component in your view hierarchy to rece
 
 *  `setContentHTML(html:string)`
 *  `insertImage(url:string) `
+*  `insertLink(title: string, url: string) `
 *  `setContentFocusHandler(handler: Function)`
 *  `blurContentEditor()`
 *  `focusContentEditor()`
@@ -95,8 +99,10 @@ Other props supported by the `RichToolbar` component are:
   	* `actions.insertLink`
 
 * `onPressAddImage`
-
     Functions called when the `addImage` actions are tapped. 
+
+* `onInsertLink`    
+    Logic for what happens when you press on the add insert link button
 
 * `selectedButtonStyle`
 * `iconTint`

diff --git a/examples/src/example.js b/examples/src/example.js
@@ -8,6 +8,7 @@ import {
     Appearance,
     Button,
     KeyboardAvoidingView,
+    Platform,
     SafeAreaView,
     ScrollView,
     StyleSheet,
@@ -22,8 +23,8 @@ const initHTML = `<br/>
 <center><b>Pell.js Rich Editor</b></center>
 <center>React Native</center>
 <br/>
-<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png" ></br></br>
-</br></br>
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png" /><br/><br/>
+<br/><br/>
 `;
 
 class Example extends React.Component {
@@ -43,6 +44,7 @@ class Example extends React.Component {
         that.onInsertLink = ::that.onInsertLink;
         that.onLinkDone = ::that.onLinkDone;
         that.themeChange = ::that.themeChange;
+        that.handleChange = ::that.handleChange;
     }
 
     componentDidMount() {
@@ -70,6 +72,14 @@ class Example extends React.Component {
         alert(html);
     }
 
+    /**
+     * editor change data
+     * @param {string} html
+     */
+    handleChange(html) {
+        console.log('editor data:', html);
+    }
+
     onPressAddImage() {
         // insert URL
         this.richText.current?.insertImage(
@@ -155,9 +165,10 @@ class Example extends React.Component {
                         style={[styles.rich, themeBg]}
                         placeholder={'please input content'}
                         initialContentHTML={initHTML}
+                        onChange={that.handleChange}
                     />
                 </ScrollView>
-                <KeyboardAvoidingView behavior={'padding'}>
+                <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
                     <RichToolbar
                         style={[styles.richBar, themeBg]}
                         editor={that.richText}

diff --git a/index.d.ts b/index.d.ts
@@ -35,6 +35,11 @@ declare module 'react-native-pell-rich-editor' {
          */
         editorInitializedCallback?: () => void;
 
+        /**
+         * Callback after editor data modification
+         */
+        onChange?: () => void;
+
         /**
          * Styling for container or for Rich Editor more dark or light settings
          */

diff --git a/package.json b/package.json
@@ -17,6 +17,6 @@
   },
   "peerDependencies": {
     "react-native": ">=0.50.0",
-    "react-native-webview": "*"
+    "react-native-webview": ">=7.5.2"
   }
 }
diff --git a/src/RichEditor.js b/src/RichEditor.js
@@ -10,6 +10,7 @@ export default class RichTextEditor extends Component {
     // static propTypes = {
     //     initialContentHTML: PropTypes.string,
     //     editorInitializedCallback: PropTypes.func,
+    //     onChange: PropTypes.func,
     // };
 
     static defaultProps = {
@@ -113,6 +114,10 @@ export default class RichTextEditor extends Component {
                     this.focusListeners.map((da) => da());
                     break;
                 }
+                case messages.CONTENT_CHANGE: {
+                    this.props.onChange && this.props.onChange(message.data);
+                    break;
+                }
                 case messages.OFFSET_HEIGHT:
                     this.setWebHeight(message.data);
                     break;
@@ -218,6 +223,7 @@ export default class RichTextEditor extends Component {
     }
 
     focusContentEditor() {
+        Platform.OS === 'android' && this.webviewBridge.requestFocus && this.webviewBridge.requestFocus();
         this._sendAction(actions.content, 'focus');
     }
 

diff --git a/src/RichToolbar.js b/src/RichToolbar.js
@@ -186,6 +186,7 @@ export default class RichToolbar extends Component {
             <View style={[styles.barContainer, style]}>
                 <FlatList
                     horizontal
+                    keyboardShouldPersistTaps={'always'}
                     keyExtractor={(item, index) => item.action + '-' + index}
                     data={this.state.data}
                     alwaysBounceHorizontal={false}

diff --git a/src/editor.js b/src/editor.js
@@ -61,6 +61,36 @@ function createHTML(options = {}) {
             window.ReactNativeWebView.postMessage(JSON.stringify(data));
         };
 
+        var anchorNode = void 0, focusOffset = 0;
+        var saveSelection = function(){
+            var rang = window.getSelection();
+            anchorNode = rang.anchorNode;
+            focusOffset = rang.focusOffset;
+
+            rang = window.getSelection();
+            anchorNode = rang.anchorNode;
+            focusOffset = rang.focusOffset;
+        }
+
+        var focusCurrent = function (){
+            try {
+                editor.content.focus();
+                var selection = window.getSelection();
+                if (anchorNode){
+                    var range = document.createRange();
+                    range.setStart(anchorNode, focusOffset);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                } else {
+                    selection.selectAllChildren(editor.content);
+                    selection.collapseToEnd();
+                }
+            } catch(e){
+                console.log(e)
+            }
+        }
+
         var editor = null, o_height = 0;
 
         var Actions = {
@@ -144,13 +174,12 @@ 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 (url){
+                        focusCurrent();
                         if(title){
                             exec('insertHTML', "<a href='"+ url +"'>"+title+"</a>");
                         } else {
@@ -161,7 +190,10 @@ function createHTML(options = {}) {
             },
             image: {
                 result: function(url) {
-                    if (url) { exec('insertHTML', "<br><div><img src='"+ url +"'/></div><br>");}
+                    if (url){
+                        focusCurrent();
+                        exec('insertHTML', "<br><div><img src='"+ url +"'/></div><br>");
+                    }
                 }
             },
             content: {
@@ -175,7 +207,7 @@ function createHTML(options = {}) {
                     editor.content.blur();
                 },
                 focus: function() {
-                    editor.content.focus();
+                    focusCurrent();
                 },
                 postHtml: function (){
                     postAction({type: 'CONTENT_HTML_RESPONSE', data: editor.content.innerHTML});
@@ -224,6 +256,7 @@ function createHTML(options = {}) {
 
                 if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
                 settings.onChange(content.innerHTML);
+                saveSelection();
             };
             content.onkeydown = function (event) {
                 if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
@@ -252,12 +285,15 @@ function createHTML(options = {}) {
                         activeTools.push(k);
                     }
                 }
-                console.log('change', activeTools);
+                // console.log('change', activeTools);
                 postAction({type: 'SELECTION_CHANGE', data: activeTools});
                 return true;
             };
             addEventListener(content, 'touchend', function(){
-                setTimeout(handler, 100);
+                setTimeout(function (){
+                    handler();
+                    saveSelection();
+                }, 100);
             });
             addEventListener(content, 'blur', function () {
                 postAction({type: 'SELECTION_CHANGE', data: []});
@@ -292,6 +328,11 @@ function createHTML(options = {}) {
         editor = init({
             element: document.getElementById('editor'),
             defaultParagraphSeparator: 'div',
+            onChange: function (){
+                setTimeout(function(){
+                    postAction({type: 'CONTENT_CHANGE', data: Actions.content.getHtml()});
+                }, 10);
+            }
         })
     })(window);
 </script>