rn-rich-text-editor 1.0.7 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-rich-text-editor",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A rich text editor component for React Native",
   "keywords": [
     "react-native",

package/src/Editor.js

@@ -115,7 +115,7 @@ export default class Editor extends Component {
             })),
       },
       keyboardHeight: 0,
-      height: initialHeight > 0 ? initialHeight : DEFAULT_EDITOR_HEIGHT,
+      height: readOnly ? 1 : (initialHeight > 0 ? initialHeight : DEFAULT_EDITOR_HEIGHT),
     };
     that.focusListeners = [];
   }
@@ -215,6 +215,9 @@ export default class Editor extends Component {
           onInput?.(data);
           break;
         case messages.OFFSET_HEIGHT:
+          if (that.props.readOnly) {
+            that.setState({ height: Number(data) || 1 });
+          }
           that.setWebHeight(data);
           break;
         case messages.OFFSET_Y:

package/src/Toolbar.js

@@ -465,7 +465,7 @@ export default class Toolbar extends Component {
     const disabledStyle = disabled ? { backgroundColor: '#C9CED7' } : {};
     const vStyle = [styles.barContainer, disabledStyle, style, disabled && this._getButtonDisabledStyle()];
     const barBg = (style && style.backgroundColor) || (disabled && '#C9CED7') || TOOLBAR_BG;
-    const showFades = horizontal;
+    const showFades = horizontal && !disabled;
     return (
       <View style={vStyle}>
         <View style={styles.scrollWrapper} onLayout={showFades ? this._onLayout : undefined}>

package/src/editor/createHTML.js

@@ -772,7 +772,7 @@ function escapeForScript(s) {
 }
 
 /**
- * Creates minimal HTML for read-only display: content in a fixed-height scrollable box.
+ * Creates minimal HTML for read-only display: content expands to full height, no scroll.
  * No editor, no toolbar. Content is escaped and embedded in the template.
  */
 function createReadOnlyHTML(options = {}) {
@@ -793,12 +793,9 @@ function createReadOnlyHTML(options = {}) {
     <style>
         ${initialCSSText}
         * { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); box-sizing: border-box; }
-        html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; height: 100%; }
+        html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
         body { background-color: ${backgroundColor}; color: ${color}; }
         .readonly-container {
-            height: 100%;
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
             padding: 0;
             ${contentCSSText}
         }
@@ -814,9 +811,16 @@ function createReadOnlyHTML(options = {}) {
             var el = document.getElementById('readonly-content');
             if (el) {
                 el.innerHTML = content;
+                var sendHeight = function() {
+                    var h = document.body.scrollHeight;
+                    if (window.ReactNativeWebView) {
+                        window.ReactNativeWebView.postMessage(JSON.stringify({type: 'OFFSET_HEIGHT', data: h}));
+                    }
+                };
+                setTimeout(sendHeight, 0);
             }
         })();
-    </script>
+    <\/script>
 </body>
 </html>
 `;