Draft-js: Apply multiple styles using CompositeDecorator

[EssenceofWinter]

I'm not sure whether this is possible but I would like to be able to apply multiple styles when handling strategies with the CompositeDecorator. For a simplified example, let's say I have the following text in my editor:

The quick (brown) fox jumps over the lazy dog.

If I have a strategy that applies a background colour to anything within parentheses and a separate strategy that applies a foreground colour to any text matching 'brown', I would want both styles to be applied such that 'brown' has a background colour and a foreground colour. Instead, only one style is applied even though the functions for both strategies get called.

[flarnie]

Seems like it should be do-able. Would be helpful if you can throw together an example like the one you described, using the JSFiddle in the issue template: https://jsfiddle.net/stopachka/m6z0xn4r/

[EssenceofWinter]

Hi. I have created a JSFiddle that reproduces it. If you type in "dog (test) (dog)", you can see that only one of the styles is applied to "(dog)".

https://jsfiddle.net/EssenceOfWinter/ttbw6jbp/

Thanks!

[flarnie]

So now that I think about it, it might not make sense for CompositeDecorator to create nested ranges. The way it works under the hood is that it wraps the decorated text in the provided component. What if we had two overlapping ranges? How could we wrap them correctly? It's kind of an unsolved problem with the CompositeDecorator model.

It seems like we may want 'inline styles', like described here: https://draftjs.org/docs/advanced-topics-inline-styles.html#content

Will try to come up with an example if I have time later.

[EssenceofWinter]

I'm not sure that using blocks is going to be possible due to other requirements - the ability to highlight unmatched brackets, for example, which would need to work across blocks. Because we're only dealing with a small amount of text, there's no problem using a decorator with just one block to make it simple to implement.

It might be better to use a workaround such as using regexps to uniquely catch cases where more than one style is required.

[thatsmeamal]

Hi,
Is there anyway to include support for all the inline styles in an html component added to the editor ?