search

facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.57k stars 2.63k forks source link

Nesting multiple decorators possible? #1703

Open pklavins opened 6 years ago

pklavins commented 6 years ago

Do you want to request a feature or report a bug? Not sure, could be either.

What is the current behavior? Currently applying a CompositeDecorator with two strategies will not apply both decorators to the same chunk of text if it matches both strategies.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Reproduced the issue here: https://jsfiddle.net/m6z0xn4r/634/.

What is the expected behavior? I expect 'nested' styles, e.g. in the fiddle with this text: [test @text here] I'd expect it all to be blue text with @text having a red background (and preserving blue text). Instead just the @text has red background, no blue text. If I invert the decorator strategy/component order, it'll show all blue text with no red background.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? Not sure if it's ever worked, 0.10.3, Win10, Chrome 64.0.3282.186

carterw485 commented 6 years ago

I also need this functionality. I found this draft-js-multidecorators npm module, but when using it, I don't get contentState passed into my strategies.

Edit: To make draft-js-multidecorators pass the contentState it, modify the index.js on lines 15 and 19, and just add state as a parameter in the declaration and the call for .getDecorations.

Edit again: Whichever decorator you pass in last seems to override the previous one, and doesn't give the desired functionality.

JM-Mendez commented 6 years ago

Take a look at what @paulyoung did over here https://github.com/facebook/draft-js/issues/542#issuecomment-275996606. He seems to have rewritten the composite decorator class to support nested components.

Here is a working codesandbox of your use case https://codesandbox.io/s/5ykjy4nvmp

cuicq commented 4 years ago

I also need this functionality. I found this draft-js-multidecorators npm module, but when using it, I don't get contentState passed into my strategies.

Edit: To make draft-js-multidecorators pass the contentState it, modify the index.js on lines 15 and 19, and just add state as a parameter in the declaration and the call for .getDecorations.

Edit again: Whichever decorator you pass in last seems to override the previous one, and doesn't give the desired functionality.

I used your method to successed, thank you!