search

globocom / react-native-draftjs-render

React Native render for draft.js model
MIT License
390 stars 62 forks source link

Change font family based on block type + inline style #48

Open joshfeinsilber opened 6 years ago

joshfeinsilber commented 6 years ago

Hi there!

I am looking to have one font family for a bold header-one, and a different font family for a bold header-two. Is there any way to do this? Currently, the custom styles allows us to specify styles for block type and inline style separately, but not together.

Thanks so much!

summercity commented 5 years ago

Any update on this? I am facing the same issue...

Thank you so much!

summercity commented 5 years ago

I was able to do a workaround.

Note the item = block

  1. Use 'code-block' eg. if (item.type === 'header-one') { item.type = 'code-block' }

  2. Create custom css element and exclude default text styles if (!this.isEmpty(item.inlineStyleRanges)) { item.inlineStyleRanges.map(i => { if (i.style != 'ITALIC' && i.style != 'BOLD' && i.style != 'LINK' && i.style != 'UNDERLINE' && i.style != 'STRIKETHROUGH' ) { if(originalType === 'header-one') { i.style = i.style + '-one'; } else if (originalType === 'header-two') { i.style = i.style + '-two'; } else if (originalType === 'header-three') { i.style = i.style + '-three'; } else if (originalType === 'header-four') { i.style = i.style + '-four'; } else if (originalType === 'header-five') { i.style = i.style + '-five'; } else if (originalType === 'header-six') { i.style = i.style + '-six'; } }

                        })
                }

  3. Map CSS to corresponding custom elements 'merriweather': { fontFamily: 'Merriweather', }, 'merriweather-one': { fontFamily: 'Merriweather', fontSize: 32, }, 'merriweather-two': { fontFamily: 'Merriweather', fontSize: 24 }, 'dancing script': { fontFamily: 'Dancing Script', }, 'dancing script-two': { fontFamily: 'Dancing Script', fontSize: 24 },