1.3.0 see CHANGELOG.md

CHANGELOG.md

@@ -1,3 +1,13 @@
+
+## 1.3.0
+#### Added
+- Add `disabled` props to RichEditor and Toolbar
+- Add `disabledIconTint` props to Toolbar
+- Add `disabledButtonStyle` props to Toolbar
+
+#### Changed
+- `iconMap` Support incoming methods to return React elements
+
 ## 1.2.1
 #### Added
 - editor console.log in RN of __DEV__ mode

README.md

@@ -34,7 +34,10 @@ The editor component. Simply place this component in your view hierarchy to rece
 	HTML that will be rendered in the content section on load.
 
 * `initialFocus`	
-* Initial content request focus
+* Boolean value to Initial content request focus. The default value is `false`.
+
+* `disabled`	
+* Boolean value to disable editor. The default value is `false`.
 
 * `editorInitializedCallback `
 
@@ -121,11 +124,17 @@ Other props supported by the `RichToolbar` component are:
 
 * `onInsertLink`    
     Logic for what happens when you press on the add insert link button
+
+* `disabled`	
+* Boolean value to disable editor. The default value is `false`.
 
-* `selectedButtonStyle`
+
 * `iconTint`
-* `selectedIconTint`
 * `unselectedButtonStyle`
+* `selectedIconTint`
+* `selectedButtonStyle`
+* `disabledIconTint`
+* `disabledButtonStyle`
 
     These provide options for styling action buttons.
 

examples/src/example.js

@@ -48,7 +48,7 @@ class Example extends React.Component {
         const that = this;
         const theme = props.theme || Appearance.getColorScheme();
         const contentStyle = that.createContentStyle(theme);
-        that.state = {theme: theme, contentStyle, emojiVisible: false};
+        that.state = {theme: theme, contentStyle, emojiVisible: false, disabled: false};
         that.onHome = ::that.onHome;
         that.save = ::that.save;
         that.onTheme = ::that.onTheme;
@@ -62,6 +62,7 @@ class Example extends React.Component {
         that.insertHTML = ::that.insertHTML;
         that.insertVideo = ::that.insertVideo;
         that.handleEmoji = ::that.handleEmoji;
+        that.onDisabled = ::that.onDisabled;
         that.editorInitializedCallback = ::that.editorInitializedCallback;
     }
 
@@ -187,9 +188,13 @@ class Example extends React.Component {
         this.setState({theme, contentStyle});
     }
 
+    onDisabled() {
+        this.setState({disabled: !this.state.disabled});
+    }
+
     render() {
         let that = this;
-        const {contentStyle, theme, emojiVisible} = that.state;
+        const {contentStyle, theme, emojiVisible, disabled} = that.state;
         const {backgroundColor, color, placeholderColor} = contentStyle;
         const themeBg = {backgroundColor};
         return (
@@ -204,7 +209,6 @@ class Example extends React.Component {
                 />
                 <View style={styles.nav}>
                     <Button title={'HOME'} onPress={that.onHome} />
-                    <Button title={theme} onPress={that.onTheme} />
                     <Button title="Save" onPress={that.save} />
                 </View>
                 <ScrollView style={[styles.scroll, themeBg]} keyboardDismissMode={'none'}>
@@ -225,9 +229,14 @@ class Example extends React.Component {
                                 placeholder="Rich Editor Bug 😀"
                             />
                         </View>
+                        <View style={styles.item}>
+                            <Button title={theme} onPress={that.onTheme} />
+                            <Button title={disabled ? 'enable' : 'disable'} onPress={that.onDisabled} />
+                        </View>
                     </View>
                     <RichEditor
                         // initialFocus={true}
+                        disabled={disabled}
                         editorStyle={contentStyle} // default light style
                         containerStyle={themeBg}
                         ref={that.richText}
@@ -243,9 +252,10 @@ class Example extends React.Component {
                     <RichToolbar
                         style={[styles.richBar, themeBg]}
                         editor={that.richText}
+                        disabled={disabled}
                         iconTint={color}
                         selectedIconTint={'#2095F2'}
-                        selectedButtonStyle={{backgroundColor: 'transparent'}}
+                        disabledIconTint={'#8b8b8b'}
                         onPressAddImage={that.onPressAddImage}
                         onInsertLink={that.onInsertLink}
                         iconSize={40} // default 50
@@ -261,8 +271,12 @@ class Example extends React.Component {
                         iconMap={{
                             insertEmoji: phizIcon,
                             [actions.setStrikethrough]: strikethrough,
-                            [actions.heading1]: <Text style={styles.tib}>H1</Text>,
-                            [actions.heading4]: <Text style={styles.tib}>H3</Text>,
+                            [actions.heading1]: ({tintColor}) => (
+                                <Text style={[styles.tib, {color: tintColor}]}>H1</Text>
+                            ),
+                            [actions.heading4]: ({tintColor}) => (
+                                <Text style={[styles.tib, {color: tintColor}]}>H3</Text>
+                            ),
                             insertHTML: htmlIcon,
                             insertVideo: videoIcon,
                         }}

index.d.ts

@@ -31,10 +31,15 @@ declare module 'react-native-pell-rich-editor' {
         initialContentHTML?: string;
 
         /**
-         * Initial content request focus
+         * Boolean value to Initial content request focus. The default value is false.
          */
         initialFocus?: boolean;
 
+        /**
+         * Boolean value to disable editor. The default value is false.
+         */
+        disabled?: boolean;
+
         /**
          * Callback called after the editor has been initialized
          */
@@ -116,6 +121,7 @@ declare module 'react-native-pell-rich-editor' {
 
         unselectedButtonStyle?: StyleProp<ViewStyle>;
         selectedButtonStyle?: StyleProp<ViewStyle>;
+        disabledButtonStyle?: StyleProp<ViewStyle>;
 
         /**
          * Color for selected button Icon
@@ -125,6 +131,15 @@ declare module 'react-native-pell-rich-editor' {
          * Color for unselected button Icon
          */
         iconTint?: string;
+        /**
+         * Color for disabled button Icon
+         */
+        disabledIconTint?: string;
+
+        /**
+         * Boolean value to disable editor. The default value is false.
+         */
+        disabled?: boolean,
         /**
          * Custom renderer for toolbar actions
          */
@@ -138,7 +153,7 @@ declare module 'react-native-pell-rich-editor' {
         /**
          * Your own set if images for the toolbar
          */
-        iconMap?: Record<string, ImageSourcePropType>;
+        iconMap?: Record<string, ({selected: boolean, disabled: boolean, tintColor: any, iconSize: number}) => React.Element | ImageSourcePropType>;
 
         /**
          * Logic for what happens when you press on the add image button

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-pell-rich-editor",
   "description": "React Native Rich Editor",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "src/index.js",
   "author": {
     "name": "wxik",

src/RichEditor.js

@@ -13,6 +13,7 @@ export default class RichTextEditor extends Component {
     //     onChange: PropTypes.func,
     //     onHeightChange: PropTypes.func,
     //     initialFocus: PropTypes.bool,
+    //     disabled: PropTypes.bool,
     // };
 
     static defaultProps = {
@@ -21,13 +22,15 @@ export default class RichTextEditor extends Component {
         placeholder: '',
         initialContentHTML: '',
         initialFocus: false,
+        disabled: false,
         useContainer: true,
         editorInitializedCallback: () => {},
     };
 
     constructor(props) {
         super(props);
         let that = this;
+        that.renderWebView = that.renderWebView.bind(that);
         that.onMessage = that.onMessage.bind(that);
         that._sendAction = that._sendAction.bind(that);
         that.registerToolbar = that.registerToolbar.bind(that);
@@ -151,21 +154,25 @@ export default class RichTextEditor extends Component {
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        const {editorStyle} = this.props;
+        const {editorStyle, disabled} = this.props;
         if (prevProps.editorStyle !== editorStyle) {
             editorStyle && this.setContentStyle(editorStyle);
         }
+        if (disabled !== prevProps.disabled) {
+            this.setDisable(disabled);
+        }
     }
 
     setRef(ref) {
         this.webviewBridge = ref;
     }
 
-    renderWebView = () => {
-        const {html, editorStyle, useContainer, ...rest} = this.props;
-        const {html: viewHTML} = this.state;
+    renderWebView() {
+        let that = this;
+        const {html, editorStyle, useContainer, ...rest} = that.props;
+        const {html: viewHTML} = that.state;
         // webview dark theme bug
-        const opacity = this.state.isInit ? 1 : 0;
+        const opacity = that.state.isInit ? 1 : 0;
         return (
             <>
                 <WebView
@@ -174,21 +181,21 @@ export default class RichTextEditor extends Component {
                     hideKeyboardAccessoryView={true}
                     keyboardDisplayRequiresUserAction={false}
                     {...rest}
-                    ref={this.setRef}
-                    onMessage={this.onMessage}
+                    ref={that.setRef}
+                    onMessage={that.onMessage}
                     originWhitelist={['*']}
                     dataDetectorTypes={'none'}
                     domStorageEnabled={false}
                     bounces={false}
                     javaScriptEnabled={true}
                     source={viewHTML}
                     opacity={opacity}
-                    onLoad={this.init}
+                    onLoad={that.init}
                 />
-                {Platform.OS === 'android' && <TextInput ref={(ref) => (this._input = ref)} style={styles._input} />}
+                {Platform.OS === 'android' && <TextInput ref={(ref) => (that._input = ref)} style={styles._input} />}
             </>
         );
-    };
+    }
 
     render() {
         let {height} = this.state;
@@ -231,6 +238,10 @@ export default class RichTextEditor extends Component {
         this._sendAction(actions.content, 'setContentStyle', styles);
     }
 
+    setDisable(dis) {
+        this._sendAction(actions.content, 'setDisable', !!dis);
+    }
+
     blurContentEditor() {
         this._sendAction(actions.content, 'blur');
     }
@@ -277,13 +288,14 @@ export default class RichTextEditor extends Component {
 
     init() {
         let that = this;
-        const {initialFocus, initialContentHTML, placeholder, editorInitializedCallback} = that.props;
+        const {initialFocus, initialContentHTML, placeholder, editorInitializedCallback, disabled} = that.props;
         that.setContentHTML(initialContentHTML);
         that.setPlaceholder(placeholder);
+        that.setDisable(disabled);
         editorInitializedCallback();
 
         // initial request focus
-        initialFocus && that.focusContentEditor();
+        initialFocus && !disabled && that.focusContentEditor();
         // no visible ?
         that._sendAction(actions.init);
         that.setState({isInit: true});