From 9ab28846c7b1756d0e3fd94d82b50ea5ab35e6b4 Mon Sep 17 00:00:00 2001
From: Brandon Roberts <robertsbt@gmail.com>
Date: Sun, 23 Jul 2023 21:52:28 -0500
Subject: [PATCH] fix(content): ensure prism toolbar is loaded first, use
 external mermaid loader (#564)

---
 apps/blog-app/src/app/app.config.ts           | 10 +++---
 packages/content/src/index.ts                 |  1 -
 .../lib/markdown-content-renderer.service.ts  | 31 ++++++++++++-------
 .../content/src/lib/marked-setup.service.ts   |  2 +-
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/blog-app/src/app/app.config.ts b/apps/blog-app/src/app/app.config.ts
index 61554d9cf..653ebe096 100644
--- a/apps/blog-app/src/app/app.config.ts
+++ b/apps/blog-app/src/app/app.config.ts
@@ -1,8 +1,4 @@
-import {
-  provideContent,
-  withMarkdownRenderer,
-  withMermaid,
-} from '@analogjs/content';
+import { provideContent, withMarkdownRenderer } from '@analogjs/content';
 import { provideFileRouter } from '@analogjs/router';
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
@@ -16,7 +12,9 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(),
     provideClientHydration(),
-    provideContent(withMarkdownRenderer(), withMermaid()),
+    provideContent(
+      withMarkdownRenderer({ loadMermaid: () => import('mermaid') })
+    ),
     provideFileRouter(
       withInMemoryScrolling({ anchorScrolling: 'enabled' }),
       withEnabledBlockingInitialNavigation()
diff --git a/packages/content/src/index.ts b/packages/content/src/index.ts
index 4b52119fb..bddf95dc4 100644
--- a/packages/content/src/index.ts
+++ b/packages/content/src/index.ts
@@ -7,7 +7,6 @@ export {
   MarkdownContentRendererService,
   provideContent,
   withMarkdownRenderer,
-  withMermaid,
 } from './lib/markdown-content-renderer.service';
 export { default as MarkdownRouteComponent } from './lib/markdown-route.component';
 export { default as MarkdownComponent } from './lib/markdown.component';
diff --git a/packages/content/src/lib/markdown-content-renderer.service.ts b/packages/content/src/lib/markdown-content-renderer.service.ts
index 9276d0f77..e5409d8fa 100644
--- a/packages/content/src/lib/markdown-content-renderer.service.ts
+++ b/packages/content/src/lib/markdown-content-renderer.service.ts
@@ -22,19 +22,28 @@ export class MarkdownContentRendererService implements ContentRenderer {
   enhance() {}
 }
 
-export function withMarkdownRenderer(): Provider {
-  return {
-    provide: ContentRenderer,
-    useFactory: () => new MarkdownContentRendererService(),
-    deps: [MarkedSetupService],
-  };
+export interface MarkdownRendererOptions {
+  loadMermaid?: () => Promise<typeof import('mermaid')>;
 }
 
-export function withMermaid(): Provider {
-  return {
-    provide: MERMAID_IMPORT_TOKEN,
-    useValue: import('mermaid'),
-  };
+export function withMarkdownRenderer(
+  options?: MarkdownRendererOptions
+): Provider {
+  return [
+    {
+      provide: ContentRenderer,
+      useFactory: () => new MarkdownContentRendererService(),
+      deps: [MarkedSetupService],
+    },
+    options?.loadMermaid
+      ? [
+          {
+            provide: MERMAID_IMPORT_TOKEN,
+            useFactory: options.loadMermaid,
+          },
+        ]
+      : [],
+  ];
 }
 
 export function provideContent(...features: Provider[]) {
diff --git a/packages/content/src/lib/marked-setup.service.ts b/packages/content/src/lib/marked-setup.service.ts
index 8981a8482..61ad0c8e9 100644
--- a/packages/content/src/lib/marked-setup.service.ts
+++ b/packages/content/src/lib/marked-setup.service.ts
@@ -8,6 +8,7 @@ import { gfmHeadingId } from 'marked-gfm-heading-id';
 import { markedHighlight } from 'marked-highlight';
 
 import 'prismjs';
+import 'prismjs/plugins/toolbar/prism-toolbar';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-javascript';
@@ -15,7 +16,6 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-typescript';
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
-import 'prismjs/plugins/toolbar/prism-toolbar';
 
 declare const Prism: typeof import('prismjs');