Hope this helps someone.
The Issue
Add an inline code:
Make text in the middle emphasis or bold:
The inline code splits:
DOM looks like this:
(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:
It is a useful trick for marks that have background colors (like code or highlight).