Merge pull request #240 from kosbog/onlink-handler

Link click handler
wxik · Apr 20, 2023 · 400b30b · 400b30b
2 parents 142777d + 55fde20
commit 400b30b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,9 @@ The editor component. Simply place this component in your view hierarchy to rece
 * `onInput`
   Callback input value
 
+* `onLink`
+  Callback link click
+
 * `onFocus`
   Callback editor focus
 

diff --git a/index.d.ts b/index.d.ts
@@ -103,6 +103,11 @@ export interface RichEditorProps extends WebViewProps {
      */
     onInput?: ({data: string, inputType: string}) => void;
 
+    /**
+     * Callback when the link clicked
+     */
+    onLink?: (url: string) => void;
+
     /**
      * Callback when the editor focus some content
      */

diff --git a/src/RichEditor.js b/src/RichEditor.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {WebView} from 'react-native-webview';
 import {actions, messages} from './const';
-import {Keyboard, Platform, StyleSheet, TextInput, View} from 'react-native';
+import {Keyboard, Platform, StyleSheet, TextInput, View, Linking} from 'react-native';
 import {createHTML} from './editor';
 
 const PlatformIOS = Platform.OS === 'ios';
@@ -140,7 +140,7 @@ export default class RichTextEditor extends Component {
 
   onMessage(event) {
     const that = this;
-    const {onFocus, onBlur, onChange, onPaste, onKeyUp, onKeyDown, onInput, onMessage, onCursorPosition} = that.props;
+    const {onFocus, onBlur, onChange, onPaste, onKeyUp, onKeyDown, onInput, onMessage, onCursorPosition, onLink} = that.props;
     try {
       const message = JSON.parse(event.nativeEvent.data);
       const data = message.data;
@@ -156,6 +156,9 @@ export default class RichTextEditor extends Component {
             }
           }
           break;
+        case messages.LINK_TOUCHED:
+          onLink?.(data);
+          break;
         case messages.LOG:
           console.log('FROM EDIT:', ...data);
           break;
@@ -249,7 +252,7 @@ export default class RichTextEditor extends Component {
 
   renderWebView() {
     let that = this;
-    const {html, editorStyle, useContainer, style, ...rest} = that.props;
+    const {html, editorStyle, useContainer, style, onLink, ...rest} = that.props;
     const {html: viewHTML} = that.state;
     return (
       <>
@@ -270,6 +273,14 @@ export default class RichTextEditor extends Component {
           javaScriptEnabled={true}
           source={viewHTML}
           onLoad={that.init}
+          onShouldStartLoadWithRequest={event => {
+            if (event.url !== 'about:blank') {
+              this.webviewBridge?.stopLoading();
+              Linking?.openURL(event.url);
+              return false;
+            }
+            return true;
+          }}
         />
         {Platform.OS === 'android' && <TextInput ref={ref => (that._input = ref)} style={styles._input} />}
       </>

diff --git a/src/editor.js b/src/editor.js
@@ -647,6 +647,9 @@ function createHTML(options = {}) {
                     if (ele.checked) ele.setAttribute('checked', '');
                     else ele.removeAttribute('checked');
                 }
+                if (ele.nodeName === 'A' && ele.getAttribute('href')) {
+                    postAction({type: 'LINK_TOUCHED', data: ele.getAttribute('href')});
+                }
             }
             addEventListener(content, 'touchcancel', handleSelecting);
             addEventListener(content, 'mouseup', handleSelecting);