What’s the recommended way to unfurl some links in Prosemirror? e.g. replace <a href="youtube.com/myvid">My Vid</a> with <a href="youtube.com/myvid"><img src="thumbnail.jpg"></a>
Requirements:
Not all links should be unfurled (depends on what they are linking to or user preference)
Links that are not unfurled should be transparent (their inner content should be editable as usual)
Unfurled links should be opaque (their inner content should not be editable)
Links are unfurled asynchronously. They initially appear as normal until the thumbnail/metadata is retrieved.
Possible solution using custom markview:
You can conditionally assign a custom MarkView to links that should be unfurled so the dom of the MarkView would include the unfurled representation. However, the MarkView does not support a customDOM element necessary for making the inner content of the link editable while the thumbnail/metadata is being retrieved. There is an open PR for allowing markview to specify a contentDOM element.
Other solutions?
Perhaps someone knows of an alternative solution. There was a question of whether decorations could be used but I don’t see how.
Can’t you just make custom image nodes for that ? Which have click handler emulating the link behavior (and another click handler for triggering to replace back to normal link ?
Ideally, marks would support full node views, which would make this really easy. Unfortunately, they don’t. So the best way to do this at the moment is probably to have a plugin that looks for links that need to be modified, and adds decorations that hide the link content and put a thumbnail or other widget in its place.
Using inline decorations to actually hide content is a really interesting concept that I hadn’t thought of before. I’m thinking you basically add display: none to the inline decoration, then use a widget decoration to add some content there.
Is this what you’re talking about? Do you know of anyone doing this in practice?
Yes, it’s a common pattern in CodeMirror but I haven’t actually done this with ProseMirror before, so there might be issues (with cursor motion and such).