Color palette

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">

This can be seen here:!/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:!/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.

Either works. With different marks, you have to set up their excludes spec to get the behavior your want, and with a single mark, you should probably write custom commands for adding and removing them, since they don’t work the same way as marks like emphasis do.

Using excludes works like a charm :dancer:

Here’s the final implementation:!/agate-polish

Thank you @marijn for your help.