Nested marks converted incorrectly to HTML

1

Hey there,

I am running into issues with the HTML DOM representation of nested marks. I’d like to be able to nest a link inside an em, and the other way around.

It works for link inside em:

Screenshot 2024-11-24 at 15.14.47

(The [em] and [a] is some CSS trickery with ::before and ::after for debugging purposes).

The document JSON looks like this, as expected:

JSON #1 
{
  "type": "text",
  "marks": [
    { "type": "em" }
  ],
  "text": "the "
},
{
  "type": "text",
  "marks": [
    { "type": "em" },
    { "type": "link", "attrs": { "href": "example.com" } }
  ],
  "text": "example"
},
{
  "type": "text",
  "marks": [
    { "type": "em" }
  ],
  "text": " site"
}

But the other way around does not work as intended:

Screenshot 2024-11-24 at 15.14.58

I would rather not have the link be broken up; I’d like the link to extend over the entire span.

I can swap the order of link and em in the ordered marks map, but then the first example will break, and the second example (this one right here) will succeed.

The DOM is correct either way:

JSON #2 
{
  "type": "text",
  "marks": [
    { "type": "link", "attrs": { "href": "example.com" } }
  ],
  "text": "an "
},
{
  "type": "text",
  "marks": [
    { "type": "em" },
    { "type": "link", "attrs": { "href": "example.com" } }
  ],
  "text": "amazing"
},
{
  "type": "text",
  "marks": [
    { "type": "link", "attrs": { "href": "example.com" } }
  ],
  "text": " find"
}

How can I solve this problem?

2

That’s not something the library supports. You can determine nesting order (by changing the order in which you provide the marks when defining the schema), but there’s a fixed order.

3

Hi Marijn, thank you so much for the quick reply!

This is unfortunate… is there any way to still make this work? Are there plans to support this in the future?

4

For out-of-editor serializations, you can of course define your own custom HTML serializer that works differently. Inside the editor, you’re stuck with how the library works.