How to render markdown inside a modal

Developers: Plugin & API
1

I’m trying to render some markdown inside a modal, but the markdown renderer requires an “Obsidian Component”, which I don’t know where to get it from.
Some obsidian views seem to inherit from this class, but not the modal one, so… how can I get access to the requirements to be able to render markdown inside a modal?

Also, many of the more advanced editors (like MarkdownView), require a workspace leaf, which, again, when in a modal yo have no access to, so are modals really that limited? What is the rationale behind that?

2

In your case, you just need to create a new Component instance (it’s not an abstract class so you can do this).

class YourModal extends Modal {
component: Component;

constructor(app: App) {
super(app)
this.component = new Component()
...
}

onOpen() {
this.component.load()
...
MarkdownRenderer.render(this.app, ..., this.component)
}

onClose() {
...
this.component.unload()
}

...
}
2 Likes
3

Thanks for the clarification and the code example.
Can I do the same thing in the context of a Svelte component? I mean, creating the component on svelte-component mount, and unloading it on the onDestroy callback. I think the mechanism is exactly the same, but I’m not sure if there is anything special in the lifecycle of a obsidian component that needs to be tied more closely to an obsidian entity (like a modal).
That is what I’m currently doing, but I can change it if it is going to be a problem.

That said… is it that important to call the component.load() method? I tried calling and not calling it and I see no difference.