rn-rich-text-editor 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Editor.js +7 -2
- package/src/editor/createHTML.js +19 -3
package/package.json
CHANGED
package/src/Editor.js
CHANGED
|
@@ -296,7 +296,12 @@ export default class Editor extends Component {
|
|
|
296
296
|
renderWebView() {
|
|
297
297
|
let that = this;
|
|
298
298
|
const { html, editorStyle, useContainer, style, onLink, dataDetectorTypes, readOnly, ...rest } = that.props;
|
|
299
|
-
const { html: viewHTML } = that.state;
|
|
299
|
+
const { html: viewHTML, height: stateHeight } = that.state;
|
|
300
|
+
const webViewStyle = [
|
|
301
|
+
styles.webview,
|
|
302
|
+
style,
|
|
303
|
+
readOnly && stateHeight > 0 ? { height: stateHeight, flex: 0 } : undefined,
|
|
304
|
+
].filter(Boolean);
|
|
300
305
|
return (
|
|
301
306
|
<>
|
|
302
307
|
<WebView
|
|
@@ -305,7 +310,7 @@ export default class Editor extends Component {
|
|
|
305
310
|
hideKeyboardAccessoryView={!readOnly}
|
|
306
311
|
keyboardDisplayRequiresUserAction={false}
|
|
307
312
|
nestedScrollEnabled={readOnly || !useContainer}
|
|
308
|
-
style={
|
|
313
|
+
style={webViewStyle}
|
|
309
314
|
{...rest}
|
|
310
315
|
ref={that.setRef}
|
|
311
316
|
onMessage={that.onMessage}
|
package/src/editor/createHTML.js
CHANGED
|
@@ -785,6 +785,8 @@ function createReadOnlyHTML(options = {}) {
|
|
|
785
785
|
initialCSSText = '',
|
|
786
786
|
} = options;
|
|
787
787
|
const escapedContent = escapeForScript(content);
|
|
788
|
+
const useDefaultFont =
|
|
789
|
+
!/font-family\s*:/i.test(contentCSSText) && !/font-size\s*:/i.test(contentCSSText);
|
|
788
790
|
return `
|
|
789
791
|
<!DOCTYPE html>
|
|
790
792
|
<html>
|
|
@@ -793,10 +795,15 @@ function createReadOnlyHTML(options = {}) {
|
|
|
793
795
|
<style>
|
|
794
796
|
${initialCSSText}
|
|
795
797
|
* { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); box-sizing: border-box; }
|
|
796
|
-
html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
|
|
798
|
+
html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; overflow: hidden; height: auto !important; min-height: 0 !important; }
|
|
797
799
|
body { background-color: ${backgroundColor}; color: ${color}; }
|
|
798
800
|
.readonly-container {
|
|
801
|
+
${useDefaultFont ? 'font-family: Arial, Helvetica, sans-serif; font-size: 1em;' : ''}
|
|
802
|
+
color: ${color};
|
|
799
803
|
padding: 0;
|
|
804
|
+
height: auto !important;
|
|
805
|
+
min-height: 0 !important;
|
|
806
|
+
width: 100%;
|
|
800
807
|
${contentCSSText}
|
|
801
808
|
}
|
|
802
809
|
</style>
|
|
@@ -811,13 +818,22 @@ function createReadOnlyHTML(options = {}) {
|
|
|
811
818
|
var el = document.getElementById('readonly-content');
|
|
812
819
|
if (el) {
|
|
813
820
|
el.innerHTML = content;
|
|
821
|
+
var lastH = 0;
|
|
814
822
|
var sendHeight = function() {
|
|
815
|
-
var h =
|
|
816
|
-
if (window.ReactNativeWebView) {
|
|
823
|
+
var h = Math.ceil(el.scrollHeight);
|
|
824
|
+
if (h !== lastH && window.ReactNativeWebView) {
|
|
825
|
+
lastH = h;
|
|
817
826
|
window.ReactNativeWebView.postMessage(JSON.stringify({type: 'OFFSET_HEIGHT', data: h}));
|
|
818
827
|
}
|
|
819
828
|
};
|
|
820
829
|
setTimeout(sendHeight, 0);
|
|
830
|
+
requestAnimationFrame(function() { requestAnimationFrame(sendHeight); });
|
|
831
|
+
setTimeout(sendHeight, 100);
|
|
832
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
833
|
+
try {
|
|
834
|
+
new ResizeObserver(sendHeight).observe(el);
|
|
835
|
+
} catch (e) {}
|
|
836
|
+
}
|
|
821
837
|
}
|
|
822
838
|
})();
|
|
823
839
|
<\/script>
|