When two mentions are added via a setMarkdown() dynamically, they render as IDs instead of two mentions without a space. More info below.
Relevant Bug link in SLE Comments feature,
Bug 2602536: Usernames without a space in between do not render properly when editing a comment.
💻 Repro or Code Sample
Below is the workflow to reproduce the bug in the nimble-rich-text-editor:
When a user sets the <user:1><user:2> markdown string into the editor via setMarkdown() method, it is expected to render as two user mentions in the editor. However, during the first time when setMarkdown() is called the mention configs in the markdown parser are empty so it renders as two links. Since the example autolink is not an HTTP/HTTPS link, they render within the anchor element without href as per the design for mention.
Now, the configuration and corresponding mapping elements are loaded into the DOM, so as per the flow, we perform getMarkdown() + setMarkdown() to convert the rendered link back to mention node. Here, in Tiptap the link with the same href values without a whitespace in between renders as a single link instead of two links. So created an issue in Tiptap: https://github.com/ueberdosis/tiptap/issues/4686
Due to the above issue, the getMarkdown() returns markdown string as <user:1user:2> so the setMarkdown() converts it to something like below
🤔 Expected Behavior
For the above example, it should be like below considering the below configuration,
pattern: ^user:(.*)
For mention 1 -> mention-href: user:1, mention-label: name1
For mention 2 -> mention-href: user:2, mention-label: name2
😯 Current Behavior
💁 Possible Solution
Since the root cause of this bug is due to an issue in Tiptap where the same href value is rendered as a single anchor element instead of two links, we implemented a workaround to render it as two separate anchor elements.
To render two autolinks without whitespace as separate links in the Tiptap editor by having a unique class attribute value (i.e. href value) in the markdown parser and tiptap editor. This unique attribute value renders them as a separate link so that the bug is resolved.
We have commented this issue link on the code where we added the class attribute and can be removed once the linked Tiptap issue is resolved.
jattasNI
commented
5 months ago
🐛 Bug Report
When two mentions are added via a
setMarkdown()dynamically, they render as IDs instead of two mentions without a space. More info below.Relevant Bug link in SLE Comments feature, Bug 2602536: Usernames without a space in between do not render properly when editing a comment.
💻 Repro or Code Sample
Below is the workflow to reproduce the bug in the
nimble-rich-text-editor:When a user sets the
<user:1><user:2>markdown string into the editor viasetMarkdown()method, it is expected to render as two user mentions in the editor. However, during the first time whensetMarkdown()is called the mention configs in the markdown parser are empty so it renders as two links. Since the example autolink is not an HTTP/HTTPS link, they render within the anchor element withouthrefas per the design for mention.Now, the configuration and corresponding mapping elements are loaded into the DOM, so as per the flow, we perform
getMarkdown()+setMarkdown()to convert the rendered link back to mention node. Here, in Tiptap the link with the same href values without a whitespace in between renders as a single link instead of two links. So created an issue in Tiptap: https://github.com/ueberdosis/tiptap/issues/4686Due to the above issue, the
getMarkdown()returns markdown string as<user:1user:2>so thesetMarkdown()converts it to something like below🤔 Expected Behavior
For the above example, it should be like below considering the below configuration, pattern:
^user:(.*)For mention 1 -> mention-href:user:1, mention-label:name1For mention 2 -> mention-href:user:2, mention-label:name2😯 Current Behavior
💁 Possible Solution
Since the root cause of this bug is due to an issue in Tiptap where the same href value is rendered as a single anchor element instead of two links, we implemented a workaround to render it as two separate anchor elements.
To render two autolinks without whitespace as separate links in the Tiptap editor by having a unique
classattribute value (i.e. href value) in the markdown parser and tiptap editor. This unique attribute value renders them as a separate link so that the bug is resolved.We have commented this issue link on the code where we added the
classattribute and can be removed once the linked Tiptap issue is resolved.🔦 Context
It is affected when editing a comment in SLE. For more details, see the bug: https://dev.azure.com/ni/DevCentral/_workitems/edit/2602536
🌍 Your Environment