[Bug]: Marks for a Mention are not encoded in the Yjs XMLFragment, so formatting of Mentions does not persist/sync with Collaboration

sjdemartini commented 1 year ago

Which packages did you experience the bug in?

extension-mention, extension-collaboration, starter-kit

What Tiptap version are you using?

2.1.1

What’s the bug you are facing?

Steps to repro:

Install Mention, Collaboration, StarterKit
Create a Mention node in your doc alongside some other text
Format all the text (including the Mention) with bold, italic, etc. and see that the formatting shows up initially
View the editor in another Collaboration tab, or refresh, and notice the Marks formatting (bold, italic, etc.) does not show up for the Mention

When you add formatting to text that contains Mentions in Tiptap when not using Collaboration, the Mentions will properly take on any marks (bold, italic, text-style like fontFamily, color, etc.). (This is the expected behavior based on https://github.com/ueberdosis/tiptap/issues/1387.)

tiptap_mention_formatting_collaboration_bug.webm

However, when using Collaboration/Yjs, the document will initially show the formatted version of the Mention as you make changes locally, but the Marks applied to the Mention will not sync with Yjs. This means:

the formatting will not show up for other users
refreshing will lose all Mention formatting
users will be unaware that their formatting will be lost
it is entirely impossible to persist formatting of Mentions while using Collaboration

This appears to be due to the inconsistency between Tiptap/Prosemirror representation of the Mention Node Marks, and the Yjs XMLFragment representation.

What browser are you using?

Chrome

Code example

https://codesandbox.io/s/tiptap-mention-marks-not-serialized-with-yjs-qg4yx6

What did you expect to happen?

"What you see is what you get"—if formatting is shown and applied to a Mention in your instance of the editor due to Marks, it should be synced properly to other users and persist through refreshes. The behavior of formatting Mentions should be consistent between Collaboration mode and non-Collaboration mode.

Anything to add? (optional)

It seems none of the marks of a Mention are included in the YXMLFragment representation, which is seemingly the source of the bug. Compare:

XML (all marks appear after the <mention>):

<mention id="2" label="Tom Cruise"></mention><bold><italic> is formatted</italic></bold>

Tiptap getHTML (Mention is inside <strong>, etc.):

<strong><em><span data-type="mention" data-id="2" data-label="Tom Cruise">@Tom Cruise</span> is formatted</em></strong>

Tiptap getJSON (Mention node has marks listed):

{"type":"mention","attrs":{"id":"2","label":"Tom Cruise"},"marks":[{"type":"bold"},{"type":"italic"}]}

This bug becomes rather frustrating and limiting when using a FontSize extension like in mui-tiptap, since users will intuitively want/expect a Mention to be able to take on the font size of any neighboring text, even when using Collaboration.

Did you update your dependencies?

[X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

[ ] Yes, I’m a sponsor. 💖

sjdemartini commented 1 year ago

It seems this issue in y-prosemirror is likely the culprit: https://github.com/yjs/y-prosemirror/issues/47. There seem to be 2 open PRs that would address the issue but neither have been merged.

Pruxis commented 2 months ago

@sjdemartini I've made an additional PR as to those did not support the end-to-end usage that one would find in TipTap, such as TiptapTransformer.fromYdoc to convert the YDoc to JSON and include those marks.

sjdemartini commented 2 months ago

@sjdemartini I've made an additional PR as to those did not support the end-to-end usage that one would find in TipTap, such as TiptapTransformer.fromYdoc to convert the YDoc to JSON and include those marks.

Awesome, thank you for doing that; hopefully the Yjs folks follow up promptly to merge it!

ueberdosis / tiptap