React-draft-wysiwyg: How to add custom inline styles

[jpuri]

Hi @lejager, Try to use this method to toggle style: https://github.com/jpuri/draftjs-utils/blob/master/js/inline.js#L182

All inline styles are required to be passed to editor as map: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L455

The above toggle function will update the style and also add it to the map. here is example: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/controls/FontSize/index.js#L77

Plz let me know if you face any issue.

[azuldev1]

I'm attempting to achieve the same thing. @lejager please post if you achieve this. Thanks.

[faction23]

Hey @jpuri! First of all thank you for all your work on this library, its excellent :).

On this topic i am also facing this issue. The only part for me that is not clear is your second note "All inline styles are required to be passed to editor as map: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L455"

That just points to the start of render method. If you mean as customStyleMap prop you actually control that with your util function getCustomStyleMap(), you dont get it from props. Here is my custom button i am trying to add:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { toggleCustomInlineStyle } from 'draftjs-utils';

class AllCaps extends Component {
    toggleCaps = () => {
        const { editorState, onChange } = this.props;
        const newState = toggleCustomInlineStyle(
            editorState,
            'textTransform',
            'uppercase',
        );
        if (newState) {
            onChange(newState);
        }
    };

    render() {
        return (
            <div className="rdw-storybook-custom-option" onClick={this.toggleCaps}>B</div>
        );
    }
}

AllCaps.propTypes = {
    onChange: PropTypes.func,
    editorState: PropTypes.object,
};

AllCaps.defaultProps = {
    editorState: {},
    onChange: () => {},
};

export default AllCaps;

and in other file where i have imported that (as DraftAllCaps) here is all the props i pass to your editor

<Editor
    editorState={this.state.text}
    toolbarClassName={styles.draftToolbar}
    wrapperClassName={styles.draftWrapper}
    editorClassName={styles.draftEditor}
    toolbarOnFocus
    toolbar={this.props.editor_options}
    onEditorStateChange={this.onDraftJSChange}
    toolbarCustomButtons={[<DraftAllCaps />]}
/>

what is the other prop i need to pass here as "map" to make this work? Currently i get an error on attempting to apply inline style. Thank you!

[shye0000]

Any news about this topic? I'm facing the same issue here.

[jeremypagley]

@faction23 did you ever figure it out?

[samikarak]

I have a Issue with the second Note too. When I try to add a custom styleMap, which includes my custom inline style Property ( letterSpacing in my case ):

            <Editor
              ...
              customStyleMap={Object.assign(getCustomStyleMap(),{letterSpacing : {}})}
             ...
            />

I just retrieve an TypeError from toggleInlineStyle (Cannot convert undefined or null to object)

So how to properly insert custom inline styles ???

[thatsmeamal]

@jpuri I am in need of adding an html template into the wysiwyg editor. The editor now handles only some of the css styles. The editor does not apply styles such as border, margin etc that are present in the custom html component that is added into the editor. How can I incorporate support for more styles to handle this issue ?

[ferrao]

@jpuri I am really struggling to pass some custom styles into react-draft-wysiwyg....

I am trying to achieve something as simple as rendering the editor in a dark background and for that I need to modify the default CODE style to be:

CODE: { backgroundColor: 'none', fontFamily: 'monospace', overflowWrap: 'break-word' }

I have tried to pass this custom style to the editor, merge it with the output from getCustomStyleMap, but nothing works...

The bellow code is sufficient to break all inline styles like color, etc..

<Editor ... customStyleMap={getCustomStyleMap()} ... />

Any clues on how to add a custom style to react-draft-wysiwyg?

[jpuri]

PR has been merged and released: https://github.com/jpuri/react-draft-wysiwyg/pull/746

Release [email protected]

[jorge-cob]

Hey @jpuri! First of all thank you for all your work on this library, its excellent :).

On this topic i am also facing this issue. The only part for me that is not clear is your second note "All inline styles are required to be passed to editor as map: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L455"

That just points to the start of render method. If you mean as customStyleMap prop you actually control that with your util function getCustomStyleMap(), you dont get it from props. Here is my custom button i am trying to add:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { toggleCustomInlineStyle } from 'draftjs-utils';

class AllCaps extends Component {
  toggleCaps = () => {
      const { editorState, onChange } = this.props;
      const newState = toggleCustomInlineStyle(
          editorState,
          'textTransform',
          'uppercase',
      );
      if (newState) {
          onChange(newState);
      }
  };

  render() {
      return (
          <div className="rdw-storybook-custom-option" onClick={this.toggleCaps}>B</div>
      );
  }
}

AllCaps.propTypes = {
  onChange: PropTypes.func,
  editorState: PropTypes.object,
};

AllCaps.defaultProps = {
  editorState: {},
  onChange: () => {},
};

export default AllCaps;

and in other file where i have imported that (as DraftAllCaps) here is all the props i pass to your editor

<Editor
  editorState={this.state.text}
  toolbarClassName={styles.draftToolbar}
  wrapperClassName={styles.draftWrapper}
  editorClassName={styles.draftEditor}
  toolbarOnFocus
  toolbar={this.props.editor_options}
  onEditorStateChange={this.onDraftJSChange}
  toolbarCustomButtons={[<DraftAllCaps />]}
/>

what is the other prop i need to pass here as "map" to make this work? Currently i get an error on attempting to apply inline style. Thank you!

@faction23 did you achieved the uppercase functionality? Thanks!

[fancykingstar]

how can I add custom font in editor?