Can't get draft-js Modifier's applyInlineStyle function to apply inline style

Question

I am leveraging the draft-js and react-draft-wysiwyg libraries to create a WYSIWYG editor. I am looking to add some custom options to the toolbar to render the final HTML, such as inline line-height. However, I cannot get the Modifier's applyInlineStyle() function to work properly.

Editor:

import React, { Component } from "react";
import { ContentState, convertFromHTML, convertFromRaw, convertToRaw, EditorState, Modifier } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import draftToHtml from "draftjs-to-html";
import "../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const toolbarOptions = {
  options: ["inline"],
  inline: {
    options: ["bold", "italic", "underline"],
    bold: { className: "rich-text-icon" },
    italic: { className: "rich-text-icon" },
    underline: { className: "rich-text-icon" }
  },
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: EditorState.createEmpty(),
      finalHTML: ""
    };
  }

  onEditorStateChange = editorState => {
    const raw = convertToRaw(editorState.getCurrentContent());
    const markup = draftToHtml(raw);
    this.setState({
      editorState,
      finalHTML: markup
    });
    console.log(markup);
  };

  render() {
    return (
      <div>
        <div className="App">
          <Editor
            editorState={this.state.editorState}
            onEditorStateChange={this.onEditorStateChange}
            toolbar={toolbarOptions}
            toolbarCustomButtons={[<ApplyLineHeight />]}
            stripPastedStyles={true}
          />
        </div>
      </div>
    );
  }
}

Custom line height option:

class ApplyLineHeight extends Component {
  applyLineHeight = () => {
    const { editorState, onChange } = this.props;
    const contentState = Modifier.applyInlineStyle(editorState.getCurrentContent(), editorState.getSelection(), "line-height: 20px;");
    onChange(EditorState.push(editorState, contentState, "change-inline-style"));
  };

  render() {
    return <div onClick={this.applyLineHeight}>Change line height</div>;
  }
}

When I follow the example from the docs (under "Adding new option to the toolbar"), it works with the Modifier.replaceText() function (to replace text) but it does not work when attempting to return line-height. I am returned the same <p></p> tags with no inline style applied. What could be causing this function to not render?

Answer 1

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')

Answer 2

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