How do I get page links to work within HTML my plugin renders?

[donovans]

Hello, I’m just getting started writing an Obsidian plugin but am not able to get links to other pages in the notebook to work within the HTML I generate. The link text appears but doesn’t do anything when it is clicked. A simplified repro is below. Thanks for any assistance the community can offer!

import { App, MarkdownView, MarkdownPostProcessorContext, Modal, Plugin, PluginSettingTab, Setting } from 'obsidian';

export default class MyPlugin extends Plugin {
    async onload() {
        this.registerMarkdownCodeBlockProcessor("myplugin-test", this.renderTest);

        // One of my searches suggested adding this but it had no effect as far as I could tell.
        this.app.workspace.trigger('layout-ready');
    }

    renderTest = (source: string, el: HTMLElement, context: MarkdownPostProcessorContext) => {
        const linkEl = document.createElement('a');
        linkEl.setAttribute('href', '#');
        linkEl.innerText = 'Test Note';
        el.appendChild(linkEl);
    };
};

[donovans]

I should add here that I’ve tried setting the href = ‘Test Note’ (and ‘Test%20Note’/‘Test Note.md’/‘Test%20Note.md’) to no avail. And yes, the Test Note page does exist.

[donovans]

I figured this out. For any other beginning plugin makers, take a look at MarkdownRenderer.render. It will convert the markdown link [[page]] into the correct html.

        const el = document.createElement('div');
        const renderedEl = new MarkdownRenderChild(el);
        await MarkdownRenderer.render(this.app, source, el, context.sourcePath, renderedEl);