Previously we used a ProseMirror plugin to show the toolbar only for links and mentions. Buttons and embeds used a popover component from tamagui. I have decided to rewrite the plugin to include all the link type node types.

I started by adding hover detection to show the toolbar. It has raised many problems and was quite a rabbit hole. We used to track the node and it's positions only when clicking the node, or when it was in the current selection. Now with hover, since the toolbar is not part of the node itself, plugin variables would get erased, making it impossible to edit the link or text. I have decided to change the approach by only tracking the id of the node on hover and getting its' position later from the id. I also added tracking if the toolbar itself is hovered and not hiding it if so.

There are still a few problems with the hover, like changing the origin of the toolbar if the user hovers the toolbar that is on top of another link type node (embed or button). Also, hiding the toolbar can be inconsistent when hovering out.

After that, I have added updated design for the toolbar, that is now just a preview of a link and a button to open the edit form. Then I added a dropdown to change the type of the node to the form and buttons for changing the alignment if the toolbar is on a button node. Lastly, I added the button to remove a link or delete the whole block to the form.

I still need to add a version changer to the embed form, update the edit form in the query block, fix position of the toolbar for embeds and buttons, and add group and text type dropdowns to the formatting toolbar.