Hello Folks!
TLDR: How can I render a context menu after a mark is created (a link)
Longer explanation:
I was wondering if there’s an example or what would be the approach to achieve this behavior. In Notion when you paste a link you get this context menu rendered on the bottom right corner of the text.
I believe this cam be done with a decoration. I would like to know what would be the most sane approach to do this.
thanks in advance!
I believe this cam be done with a decoration
Not necessary unless your design specifically requires this - a temporary placeholder at a certain position that should be maintained for some reason across editor updates / changes (ex: real time collaboration one possibility, but might be overkill for this feature)
https://prosemirror.net/examples/tooltip/
This is a good example that should get you started. For your use case, you’ll conditional show this particular tooltip only when there is a single mark across the empty or range selection. I think that is what you are asking. Other permutations possible to add a link to selected text using similar methods.
You can also optionally only render the tooltip when clicked (handleClickOn) rather then anytime that selection is active (ex: keyboard navigation) but that is a design decision.
If you want to mimic notion, the link you’ve pasted simply needs to be considered selected after paste. By default, the cursor is left at the right-hand edge of the pasted link, so the algorithm above should respect that, and then the tooltip will show immediately. But if you only want this on first insert it becomes just a little more complicated. Not sure how notion specifically works.
crap, I forgot about this example! thanks for sharing it! Will give it a try and come back with the resulting code.
