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

Styles Do Not Apply On Collapsed Selection State #4

Closed gdad-s-river closed 6 years ago

gdad-s-river commented 6 years ago

Since Modifier.applyInlineStyles is used to modify the inline styles, I think for this reason the styles aren't applied if the selection state is collapsed. For example, in this poetry editor that I'm coding up, when I change the slider and use draft-js-custom-styles to change the inline styles (font size), it only works if some text is selected.

My intended behaviour is that, even if nothing is selected (collapsed selection state), then also the inline styles should be applied to the character that will be entered there after (I think RichUtils.toggleInlineStyles does that). Any idea how could I do that ?

Thanks!

betancourtl commented 6 years ago

Hi thx for posting, which method are you using to apply the styles?

gdad-s-river commented 6 years ago

addFontSize initiated with color picker util

Reproducing steps to see it in action :

  1. clone the repo
  2. checkout layout-rewrite branch
  3. npm install / yarn
  4. npm/yarn start
betancourtl commented 6 years ago

Ok awesome. That one does not add the inlineStyleOverride. It uses the draft-js API to set it. I might be able to modify it so you can apply the override to collapsed/non-collapsed .

gdad-s-river commented 6 years ago

@webdeveloperpr, it'd be really cool if you could do that :) , because I'd been struggling on how to :D

betancourtl commented 6 years ago

I'll see if I can get it working tonight, and send you a link to an example so you can check it out.

gdad-s-river commented 6 years ago

That'd be nice, thank you so much 😊

gdad-s-river commented 6 years ago

@webdeveloperpr anytime you could would be fine really. Whenever you are not occupied.

jpuri commented 6 years ago

@gdad-s-river : There can be 2 fixes:

  1. You can try to change current selection to include whole block and then call toggle style, draft has method to setSelection, and then you can reset it back to collapsed state.
  2. Instead of changing inline styles you add a block level meta-data for this property and then use it to style the block.
betancourtl commented 6 years ago

@gdad-s-river I added the changes to the repo and tested out your layout-rewrite branch using draft-js-custom-styles@2.0.2. Collapsed style now have inlineStyleOverrides added when using add().

color

betancourtl commented 6 years ago

Also @jpuri thx for suggestions!

gdad-s-river commented 6 years ago

@webdeveloperpr thanks a lot for being so quick on the request. Really appreciate it 😃