Internal Links don't work in Custom view

[CapitanPapa]

I’m trying out making my first custom view and trying to test out what’s possible.

I’d like to make a link to a note, just like I would do from another note.

I tried passing a simple markdown link to render - Developer Documentation
And it seems to correctly render the html but it’s neither clickable nor does the hover preview work.

Having a look at the html in the Obsidian Debugger, it’s identical to that of an identical link if I paste the same markdown into a note.

That’s further proven by the fact that if I copy the html rendered by my custom view’s call to render… And paste it into a note… Both clicking and preview work.

Am I missing something obvious here?

[CapitanPapa]

Here are the concrete details for context:

If I put the following in a note:
[Another Page](Another%20Page.md)

Then obsidian automatically makes it both clickable and previewable on hover.

This is the rendered HTML I see under the hood:

<a class="internal-link" data-href="Another Page.md" href="Another Page.md" target="_blank" rel="noopener">Another Page</a>

However, if I try to use that in a Custom view, then it displays identically, but as I said above, it’s neither clickable nor hoverable.

Note that I’ve tried both creating that element by hand as well as using the markdown renderer described above. They produce the same result.

---

It’s interesting because I’ve confirmed that the HTML is definitely identical between my note and my custom view. I’ve triple checked this by even going into the Obsidian debugger, and copying and pasting the link HTML between a note and my custom view.

E.g. If I take what’s not working in my custom view and paste it into the live debugger of my note, it works immediately.

What’s going on here?

I can clearly see that the mouseover listener isn’t set in a custom view for whatever reason which helps explain at least the hover part not working.

I can’t seem to find any documentation on this except the fact that supposedly the hover portion of it is handled by Page preview - Obsidian Help which doesn’t address custom views.

But even if I pretend for a moment that that is why the preview isn’t working…why isn’t the plain old click working?

[Tu2_atmanand]

Hey, I dont know much about custom view, havent used one yet, but I tried the following method it seems to be working for me, try it out if it works for you.

First I created a separate file to keep the links management part organized :

export function hookMarkdownLinkMouseEventHandlers(
	app: App,
	containerEl: HTMLElement,
	sourcePath: string,
	filePath: string
) {
	containerEl.querySelectorAll("a.internal-link").forEach((el) => {
		el.addEventListener("click", (evt: MouseEvent) => {
			evt.preventDefault();
			const linktext = el.getAttribute("href");
			if (linktext) {
				app.workspace.openLinkText(
					linktext,
					sourcePath,
					Keymap.isModEvent(evt)
				);
			}
		});

		el.addEventListener("mouseover", (event: MouseEvent) => {
			event.preventDefault();
			const linktext = el.getAttribute("href");
			if (linktext) {
				app.workspace.trigger("hover-link", {
					event,
					source: "preview",
					hoverParent: { hoverPopover: null },
					targetEl: event.currentTarget,
					linktext: linktext,
					sourcePath: filePath,
				});
			}
		});
	});
}

Now, the place from where you are calling the MarkdownRenderer.render function. Right after that call the above function by passing the same arguments, as you were passing to the render function.

(I havent used the addEventListener listeners properly, will fix it later, let me know if anyone know how to add the event listeners properly.)

[CapitanPapa]

Thanks so much! This gets me there! Now I can both click on and hover over the links.

For the source on the hover-link I had to change it to preview specifically to get it to work, but other than that it works!

It’s interesting that this isn’t all default behavior!