rn-rich-text-editor 1.2.3 → 1.3.1

package/package.json

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

package/src/Toolbar.js

@@ -105,6 +105,7 @@ export default class Toolbar extends Component {
     iconTint: '#71787F',
     iconSize: 20,
     iconGap: 16,
+    separatorStyle: undefined,
   };
 
   constructor(props) {
@@ -169,19 +170,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 +227,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 +283,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 +459,48 @@ export default class Toolbar extends Component {
     );
   }
 
+  _renderSeparator() {
+    const { style, separatorStyle, iconGap = 16 } = this.props;
+    // Extract separator from style prop (handles both object and array)
+    let separatorFromStyleProp = null;
+    if (style) {
+      if (Array.isArray(style)) {
+        for (const styleItem of style) {
+          if (styleItem && typeof styleItem === 'object' && styleItem.separator) {
+            separatorFromStyleProp = styleItem.separator;
+            break;
+          }
+        }
+      } else if (typeof style === 'object' && style.separator) {
+        separatorFromStyleProp = style.separator;
+      }
+    }
+    // Merge: defaults, then style.separator, then separatorStyle (later overrides)
+    const merged = {
+      width: 1,
+      height: 24,
+      backgroundColor: '#E2E2E4',
+      marginHorizontal: iconGap / 2,
+    };
+    if (separatorFromStyleProp) {
+      Object.assign(merged, StyleSheet.flatten(separatorFromStyleProp));
+    }
+    if (separatorStyle) {
+      Object.assign(merged, StyleSheet.flatten(separatorStyle));
+    }
+    return (
+      <View
+        key="separator"
+        pointerEvents="none"
+        style={merged}
+      />
+    );
+  }
+
   _renderAction(action, selected) {
+    if (action === actions.separator) {
+      return this._renderSeparator();
+    }
     if (action === actions.align) {
       return this._renderAlignButton(action, selected);
     }
@@ -463,8 +515,40 @@ 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 from style prop if present, keep rest for container
+    let containerStyle = style;
+    if (style) {
+      if (Array.isArray(style)) {
+        // Remove separator from any object in the array
+        containerStyle = style.map(styleItem => {
+          if (styleItem && typeof styleItem === 'object' && styleItem.separator) {
+            const { separator, ...rest } = styleItem;
+            return rest;
+          }
+          return styleItem;
+        });
+      } else if (typeof style === 'object' && style.separator) {
+        const { separator, ...rest } = style;
+        containerStyle = rest;
+      }
+    }
+    const vStyle = [styles.barContainer, disabledStyle, containerStyle, disabled && this._getButtonDisabledStyle()];
+    // Extract backgroundColor from containerStyle (handle array case)
+    let barBg = TOOLBAR_BG;
+    if (disabled) {
+      barBg = '#C9CED7';
+    } else if (containerStyle) {
+      if (Array.isArray(containerStyle)) {
+        for (const styleItem of containerStyle) {
+          if (styleItem && typeof styleItem === 'object' && styleItem.backgroundColor) {
+            barBg = styleItem.backgroundColor;
+            break;
+          }
+        }
+      } else if (typeof containerStyle === 'object' && containerStyle.backgroundColor) {
+        barBg = containerStyle.backgroundColor;
+      }
+    }
     const showFades = horizontal && !disabled;
     return (
       <View style={vStyle}>
@@ -473,7 +557,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>
@@ -822,7 +833,7 @@ function createReadOnlyHTML(options = {}) {
                 var sendHeight = function() {
                     var scrollH = el.scrollHeight;
                     var offsetH = el.offsetHeight;
-                    var h = Math.ceil(Math.max(scrollH, offsetH)) + 8;
+                    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;
 };