Render only elements within the component/directive (#477)

jfcere · Nov 11, 2023 · 3ca7b61 · 3ca7b61
1 parent 4130a9e
commit 3ca7b61
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/lib/src/markdown.service.spec.ts b/lib/src/markdown.service.spec.ts
@@ -715,11 +715,7 @@ describe('MarkdowService', () => {
         container.append(elementTwo);
 
         const defaultOptions: MermaidAPI.Config = { startOnLoad: false };
-
-        const defaultRunOptions: MermaidAPI.RunOptions = {
-          suppressErrors: false,
-          querySelector: '.mermaid',
-        };
+        const mermaidElements = container.querySelectorAll<HTMLElement>('.mermaid');
 
         window['mermaid'] = {
           initialize: (options: MermaidAPI.Config) => {},
@@ -732,10 +728,10 @@ describe('MarkdowService', () => {
         markdownService.render(container, { mermaid: true });
 
         expect(mermaid.initialize).toHaveBeenCalledWith(defaultOptions);
-        expect(mermaid.run).toHaveBeenCalledWith(defaultRunOptions);
+        expect(mermaid.run).toHaveBeenCalledWith({ nodes: mermaidElements });
       });
 
-      it('should render mermaid with provided options when mermaid is true and options are provided', () => {
+      it('should render mermaid with provided options when mermaid is true and at least one element is found', () => {
 
         const element = document.createElement('div');
         element.classList.add('mermaid');
@@ -749,10 +745,7 @@ describe('MarkdowService', () => {
           darkMode: true,
         };
 
-        const defaultRunOptions: MermaidAPI.RunOptions = {
-          suppressErrors: false,
-          querySelector: '.mermaid',
-        };
+        const mermaidElements = container.querySelectorAll<HTMLElement>('.mermaid');
 
         window['mermaid'] = {
           initialize: (options: MermaidAPI.Config) => {},
@@ -765,7 +758,7 @@ describe('MarkdowService', () => {
         markdownService.render(container, { mermaid: true, mermaidOptions: providedOptions });
 
         expect(mermaid.initialize).toHaveBeenCalledWith(providedOptions);
-        expect(mermaid.run).toHaveBeenCalledWith(defaultRunOptions);
+        expect(mermaid.run).toHaveBeenCalledWith({ nodes: mermaidElements });
       });
 
       it('should not render mermaid when mermaid is omitted/false/null/undefined', () => {
@@ -827,6 +820,27 @@ describe('MarkdowService', () => {
         expect(() => markdownService.render(container, { mermaid: true })).toThrowError(errorMermaidNotLoaded);
       });
 
+      it('should not render mermaid when no elements are found', () => {
+
+        const element = document.createElement('div');
+        element.classList.add('not-mermaid');
+
+        const container = document.createElement('div');
+        container.append(element);
+
+        window['mermaid'] = {
+          initialize: (options: MermaidAPI.Config) => {},
+          run: (runOptions: MermaidAPI.RunOptions) => {},
+        };
+
+        spyOn(mermaid, 'initialize');
+        spyOn(mermaid, 'run');
+
+        expect(() => markdownService.render(container, { mermaid: true })).not.toThrowError();
+        expect(mermaid.initialize).not.toHaveBeenCalled();
+        expect(mermaid.run).not.toHaveBeenCalled();
+      });
+
       it('should highlight element', () => {
 
         const element = document.createElement('div');

diff --git a/lib/src/markdown.service.ts b/lib/src/markdown.service.ts
@@ -96,11 +96,6 @@ export class MarkdownService {
     ],
   };
 
-  private readonly DEFAULT_MERMAID_RUNOPTIONS: MermaidAPI.RunOptions = {
-    suppressErrors: false,
-    querySelector: '.mermaid',
-  };
-
   private readonly DEFAULT_MERMAID_OPTIONS: MermaidAPI.Config = {
     startOnLoad: false,
   };
@@ -397,8 +392,12 @@ export class MarkdownService {
     if (typeof mermaid === 'undefined' || typeof mermaid.initialize === 'undefined') {
       throw new Error(errorMermaidNotLoaded);
     }
+    const mermaidElements = element.querySelectorAll<HTMLElement>('.mermaid');
+    if (mermaidElements.length === 0) {
+      return;
+    }
     mermaid.initialize(options);
-    mermaid.run(this.DEFAULT_MERMAID_RUNOPTIONS);
+    mermaid.run({ nodes: mermaidElements });
   }
 
   private trimIndentation(markdown: string): string {