feat: insert markdown value in the current editor selection point.

[forhappy]

This is to support inserting markdown content in the current selection(where the cursor is) point, we can programmatically insert new markdown content to the existing markdown editor now.

NOTE: the Signal insertMarkdown$ can be only used in plugins, there is no way to use this utility API from outside of the editor.

Screen.Recording.2024-01-10.at.3.53.28.PM.mov

New idea to discuss:

We can even expose a MDXEditor API(insertMarkdown) so that the user can insert markdown content from outside of the editor.

[forhappy]

This is a new version of markdown insert feature based on MDXEditor V2, happy to discuss the implementation ideas ;)

Hey @petyosi would you help take a look into this PR?

[petyosi]

Hey @forhappy ,

I mentioned that this should be a built-in feature; here's what I have in mind as a possible implementation: ad5a516.

This eliminates the need of an additional mdast import point node, which I see as a potential problem down the road.

The commit needs some clean up of course, as I'm just butchering the root type, but you will get the idea. Does this work for you? Thank you very much for your help!

[forhappy]

Hey @petyosi Thanks for your comments and sample code, your solution is simpler and easy to understand, let me verify if it would work in some edge cases I have observed, will let you know if everything works well.

A side 🗒️: while I am happy to rewrite my PR based on your idea, I don't meant to take your credit:) so it's totally ok for you to refine your idea and polish your change then I will cancel my PR. But if you don't mind I can raise a second revision and finalize this feature with you.

[petyosi]

That would be amazing! Please go ahead and take that approach in your PR. It is great that you have some edge cases to test it with.

Cheers,

[braincore]

Will insertMarkdown be the recommended way to add something like a user-mentions dialog?

[forhappy]

Will insertMarkdown be the recommended way to add something like a user-mentions dialog?

It can be used to insert markdown content(in the future we can even insert HTML content) to the current cursor point, one potential use case is the user can now input markdown content from somewhere(not in the editor) and then insert the markdown to the editor. This will be very helpful if you build something like Notion AI where the content is generated by AI and the user would like to insert the AI generated content into the editor.

[forhappy]

Hey @petyosi , I've updated the implementations and examples based on your suggestions/ideas, I've done very minor changes on the original fakeRoot(added comments and removed the type conversion by new RootNode directly), besides I added one example where NestedEditor is used via JSX component.

I also tested a few edge cases and it works(e.g. insert markdown content in a table cell), thank you so much for the guidance ;)

[petyosi]

Constructing a new root node seemed attractive as an idea, but, unfortunately, it does not seem to work :(. See my comments.

[petyosi]

I might be missing something but this line should not do anything? rootNodes is an empty array. It also does not bind the variable to the nodes of the shadowRoot.

[forhappy]

You're right, new a RootNode won't work, I could have missed some steps to verify it, now I changed back to use your code and it can work.

[petyosi]

Here, rootNodes is still an empty array, nothing has changed its value.

[forhappy]

Yes, I oversight this issue, I have changed back to use the original code and it now works. Thank you for your help.

[petyosi]

From what I tested, this indeed inserts the markdown - but always at the bottom and not at the cursor. As far as I can tell, constructing a new root node and appending to it just append nodes to the root of the active editor.

[forhappy]

After I use the following code now it works:

         const shadowRoot = {
          append(node: LexicalNode) {
            rootNodes.push(node)
          },
          getType() {
            return selection?.getNodes()[0].getType()
          }
        }

        tryImportingMarkdown(r, shadowRoot as RootNode, markdownToInsert)
        $insertNodes(rootNodes)

[forhappy]

Updated the insert logic and now it works

[forhappy]

Yes, I oversight this issue, I have changed back to use the original code and it now works. Thank you for your help.

[github-actions]

🎉 This PR is included in version 2.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀