# react-native-cn-richtext-editor

> ## Deprecated. Use [react-native-cn-quill](https://github.com/imnapo/react-native-cn-quill#readme) instead.

Richtext editor for react native

<img src="./images/demo-img.jpg" width="50%">

## Installation


#### Install using npm:

```
npm i react-native-cn-richtext-editor
```
#### Install using yarn:

```
yarn add react-native-cn-richtext-editor
```

### Usage

Here is a simple overview of our components usage.

``` jsx
import React, { Component } from 'react';
import { View, StyleSheet, Keyboard
, TouchableWithoutFeedback, Text
, KeyboardAvoidingView } from 'react-native';

import  CNRichTextEditor , { CNToolbar, getInitialObject , getDefaultStyles } from "react-native-cn-richtext-editor";

const defaultStyles = getDefaultStyles();

class App extends Component {
 
    constructor(props) {
        super(props);
        
        this.state = {
            selectedTag : 'body',
            selectedStyles : [],
            value: [getInitialObject()]
        };

        this.editor = null;
    }

    onStyleKeyPress = (toolType) => {
        this.editor.applyToolbar(toolType);
    }

    onSelectedTagChanged = (tag) => {
        this.setState({
            selectedTag: tag
        })
    }

    onSelectedStyleChanged = (styles) => { 
        this.setState({
            selectedStyles: styles,
        })
    }

    onValueChanged = (value) => {
        this.setState({
            value: value
        });
    }


    render() {
        return (
            <KeyboardAvoidingView 
            behavior="padding" 
            enabled
            keyboardVerticalOffset={0}
            style={{
                flex: 1,
                paddingTop: 20,
                backgroundColor:'#eee',
                flexDirection: 'column', 
                justifyContent: 'flex-end', 
            }}
            >
                <TouchableWithoutFeedback onPress={Keyboard.dismiss} >             
                    <View style={styles.main}>
                        <CNRichTextEditor                   
                            ref={input => this.editor = input}
                            onSelectedTagChanged={this.onSelectedTagChanged}
                            onSelectedStyleChanged={this.onSelectedStyleChanged}
                            value={this.state.value}
                            style={{ backgroundColor : '#fff'}}
                            styleList={defaultStyles}
                            onValueChanged={this.onValueChanged}
                        />                        
                    </View>
                </TouchableWithoutFeedback>

                <View style={{
                    minHeight: 35
                }}>

                    <CNToolbar
                                style={{
                                    height: 35,
                                }}
                                iconSetContainerStyle={{
                                    flexGrow: 1,
                                    justifyContent: 'space-evenly',
                                    alignItems: 'center',
                                }}
                                size={30}
                                iconSet={[
                                    {
                                        type: 'tool',
                                        iconArray: [{
                                            toolTypeText: 'image',
                                            iconComponent:
                                                <Text style={styles.toolbarButton}>
                                                image
                                                </Text>
                                        }]
                                    },
                                    {
                                        type: 'tool',
                                        iconArray: [{
                                            toolTypeText: 'bold',
                                            buttonTypes: 'style',
                                            iconComponent:
                                                <Text style={styles.toolbarButton}>
                                                bold
                                                </Text>
                                        }]
                                    },
                                    {
                                        type: 'seperator'
                                    },
                                    {
                                        type: 'tool',
                                        iconArray: [
                                            {
                                                toolTypeText: 'body',
                                                buttonTypes: 'tag',
                                                iconComponent:
                                                    <Text style={styles.toolbarButton}>
                                                    body
                                                    </Text>
                                            },
                                        ]
                                    },
                                    {
                                        type: 'tool',
                                        iconArray: [
                                            {
                                                toolTypeText: 'ul',
                                                buttonTypes: 'tag',
                                                iconComponent:
                                                    <Text style={styles.toolbarButton}>
                                                    ul
                                                    </Text>
                                            }
                                        ]
                                    },
                                    {
                                        type: 'tool',
                                        iconArray: [
                                            {
                                                toolTypeText: 'ol',
                                                buttonTypes: 'tag',
                                                iconComponent:
                                                    <Text style={styles.toolbarButton}>
                                                    ol
                                                    </Text>
                                            }
                                        ]
                                    },
                                ]}
                                selectedTag={this.state.selectedTag}
                                selectedStyles={this.state.selectedStyles}
                                onStyleKeyPress={this.onStyleKeyPress}
                            />
                </View>
        </KeyboardAvoidingView>
        );
    }

}

var styles = StyleSheet.create({
    main: {
        flex: 1,
        marginTop: 10,
        paddingLeft: 30,
        paddingRight: 30,
        paddingBottom: 1,
        alignItems: 'stretch',
    },
    toolbarButton: {
        fontSize: 20,
        width: 28,
        height: 28,
        textAlign: 'center'
    },
    italicButton: {
        fontStyle: 'italic'
    },
    boldButton: {
        fontWeight: 'bold'
    },
    underlineButton: {
        textDecorationLine: 'underline'
    },
    lineThroughButton: {
        textDecorationLine: 'line-through'
    },
});


export default App;

```

## More Advanced TextEditor
You need to put more effort :) to use more advanced features of CNRichTextEditor such as:
- Image Uploading
- Highlighting Text
- Change Text Color

Actually we did not implement 'Toolbar buttons and menus' and 'Image Uploading Process' because it totally depends on using expo or pure react-native and also what other packages you prefer to use.

To see an example of how to implement more advanced feature of this editor please check this [Link](https://github.com/imnapo/react-native-cn-richtext-editor/blob/master/expo-demo/App.js).

Also be noticed that this example is writen with expo and required 'react-native-popup-menu' package.

## API

### CNRichTextEditor

#### Props

| Name | Description | Required |
| ------ | ----------- | ---- |
| onSelectedTagChanged   | this event triggers when selected tag of editor is changed. | No |
| onSelectedStyleChanged | this event triggers when selected style of editor is changed. | No |
| onValueChanged | this event triggers when value of editor is changed. | No |
| onRemoveImage | this event triggers when an image is removed. Callback param in the form `{ url, id }`. | No |
| value    | an array object which keeps value of the editor | Yes |
| styleList  | an object consist of styles name and values (use getDefaultStyles function) | Yes |
| ImageComponent | a React component (class or functional) which will be used to render images. Will be passed `style` and `source` props. | No |
| style | Styles applied to the outermost component. | No |
| textInputStyle | TextInput style | No |
| contentContainerStyle | Styles applied to the scrollview content. | No |
| onFocus    | Callback that is called when one of text inputs are focused. | No |
| onBlur    | Callback that is called when one of text inputs are blurred. | No |
| placeholder    | The string that will be rendered before text input has been entered. | No |
| textInputProps   | An object containing additional props to be passed to the TextInput component| No |

#### Instance methods

| Name | Params | Description |
| ------ | ---- | ----------- |
| applyToolbar | `toolType` | Apply the given transformation to selected text. |
| insertImage | `uri, id?, height?, width?` | Insert the provided image where cursor is positionned. |
| focus |  | Focus to the last `TextInput` |

### CNToolbar

#### Props

| Name | Required | Description |
| ------ | ------ | ----------- |
| selectedTag   | Yes | selected tag of the editor |
| selectedStyles | Yes | selected style of the editor |
| onStyleKeyPress    |  Yes | this event triggers when user press one of toolbar keys |
|  size  | No  | font size of toolbar buttons  |
| bold  |  No | a component which renders as bold button (as of 1.0.41, this prop is deprecated) |
|  italic | No  | a component which renders as italic button (as of 1.0.41, this prop is deprecated)   |
| underline  | No  | a component which renders as underline button (as of 1.0.41, this prop is deprecated)  |
| lineThrough  | No  | a component which renders as lineThrough button (as of 1.0.41, this prop is deprecated)  |
| body  | No  | a component which renders as body button (as of 1.0.41, this prop is deprecated) |
| title  | No  | a component which renders as title button (as of 1.0.41, this prop is deprecated)   |
| ul  | No  | a component which renders as ul button (as of 1.0.41, this prop is deprecated) |
| ol  | No  | a component which renders as ol button (as of 1.0.41, this prop is deprecated) |
| image  | No  | a component which renders as image button (as of 1.0.41, this prop is deprecated) |
| highlight  | No  | a component which renders as highlight button (as of 1.0.41, this prop is deprecated) |
| foreColor  | No  | a component which renders as foreColor button (as of 1.0.41, this prop is deprecated) |
| style | No | style applied to container |
| color | No | default color passed to icon |
| backgroundColor | No | default background color passed to icon |
| selectedColor | No | color applied when icon is selected |
| selectedBackgroundColor | No | background color applied when icon is selected |
| iconContainerStyle | No | a style prop assigned to icon container |
| iconSet | Yes | array of icons to display |
| iconSetContainerStyle | No | a style props assigned to icon set container|

### CNRichTextView

#### Props

| Name | Required | Description |
| ------ | ------ | ----------- |
| text   | Yes | html string (created by convertToHtmlString function |
| style | No | style applied to container (req. {flex:1}) |
| styleList  |  No | an object consist of styles name and values (use getDefaultStyles function) |

### Functions

| Name | Param | Returns | Description |
| ------ | ------ | ------ |----------- |
| getInitialObject | - | javascript object  | create a initial value for the editor. |
| convertToHtmlString | array | string  | this function converts value of editor to html string (use it to keep value as html in db) |
| convertToObject | string | array | converts html back to array for RichTextEditor value (use this function only for html string created by convertToHtmlString function)  |
| getDefaultStyles | - | javascript object  | creates required styles for the editor. |

## Expo Demo App

Checkout the
[expo-demo App](https://expo.io/@imnapo/expo-demo)
on Expo which uses react-native-cn-richtext-editor components.
If you are looking to test and run expo-demo App locally, click
[here](https://github.com/imnapo/react-native-cn-richtext-editor/tree/master/expo-demo) to
view the implementation & run it locally.

## License

[MIT](https://github.com/imnapo/react-native-cn-richtext-editor/blob/master/LICENSE)