with draft.js is it possible to create a custom block span with classname

Question

I am using draft.js, and I have everything I need working except for one thing.

I want to be able to add a custom block option that will apply a span with a custom class (e.g. content) around the selected content in the editor.

Is this possible with draft-js custom blocks?

Any good examples out there? (didn't find anything when googling)

Answer 1

You can do it without wrapping text to the element with a custom class. You can style selected text with method RichUtils.toggleInlineStyle. More details described here. Look at this working example - https://jsfiddle.net/x2gsp6ju/2/

Define customStyleMap object. Keys of this object should be unique names of your custom styles and values - objects with appropriate styles.

const customStyleMap = {
  redBackground: {
    backgroundColor: 'red'
  },
  underlined: {
    textDecoration: 'underline',
    fontSize: 26
  },
};

Pass this object to customStyleMap property of Editor component:

<Editor
  placeholder="Type away :)"
  editorState={this.state.editorState}
  onChange={this._handleChange}
  customStyleMap={customStyleMap}
/>

In this example, I apply styles for selected text after click on appropriate buttons, I call this.applyCustomSTyles method and pass style-name as first argument. In this method I generate new editorState with RichUtils.toggleInlineStyles:

applyCustomStyles = (nameOfCustomStyle) => {
  this._handleChange(
    RichUtils.toggleInlineStyle(
      this.state.editorState,
      nameOfCustomStyle
    )
  );
}