rn-rich-text-editor 1.0.1 → 1.0.3

package/package.json

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

package/src/Editor.js

@@ -339,11 +339,11 @@ export default class Editor extends Component {
     const errorStyle = errorMessage ? { borderWidth: 1, borderColor: '#d92d20' } : {};
     
     return useContainer ? (
-      <View style={[style, { height }, errorStyle]} onLayout={this.onViewLayout}>
+      <View style={[editorBorderStyle, style, { height }, errorStyle]} onLayout={this.onViewLayout}>
         {this.renderWebView()}
       </View>
     ) : (
-      <View style={errorStyle}>
+      <View style={[editorBorderStyle, errorStyle]}>
         {this.renderWebView()}
       </View>
     );
@@ -518,6 +518,18 @@ export default class Editor extends Component {
   }
 }
 
+const BORDER_COLOR = '#C9CED7';
+const BORDER_RADIUS = 6;
+
+const editorBorderStyle = {
+  borderColor: BORDER_COLOR,
+  borderLeftWidth: 1,
+  borderRightWidth: 1,
+  borderBottomWidth: 1,
+  borderBottomLeftRadius: BORDER_RADIUS,
+  borderBottomRightRadius: BORDER_RADIUS,
+};
+
 const styles = StyleSheet.create({
   _input: {
     position: 'absolute',

package/src/Toolbar.js

@@ -2,6 +2,48 @@ import React, { Component } from 'react';
 import { FlatList, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { actions } from './actions';
 
+const FADE_WIDTH = 24;
+const FADE_STRIPS = 5;
+const TOOLBAR_BG = '#efefef';
+
+function hexToRgb(hex) {
+  const match = hex.replace('#', '').match(/.{2}/g);
+  return match ? match.map((x) => parseInt(x, 16)) : [239, 239, 239];
+}
+
+function FadeOverlay({ side, visible, backgroundColor }) {
+  if (!visible) return null;
+  const bg = backgroundColor || TOOLBAR_BG;
+  const rgb = bg.startsWith('rgb')
+    ? bg.match(/\d+/g)?.map(Number) || [239, 239, 239]
+    : hexToRgb(bg);
+  const strips = Array.from({ length: FADE_STRIPS }, (_, i) => {
+    const alpha = ((i + 1) / FADE_STRIPS) * 0.85;
+    const stripWidth = FADE_WIDTH / FADE_STRIPS;
+    return (
+      <View
+        key={i}
+        style={[
+          styles.fadeStrip,
+          {
+            width: stripWidth,
+            backgroundColor: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`,
+            left: side === 'left' ? FADE_WIDTH - (i + 1) * stripWidth : i * stripWidth,
+          },
+        ]}
+      />
+    );
+  });
+  return (
+    <View
+      style={[styles.fadeOverlay, side === 'right' ? styles.fadeRight : styles.fadeLeft]}
+      pointerEvents="none"
+    >
+      {strips}
+    </View>
+  );
+}
+
 const ALIGN_ACTIONS = [
   actions.alignLeft,
   actions.alignCenter,
@@ -19,7 +61,6 @@ export const defaultActions = [
   actions.indent,
   actions.outdent,
   actions.insertLink,
-  actions.lineHeight,
 ];
 
 function getDefaultIcon() {
@@ -28,11 +69,11 @@ function getDefaultIcon() {
   texts[actions.insertImage] = require('./img/image.png');
   texts[actions.keyboard] = require('./img/keyboard.png');
   texts[actions.setBold] = require('./img/bold.png');
-  texts[actions.setItalic] = require('./img/italic.png');
+  texts[actions.setItalic] = require('./img/italic.svg');
   texts[actions.setSubscript] = require('./img/subscript.png');
   texts[actions.setSuperscript] = require('./img/superscript.png');
-  texts[actions.insertBulletsList] = require('./img/ul.png');
-  texts[actions.insertOrderedList] = require('./img/ol.png');
+  texts[actions.insertBulletsList] = require('./img/list.png');
+  texts[actions.insertOrderedList] = require('./img/numbered_list.png');
   texts[actions.insertLink] = require('./img/link.png');
   texts[actions.setStrikethrough] = require('./img/strikethrough.png');
   texts[actions.setUnderline] = require('./img/underline.png');
@@ -45,16 +86,14 @@ function getDefaultIcon() {
   texts[actions.table] = require('./img/table.png');
   texts[actions.code] = require('./img/code.png');
   texts[actions.outdent] = require('./img/outdent.png');
-  texts[actions.indent] = require('./img/indent.png');
-  texts[actions.alignLeft] = require('./img/justify_left.png');
-  texts[actions.alignCenter] = require('./img/justify_center.png');
-  texts[actions.alignRight] = require('./img/justify_right.png');
+  texts[actions.indent] = require('./img/intdent.png');
+  texts[actions.alignLeft] = require('./img/align_left.png');
+  texts[actions.alignCenter] = require('./img/align_center.png');
+  texts[actions.alignRight] = require('./img/align_right.png');
   texts[actions.alignFull] = require('./img/justify_full.png');
-  texts[actions.align] = require('./img/justify_left.png');
+  texts[actions.align] = require('./img/align_left.png');
   texts[actions.blockquote] = require('./img/blockquote.png');
   texts[actions.line] = require('./img/line.png');
-  texts[actions.fontSize] = require('./img/fontSize.png');
-  texts[actions.lineHeight] = require('./img/fontSize.png');
   return texts;
 }
 
@@ -75,6 +114,8 @@ export default class Toolbar extends Component {
     this.state = {
       items: [],
       selectedAlign: null,
+      showLeftFade: false,
+      showRightFade: false,
     };
   }
 
@@ -85,10 +126,49 @@ export default class Toolbar extends Component {
       nextState.actions !== that.state.actions ||
       nextState.data !== that.state.data ||
       nextState.selectedAlign !== that.state.selectedAlign ||
+      nextState.showLeftFade !== that.state.showLeftFade ||
+      nextState.showRightFade !== that.state.showRightFade ||
       nextProps.style !== that.props.style
     );
   }
 
+  _scrollWidth = 0;
+  _layoutWidth = 0;
+
+  _onScroll = (e) => {
+    const scrollX = e.nativeEvent.contentOffset.x;
+    const showLeft = scrollX > 5;
+    const showRight = scrollX + this._layoutWidth < this._scrollWidth - 5;
+    this.setState((s) =>
+      s.showLeftFade !== showLeft || s.showRightFade !== showRight
+        ? { showLeftFade: showLeft, showRightFade: showRight }
+        : null
+    );
+  };
+
+  _onContentSizeChange = (contentWidth) => {
+    this._scrollWidth = contentWidth;
+    this._updateFades();
+  };
+
+  _onLayout = (e) => {
+    this._layoutWidth = e.nativeEvent.layout.width;
+    this._updateFades();
+  };
+
+  _updateFades = () => {
+    if (this._scrollWidth <= 0 || this._layoutWidth <= 0) return;
+    const canScroll = this._scrollWidth > this._layoutWidth;
+    this.setState((s) => {
+      const showRight = canScroll;
+      const showLeft = canScroll && s.showLeftFade;
+      if (s.showRightFade !== showRight || (showLeft !== s.showLeftFade && canScroll)) {
+        return { showRightFade: showRight, showLeftFade: showLeft };
+      }
+      return null;
+    });
+  };
+
   static getDerivedStateFromProps(nextProps, prevState) {
     const { actions } = nextProps;
     if (actions !== prevState.actions) {
@@ -250,15 +330,6 @@ export default class Toolbar extends Component {
         editor.showAndroidKeyboard();
         editor.sendAction(action, 'result');
         break;
-      case actions.lineHeight:
-        editor.showAndroidKeyboard();
-        if (this.props[action]) {
-          this.props[action]();
-        } else {
-          editor.sendAction(action, 'result', 1.5);
-        }
-        break;
-      case actions.fontSize:
       case actions.fontName:
       case actions.foreColor:
       case actions.hiliteColor:
@@ -379,33 +450,96 @@ export default class Toolbar extends Component {
       return null;
     }
     const vStyle = [styles.barContainer, style, disabled && this._getButtonDisabledStyle()];
+    const barBg = (style && style.backgroundColor) || TOOLBAR_BG;
+    const showFades = horizontal;
     return (
       <View style={vStyle}>
-        <FlatList
-          horizontal={horizontal}
-          style={flatContainerStyle}
-          keyboardShouldPersistTaps={'always'}
-          keyExtractor={(item, index) => item.action + '-' + index}
-          data={this.state.data}
-          alwaysBounceHorizontal={false}
-          showsHorizontalScrollIndicator={false}
-          renderItem={({ item }) => this._renderAction(item.action, item.selected)}
-        />
+        <View style={styles.scrollWrapper} onLayout={showFades ? this._onLayout : undefined}>
+          <FlatList
+            horizontal={horizontal}
+            style={[flatContainerStyle, showFades && styles.scrollList]}
+            keyboardShouldPersistTaps={'always'}
+            keyExtractor={(item, index) => item.action + '-' + index}
+            data={this.state.data}
+            alwaysBounceHorizontal={false}
+            showsHorizontalScrollIndicator={false}
+            onScroll={showFades ? this._onScroll : undefined}
+            onContentSizeChange={showFades ? this._onContentSizeChange : undefined}
+            scrollEventThrottle={16}
+            renderItem={({ item }) => this._renderAction(item.action, item.selected)}
+          />
+          {showFades && (
+            <>
+              <FadeOverlay
+                side="left"
+                visible={this.state.showLeftFade}
+                backgroundColor={barBg}
+              />
+              <FadeOverlay
+                side="right"
+                visible={this.state.showRightFade}
+                backgroundColor={barBg}
+              />
+            </>
+          )}
+        </View>
         {children}
       </View>
     );
   }
 }
 
+const BORDER_COLOR = '#C9CED7';
+const BORDER_RADIUS = 6;
+
 const styles = StyleSheet.create({
   barContainer: {
     height: 44,
     backgroundColor: '#efefef',
     alignItems: 'center',
+    borderColor: BORDER_COLOR,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    borderTopLeftRadius: BORDER_RADIUS,
+    borderTopRightRadius: BORDER_RADIUS,
   },
 
   item: {
     justifyContent: 'center',
     alignItems: 'center',
   },
+
+  scrollWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignSelf: 'stretch',
+    position: 'relative',
+  },
+
+  scrollList: {
+    flex: 1,
+  },
+
+  fadeOverlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: FADE_WIDTH,
+  },
+
+  fadeLeft: {
+    left: 0,
+  },
+
+  fadeRight: {
+    right: 0,
+  },
+
+  fadeStrip: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+  },
 });

package/src/img/italic.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 0C12.9602 0 13.3333 0.373096 13.3333 0.833333C13.3333 1.29357 12.9602 1.66667 12.5 1.66667H9.74447L5.36947 13.3333H8.33333C8.79357 13.3333 9.16667 13.7064 9.16667 14.1667C9.16667 14.6269 8.79357 15 8.33333 15H0.833333C0.373096 15 0 14.6269 0 14.1667C0 13.7064 0.373096 13.3333 0.833333 13.3333H3.58887L7.96387 1.66667H5C4.53976 1.66667 4.16667 1.29357 4.16667 0.833333C4.16667 0.373096 4.53976 0 5 0H12.5Z" fill="#8A8A8C"/>
+</svg>