Skip to content

Commit 35f4cf3

Browse files
imnapoimnapo
authored
Merge pull request #32 from jsamr/style-props
Provide styles props to CNRichTextEditor and CNToolbar
2 parents 5206b1c + 083d196 commit 35f4cf3

3 files changed

Lines changed: 49 additions & 24 deletions

File tree

‎README.md‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,10 +167,13 @@ Actually we did not implement 'Toolbar buttons and menus' and 'Image Uploading P
167167
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).
168168

169169
Also be noticed that this example is writen with expo and required 'react-native-popup-menu' package.
170-
## Props
170+
171+
## API
171172

172173
### CNRichTextEditor
173174

175+
#### Props
176+
174177
| Name | Description | Required |
175178
| ------ | ----------- | ---- |
176179
| onSelectedTagChanged | this event triggers when selected tag of editor is changed. | No |
@@ -180,9 +183,21 @@ Also be noticed that this example is writen with expo and required 'react-native
180183
| value | an array object which keeps value of the editor | Yes |
181184
| styleList | an object consist of styles name and values (use getDefaultStyles function) | Yes |
182185
| ImageComponent | a React component (class or functional) which will be used to render images. Will be passed `style` and `source` props. | No |
186+
| style | Styles applied to the outermost component. | No |
187+
| contentContainerStyle | Styles applied to the scrollview content. | No |
188+
189+
#### Instance methods
190+
191+
| Name | Params | Description |
192+
| ------ | ---- | ----------- |
193+
| applyToolbar | `toolType` | Apply the given transformation to selected text. |
194+
| insertImage | `uri, id?, height?, width?` | Insert the provided image where cursor is positionned. |
195+
| focus | | Focus to the last `TextInput` |
183196

184197
### CNToolbar
185198

199+
#### Props
200+
186201
| Name | Required | Description |
187202
| ------ | ------ | ----------- |
188203
| selectedTag | Yes | selected tag of the editor |
@@ -200,9 +215,15 @@ Also be noticed that this example is writen with expo and required 'react-native
200215
| image | No | a component which renders as image button |
201216
| highlight | No | a component which renders as highlight button |
202217
| foreColor | No | a component which renders as foreColor button |
203-
218+
| style | No | style applied to container |
219+
| color | No | default color passed to icon |
220+
| backgroundColor | No | default background color passed to icon |
221+
| selectedColor | No | color applied when icon is selected |
222+
| selectedBackgroundColor | No | background color applied when icon is selected |
223+
| iconContainerStyle | No | a style prop assigned to icon container |
204224

205225
### Functions
226+
206227
| Name | Param | Returns | Description |
207228
| ------ | ------ | ------ |----------- |
208229
| getInitialObject | - | javascript object | create a initial value for the editor. |
@@ -211,6 +232,7 @@ Also be noticed that this example is writen with expo and required 'react-native
211232
| getDefaultStyles | - | javascript object | creates required styles for the editor. |
212233

213234
## Expo Demo App
235+
214236
Checkout the
215237
[expo-demo App](https://expo.io/@imnapo/expo-demo)
216238
on Expo which uses react-native-cn-richtext-editor components.
@@ -219,5 +241,5 @@ If you are looking to test and run expo-demo App locally, click
219241
view the implementation & run it locally.
220242

221243
## License
222-
ISC
223244

245+
ISC

‎src/CNRichTextEditor.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -528,7 +528,7 @@ class CNRichTextEditor extends Component {
528528

529529
render() {
530530

531-
const {value, style} = this.props;
531+
const {value, style, contentContainerStyle} = this.props;
532532

533533
return (
534534
<View
@@ -538,11 +538,11 @@ class CNRichTextEditor extends Component {
538538
}, style]}>
539539

540540

541-
<ScrollView contentContainerStyle={{
541+
<ScrollView contentContainerStyle={[{
542542
flexGrow: 1,
543543
alignContent: 'flex-start',
544544
justifyContent: 'flex-start',
545-
}} >
545+
}, contentContainerStyle]} >
546546
<View style={{
547547
flex: 1,
548548
alignContent: 'flex-start',

‎src/CNToolbar.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ class CNToolbar extends Component {
1919
}
2020

2121
renderStyleButtons(size, color, bgColor, selectedColor, selectedBgColor) {
22-
const { selectedStyles, selectedTag, bold,
22+
const { selectedStyles, selectedTag, bold, iconContainerStyle,
2323
italic,
2424
underline,
2525
lineThrough } = this.props;
26+
const iconStyles = [styles.iconContainer, iconContainerStyle]
2627
return (
2728
<View style={[styles.iconSetContainer, { flexGrow: 4 }]}>
2829
{
@@ -31,8 +32,7 @@ class CNToolbar extends Component {
3132
onPress={() => {
3233
this.onStyleKeyPress('bold');
3334
}}>
34-
<View style={[styles.iconContainer
35-
, {
35+
<View style={[iconStyles, {
3636
backgroundColor: selectedStyles.indexOf('bold') >= 0 ? selectedBgColor : bgColor
3737
}]}>
3838
{
@@ -49,7 +49,7 @@ class CNToolbar extends Component {
4949
onPress={() => {
5050
this.onStyleKeyPress('italic');
5151
}}>
52-
<View style={[styles.iconContainer
52+
<View style={[iconStyles
5353
, {
5454
backgroundColor: selectedStyles.indexOf('italic') >= 0 ? selectedBgColor : bgColor
5555
}]}>
@@ -66,7 +66,7 @@ class CNToolbar extends Component {
6666
onPress={() => {
6767
this.onStyleKeyPress('underline');
6868
}}>
69-
<View style={[styles.iconContainer
69+
<View style={[iconStyles
7070
, {
7171
backgroundColor: selectedStyles.indexOf('underline') >= 0 ? selectedBgColor : bgColor
7272
}]}>
@@ -83,7 +83,7 @@ class CNToolbar extends Component {
8383
onPress={() => {
8484
this.onStyleKeyPress('lineThrough');
8585
}}>
86-
<View style={[styles.iconContainer
86+
<View style={[iconStyles
8787
, {
8888
backgroundColor: selectedStyles.indexOf('lineThrough') >= 0 ? selectedBgColor : bgColor
8989
}]}>
@@ -100,18 +100,20 @@ class CNToolbar extends Component {
100100

101101
renderTagButtons(size, color, bgColor, selectedColor, selectedBgColor) {
102102
const { selectedStyles, selectedTag, title,
103-
heading,
103+
heading, iconContainerStyle,
104104
ul,
105105
ol,
106106
body, } = this.props;
107+
const iconStyles = [styles.iconContainer, iconContainerStyle]
108+
107109
return (
108110
<View style={[styles.iconSetContainer, { flexGrow: 5 }]}>
109111
{body ?
110112
<TouchableWithoutFeedback
111113
onPress={() => {
112114
this.onStyleKeyPress('body');
113115
}}>
114-
<View style={[styles.iconContainer
116+
<View style={[iconStyles
115117
, {
116118
backgroundColor: selectedTag === 'body' ? selectedBgColor : bgColor
117119
}]}>
@@ -129,7 +131,7 @@ class CNToolbar extends Component {
129131
onPress={() => {
130132
this.onStyleKeyPress('title');
131133
}}>
132-
<View style={[styles.iconContainer
134+
<View style={[iconStyles
133135
, {
134136
backgroundColor: selectedTag === 'title' ? selectedBgColor : bgColor
135137
}]}>
@@ -146,7 +148,7 @@ class CNToolbar extends Component {
146148
onPress={() => {
147149
this.onStyleKeyPress('heading');
148150
}}>
149-
<View style={[styles.iconContainer
151+
<View style={[iconStyles
150152
, {
151153
backgroundColor: selectedTag === 'heading' ? selectedBgColor : bgColor
152154
}]}>
@@ -163,7 +165,7 @@ class CNToolbar extends Component {
163165
onPress={() => {
164166
this.onStyleKeyPress('ul');
165167
}}>
166-
<View style={[styles.iconContainer
168+
<View style={[iconStyles
167169
, {
168170
backgroundColor: selectedTag === 'ul' ? selectedBgColor : bgColor
169171
}]}>
@@ -180,7 +182,7 @@ class CNToolbar extends Component {
180182
onPress={() => {
181183
this.onStyleKeyPress('ol');
182184
}}>
183-
<View style={[styles.iconContainer
185+
<View style={[iconStyles
184186
, {
185187
backgroundColor: selectedTag === 'ol' ? selectedBgColor : bgColor
186188
}]}>
@@ -197,10 +199,11 @@ class CNToolbar extends Component {
197199

198200
renderExtras(size, color, bgColor, selectedColor, selectedBgColor) {
199201
const { selectedStyles, selectedTag, title,
200-
image,
202+
image, iconContainerStyle,
201203
highlight,
202204
foreColor,
203205
} = this.props;
206+
const iconStyles = [styles.iconContainer, iconContainerStyle]
204207
return (
205208
<View style={[styles.iconSetContainer, { flexGrow: 2 }]}>
206209
{
@@ -210,7 +213,7 @@ class CNToolbar extends Component {
210213
onPress={() => {
211214
this.onStyleKeyPress('image');
212215
}}>
213-
<View style={[styles.iconContainer
216+
<View style={[iconStyles
214217
, {
215218
backgroundColor: bgColor
216219
}]}>
@@ -227,7 +230,7 @@ class CNToolbar extends Component {
227230
onPress={() => {
228231
this.onStyleKeyPress('foreColor');
229232
}}>
230-
<View style={[styles.iconContainer
233+
<View style={[iconStyles
231234
, {
232235
backgroundColor: selectedStyles.indexOf('foreColor') >= 0 ? selectedBgColor : bgColor
233236
}]}>
@@ -243,7 +246,7 @@ class CNToolbar extends Component {
243246
onPress={() => {
244247
this.onStyleKeyPress('highlight');
245248
}}>
246-
<View style={[styles.iconContainer
249+
<View style={[iconStyles
247250
, {
248251
backgroundColor: selectedStyles.indexOf('highlight') >= 0 ? selectedBgColor : bgColor
249252
}]}>
@@ -263,7 +266,7 @@ class CNToolbar extends Component {
263266
const { selectedStyles, selectedTag,
264267
bold, italic, underline, lineThrough,
265268
title, heading, ul, ol, body,
266-
image, foreColor, highlight
269+
image, foreColor, highlight, style
267270
} = this.props;
268271

269272
let styleButtons = !bold && !italic && !underline && !lineThrough;
@@ -277,7 +280,7 @@ class CNToolbar extends Component {
277280
let selectedBgColor = this.props.selectedBackgroundColor ? this.props.selectedBackgroundColor : defaultSelectedBgColor;
278281

279282
return (
280-
<View style={styles.toolbarContainer}>
283+
<View style={[styles.toolbarContainer, style]}>
281284
{styleButtons === false ? this.renderStyleButtons(size, color, bgColor, selectedColor, selectedBgColor) : null}
282285
{(styleButtons === false && tagButtons === false) ? <View style={styles.separator}></View> : null}
283286
{tagButtons === false ? this.renderTagButtons(size, color, bgColor, selectedColor, selectedBgColor) : null}

0 commit comments

Comments
 (0)