hicommonwealth / commonwealth

A platform for decentralized communities
https://commonwealth.im
GNU General Public License v3.0
68 stars 44 forks source link

Not able to implement mentions support due to MDXEditor bugs. #9995

Open burtonator opened 1 day ago

burtonator commented 1 day ago

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.

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

burtonator commented 1 day ago

Here's an example of trying to work with the DOM

https://github.com/user-attachments/assets/528ef2b2-f636-479b-83ab-7fe3332072a2