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!); }