fix(content): ensure prism toolbar is loaded first, use external merm…

…aid loader (#564)
analogjs · Jul 24, 2023 · 9ab2884 · 9ab2884
1 parent b7cef8a
commit 9ab2884
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -8,14 +8,14 @@ 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';
 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');