I’m trying to implement a color palette to allow users to highlight text with different colors. I have two different approaches, both of which don’t quite work as expected.
Approach 1 In my first approach i created separate mark specs for every color (currently green and red). Parsing and toggling these marks basically works, but there is one problem: it is possible to have these marks wrapped. For example, when clicking green then red in the menu, we end up with this:
<span color="green">
<span color="red">
...
</span>
</span>
This can be seen here: https://glitch.com/edit/#!/supreme-ridge
Approach 2 In my second approach i created a single mark spec which can handle multiple colors. The problem with this approach is that, in order to switch from green to red, the user first has to unselect green, then select red. Another problem here is that the menu bar will always highlight both color buttons.
This can be seen here: https://glitch.com/edit/#!/tangy-patio
I need some advice which of these approaches is better (or maybe there’s an entirely different one), and how to fix mentioned problems.
