Making text act like a link

I’m creating a plugin to have some quality of life features when editing GemText documents. The plugin currently can autocomplete relative Gemini links and provide suggestions as shown below.

I want to take it to the next level and make it so if a valid relative Gemini link is detected I want it to be highlighted in Obsidian like a link, then when I click on it it’ll follow the link. A nice extra would even have the document preview, since it’s just slightly modified markdown.

Any way to do this in Obsidian? I want the document to stay as it is, just for Obsidian to pick up on the links, highlight them, and allow me to select them.

I’m following this thread because I’m interested in the correct answer.

I can think of a couple probably very wrong solutions which will work.

  1. You can add a callback for the ‘modify’ event to let you know when a file is changed, then check for your link format, and if it’s there then add it to the DOM.

app.vault.on('modify', (file) => { // do stuff })

  1. You can put a Mutation Observer on the DOM and watch for new elements which match your format, and then wrap them in a link.

If you do the second one, you can steal the code from my image captions plugin, which also watches the DOM for changes.

https://github.com/alangrainger/obsidian-image-captions

That’s why I’m interested in the “correct” answer, because I want to update my own code :grin:

1 Like

So I’ve been trying to use this first “probably very wrong” solution just because I felt like working on it would lead me onto the path of a “more correct solution” (in my opinion this solution is honestly still clean and might be what I end up doing).

I’ve gotten my event handlers done and can validate if the line being worked on is a link (as well as going through and doing this on every line on document open). I tried creating a link just by basing it off of how other internal links seem to work from the dom (cm-hmd-internal-link cm-link-alias classes with other stuff inside of it)
When I end up inserting that into the line in the dom though, it instead creates a custom HTML block instead of making an internal link.

Correct me if I’m wrong but I think that’s actually modifying the file itself when it makes it a custom HTML block, so I can’t use that. As well as the fact that it just doesn’t work haha.
Any idea why it’s turning into a custom HTML block when I modify the DOM to try and make an internal link?

I can give better specifics or screenshots if needed!

Thank you for your help so far though, this is most of the way through thanks to your help!

Sadly not, but if you figure out how to do it please post back here. I struggled with a similar problem for some images in my captioning plugin, so I’d love to know the answer in case it helps solve my problem also.