diff --git a/src/RichEditor.js b/src/RichEditor.js index f194ac3..bfece54 100755 --- a/src/RichEditor.js +++ b/src/RichEditor.js @@ -266,7 +266,7 @@ export default class RichTextEditor extends Component { renderWebView() { let that = this; - const { html, editorStyle, useContainer, style, onLink, dataDetectorTypes, ...rest } = that.props; + const { html, editorStyle, useContainer, style, onLink, dataDetectorTypes, baseUrl, ...rest } = that.props; const { html: viewHTML } = that.state; return ( <> @@ -285,9 +285,13 @@ export default class RichTextEditor extends Component { domStorageEnabled={false} bounces={false} javaScriptEnabled={true} - source={viewHTML} + source={{ ...viewHTML, baseUrl: baseUrl}} onLoad={that.init} onShouldStartLoadWithRequest={event => { + if (baseUrl && event.url.startsWith(baseUrl)) { + // We are trying to open a page which starts with the baseUrl, so we handle it internally + return true; + } if (event.url !== 'about:blank') { this.webviewBridge?.stopLoading(); Linking?.openURL(event.url); diff --git a/src/editor.js b/src/editor.js index 6559109..ca97996 100644 --- a/src/editor.js +++ b/src/editor.js @@ -485,7 +485,10 @@ function createHTML(options = {}) { init: function (){ if (${useContainer}){ - // setInterval(Actions.UPDATE_HEIGHT, 150); + // setInterval(Actions.UPDATE_HEIGHT, 800); + // If there were images in the initial content, they may change the height of the container + // when they are loaded. As such we need to register waiting for finish of load of the images. + Actions.REGISTER_IMAGE_LOAD_HEIGHT(); Actions.UPDATE_HEIGHT(); } else { // react-native-webview There is a bug in the body and html height setting of a certain version of 100% @@ -493,6 +496,14 @@ function createHTML(options = {}) { } }, + REGISTER_IMAGE_LOAD_HEIGHT: function () { + const images = document.getElementsByTagName('img'); + for (let i = 0; i < images.length; i++) { + images[i].onload = Actions.UPDATE_HEIGHT; + images[i].onerror = Actions.UPDATE_HEIGHT; + } + }, + UPDATE_HEIGHT: function() { if (!${useContainer}) return; // var height = Math.max(docEle.scrollHeight, body.scrollHeight);