All files / markdown-renderer si-markdown-renderer.component.ts

100% Statements 12/12
100% Branches 1/1
100% Functions 2/2
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44                                      1x 19x 19x 19x           19x     19x 20x 20x   20x 20x 20x 20x          
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { CommonModule } from '@angular/common';
import { Component, effect, inject, input, ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
import { getMarkdownRenderer } from './markdown-renderer';
 
/**
 * Component to display markdown text, uses the {@link getMarkdownRenderer} function internally, relies on theme .markdown-renderer styles.
 * @experimental
 */
@Component({
  selector: 'si-markdown-renderer',
  imports: [CommonModule],
  template: ``
})
export class SiMarkdownRendererComponent {
  private sanitizer = inject(DomSanitizer);
  private hostElement = inject(ElementRef<HTMLElement>);
  private markdownFormatter = getMarkdownRenderer(this.sanitizer);
 
  /**
   * The markdown text to transform and display
   * @defaultValue ''
   */
  readonly text = input<string>('');
 
  constructor() {
    effect(() => {
      const contentValue = this.text();
      const containerEl = this.hostElement.nativeElement;
 
      if (containerEl) {
        const formattedNode = this.markdownFormatter(contentValue);
        containerEl.innerHTML = '';
        containerEl.appendChild(formattedNode);
      }
    });
  }
}