rn-rich-text-editor 0.0.16 → 0.0.18

package/package.json

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

package/src/Editor.js

@@ -3,7 +3,7 @@ import { WebView } from 'react-native-webview';
 import { actions } from './actions';
 import { messages } from './messages';
 import { Keyboard, Platform, StyleSheet, TextInput, View, Linking } from 'react-native';
-import { createHTML } from './editor/createHTML';
+import { createHTML, createReadOnlyHTML } from './editor/createHTML';
 
 const PlatformIOS = Platform.OS === 'ios';
 
@@ -18,6 +18,7 @@ export default class Editor extends Component {
     initialContentHTML: '',
     initialFocus: false,
     disabled: false,
+    readOnly: false,
     useContainer: true,
     pasteAsPlainText: false,
     autoCapitalize: 'off',
@@ -69,39 +70,49 @@ export default class Editor extends Component {
       initialHeight,
       initialFocus,
       disabled,
+      readOnly,
       styleWithCSS,
       useCharacter,
       defaultHttps,
+      initialContentHTML,
     } = props;
+    const contentForReadOnly = initialContentHTML || (typeof html === 'string' ? html : (html && html.html)) || '';
     that.state = {
       html: {
-        html:
-          html ||
-          createHTML({
-            backgroundColor,
-            color,
-            caretColor,
-            placeholderColor,
-            initialCSSText,
-            cssText,
-            contentCSSText,
-            pasteAsPlainText,
-            pasteListener: !!onPaste,
-            keyUpListener: !!onKeyUp,
-            keyDownListener: !!onKeyDown,
-            inputListener: !!onInput,
-            enterKeyHint,
-            autoCapitalize,
-            autoCorrect,
-            initialFocus: initialFocus && !disabled,
-            defaultParagraphSeparator,
-            firstFocusEnd,
-            useContainer,
-            styleWithCSS,
-            useCharacter,
-            defaultHttps,
-            
-          }),
+        html: readOnly
+          ? createReadOnlyHTML({
+              content: contentForReadOnly,
+              backgroundColor,
+              color,
+              initialCSSText,
+              cssText,
+              contentCSSText,
+            })
+          : (html ||
+            createHTML({
+              backgroundColor,
+              color,
+              caretColor,
+              placeholderColor,
+              initialCSSText,
+              cssText,
+              contentCSSText,
+              pasteAsPlainText,
+              pasteListener: !!onPaste,
+              keyUpListener: !!onKeyUp,
+              keyDownListener: !!onKeyDown,
+              inputListener: !!onInput,
+              enterKeyHint,
+              autoCapitalize,
+              autoCorrect,
+              initialFocus: initialFocus && !disabled,
+              defaultParagraphSeparator,
+              firstFocusEnd,
+              useContainer,
+              styleWithCSS,
+              useCharacter,
+              defaultHttps,
+            })),
       },
       keyboardHeight: 0,
       height: initialHeight > 0 ? initialHeight : DEFAULT_EDITOR_HEIGHT,
@@ -240,7 +251,27 @@ export default class Editor extends Component {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    const { editorStyle, disabled, placeholder } = this.props;
+    const { editorStyle, disabled, placeholder, readOnly, initialContentHTML, html } = this.props;
+    if (readOnly) {
+      const contentChanged = initialContentHTML !== prevProps.initialContentHTML || html !== prevProps.html;
+      if (prevProps.readOnly !== readOnly || contentChanged || prevProps.editorStyle !== editorStyle) {
+        const contentForReadOnly = initialContentHTML || (typeof html === 'string' ? html : (html?.html)) || '';
+        const { backgroundColor, color, initialCSSText, cssText, contentCSSText } = editorStyle || {};
+        this.setState({
+          html: {
+            html: createReadOnlyHTML({
+              content: contentForReadOnly,
+              backgroundColor,
+              color,
+              initialCSSText,
+              cssText,
+              contentCSSText,
+            }),
+          },
+        });
+      }
+      return;
+    }
     if (prevProps.editorStyle !== editorStyle) {
       editorStyle && this.setContentStyle(editorStyle);
     }
@@ -258,16 +289,16 @@ export default class Editor extends Component {
 
   renderWebView() {
     let that = this;
-    const { html, editorStyle, useContainer, style, onLink, dataDetectorTypes, ...rest } = that.props;
+    const { html, editorStyle, useContainer, style, onLink, dataDetectorTypes, readOnly, ...rest } = that.props;
     const { html: viewHTML } = that.state;
     return (
       <>
         <WebView
           useWebKit={true}
           scrollEnabled={false}
-          hideKeyboardAccessoryView={true}
+          hideKeyboardAccessoryView={!readOnly}
           keyboardDisplayRequiresUserAction={false}
-          nestedScrollEnabled={!useContainer}
+          nestedScrollEnabled={readOnly || !useContainer}
           style={[styles.webview, style]}
           {...rest}
           ref={that.setRef}
@@ -288,7 +319,7 @@ export default class Editor extends Component {
             return true;
           }}
         />
-        {Platform.OS === 'android' && <TextInput ref={ref => (that._input = ref)} style={styles._input} />}
+        {!readOnly && Platform.OS === 'android' && <TextInput ref={ref => (that._input = ref)} style={styles._input} />}
       </>
     );
   }
@@ -452,7 +483,11 @@ export default class Editor extends Component {
 
   init() {
     let that = this;
-    const { initialFocus, initialContentHTML, placeholder, editorInitializedCallback, disabled } = that.props;
+    const { initialFocus, initialContentHTML, placeholder, editorInitializedCallback, disabled, readOnly } = that.props;
+    if (readOnly) {
+      editorInitializedCallback();
+      return;
+    }
     initialContentHTML && that.setContentHTML(initialContentHTML);
     placeholder && that.setPlaceholder(placeholder);
     that.setDisable(disabled);

package/src/Toolbar.js

@@ -63,6 +63,7 @@ export default class Toolbar extends Component {
   static defaultProps = {
     actions: defaultActions,
     disabled: false,
+    readOnly: false,
     iconTint: '#71787F',
     iconSize: 20,
     iconGap: 16,
@@ -373,7 +374,10 @@ export default class Toolbar extends Component {
   }
 
   render() {
-    const { style, disabled, children, flatContainerStyle, horizontal = true } = this.props;
+    const { style, disabled, readOnly, children, flatContainerStyle, horizontal = true } = this.props;
+    if (readOnly) {
+      return null;
+    }
     const vStyle = [styles.barContainer, style, disabled && this._getButtonDisabledStyle()];
     return (
       <View style={vStyle}>

package/src/editor/createHTML.js

@@ -755,5 +755,69 @@ function createHTML(options = {}) {
 `;
 }
 
+/**
+ * Escapes a string for safe embedding inside a JavaScript double-quoted string in HTML.
+ */
+function escapeForScript(s) {
+  if (s == null) return '';
+  return String(s)
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
+    .replace(/<\/script/gi, '<\\/script');
+}
+
+/**
+ * Creates minimal HTML for read-only display: content in a fixed-height scrollable box.
+ * No editor, no toolbar. Content is escaped and embedded in the template.
+ */
+function createReadOnlyHTML(options = {}) {
+  const {
+    content = '',
+    backgroundColor = '#FFF',
+    color = '#000033',
+    contentCSSText = '',
+    cssText = '',
+    initialCSSText = '',
+  } = options;
+  const escapedContent = escapeForScript(content);
+  return `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
+    <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%; }
+        body { background-color: ${backgroundColor}; color: ${color}; }
+        .readonly-container {
+            height: 100%;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            padding: 10px;
+            ${contentCSSText}
+        }
+    </style>
+    ${getContentCSS()}
+    <style>${cssText}</style>
+</head>
+<body>
+    <div id="readonly-content" class="readonly-container"></div>
+    <script>
+        (function() {
+            var content = "${escapedContent}";
+            var el = document.getElementById('readonly-content');
+            if (el) {
+                el.innerHTML = content;
+            }
+        })();
+    </script>
+</body>
+</html>
+`;
+}
+
 const HTML = createHTML();
-export { HTML, createHTML };
+export { HTML, createHTML, createReadOnlyHTML };

package/src/index.d.ts

@@ -39,6 +39,7 @@ export interface EditorProps {
   initialContentHTML?: string;
   initialFocus?: boolean;
   disabled?: boolean;
+  readOnly?: boolean;
   useContainer?: boolean;
   pasteAsPlainText?: boolean;
   autoCapitalize?: string;
@@ -69,6 +70,7 @@ export interface ToolbarProps {
   getEditor?: () => EditorRef | null;
   actions?: string[];
   disabled?: boolean;
+  readOnly?: boolean;
   iconTint?: string;
   selectedIconTint?: string;
   disabledIconTint?: string;