How to make draggable blocks and custom elements/nodes without react?

[Rusinas]

There is a great example of a rich text editor that has literally everything anyone would ever need. The only problem is that is written using react and I don't know how to transfer plugins from there to my vanilla js version of the editor.

For example, I want my custom image element, I want draggable blocks, floating formatting menu, placeholder, custom links/mentions etc etc and I can't see how I can implement it right now, I am using Vue and obivously I can't use anything from it to make my life easier and I assume I will need to write all the template and css and all the logic vanilla way too. But this is not the problem, the problem is that I have no idea how. Documentation is quite raw. Any advice/examples?

[yf-yang]

Unfortunately some plugins are part of the playground package, not the Lexical package, so I am afraid they are React only. The only way to do so is converting the React logic into vue (on your own). Some plugins are easier (for example, the drag and drop is a React wrapper that handles vanilla JavaScript, you only need to convert the wrapper), some are more like a pure React component (for example, the menu UI). Other plugins are functional (if you see a plugin that returns null, then it is only a React wrapper. Those plugins only create some commands and register some listener hooks when editor updates.)

In a word, you have to do some conversion (and it needs some fundamental knowledge of React), some are easier, some are not so easy to do so.