fix #499

Author: mProjectsCode

exampleVault/note1.md

@@ -0,0 +1,6 @@
+---
+foo: bar
+---
+`INPUT[slider]`
+
+`BUTTON[foo]`

exampleVault/note2.md

@@ -0,0 +1,9 @@
+---
+bar: foo
+---
+
+
+```meta-bind-embed
+
+![[note1]]
+```

exampleVault/templates/Test Template.md

@@ -1,3 +1,7 @@
+---
+foo: barssadad
+---
+
 This comes from [[Test Template]].
 
 Completed: `INPUT[toggle:completed]`

packages/core/src/api/InternalAPI.ts

@@ -28,7 +28,7 @@ import type { ContextMenuItemDefinition, IContextMenu } from 'packages/core/src/
 import type { IFuzzySearch } from 'packages/core/src/utils/IFuzzySearch';
 import type { IJsRenderer } from 'packages/core/src/utils/IJsRenderer';
 import type { MBLiteral } from 'packages/core/src/utils/Literal';
-import { mount } from 'svelte';
+import { mount, unmount } from 'svelte';
 import type { z } from 'zod';
 
 export interface ErrorIndicatorProps {
@@ -352,17 +352,22 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 
 	/**
 	 * Create an error indicator in the given element.
+	 * Returns a cleanup function.
 	 *
 	 * @param element
 	 * @param settings
 	 */
-	createErrorIndicator(element: HTMLElement, settings: ErrorIndicatorProps): void {
-		mount(ErrorIndicatorComponent, {
+	createErrorIndicator(element: HTMLElement, settings: ErrorIndicatorProps): () => void {
+		const component = mount(ErrorIndicatorComponent, {
 			target: element,
 			props: {
 				plugin: this.plugin,
 				settings: settings,
 			},
 		});
+
+		return () => {
+			void unmount(component);
+		};
 	}
 }

packages/obsidian/src/main.ts

@@ -1,5 +1,5 @@
 import type { MarkdownPostProcessorContext, WorkspaceLeaf } from 'obsidian';
-import { Plugin, stringifyYaml } from 'obsidian';
+import { loadPrism, Plugin, stringifyYaml } from 'obsidian';
 import { RenderChildType } from 'packages/core/src/config/APIConfigs';
 import { EMBED_MAX_DEPTH } from 'packages/core/src/config/FieldConfigs';
 import type { IPlugin } from 'packages/core/src/IPlugin';
@@ -115,6 +115,7 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		}
 
 		console.timeEnd('meta-bind | Main >> load-time');
+
 		// TODO: not sure if this is still needed, but it adds 100+ms to the load time, so I disabled it for now
 		// we need to wait for prism to load first, otherwise prism will cause problems by highlighting things that it shouldn't
 		// await loadPrism();
@@ -168,6 +169,11 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 	}
 
 	addPostProcessors(): void {
+		// In every processor we await prism to load, otherwise prism may break our rendering.
+		// Luckily `await loadPrism()` is a no-op if prism is already loaded.
+		// We could also load prism once on startup, but that would add 100+ms to the reported plugin load time.
+		// Prism is always loaded, so the total startup time would be the same, but the higher reported time may scare users.
+
 		// inline code blocks
 		this.registerMarkdownPostProcessor((el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
 			const codeBlocks = el.querySelectorAll('code');
@@ -192,7 +198,9 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		}, 1);
 
 		// "meta-bind" code blocks
-		this.registerMarkdownCodeBlockProcessor('meta-bind', (source, el, ctx) => {
+		this.registerMarkdownCodeBlockProcessor('meta-bind', async (source, el, ctx) => {
+			await loadPrism();
+
 			const codeBlock = el;
 			const content = source.trim();
 			const filePath = ctx.sourcePath;
@@ -214,7 +222,9 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		});
 
 		// "meta-bind-js-view" code blocks
-		this.registerMarkdownCodeBlockProcessor('meta-bind-js-view', (source, el, ctx) => {
+		this.registerMarkdownCodeBlockProcessor('meta-bind-js-view', async (source, el, ctx) => {
+			await loadPrism();
+
 			const mountable = this.api.createJsViewFieldMountable(ctx.sourcePath, {
 				declaration: source,
 			});
@@ -223,7 +233,9 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		});
 
 		// "meta-bind-embed" code blocks
-		this.registerMarkdownCodeBlockProcessor('meta-bind-embed', (source, el, ctx) => {
+		this.registerMarkdownCodeBlockProcessor('meta-bind-embed', async (source, el, ctx) => {
+			await loadPrism();
+
 			const mountable = this.api.createEmbedMountable(ctx.sourcePath, {
 				content: source,
 				depth: 0,
@@ -233,7 +245,9 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		});
 
 		for (let i = 1; i <= EMBED_MAX_DEPTH; i++) {
-			this.registerMarkdownCodeBlockProcessor(`meta-bind-embed-internal-${i}`, (source, el, ctx) => {
+			this.registerMarkdownCodeBlockProcessor(`meta-bind-embed-internal-${i}`, async (source, el, ctx) => {
+				await loadPrism();
+
 				const mountable = this.api.createEmbedMountable(ctx.sourcePath, {
 					content: source,
 					depth: i,
@@ -244,7 +258,9 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		}
 
 		// "meta-bind-button" code blocks
-		this.registerMarkdownCodeBlockProcessor('meta-bind-button', (source, el, ctx) => {
+		this.registerMarkdownCodeBlockProcessor('meta-bind-button', async (source, el, ctx) => {
+			await loadPrism();
+
 			const mountable = this.api.createButtonMountable(ctx.sourcePath, {
 				declaration: source,
 				isPreview: false,