diff --git a/demo/src/app/plugins/plugins.component.ts b/demo/src/app/plugins/plugins.component.ts
index 94fbfe5..9e46e36 100644
--- 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
index 1fc76eb..15a995e 100644
--- 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 = '
Compiled
';
+
+ 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
index 3a275dc..4fa6df1 100644
--- 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!);
}