onMessage

wxik · Dec 16, 2020 · 89cca50 · 89cca50
1 parent ce07a3a
commit 89cca50
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 
 
-## 1.4.2
+## 1.5.0
+- Add `onMessage` props on editor Callback outside postMessage internal type processing
+- Added `_.sendEvent(type, data)` event callback to RN, using onMessage to receive callback
+
+## 1.4.0
 #### Added
 - Add `pasteAsPlainText` props on editor
 - Add `removeFormat` props on editor

diff --git a/README.md b/README.md
@@ -59,6 +59,12 @@ The editor component. Simply place this component in your view hierarchy to rece
 * `onHeightChange`
     Callback after height change
 
+* `onMessage`
+    Callback outside postMessage internal type processing
+    ```
+    <img src="" ontouchstart="_.sendEvent('ImgClick')"/>
+    ```
+
 * `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.

diff --git a/examples/src/example.js b/examples/src/example.js
@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import {
+    Alert,
     Appearance,
     Button,
     Keyboard,
@@ -23,14 +24,14 @@ import {InsertLinkModal} from './insertLink';
 import {EmojiView} from './emoji';
 
 const initHTML = `<br/>
-<center><b>Rich Editor</b></center>
+<center><b ontouchstart="_.sendEvent('TitleClick')">Rich Editor</b></center>
 <center>
 <a href="https://github.com/wxik/react-native-rich-editor">React Native</a>
 <span>And</span>
 <a href="https://github.com/wxik/flutter-rich-editor">Flutter</a>
 </center>
 <br/>
-<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/120px-React-icon.svg.png" />
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/120px-React-icon.svg.png" ontouchstart="_.sendEvent('ImgClick')"/>
 <br/><br/><br/><br/>
 `;
 
@@ -203,6 +204,19 @@ class Example extends React.Component {
         console.log('KeyDown:', data);
     };
 
+    handleMessage = ({type, data}) => {
+        switch (type) {
+            case 'ImgClick':
+                Alert.alert('Click Image');
+                break;
+            case 'TitleClick':
+                Alert.alert('Click Title');
+                break;
+            default:
+                console.log('onMessage', type, data);
+        }
+    };
+
     render() {
         let that = this;
         const {contentStyle, theme, emojiVisible, disabled} = that.state;
@@ -260,6 +274,7 @@ class Example extends React.Component {
                         onPaste={that.handlePaste}
                         onKeyUp={that.handleKeyUp}
                         onKeyDown={that.handleKeyDown}
+                        onMessage={that.handleMessage}
                         pasteAsPlainText={true}
                     />
                 </ScrollView>

diff --git a/src/RichEditor.js b/src/RichEditor.js
@@ -175,6 +175,9 @@ export default class RichTextEditor extends Component {
                 case messages.OFFSET_HEIGHT:
                     this.setWebHeight(data);
                     break;
+                default:
+                    this.props.onMessage && this.props.onMessage(message);
+                    break;
             }
         } catch (e) {
             //alert('NON JSON MESSAGE');

diff --git a/src/editor.js b/src/editor.js
@@ -40,7 +40,7 @@ function createHTML(options = {}) {
 <div class="content"><div id="editor" class="pell"></div></div>
 <script>
     var __DEV__ = !!${window.__DEV__};
-    (function (exports) {
+    var _ = (function (exports) {
         var placeholderColor = '${placeholderColor}';
 
         var body = document.body, docEle = document.documentElement;
@@ -68,8 +68,11 @@ function createHTML(options = {}) {
             return document.execCommand(command, false, value);
         };
 
+        var _postMessage = function (data){
+            exports.window.postMessage(JSON.stringify(data));
+        }
         var postAction = function(data){
-            (editor.content.contentEditable === 'true' || data.type === 'OFFSET_HEIGHT') && exports.window.postMessage(JSON.stringify(data));
+            editor.content.contentEditable === 'true' && _postMessage(data);
         };
 
         console.log = function (){
@@ -196,7 +199,7 @@ function createHTML(options = {}) {
             UPDATE_HEIGHT: function() {
                 var height = Math.max(docEle.scrollHeight, body.scrollHeight);
                 if (o_height !== height){
-                    postAction({type: 'OFFSET_HEIGHT', data: o_height = height});
+                    _postMessage({type: 'OFFSET_HEIGHT', data: o_height = height});
                 }
             }
         };
@@ -324,6 +327,13 @@ function createHTML(options = {}) {
                 }, 10);
             }
         })
+        return {
+            sendEvent: function (type, data){
+                event.preventDefault();
+                event.stopPropagation();
+                _postMessage({type, data});
+            }
+        }
     })({
         window: window.ReactNativeWebView || window.parent,
     });