fix: Markdown render and shiki initialization

Author: rkaraivanov

package-lock.json

@@ -73,7 +73,7 @@
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
-    "dompurify": "^3.2.7",
+    "dompurify": "^3.3.0",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
     "igniteui-theming": "^20.0.0",

package.json

@@ -54,25 +54,30 @@ type ChatTemplatesContextMap = {
     };
 };
 
-export type NgChatTemplates = {
+export type IgxChatTemplates = {
     [K in keyof ChatRenderers]?: TemplateRef<ChatTemplatesContextMap[K]>;
 };
 
-export type NgChatOptions = Omit<IgcChatOptions, 'renderers'>;
+export type IgxChatOptions = Omit<IgcChatOptions, 'renderers'>;
 
 
 @Component({
     selector: 'igx-chat',
     changeDetection: ChangeDetectionStrategy.OnPush,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     templateUrl: './chat.component.html',
+    styles: `
+        igc-chat {
+            --igc-chat-height: calc(100vh - 32px);
+        }
+    `
 })
 export class IgxChatComponent implements OnInit, OnDestroy {
     //#region Internal state
 
     private readonly _view = inject(ViewContainerRef);
     private readonly _templateViewRefs = new Map<TemplateRef<any>, Set<ViewRef>>();
-    private _oldTemplates: NgChatTemplates = {};
+    private _oldTemplates: IgxChatTemplates = {};
 
     protected readonly _mergedOptions = signal<IgcChatOptions>({});
     protected readonly _transformedTemplates = signal<ChatRenderers>({});
@@ -85,8 +90,8 @@ export class IgxChatComponent implements OnInit, OnDestroy {
     public readonly draftMessage = input<
         { text: string; attachments?: IgcChatMessageAttachment[] } | undefined
     >({ text: '' });
-    public readonly options = input<NgChatOptions>({});
-    public readonly templates = input<NgChatTemplates>({});
+    public readonly options = input<IgxChatOptions>({});
+    public readonly templates = input<IgxChatTemplates>({});
 
     //#endregion
 
@@ -131,7 +136,7 @@ export class IgxChatComponent implements OnInit, OnDestroy {
         });
     }
 
-    private _mergeOptions(options: NgChatOptions): void {
+    private _mergeOptions(options: IgxChatOptions): void {
         const transformedTemplates = this._transformedTemplates();
         const merged: IgcChatOptions = {
             ...options,
@@ -140,12 +145,12 @@ export class IgxChatComponent implements OnInit, OnDestroy {
         this._mergedOptions.set(merged);
     }
 
-    private _setTemplates(newTemplates: NgChatTemplates): void {
+    private _setTemplates(newTemplates: IgxChatTemplates): void {
         const templateCopies: ChatRenderers = {};
-        const newTemplateKeys = Object.keys(newTemplates) as Array<keyof NgChatTemplates>;
+        const newTemplateKeys = Object.keys(newTemplates) as Array<keyof IgxChatTemplates>;
 
         const oldTemplates = this._oldTemplates;
-        const oldTemplateKeys = Object.keys(oldTemplates) as Array<keyof NgChatTemplates>;
+        const oldTemplateKeys = Object.keys(oldTemplates) as Array<keyof IgxChatTemplates>;
 
         for (const key of oldTemplateKeys) {
             const oldRef = oldTemplates[key];
@@ -174,7 +179,7 @@ export class IgxChatComponent implements OnInit, OnDestroy {
         this._transformedTemplates.set(templateCopies);
     }
 
-    private _createTemplateRenderer<K extends keyof NgChatTemplates>(ref: NonNullable<NgChatTemplates[K]>) {
+    private _createTemplateRenderer<K extends keyof IgxChatTemplates>(ref: NonNullable<IgxChatTemplates[K]>) {
         type ChatContext = ExtractChatContext<NonNullable<ChatRenderers[K]>>;
 
         if (!this._templateViewRefs.has(ref)) {
@@ -239,3 +244,7 @@ export class IgxChatInputContextDirective {
         return true;
     }
 }
+
+export { MarkdownPipe } from './markdown-pipe';
+
+

projects/igniteui-angular/src/lib/chat/chat.component.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
-import { IgxChatComponent, IgxChatMessageContextDirective, NgChatTemplates } from './chat.component'
+import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatTemplates } from './chat.component'
 import { Component, signal, TemplateRef, viewChild } from '@angular/core';
 import type { IgcChatComponent, IgcChatMessage, IgcTextareaComponent } from 'igniteui-webcomponents';
 
@@ -144,7 +144,7 @@ class ChatTemplatesBed {
     imports: [IgxChatComponent, IgxChatMessageContextDirective]
 })
 class ChatDynamicTemplatesBed {
-    public templates = signal<NgChatTemplates | null>(null);
+    public templates = signal<IgxChatTemplates | null>(null);
     public messages = signal<IgcChatMessage[]>([{
         id: '1',
         sender: 'user',

projects/igniteui-angular/src/lib/chat/chat.spec.ts

@@ -0,0 +1,57 @@
+import { DomSanitizer } from '@angular/platform-browser';
+import { TestBed } from '@angular/core/testing';
+import { IgxChatMarkdownService } from './markdown-service';
+import { MarkdownPipe } from './markdown-pipe';
+import Spy = jasmine.Spy;
+
+// Mock the Service: We only care that the pipe calls the service and gets an HTML string.
+// We provide a *known* unsafe HTML string to ensure sanitization is working.
+const mockUnsafeHtml = `
+  <pre class="shiki" style="color: var(--shiki-fg);"><code><span style="color: #FF0000;">unsafe</span></code></pre>
+  <img src="x" onerror="alert(1)">
+`;
+
+class MockChatMarkdownService {
+    public async parse(_: string): Promise<string> {
+        return mockUnsafeHtml;
+    }
+}
+
+describe('MarkdownPipe', () => {
+    let pipe: MarkdownPipe;
+    let sanitizer: DomSanitizer;
+    let bypassSpy: Spy;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                MarkdownPipe,
+                { provide: IgxChatMarkdownService, useClass: MockChatMarkdownService },
+            ],
+        });
+
+        pipe = TestBed.inject(MarkdownPipe);
+        sanitizer = TestBed.inject(DomSanitizer);
+        bypassSpy = spyOn(sanitizer, 'bypassSecurityTrustHtml').and.callThrough();
+    });
+
+    it('should be created', () => {
+        expect(pipe).toBeTruthy();
+    });
+
+    it('should call the service, sanitize content, and return SafeHtml', async () => {
+        await pipe.transform('some markdown');
+
+        expect(bypassSpy).toHaveBeenCalledTimes(1);
+
+        const sanitizedString = bypassSpy.calls.mostRecent().args[0];
+
+        expect(sanitizedString).not.toContain('onerror');
+        expect(sanitizedString).toContain('style="color: var(--shiki-fg);"');
+    });
+
+    it('should handle undefined input text', async () => {
+        await pipe.transform(undefined);
+        expect(sanitizer.bypassSecurityTrustHtml).toHaveBeenCalled();
+    });
+});

projects/igniteui-angular/src/lib/chat/markdown-pipe.spec.ts

@@ -0,0 +1,18 @@
+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';
+
+
+@Pipe({ name: 'fromMarkdown' })
+export class MarkdownPipe implements PipeTransform {
+    private _service = inject(IgxChatMarkdownService);
+    private _sanitizer = inject(DomSanitizer);
+
+
+    public async transform(text?: string): Promise<SafeHtml> {
+        return this._sanitizer.bypassSecurityTrustHtml(DOMPurify.sanitize(
+            await this._service.parse(text ?? '')
+        ));
+    }
+}

projects/igniteui-angular/src/lib/chat/markdown-pipe.ts

@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+import { IgxChatMarkdownService } from './markdown-service';
+
+describe('IgxChatMarkdownService', () => {
+    let service: IgxChatMarkdownService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(IgxChatMarkdownService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should parse basic markdown to HTML', async () => {
+        const markdown = '**Hello** *World*';
+        const expectedHtml = '<p><strong>Hello</strong> <em>World</em></p>\n';
+
+        const result = await service.parse(markdown);
+        expect(result).toBe(expectedHtml);
+    });
+
+    it('should parse a code block with shiki highlighting', async () => {
+        const markdown = '```typescript\nconst x = 5;\n```';
+        const result = await service.parse(markdown);
+
+        expect(result).toContain('<pre class="shiki shiki-themes github-light github-dark"');
+        expect(result).toContain('const');
+        expect(result).toMatch(/--shiki-.*?/);
+        expect(result).toContain('code');
+    });
+
+    it('should apply custom link extension with target="_blank"', async () => {
+        const markdown = '[Infragistics](https://www.infragistics.com)';
+        const expectedLink = '<p><a href="https://www.infragistics.com" target="_blank" rel="noopener noreferrer" >Infragistics</a></p>';
+
+        const result = await service.parse(markdown);
+        expect(result).toContain(expectedLink);
+    });
+});

projects/igniteui-angular/src/lib/chat/markdown-service.spec.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { Marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { bundledThemes, createHighlighter } from 'shiki/bundle/web';
+
+
+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<void>;
+
+    private _initializeMarked(): void {
+        this._instance = new Marked({
+            breaks: true,
+            gfm: true,
+            extensions: [
+                {
+                    name: 'link',
+                    renderer({ href, title, text }) {
+                        return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
+                    }
+                }
+            ]
+        });
+    }
+
+    private async _initializeShiki(): Promise<void> {
+        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 `<pre><code>${code}</code></pre>`;
+                    }
+                }
+            })
+        );
+    }
+
+
+    constructor() {
+        this._initializeMarked();
+        this._isInitialized = this._initializeShiki();
+    }
+
+    public async parse(text: string): Promise<string> {
+        await this._isInitialized;
+        return await this._instance.parse(text);
+    }
+}

projects/igniteui-angular/src/lib/chat/markdown-service.ts

@@ -200,3 +200,6 @@ export * from './lib/tabs/tabs/tabs.module';
 export * from './lib/time-picker/time-picker.module';
 export * from './lib/toast/toast.module';
 export * from './lib/tree/tree.module';
+
+export * from './lib/chat/chat.component';
+export { MarkdownPipe } from './lib/chat/markdown-pipe';

projects/igniteui-angular/src/public_api.ts

@@ -1,7 +1,5 @@
-<div>
-    <igx-chat [options]="options" [messages]="messages" [templates]="{ messageContent: renderer }"></igx-chat>
-    <ng-template #renderer let-message igxChatMessageContext>
-        {{ markdownRenderer()(message) }}
-        <!-- {{ message.text.toUpperCase() }} -->
-    </ng-template>
-</div>
+<igx-chat [options]="options()" [messages]="messages()" [templates]="templates()" />
+
+<ng-template #renderer let-message igxChatMessageContext>
+    <div [innerHTML]="message.text | fromMarkdown | async"></div>
+</ng-template>