search

betancourtl / draft-js-custom-styles

Create custom inline styles for draft-js in a sane way
MIT License
34 stars 17 forks source link

A buggy remove / toggle style realisation. #21

Open Kazimirkas opened 4 years ago

Kazimirkas commented 4 years ago

Version 2.1.1.

Steps to reproduce.

  1. Add any 2 or more styles for a selection. For example custom color and custom font-size
Screenshot 2020-07-14 at 07 39 08
  1. Remove one of the styles. For example, switch off the custom font-size.

You will see, that each letter in a selection becomes wrapped with an additional span.

Screenshot 2020-07-14 at 07 39 38

This realization is not acceptable for languages such Arabic. Because each letter in a <span> in Arabic becomes detached from the word.

Like in this example

Before

Screenshot 2020-07-14 at 07 46 25

After

Screenshot 2020-07-14 at 07 46 36

For my project, I've fixed the issue using custom remove and toggle realization, based on RichUtils.toggleInlineStyle. It works ok.

Something like

  const currentValue = styles.color.current(editorState);
  if (currentValue) {
    const id = `CUSTOM_COLOR_${currentValue}`;
    return RichUtils.toggleInlineStyle(editorState, id);
  }

Guys. I really appreciate your plugin. It is very handy! Could you please fix this issue, to make it even more useful?