rn-rich-text-editor 1.2.2 → 1.3.0

package/package.json

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

package/src/Toolbar.js

@@ -169,19 +169,21 @@ export default class Toolbar extends Component {
   };
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { actions } = nextProps;
-    if (actions !== prevState.actions) {
+    const { actions: actionsList } = nextProps;
+    if (actionsList !== prevState.actions) {
       const items = prevState.items || [];
       const isItemSelected = (action) =>
         items.includes(action) || items.some(item => item && item.type === action);
       return {
-        actions,
-        data: actions.map(action => ({
+        actions: actionsList,
+        data: actionsList.map(action => ({
           action,
           selected:
-            action === actions.align
-              ? ALIGN_ACTIONS.some(a => isItemSelected(a))
-              : isItemSelected(action),
+            action === actions.separator
+              ? false // Separators are never selected
+              : action === actions.align
+                ? ALIGN_ACTIONS.some(a => isItemSelected(a))
+                : isItemSelected(action),
         })),
       };
     }
@@ -224,6 +226,9 @@ export default class Toolbar extends Component {
         items,
         selectedAlign,
         data: this.state.actions.map(action => {
+          if (action === actions.separator) {
+            return { action, selected: false };
+          }
           const isAlignAction = action === actions.align;
           const selected = isAlignAction
             ? !!selectedAlign
@@ -277,6 +282,11 @@ export default class Toolbar extends Component {
       return;
     }
 
+    // Separators are not clickable
+    if (action === actions.separator) {
+      return;
+    }
+
     if (action === actions.align) {
       const { selectedAlign } = this.state;
       // Cycle through alignments: Left -> Center -> Right -> Justify -> Left
@@ -448,7 +458,33 @@ export default class Toolbar extends Component {
     );
   }
 
+  _renderSeparator() {
+    const { style, separatorStyle, iconGap = 16 } = this.props;
+    const separatorStylesFromStyle = style && typeof style === 'object' && !Array.isArray(style) && style.separator
+      ? style.separator
+      : null;
+    return (
+      <View
+        key="separator"
+        pointerEvents="none"
+        style={[
+          {
+            width: 1,
+            height: 24,
+            backgroundColor: '#E2E2E4', // Fallback color
+            marginHorizontal: iconGap / 2,
+          },
+          separatorStylesFromStyle, // From style.separator
+          separatorStyle, // From separatorStyle prop (for backward compatibility)
+        ]}
+      />
+    );
+  }
+
   _renderAction(action, selected) {
+    if (action === actions.separator) {
+      return this._renderSeparator();
+    }
     if (action === actions.align) {
       return this._renderAlignButton(action, selected);
     }
@@ -463,8 +499,14 @@ export default class Toolbar extends Component {
       return null;
     }
     const disabledStyle = disabled ? { backgroundColor: '#C9CED7' } : {};
-    const vStyle = [styles.barContainer, disabledStyle, style, disabled && this._getButtonDisabledStyle()];
-    const barBg = (style && style.backgroundColor) || (disabled && '#C9CED7') || TOOLBAR_BG;
+    // Extract separator styles from style prop if present, keep rest for container
+    let containerStyle = style;
+    if (style && typeof style === 'object' && !Array.isArray(style) && style.separator) {
+      const { separator, ...rest } = style;
+      containerStyle = rest;
+    }
+    const vStyle = [styles.barContainer, disabledStyle, containerStyle, disabled && this._getButtonDisabledStyle()];
+    const barBg = (containerStyle && typeof containerStyle === 'object' && !Array.isArray(containerStyle) && containerStyle.backgroundColor) || (disabled && '#C9CED7') || TOOLBAR_BG;
     const showFades = horizontal && !disabled;
     return (
       <View style={vStyle}>
@@ -473,7 +515,7 @@ export default class Toolbar extends Component {
             horizontal={horizontal}
             style={[flatContainerStyle, showFades && styles.scrollList]}
             keyboardShouldPersistTaps={'always'}
-            keyExtractor={(item, index) => item.action + '-' + index}
+            keyExtractor={(item, index) => (item.action === actions.separator ? 'separator' : item.action) + '-' + index}
             data={this.state.data}
             alwaysBounceHorizontal={false}
             showsHorizontalScrollIndicator={false}

package/src/actions.js

@@ -44,6 +44,7 @@ export const actions = {
   hiliteColor: 'hiliteColor',
   blockquote: 'quote',
   keyboard: 'keyboard',
+  separator: 'separator', // Visual separator for toolbar
   setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
   setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',

package/src/editor/createHTML.js

@@ -801,11 +801,22 @@ function createReadOnlyHTML(options = {}) {
             ${useDefaultFont ? 'font-family: Arial, Helvetica, sans-serif; font-size: 1em;' : ''}
             color: ${color};
             padding: 0;
+            margin: 0;
             height: auto !important;
             min-height: 0 !important;
             width: 100%;
             ${contentCSSText}
         }
+        .readonly-container > *:first-child {
+            margin-top: 0 !important;
+        }
+        .readonly-container p {
+            margin-top: 0;
+            margin-bottom: 0.5em;
+        }
+        .readonly-container p:last-child {
+            margin-bottom: 0;
+        }
     </style>
     ${getContentCSS()}
     <style>${cssText}</style>
@@ -820,7 +831,9 @@ function createReadOnlyHTML(options = {}) {
                 el.innerHTML = content;
                 var lastH = 0;
                 var sendHeight = function() {
-                    var h = Math.ceil(el.scrollHeight);
+                    var scrollH = el.scrollHeight;
+                    var offsetH = el.offsetHeight;
+                    var h = Math.ceil(Math.max(scrollH, offsetH)) + 16;
                     if (h !== lastH && window.ReactNativeWebView) {
                         lastH = h;
                         window.ReactNativeWebView.postMessage(JSON.stringify({type: 'OFFSET_HEIGHT', data: h}));

package/src/index.d.ts

@@ -81,6 +81,7 @@ export interface ToolbarProps {
   selectedButtonStyle?: object;
   unselectedButtonStyle?: object;
   disabledButtonStyle?: object;
+  separatorStyle?: object;
   iconMap?: Record<string, unknown>;
   renderAction?: (action: string, selected: boolean) => React.ReactElement;
   onPressAddImage?: () => void;
@@ -139,6 +140,7 @@ export const actions: {
   hiliteColor: string;
   blockquote: string;
   keyboard: string;
+  separator: string;
   [key: string]: string;
 };