Insert a value at cursor's position

[ungureanustefan]

Hi,

I've tried to extend the library and use Lexical to create a plugin for a dropdown button with a list of strings such as "[{name: "Name", value: "name}]". When the user clicks in the middle of the text and then selects an item from the dropdown, the value should be inserted where the cursor is.

I'm really stuck and I have no idea how to do it, because everything I've tried so far was a dead end. I've tried to look at the source code and also to access Lexical's state, but no success. So if anyone has a bit spare time, could you please show me what should be done in order to achieve that functionality?

Thank you.

[petyosi]

Can you show what you've done so far?

[ungureanustefan]

@petyosi,
Most of the stuff that I've tried were a dead end and I've removed them. The last trial, however, that I attempted, was to access the "editor" as this guy does in the video here https://www.youtube.com/watch?v=qIqxvk2qcmo. But by doing that, it breaks the app. I'm not sure how to extend the library in React to achieve that functionality.

This is the code at the moment

I'm not sure where to go from here. Lexical is installed in node_modules because it is a dependency of mdxeditor, but I cannot access its state for whatever reason.

[petyosi]

The best way for you to move forward is to read the source code of some of the plugins and the built in toolbar tools, and the way they interact with the core plugin state management. For example, this is the implementation of inserting a decorator node.

You can use one of the simpler plugins (like the headings one) as a starting point.

[ungureanustefan]

@petyosi Should I fork the library into a github repo and extend it in that way, or there's a way to extend it straight from my React App?

[petyosi]

You don't need to fork the library. Everything necessary to create a custom plugin is publicly exported.

[petyosi]

Sometime after this discussion, the editor implemented a method insertMarkdown that will inject a given markdown at the cursor position.