Internal Links don't work in Custom view

Developers: Plugin & API
3

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.)