Mentions are a critical feature to implement within common so that you can type @alice and select the users from a list and then create a link that we then store in markdown.
The problem is that it DOES NOT work with MDXEditor.
I spent about 30 hours trying to fix this and something really messed up is happening and it's turned into a super complicated problem.
Background
For background, there are three parts we need to implement:
markdown import from existing markdown content
in-memory editing of the DOM to retain the structure of the markdown.
markdown export from the DOM to a markdown string.
There are two existing plugins the I can borrow from to make this work:
linkPlugin and mentionPlugin.
linkPlugin is implemented within MDXEditor and that's a standard plugin.
mentionPlugin is implemented within Lexical but it does NOT support markdown import / export.
Problems
The problems I'm running into are around both markdown serialization AND DOM editing.
The markdown serialization isn't consistent. The initial load will export correctly but if you try to change the DOM by adding a new mention it loses the text portion and only retains the URL (not the "@alice" part).
The DOM can't be edited via the contenteditable. It seems to have something to do with the active selection. I can't reliably place the cursor inside the text , it will jump the cursor around, and also nuke the current element randomly.
Essentially, I can't get markdown to load reliably and the DOM editing is non-deterministic and editing causes the mention and the cursor to just bounce around constantly.
The main issues I've seen include:
you can't place the cursor inside a mention using the keyboard
mentions will be deleted them just magically reappear
you can place the cursor with the mouse, and then edit a node, but it appears to jump out of the node and to the previous node randomly.
If you only have an mention you can't edit the doc at all.
Solutions
I've tried the following:
double and triple checking the source code from Lexical and MDXEditor to make sure I'm not missing something
Verified that I'm using Lexical 0.17.0 source to make sure I'm not using code in a newer version with an older lexical version.
moving the code into the MDXEditor core rather than commonwealth to rule out compiler issues.
disabling the serializer and deserializer
Reading all the documentation to make sure I'm not doing something wrong.
marking the internal A element as contentEditable
ChatGPT with everything I can think of but it doesn't really know much about Lexical so it's hallucinating all potential solutions.
disabling the addComposerChild$ which allows auto completion and just seeing if I can load the markdown directly
using just a TextNode (not an ElementNode) which the mention plugin from Lexical uses but that has similar problems.
using the MDXEditor sandbox to get it working outside our environment
Describe the bug
Mentions are a critical feature to implement within common so that you can type
@alice
and select the users from a list and then create a link that we then store in markdown.We're using MDXEditor which is based on Lexical:
https://playground.lexical.dev/
and Lexical does support a mention plugin.
The problem is that it DOES NOT work with MDXEditor.
I spent about 30 hours trying to fix this and something really messed up is happening and it's turned into a super complicated problem.
Background
For background, there are three parts we need to implement:
There are two existing plugins the I can borrow from to make this work:
linkPlugin and mentionPlugin.
linkPlugin is implemented within MDXEditor and that's a standard plugin.
mentionPlugin is implemented within Lexical but it does NOT support markdown import / export.
Problems
The problems I'm running into are around both markdown serialization AND DOM editing.
The markdown serialization isn't consistent. The initial load will export correctly but if you try to change the DOM by adding a new mention it loses the text portion and only retains the URL (not the "@alice" part).
The DOM can't be edited via the contenteditable. It seems to have something to do with the active selection. I can't reliably place the cursor inside the text , it will jump the cursor around, and also nuke the current element randomly.
Essentially, I can't get markdown to load reliably and the DOM editing is non-deterministic and editing causes the mention and the cursor to just bounce around constantly.
The main issues I've seen include:
Solutions
I've tried the following:
What's Next
Here are some potential ways we could solve this.
Directives
We could try to get 'directives' to work.
https://mdxeditor.dev/editor/docs/custom-directive-editors
They're a custom markdown format for extending markdown.
I think it supports inline nodes but the problem is that it doesn't support typing in realtime.
Also, it wouldn't be standard markdown.
Contracting this Out
We could just hire the MDXEditor dev to get this to work. He might have better luck than I've had.
Initial conditions
Environment:
Branch/Release version:
Browser:
Wallet:
Reproduction steps
Actual behavior
Expected behavior
Screenshots / Video
Reporter
Additional context