score:0

draftjs-to-html does not convert every inline style,yet it supports a few things like color, background color, font-size, font-family

Firstly define the styles with an individual CSS property:

Eg:

const styles = {
    'color-#222833': {
        color: '#222833',
    },
    'color-#005EFF': {
        color: '#005EFF',
    },
    'fontfamily-Montserrat': {
        fontFamily: 'Montserrat',
    },
    'fontsize-18px': {
        fontSize: '18px',
    },}

Note : use the exact same inline style names

Secondly To add multiple CSS properties at once ,Create an array of custom classes created

Eg:

 H2: ['color-#222833', 'fontsize-18px', 'fontfamily-Montserrat', 'BOLD'],
 BODY: ['color-#222833', 'fontsize-15px', 'fontfamily-Montserrat'],

Iterate the Array to apply the styles one by one using the RichUtils API

import { RichUtils } from 'draft-js';
const UpdateState = ['color#222833','fontsize15px','fontfamilyMontserrat']
            .reduce((state, style)=>RichUtils.toggleInlineStyle(state, style)
            , editorState);

onChange(UpdateState);

Reference : https://www.npmjs.com/package/draftjs-to-html

https://github.com/facebook/draft-js/blob/main/examples/draft-0-10-0/color/color.html

score:2

let's see api Modifier.applyInlineStyle() first

applyInlineStyle(
  contentState: ContentState,
  selectionState: SelectionState,
  inlineStyle: string 
): ContentState

The inlineStyle should be name defined in customStyleMap

The customStyleMap is property of Editor

just like this

import {Editor} from 'draft-js';

const styleMap = {
  'STRIKETHROUGH': {  // STRIKETHROUGH is the one which should be applied to inlineStyle
    textDecoration: 'line-through',
  },
};

class MyEditor extends React.Component {
  // ...
  render() {
    return (
      <Editor
        customStyleMap={styleMap}
        editorState={this.state.editorState}
        ...
      />
    );
  }
}
// The usage should be like this:
// Modifier.applyInlineStyle(xxx, xxx, 'STRIKETHROUGH')

Related Query

More Query from same tag