From e12e2a0de3f6a812d4f1a8fff8a5cea7667062bb Mon Sep 17 00:00:00 2001 From: kosbog Date: Tue, 19 Apr 2022 16:40:13 +0300 Subject: [PATCH 1/5] add link click handler --- README.md | 3 +++ index.d.ts | 5 +++++ src/RichEditor.js | 5 ++++- src/editor.js | 3 +++ 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index da1d149..81260af 100644 --- a/README.md +++ b/README.md @@ -114,6 +114,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 ed48e23..14410ca 100644 --- a/index.d.ts +++ b/index.d.ts @@ -98,6 +98,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 74de536..f4a0d5d 100755 --- a/src/RichEditor.js +++ b/src/RichEditor.js @@ -148,7 +148,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, onLink, onBlur, onChange, onPaste, onKeyUp, onKeyDown, onInput, onMessage, onCursorPosition} = that.props; try { const message = JSON.parse(event.nativeEvent.data); const data = message.data; @@ -197,6 +197,9 @@ export default class RichTextEditor extends Component { case messages.ON_INPUT: onInput?.(data); break; + case messages.LINK_TOUCHED: + onLink?.(data); + break; case messages.OFFSET_HEIGHT: that.setWebHeight(data); break; diff --git a/src/editor.js b/src/editor.js index 4252bd9..9ba6b2d 100644 --- a/src/editor.js +++ b/src/editor.js @@ -559,6 +559,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); From a25a68aaf0ed98e32ddcb2e8d8c3dd20e74e6cf1 Mon Sep 17 00:00:00 2001 From: Bohdan Kosytskyi Date: Thu, 28 Apr 2022 12:59:35 +0300 Subject: [PATCH 2/5] handle links in editor webview --- src/RichEditor.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/RichEditor.js b/src/RichEditor.js index f4a0d5d..5f80078 100755 --- a/src/RichEditor.js +++ b/src/RichEditor.js @@ -281,6 +281,13 @@ export default class RichTextEditor extends Component { javaScriptEnabled={true} source={viewHTML} onLoad={that.init} + onNavigationStateChange={(event) => { + if (event.navigationType === 'click' && event.url) { + Linking.openURL(event.url); + return false; + } + return true; + }} /> {Platform.OS === 'android' && (that._input = ref)} style={styles._input} />} From 6a63c551b219436853cfaa38756a83cf62b5bfba Mon Sep 17 00:00:00 2001 From: Bohdan Kosytskyi Date: Mon, 2 May 2022 13:03:30 +0300 Subject: [PATCH 3/5] fix link handler --- src/RichEditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/RichEditor.js b/src/RichEditor.js index 5f80078..0198ebc 100755 --- a/src/RichEditor.js +++ b/src/RichEditor.js @@ -260,7 +260,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 ( <> @@ -283,7 +283,7 @@ export default class RichTextEditor extends Component { onLoad={that.init} onNavigationStateChange={(event) => { if (event.navigationType === 'click' && event.url) { - Linking.openURL(event.url); + onLink.openURL(event.url); return false; } return true; From 5972ed487a8005e2140f9dd385f2193946006bf0 Mon Sep 17 00:00:00 2001 From: Bohdan Kosytskyi Date: Mon, 2 May 2022 13:05:38 +0300 Subject: [PATCH 4/5] fix link handler --- src/RichEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/RichEditor.js b/src/RichEditor.js index 0198ebc..f8655a2 100755 --- a/src/RichEditor.js +++ b/src/RichEditor.js @@ -283,7 +283,7 @@ export default class RichTextEditor extends Component { onLoad={that.init} onNavigationStateChange={(event) => { if (event.navigationType === 'click' && event.url) { - onLink.openURL(event.url); + onLink?.openURL(event.url); return false; } return true; From f836f9728671ad53d0863fd3500a13e50f4b3250 Mon Sep 17 00:00:00 2001 From: Bohdan Kosytskyi Date: Thu, 19 May 2022 09:39:54 +0300 Subject: [PATCH 5/5] link handler tweak --- src/RichEditor.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/RichEditor.js b/src/RichEditor.js index f8655a2..7f1d828 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'; @@ -281,12 +281,13 @@ export default class RichTextEditor extends Component { javaScriptEnabled={true} source={viewHTML} onLoad={that.init} - onNavigationStateChange={(event) => { - if (event.navigationType === 'click' && event.url) { - onLink?.openURL(event.url); - return false; - } - return true; + 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} />}