{
- return mockUnsafeHtml;
+ return mockSafeHtml;
}
}
@@ -39,15 +38,22 @@ describe('MarkdownPipe', () => {
expect(pipe).toBeTruthy();
});
- it('should call the service, sanitize content, and return SafeHtml', async () => {
+ it('should call the service and return SafeHtml with styles preserved', async () => {
await pipe.transform('some markdown');
expect(bypassSpy).toHaveBeenCalledTimes(1);
- const sanitizedString = bypassSpy.calls.mostRecent().args[0];
+ const htmlString = bypassSpy.calls.mostRecent().args[0];
- expect(sanitizedString).not.toContain('onerror');
- expect(sanitizedString).toContain('style="color: var(--shiki-fg);"');
+ expect(htmlString).toContain('style="color: var(--shiki-fg);"');
+ expect(htmlString).toContain(' {
+ const result = await pipe.transform('# Test');
+
+ expect(bypassSpy).toHaveBeenCalledWith(mockSafeHtml);
+ expect(result).toBeTruthy();
});
it('should handle undefined input text', async () => {
diff --git a/projects/igniteui-angular/chat-extras/src/markdown-pipe.ts b/projects/igniteui-angular/chat-extras/src/markdown-pipe.ts
index 9b7bb9bcb96..ea568ee42cd 100644
--- a/projects/igniteui-angular/chat-extras/src/markdown-pipe.ts
+++ b/projects/igniteui-angular/chat-extras/src/markdown-pipe.ts
@@ -1,4 +1,3 @@
-import DOMPurify from 'dompurify';
import { inject, Pipe, type PipeTransform } from '@angular/core';
import { IgxChatMarkdownService } from './markdown-service';
import { DomSanitizer, type SafeHtml } from '@angular/platform-browser';
@@ -11,8 +10,8 @@ export class MarkdownPipe implements PipeTransform {
public async transform(text?: string): Promise {
- return this._sanitizer.bypassSecurityTrustHtml(DOMPurify.sanitize(
+ return this._sanitizer.bypassSecurityTrustHtml(
await this._service.parse(text ?? '')
- ));
+ );
}
}
diff --git a/projects/igniteui-angular/chat-extras/src/markdown-service.spec.ts b/projects/igniteui-angular/chat-extras/src/markdown-service.spec.ts
index 4d25633f394..a54b1f30db4 100644
--- a/projects/igniteui-angular/chat-extras/src/markdown-service.spec.ts
+++ b/projects/igniteui-angular/chat-extras/src/markdown-service.spec.ts
@@ -31,9 +31,9 @@ describe('IgxChatMarkdownService', () => {
expect(result).toContain('code');
});
- it('should apply custom link extension with target="_blank"', async () => {
+ it('should apply custom link extension', async () => {
const markdown = '[Infragistics](https://www.infragistics.com)';
- const expectedLink = 'Infragistics
';
+ const expectedLink = 'Infragistics
';
const result = await service.parse(markdown);
expect(result).toContain(expectedLink);
diff --git a/projects/igniteui-angular/chat-extras/src/markdown-service.ts b/projects/igniteui-angular/chat-extras/src/markdown-service.ts
index 4f2edf2a508..b00f228ca70 100644
--- a/projects/igniteui-angular/chat-extras/src/markdown-service.ts
+++ b/projects/igniteui-angular/chat-extras/src/markdown-service.ts
@@ -1,67 +1,21 @@
import { Injectable } from '@angular/core';
-import { Marked } from 'marked';
-import markedShiki from 'marked-shiki';
-import { bundledThemes, createHighlighter } from 'shiki/bundle/web';
+import { setupMarkdownRenderer, type MarkdownRenderer } from 'igniteui-webcomponents/extras';
-const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
-const DEFAULT_THEMES = {
- light: 'github-light',
- dark: 'github-dark'
-};
-
@Injectable({ providedIn: 'root' })
export class IgxChatMarkdownService {
- private _instance: Marked;
- private _isInitialized: Promise;
-
- private _initializeMarked(): void {
- this._instance = new Marked({
- breaks: true,
- gfm: true,
- extensions: [
- {
- name: 'link',
- renderer({ href, title, text }) {
- return `${text}`;
- }
- }
- ]
- });
- }
-
- private async _initializeShiki(): Promise {
- const highlighter = await createHighlighter({
- langs: DEFAULT_LANGUAGES,
- themes: Object.keys(bundledThemes)
- });
-
- this._instance.use(
- markedShiki({
- highlight(code, lang, _) {
- try {
- return highlighter.codeToHtml(code, {
- lang,
- themes: DEFAULT_THEMES,
- });
-
- } catch {
- return `${code}
`;
- }
- }
- })
- );
- }
-
+ private _renderer: MarkdownRenderer | null = null;
- constructor() {
- this._initializeMarked();
- this._isInitialized = this._initializeShiki();
+ private async _getRenderer(): Promise {
+ if (!this._renderer) {
+ this._renderer = await setupMarkdownRenderer();
+ }
+ return this._renderer;
}
public async parse(text: string): Promise {
- await this._isInitialized;
- return await this._instance.parse(text);
+ const renderer = await this._getRenderer();
+ return await renderer.parse(text);
}
}
diff --git a/projects/igniteui-angular/ng-package.json b/projects/igniteui-angular/ng-package.json
index 01e9527acb4..2ba51971401 100644
--- a/projects/igniteui-angular/ng-package.json
+++ b/projects/igniteui-angular/ng-package.json
@@ -15,10 +15,6 @@
"@igniteui/material-icons-extended",
"igniteui-theming",
"igniteui-i18n-core",
- "igniteui-webcomponents",
- "dompurify",
- "marked",
- "marked-shiki",
- "shiki"
+ "igniteui-webcomponents"
]
}
diff --git a/projects/igniteui-angular/ng-package.prod.json b/projects/igniteui-angular/ng-package.prod.json
index 340840d93f5..5c5d978ee5e 100644
--- a/projects/igniteui-angular/ng-package.prod.json
+++ b/projects/igniteui-angular/ng-package.prod.json
@@ -14,10 +14,6 @@
"@igniteui/material-icons-extended",
"igniteui-theming",
"igniteui-i18n-core",
- "igniteui-webcomponents",
- "dompurify",
- "marked",
- "marked-shiki",
- "shiki"
+ "igniteui-webcomponents"
]
}
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 9427fafcac1..03b78f5cc53 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -86,11 +86,7 @@
"@angular/forms": "21",
"hammerjs": "^2.0.8",
"@types/hammerjs": "^2.0.46",
- "igniteui-webcomponents": "^6.3.0",
- "dompurify": "^3.2.0",
- "marked": ">=16.3.0",
- "marked-shiki": "^1.2.0",
- "shiki": "^3.12.0"
+ "igniteui-webcomponents": "^6.5.0"
},
"peerDependenciesMeta": {
"hammerjs": {
@@ -101,18 +97,6 @@
},
"igniteui-webcomponents": {
"optional": true
- },
- "dompurify": {
- "optional": true
- },
- "marked": {
- "optional": true
- },
- "marked-shiki": {
- "optional": true
- },
- "shiki": {
- "optional": true
}
},
"igxDevDependencies": {
diff --git a/projects/igniteui-angular/schematics/utils/dependency-handler.ts b/projects/igniteui-angular/schematics/utils/dependency-handler.ts
index 44f9a6bfc45..69d6cd47173 100644
--- a/projects/igniteui-angular/schematics/utils/dependency-handler.ts
+++ b/projects/igniteui-angular/schematics/utils/dependency-handler.ts
@@ -29,10 +29,6 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
{ name: 'igniteui-i18n-core', target: PackageTarget.REGULAR },
{ name: 'igniteui-theming', target: PackageTarget.NONE },
{ name: 'igniteui-webcomponents', target: PackageTarget.NONE },
- { name: 'dompurify', target: PackageTarget.NONE },
- { name: 'marked', target: PackageTarget.NONE },
- { name: 'marked-shiki', target: PackageTarget.NONE },
- { name: 'shiki', target: PackageTarget.NONE },
// peerDependencies
{ name: '@angular/forms', target: PackageTarget.NONE },
{ name: '@angular/common', target: PackageTarget.NONE },