Add ClassNames support to the customStyleMap

[newsiberian]

Summary

This PR makes it possible to pass classNames (strings) instead of styles (objects) to the customStyleMap

Resolves #957, resolves #1368, resolves #1639
and partly related with #342, #521

If you will accept this PR, please, let me know which part of documentation should be updated and how

Test Plan

This changes can be tested via Color example which was slightly modified

[fabiomcosta]

Setting classes to null or undefined would already create a dom node without an empty class attribute.

https://codesandbox.io/s/upbeat-yalow-uwkoh

Spreading here is just unnecessary and not good for perf.

[newsiberian]

thanks for looking into this

[newsiberian]

changed

[voidpumpkin]

@newsiberian Do you plan to revisit this? I would love to have this feature.

[newsiberian]

What for? I did what @fabiomcosta asked. We are successfully use this for about the year

[voidpumpkin]

@fabiomcosta Oh my bad, I somehow skipped that. But thx for the response.

[voidpumpkin]

@newsiberian Sorry, even with that information i cannot figure out how to add a custom css class to a existing style like "BOLD".

Here is my customStyleMap :

const styleMap = {
    BOLD: 'myClass',
};

Could you help me out?

[newsiberian]

we use something like this:

export const getStyleMap = (theme, classes) => ({
  [FONT_COLOR_ONE]: classes.fontColorOne,
  [FONT_COLOR_TWO]: classes.fontColorTwo,
  [FONT_COLOR_THREE]: classes.fontColorThree,
  [FONT_COLOR_FOUR]: classes.fontColorFour,
  [FONT_COLOR_FIVE]: classes.fontColorFive,
  [FONT_SIZE_14]: classes.fontSize14,
  [FONT_SIZE_16]: classes.fontSize16,
  [FONT_SIZE_18]: classes.fontSize18,
  [FONT_SIZE_20]: classes.fontSize20,
  [FONT_SIZE_24]: classes.fontSize24,
  [FONT_SIZE_28]: classes.fontSize28,
  [FONT_SIZE_32]: classes.fontSize32,
  [FONT_SIZE_36]: classes.fontSize36,
  [FONT_SIZE_42]: classes.fontSize42,
  [FONT_SIZE_48]: classes.fontSize48,
  [FONT_SIZE_54]: classes.fontSize54,
  [FONT_SIZE_60]: classes.fontSize60,
  [VERTICAL_ALIGN_TOP]: {
    verticalAlign: 'super',
  },
  [VERTICAL_ALIGN_BOTTOM]: {
    verticalAlign: 'sub',
  },
});

then, in component:

// theme / classes from material-ui solution
const memoizedStyleMap = useMemo(() => getStyleMap(theme, classes), [
    theme,
    classes,
  ]);

// then
return <Editor ...props styleMap={memoizedStyleMap} />

so, it is similar like you do

[voidpumpkin]

@newsiberian So wait, where are those classes, are they css in js or actual css?
EDIT: I ended up digging around in draft-js implementation and you have to be using inline styles. Pure css won't work.
My solution was to do this selector:

        editorContainer span[style*='font-weight: bold;'] {
            ...
        }

[DaniGuardiola]

Is this getting merged? @fabiomcosta

Thanks :)

[fabiomcosta]

@DaniGuardiola I'm actually not a maintainer of this project, but contribute here and there.
You might want to ask @claudiopro or @mrkev

[andresgutgon]

Maybe would be better to add a new prop customCssClassMap. This way you don't need this check.

[andresgutgon]

I did this approach here #2930

[newsiberian]

Your version looks cleaner. I like it)