|
| 1 | +# React Native Draft.js Editor |
| 2 | + |
| 3 | +A full fledged React Native Rich Text editor based on [Draft.js](https://draftjs.org/)!! |
| 4 | + |
| 5 | +### Installation |
| 6 | + |
| 7 | +Install using npm: |
| 8 | + |
| 9 | +```sh |
| 10 | +npm i react-native-draftjs-editor |
| 11 | +``` |
| 12 | + |
| 13 | +Install using yarn: |
| 14 | + |
| 15 | +```sh |
| 16 | +yarn add react-native-draftjs-editor |
| 17 | +``` |
| 18 | + |
| 19 | +# For Android alone |
| 20 | + |
| 21 | +After installation, add the following lines to the end of your `android/app/build.gradle` file |
| 22 | + |
| 23 | +```gradle |
| 24 | +project.afterEvaluate { |
| 25 | + apply from: '../../node_modules/react-native-draftjs-editor/copyHtml.gradle'; |
| 26 | + copyEditorHtmlToAppAssets(file('../../node_modules/react-native-draftjs-editor')) |
| 27 | +} |
| 28 | +``` |
| 29 | + |
| 30 | +_iOS installation does not require any additional steps._ |
| 31 | + |
| 32 | +# API |
| 33 | + |
| 34 | +# RNDraftView |
| 35 | + |
| 36 | +### Props |
| 37 | + |
| 38 | +| Name | Type | Description | |
| 39 | +| ------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 40 | +| defaultValue | String | The default value with which the editor should be populated. Should be an HTML string generated from draft.js using [draft-js-export-html](https://www.npmjs.com/package/draft-js-export-html). | |
| 41 | +| onEditorReady | Function | A callback function that will be called when the editor has loaded and is ready to use. Ensure this function is called before you apply any instance methods. | |
| 42 | +| style | [React Native View Style](https://facebook.github.io/react-native/docs/style) | Use this to style the View Component that is wrapping the rich text editor. | |
| 43 | +| placeholder | String | A placeholder string for the text editor. | |
| 44 | +| ref | React Ref Object | Pass a ref here to access the instance methods. | |
| 45 | +| onStyleChanged | Function | Will call a function with an Array of styles [] in the current editor's context. Use this to keep track of the applied styles in the editor. | |
| 46 | +| onBlockTypeChanged | Function | will call a function with a block type in the current editor's context. Use this to keep track of the applied block types in the editor. | |
| 47 | + |
| 48 | +### Instance methods |
| 49 | + |
| 50 | +| Name | Params | Description | |
| 51 | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | |
| 52 | +| focus | - | shift focus to the rich text editor | |
| 53 | +| setStyle | `BOLD`, `ITALIC`, `UNDERLINE` and `CODE` | call this instance method to apply a style to the selected/active text. Call this again with the same style to remove it. | |
| 54 | +| setBlockType | Supports the default block types supported by draft.js [editor](https://github.com/facebook/draft-js/blob/master/src/component/utils/DraftStyleDefault.css) | Call this instance method to apply and call it again to remove the style. | |
| 55 | +| getEditorState | - | Returns the current editor state as a HTML string exported using [draft-js-export-html](https://www.npmjs.com/package/draft-js-export-html). | |
| 56 | + |
| 57 | +## Sample Usage |
| 58 | + |
| 59 | +```jsx |
| 60 | +import React, { useState, useEffect } from "react"; |
| 61 | +import { |
| 62 | + SafeAreaView, |
| 63 | + StyleSheet, |
| 64 | + TouchableOpacity, |
| 65 | + View, |
| 66 | + Text, |
| 67 | + Platform |
| 68 | +} from "react-native"; |
| 69 | +import KeyboardSpacer from "react-native-keyboard-spacer"; |
| 70 | +import RNDraftView from "react-native-draftjs-editor"; |
| 71 | + |
| 72 | +const ControlButton = ({ text, action, isActive }) => { |
| 73 | + return ( |
| 74 | + <TouchableOpacity |
| 75 | + style={[ |
| 76 | + styles.controlButtonContainer, |
| 77 | + isActive ? { backgroundColor: "gold" } : {} |
| 78 | + ]} |
| 79 | + onPress={action} |
| 80 | + > |
| 81 | + <Text>{text}</Text> |
| 82 | + </TouchableOpacity> |
| 83 | + ); |
| 84 | +}; |
| 85 | + |
| 86 | +const EditorToolBar = ({ |
| 87 | + activeStyles, |
| 88 | + blockType, |
| 89 | + toggleStyle, |
| 90 | + toggleBlockType |
| 91 | +}) => { |
| 92 | + return ( |
| 93 | + <View style={styles.toolbarContainer}> |
| 94 | + <ControlButton |
| 95 | + text={"B"} |
| 96 | + isActive={activeStyles.includes("BOLD")} |
| 97 | + action={() => toggleStyle("BOLD")} |
| 98 | + /> |
| 99 | + <ControlButton |
| 100 | + text={"I"} |
| 101 | + isActive={activeStyles.includes("ITALIC")} |
| 102 | + action={() => toggleStyle("ITALIC")} |
| 103 | + /> |
| 104 | + <ControlButton |
| 105 | + text={"H"} |
| 106 | + isActive={blockType === "header-one"} |
| 107 | + action={() => toggleBlockType("header-one")} |
| 108 | + /> |
| 109 | + <ControlButton |
| 110 | + text={"ul"} |
| 111 | + isActive={blockType === "unordered-list-item"} |
| 112 | + action={() => toggleBlockType("unordered-list-item")} |
| 113 | + /> |
| 114 | + <ControlButton |
| 115 | + text={"ol"} |
| 116 | + isActive={blockType === "ordered-list-item"} |
| 117 | + action={() => toggleBlockType("ordered-list-item")} |
| 118 | + /> |
| 119 | + </View> |
| 120 | + ); |
| 121 | +}; |
| 122 | + |
| 123 | +const App = () => { |
| 124 | + const _draftRef = React.createRef(); |
| 125 | + const [activeStyles, setActiveStyles] = useState([]); |
| 126 | + const [blockType, setActiveBlockType] = useState("unstyled"); |
| 127 | + const [editorState, setEditorState] = useState(""); |
| 128 | + |
| 129 | + const defaultValue = |
| 130 | + "<h1>A Full fledged Text Editor</h1><p>This editor is built with Draft.js. Hence should be suitable for most projects. However, Draft.js Isn’t fully compatible with mobile yet. So you might face some issues.</p><p><br></p><p>This is a simple implementation</p><ul> <li>It contains <strong>Text formatting </strong>and <em>Some blocks formatting</em></li> <li>Each for it’s own purpose</li></ul><p>You can also do</p><ol> <li>Custom style map</li> <li>Own css styles</li> <li>Custom block styling</li></ol><p>You are welcome to try it!</p>"; |
| 131 | + |
| 132 | + const editorLoaded = () => { |
| 133 | + _draftRef.current && _draftRef.current.focus(); |
| 134 | + }; |
| 135 | + |
| 136 | + const toggleStyle = style => { |
| 137 | + _draftRef.current && _draftRef.current.setStyle(style); |
| 138 | + }; |
| 139 | + |
| 140 | + const toggleBlockType = blockType => { |
| 141 | + _draftRef.current && _draftRef.current.setBlockType(blockType); |
| 142 | + }; |
| 143 | + |
| 144 | + useEffect(() => { |
| 145 | + /** |
| 146 | + * Get the current editor state in HTML. |
| 147 | + * Usually keep it in the submit or next action to get output after user has typed. |
| 148 | + */ |
| 149 | + setEditorState(_draftRef.current ? _draftRef.current.getEditorState() : ""); |
| 150 | + }); |
| 151 | + console.log(editorState); |
| 152 | + |
| 153 | + return ( |
| 154 | + <SafeAreaView style={styles.containerStyle}> |
| 155 | + <RNDraftView |
| 156 | + defaultValue={defaultValue} |
| 157 | + onEditorReady={editorLoaded} |
| 158 | + style={{ flex: 1 }} |
| 159 | + placeholder={"Add text here..."} |
| 160 | + ref={_draftRef} |
| 161 | + onStyleChanged={setActiveStyles} |
| 162 | + onBlockTypeChanged={setActiveBlockType} |
| 163 | + /> |
| 164 | + <EditorToolBar |
| 165 | + activeStyles={activeStyles} |
| 166 | + blockType={blockType} |
| 167 | + toggleStyle={toggleStyle} |
| 168 | + toggleBlockType={toggleBlockType} |
| 169 | + /> |
| 170 | + {Platform.OS === "ios" ? <KeyboardSpacer /> : null} |
| 171 | + </SafeAreaView> |
| 172 | + ); |
| 173 | +}; |
| 174 | + |
| 175 | +const styles = StyleSheet.create({ |
| 176 | + containerStyle: { |
| 177 | + flex: 1, |
| 178 | + marginTop: 36 |
| 179 | + }, |
| 180 | + toolbarContainer: { |
| 181 | + height: 56, |
| 182 | + flexDirection: "row", |
| 183 | + backgroundColor: "silver", |
| 184 | + alignItems: "center", |
| 185 | + justifyContent: "space-around" |
| 186 | + }, |
| 187 | + controlButtonContainer: { |
| 188 | + padding: 8, |
| 189 | + borderRadius: 2 |
| 190 | + } |
| 191 | +}); |
| 192 | +``` |
| 193 | + |
| 194 | +### The above code will create the following editor view: |
| 195 | + |
| 196 | + |
| 197 | + |
| 198 | +Refer the working example in [`ReactNativeDraftjsExample/`](https://github.com/DaniAkash/react-native-draftjs/tree/master/ReactNativeDraftjsExample) directory |
| 199 | + |
| 200 | +If you run across any isses, please note that Draft.js is **not** fully mobile compatible yet. Before raising any issues in this repository please check if your issue exists in the following lists: |
| 201 | + |
| 202 | +- https://github.com/facebook/draft-js/labels/android |
| 203 | +- https://github.com/facebook/draft-js/labels/ios |
| 204 | + |
| 205 | +## TODO |
| 206 | + |
| 207 | +- [ ] Custom Style map. |
| 208 | +- [ ] Custom Block Components. |
| 209 | +- [ ] CSS Styling of the editor |
| 210 | +- [ ] Test Cases |
| 211 | +- [ ] Native iOS and Android libraries |
0 commit comments