diff --git a/README.md b/README.md index a61a849..c0a1bb5 100644 --- 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 index 05ac01f..772e9be 100644 --- 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 index a9b31e9..14bea22 100755 --- 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' && (that._input = ref)} style={styles._input} />} diff --git a/src/editor.js b/src/editor.js index c7c9d88..92079ad 100644 --- 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);