Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Commit 3575b3c

Browse files
DaniAkashDaniAkash
committed
update docs for stylemap
1 parent 22f123c commit 3575b3c

File tree

1 file changed

+31
-12
lines changed

1 file changed

+31
-12
lines changed

‎Readme.md‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,26 @@ _iOS installation does not require any additional steps._
3535

3636
### Props
3737

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. |
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+
| styleMap | Object | A custom style map you can pass to add custom styling of elements in your text editor. Refer [Draft.js](https://draftjs.org/docs/advanced-topics-inline-styles#mapping-a-style-string-to-css) Docs |
48+
| styleSheet | String | A CSS string which you can pass to style the HTML in which the rich text editor is running. This can be used if you want to change fonts and background colors of the editor etc. |
49+
50+
`styleMap` and `styleSheet` are parsed as strings and are sent over to the webview. To prevent the string parsing from failing, please do not use single quotes `'` within the `styleMap` object's keys and values or inside the `styleSheet` string.
4751

4852
### Instance methods
4953

5054
| Name | Params | Description |
5155
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
5256
| focus | - | shift focus to the rich text editor |
57+
| blur | - | removes focus from the rich text editor |
5358
| 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. |
5459
| 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. |
5560
| 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). |
@@ -116,10 +121,21 @@ const EditorToolBar = ({
116121
isActive={blockType === "ordered-list-item"}
117122
action={() => toggleBlockType("ordered-list-item")}
118123
/>
124+
<ControlButton
125+
text={"--"}
126+
isActive={activeStyles.includes("STRIKETHROUGH")}
127+
action={() => toggleStyle("STRIKETHROUGH")}
128+
/>
119129
</View>
120130
);
121131
};
122132

133+
const styleMap = {
134+
STRIKETHROUGH: {
135+
textDecoration: "line-through"
136+
}
137+
};
138+
123139
const App = () => {
124140
const _draftRef = React.createRef();
125141
const [activeStyles, setActiveStyles] = useState([]);
@@ -147,7 +163,7 @@ const App = () => {
147163
* Usually keep it in the submit or next action to get output after user has typed.
148164
*/
149165
setEditorState(_draftRef.current ? _draftRef.current.getEditorState() : "");
150-
});
166+
}, [_draftRef]);
151167
console.log(editorState);
152168

153169
return (
@@ -160,6 +176,7 @@ const App = () => {
160176
ref={_draftRef}
161177
onStyleChanged={setActiveStyles}
162178
onBlockTypeChanged={setActiveBlockType}
179+
styleMap={styleMap}
163180
/>
164181
<EditorToolBar
165182
activeStyles={activeStyles}
@@ -189,6 +206,8 @@ const styles = StyleSheet.create({
189206
borderRadius: 2
190207
}
191208
});
209+
210+
export default App;
192211
```
193212

194213
### The above code will create the following editor view:
@@ -204,8 +223,8 @@ If you run across any issues, please note that Draft.js is **not** fully mobile
204223

205224
## TODO
206225

207-
- [ ] Custom Style map.
226+
- [x] Custom Style map.
208227
- [ ] Custom Block Components.
209-
- [ ] CSS Styling of the editor
228+
- [x] CSS Styling of the editor
210229
- [ ] Test Cases
211230
- [ ] Native iOS and Android libraries

0 commit comments

Comments
 (0)