How to avoid nested marks in same range?

In the example of Underlining Command, if we instead add two marks as follows:

underlines = underlines.update({
  add: [
    underlineMark.range(e.value.from, e.value.to),
    underlineMark2.range(e.value.from, e.value.to),
  ],
});

The relevant HTML would be:

<span class="cm-underline">
  <span class="cm-underline2">
    sole.l
  </span>
</span>

If this effect is as expected, how can we combine multiple marks in the same range so that we can apply multiple CSS classes simultaneously and freely, without being constrained by the order?

E.g.:

.cm-underline.cm-underline2 {

}

Yes, this is intended. You’ll have to use a single mark decoration is you want the classes to appear on a single element.

When the decorations come from different sources, the nesting order is deterministically determined by the relative precedence of those sources. That’s not the case when they come from the same set, though, since in that case they’ll have the same precedence.