# React Native WYSIWYG

React Native Rich text editor for iOS & Android

Supports Draft.js (markdown support coming soon)

Can be used with **Expo**

![React Native WYSIWYG](./demo.gif)

### Demo

View on [Expo Snack](https://snack.expo.io/@shakogegia/react-native-wysiwyg)


### Installation

```bash
yarn add react-native-wysiwyg
```

this library also required `react-native-keyboard-aware-view` to  be installed

##### Usage

```js
import { Editor, Toolbar, convertToRaw } from "react-native-wysiwyg";
import { KeyboardAwareView } from "react-native-keyboard-aware-view"
```

```jsx
<KeyboardAwareView keyboardShouldPersistTaps animated>
  <Editor data={data} onChange={(data) => { console.log(data) }} />
  <Toolbar />
</KeyboardAwareView>
```

`data` is either Draft.js contentState

Pass data to editor

```js
const data = convertToRaw(draftjsData)
```

Catch editor state change event

```js

  onChange = (data) => {
    console.log(data)
  }
```

#### Props


| Name | Type | Default | Desc
| ------------- | ------------- | -----| ----- |
| `data` | string | - | Editor State |
| `onChange` | function | - | Callback for on editor state change |
| `onFocus` | function({ index, contentState }) | - | Callback for on onFocus |
| `onBlur` | function({ index, contentState }) | - | Callback for on onBlur |


### To Do

- [x] Convert from Draft.js contentState
- [x] Convert to Draft.js contentState
- [ ] Convert from Markdown
- [ ] Convert to Markdown
- [x] Bold
- [x] Italic
- [x] Underline
- [x] Strikethrough
- [x] Move line up & down
- [x] Bullets (Unordered List)
- [x] Numbered List (Ordered List)
- [x] Blockquote
- [x] Heading 1
- [x] Heading 2
- [x] Heading 3
- [ ] Font colors
- [ ] Links
- [ ] Code
- [ ] Tables
- [ ] images
- [ ] Line Breaks
- [ ] Change tab intends
- [ ] Justify text position
- [ ] Custom default styles

### Credits
Many thanks to awesome plugin `react-native-keyboard-aware-view` from @APSL

Inspired by Notion mobile app

### Contribution

Contribution are more than welcomed