Fix globally imported CLIPBOARD_OPTIONS (#545)

* Fix globally imported CLIPBOARD_OPTIONS (#529) (#537) * Fix clipboard demo examples * Add unit test --------- Co-authored-by: klofi <[email protected]> Co-authored-by: Ondrej Kovac <[email protected]>
jfcere · Oct 1, 2024 · 1bcaa29 · 1bcaa29
1 parent b2a4a44
commit 1bcaa29
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/demo/src/app/plugins/plugins.component.ts b/demo/src/app/plugins/plugins.component.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, SecurityContext } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout/flex';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { CLIPBOARD_OPTIONS, MarkdownComponent, MermaidAPI } from 'ngx-markdown';
+import { CLIPBOARD_OPTIONS, MarkdownComponent, MermaidAPI, provideMarkdown } from 'ngx-markdown';
 import { ClipboardButtonComponent } from '@shared/clipboard-button';
 import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
 
@@ -23,7 +23,13 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
     ScrollspyNavLayoutComponent,
   ],
   providers: [
-    { provide: CLIPBOARD_OPTIONS, useValue: {} },
+    provideMarkdown({
+      clipboardOptions: {
+        provide: CLIPBOARD_OPTIONS,
+        useValue: {},
+      },
+      sanitize: SecurityContext.NONE,
+    }),
   ],
 })
 export default class PluginsComponent implements OnInit {

diff --git a/lib/src/markdown.component.spec.ts b/lib/src/markdown.component.spec.ts
@@ -332,6 +332,38 @@ describe('MarkdownComponent', () => {
         component.viewContainerRef);
     });
 
+    it('should not overwrite `clipboardButtonComponent` and `clipboardButtonTemplate` when not provided', async () => {
+
+      const raw = '### Raw';
+      const parsed = '<h3>Compiled</h3>';
+
+      spyOn(markdownService, 'parse').and.returnValue(parsed);
+      spyOn(markdownService, 'render');
+
+      component.clipboard = true;
+      await component.render(raw);
+
+      expect(markdownService.parse).toHaveBeenCalledWith(raw, {
+        decodeHtml: false,
+        inline: false,
+        emoji: false,
+        mermaid: false,
+        disableSanitizer: false,
+      });
+
+      expect(markdownService.render).toHaveBeenCalledWith(
+        component.element.nativeElement,
+        {
+          clipboard: true,
+          clipboardOptions: undefined,
+          katex: false,
+          katexOptions: undefined,
+          mermaid: false,
+          mermaidOptions: undefined,
+        },
+        component.viewContainerRef);
+    });
+
     it('should emit `ready` when parsing and rendering is done', async () => {
 
       const markdown = '# Markdown';

diff --git a/lib/src/markdown.component.ts b/lib/src/markdown.component.ts
@@ -13,6 +13,7 @@ import {
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { ClipboardRenderOptions } from './clipboard-options';
 import { KatexOptions } from './katex-options';
 import { MarkdownService, ParseOptions, RenderOptions } from './markdown.service';
 import { MermaidAPI } from './mermaid-options';
@@ -162,10 +163,7 @@ export class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {
 
     const renderOptions: RenderOptions = {
       clipboard: this.clipboard,
-      clipboardOptions: {
-        buttonComponent: this.clipboardButtonComponent,
-        buttonTemplate: this.clipboardButtonTemplate,
-      },
+      clipboardOptions: this.getClipboardOptions(),
       katex: this.katex,
       katexOptions: this.katexOptions,
       mermaid: this.mermaid,
@@ -187,6 +185,16 @@ export class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {
     return value != null && `${String(value)}` !== 'false';
   }
 
+  private getClipboardOptions(): ClipboardRenderOptions | undefined {
+    if (this.clipboardButtonComponent || this.clipboardButtonTemplate) {
+      return {
+        buttonComponent: this.clipboardButtonComponent,
+        buttonTemplate: this.clipboardButtonTemplate,
+      };
+    }
+    return undefined;
+  }
+
   private handleData(): void {
     this.render(this.data!);
   }