How to prevent two same adjacent mark merging into one?

[Justineo]

For example we have the following text in the editor:

ABC

Select "A" and call toggleMark via some custom Mark extension we have

<foo>A</foo>BC

Then select "B" and do the same we now have

<foo>AB</foo>C

I'm wondering whether there is a way to prevent them merging into a single mark, producing the following HTML?

<foo>A</foo><foo>B</foo>C

I tried to define the custom extension as Node but it seems that toggleNode doesn't work for inline nodes and wrapIn/toggleWrap just silently fail.

[Justineo]

OK I found a simple solution: just add different attributes to them.

<foo data-id="a">A</foo><foo data-id="b">B</foo>C

[ankit-saasup]

I have a content string as : <foo style="color:blue;text-align:center"><foo class="doc-variable">B</foo></foo>

but tiptap is merging them as : <foo style="color:blue;text-align:center">B</foo>

It is removing inner span which has class.

just for reference I have already created a custom span node which will support all types attributes.

Does anybody have any solution how can I prevent them from merging when they are nested as above?

[nperez0111]

marks cannot be nested in this way. IF you want to preserve both of those (e.g. style & class) then they need to be on the same element like <foo style="color:blue;text-align:center" class="doc-variable">B</foo>

This is not related to the original issue.

[nperez0111]

marks can wrap a node like this, just not wrap another mark

[ankit-saasup]

Actually, I have a big html string extracted from doc file and somewhere in between I have this <foo style="color:blue;text-align:center" class="doc-variable">B</foo>

should I manipulate merge them with all the attributes into one span node, or is there way I can handle this default merging where I have created my custom span node and disable this default merging from tiptap?

[nperez0111]

Tiptap is based on Prosemirror, and it is not an arbitrary HTML editor, it is a rich text editor that needs to have full control of the HTML that it is editing to make changes to it. Prosemirror does this by attempting to parse the content in such a way that it conforms to a schema (which is derived from the nodes & marks that you specify as Tiptap extensions), this means content which does not conform to the schema WILL BE LOST. This is a tradeoff, Prosemirror can accept a fair amount of HTML content & parse it into a structured format but it cannot reliably do so with arbitrary HTML (liberal in what it accepts, strict in what it outputs).
One common situation where this can occur, is attempting to nest marks of different types like: <span class="my-class"><span style="color: red">editable text</span></span> these two marks cannot be nested like this and Prosemirror will attempt to correct it by dropping one of them to abide by the rule that marks cannot be wrapping each other. To fix this, the HTML that is input into the editor should be in the format of one element with multiple attributes like: <span class="my-class" style="color: red">editable text</span> , this would be correctly parsed by Prosemirror as attempting to apply two marks to the text.

There is not a way to configure this behavior in Prosemirror, as it is already complex enough to parse arbitrary HTML. Depending on the source of the HTML you are attempting to parse, you can:

• Rely on the default behavior & drop the unknown content
• Attempt to parse the HTML yourself with a custom HTML parser and make it conform to what Prosemirror would expect (e.g. to merge spans)

[ankit-saasup]

Thanks, I will format my html content string and align it with what Prosemirror can parse correctly.