globocom/react-native-draftjs-render

Change font family based on block type + inline style

joshfeinsilber opened this issue · 2 comments

joshfeinsilber commented

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

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

Thank you so much!

summercity commented

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
    },