By default, proseMirror implements link as the marks and does not provide options to update or edit them. In our project, we want to allow users to do it. How it should work: user place the cursor inside link and a small button with the edit icon appears near the text. After that, the user can click the button and open a link modal.
For now, we can handle the case when user places the cursor inside the text with an active link mark, identify if the text has this mark. The problem is that I not actually understand where should I place Edit button in code, mean should it be done in a file where we define a link mark, but in this case, I couldn’t activate/deactivate the button and handle event when user presses it.
Making some research, I found something similar in bangle dev but I do not clearly understand how this Floating menu works and what is it(see on Github, it looks like a plugin?)
Hey I am the author of bangle.dev I can field some part here, but I will scope the discussion to ProseMirror. If you any questions / help regarding bangle.dev feel free to reach out on our discord or github.
By default, proseMirror implements link as the marks and does not provide options to update or edit them.
Quoting the PM documentation - it is more of a Lego set than a Matchbox car. Prosemirror provides the interface of Marks and it is up to you how you want to build on top of it.
Coming back to links, there are a bunch of libraries that provided some added glue on top of Prosemirror like https://www.tiptap.dev or https://bangle.dev. I will speak about how bangle.dev implements the problem of updating links with a UI.
but I do not clearly understand how this Floating menu works and what is it(see on Github, it looks like a plugin?)
Yes it is a group of multiple plugins working together to show a floating tooltip. To implement link editing floating menu you will need to think about two different components:
Mark, plugins and commands for Link: You will need to implement mark specification and commands that will help you create / modify this mark. For some inspiration see bangle.dev’s implementation or tiptap’s implementation).
Plugins and commands to show a tooltip: A plugin that will show a DOM element as a floating tooltip when the selection is inside a link mark and hide it when the selection leaves the mark. For inspiration here’s bangle.dev’s implementation.
Once you have these two ready, you will need to add some buttons in your tooltip which dispatch commands like showing href’s value, clearing the link mark, modify the link’s href etc.