Impossible to create overlapping marks/decorations which have the same semantic meaning but different metadata

Do you want to request a feature or report a bug?

It is a feature that went missing from 0.47, so bug?

What’s the current behavior?

It is impossible to create intersecting custom marks/decorations. In this case intersecting text highlights. Before: After: It seems that this is due to removal of Mark interface. Custom attributes are now simply merged in to the leaf, which makes it impossible to have 2 marks/decorations with the same semantic (highlight) but different data (color). Under new model there can be only one. This might also pose problems for plugins that implement different marks/decorations which could have property collisions.

Sandbox: https://codesandbox.io/s/slate-reproductions-4i770 Add highlights by selecting text and using Ctrl+(r|g|b) Slate: 0.57 Browser: Chrome OS: Windows

What’s the expected behavior?

Ability to have mark/decoration intersections. Under current model I do not see any straightforward way to implement this. If I missed something, please let me know.

Comments

Potential solution is modifying how mark/decoration data is applied to the leaf. Currently this is done by Object.assign function. If a mark/decoration, which now is an object, is replaced by a function that is used instead of Object.assign, this will give user fine grain control over how mark/decoration data is assembled on a leaf. Additionally, this will be an opt-in functionality, since user will need to explicitly implement it, so it will not change functionality of existing code.

[BetaAI]

@Immortalin Since bold and italic are orthogonal marks, it is possible to do nesting. Here is an example: https://codesandbox.io/s/slate-reproductions-k6mpd (Ctrl+b to bold, Ctrl+i to italicize) If you are coming from pre 0.50, main thing to note is that before slate used to do nested mark wrapping for you (not 100% sure, but it did for Annotation). This is something that you have to do yourself now. All slate does is merge mark/decoration data into leaf object. Take a look at renderLeaf in the sandbox (lines 18 - 24)

[thesunny]

FYI, you can still implement marks yourself as an Array. There is nothing stopping you from having your text object defined as something like:

const myText = {
  text: "Hello World",
  marks: ['strong', 'em']
}

That said, it’s pretty easy to extract the marks from a text object and iterate over them because text objects have exactly one property that isn’t a mark:

const { text, ...marks } = myText

And then you iterate over marks