Marks priority

Hope this helps someone.

The Issue

Add an inline code:

image

Make text in the middle emphasis or bold:

image

The inline code splits:

image

DOM looks like this:

image

(You can see this issue is there in the Prosemirror demo too)

Easy Fix

After messing with a lot of things, I figured out this is easily fixable by moving code mark configurations before the strong/em configurations.

Old marks schema:

marks = {
    strong: {}
    em: {}
    code: {}
}

New marks schema:

marks = {
    code: {}
    strong: {}
    em: {}
}

I think it gives the code mark more priority and builds a nice DOM like this:

image

It is a useful trick for marks that have background colors (like code or highlight).

2 Likes