Merge remote-tracking branch 'upstream/main' into fix-explorer-build-and-test

Author: josemontespg

renderers/angular/src/v0_9/catalog/basic/text.component.spec.ts

@@ -60,8 +60,11 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    const span = fixture.debugElement.query(By.css('span'));
-    expect(span.nativeElement.innerHTML.trim()).toBe('<p>Hello World</p>');
+    const element = fixture.debugElement.query(By.css('.a2ui-text'));
+    expect(element).toBeTruthy();
+    const p = element.query(By.css('p'));
+    expect(p).toBeTruthy();
+    expect(p.nativeElement.textContent.trim()).toBe('Hello World');
     expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('Hello World');
   });
 
@@ -74,7 +77,12 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('# Heading');
+    expect(mockMarkdownRenderer.render).not.toHaveBeenCalled();
+    const element = fixture.debugElement.query(By.css('.a2ui-text.h1'));
+    expect(element).toBeTruthy();
+    const h1 = element.query(By.css('h1'));
+    expect(h1).toBeTruthy();
+    expect(h1.nativeElement.textContent.trim()).toBe('Heading');
   });
 
   it('should handle variant caption', async () => {
@@ -86,7 +94,12 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('*Caption*');
+    expect(mockMarkdownRenderer.render).not.toHaveBeenCalled();
+    const element = fixture.debugElement.query(By.css('.a2ui-text.caption'));
+    expect(element).toBeTruthy();
+    const em = element.query(By.css('em'));
+    expect(em).toBeTruthy();
+    expect(em.nativeElement.textContent.trim()).toBe('Caption');
   });
 
   it('should handle variant h2', async () => {
@@ -98,7 +111,12 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('## Heading');
+    expect(mockMarkdownRenderer.render).not.toHaveBeenCalled();
+    const element = fixture.debugElement.query(By.css('.a2ui-text.h2'));
+    expect(element).toBeTruthy();
+    const h2 = element.query(By.css('h2'));
+    expect(h2).toBeTruthy();
+    expect(h2.nativeElement.textContent.trim()).toBe('Heading');
   });
 
   it('should handle variant h3', async () => {
@@ -110,7 +128,12 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('### Heading');
+    expect(mockMarkdownRenderer.render).not.toHaveBeenCalled();
+    const element = fixture.debugElement.query(By.css('.a2ui-text.h3'));
+    expect(element).toBeTruthy();
+    const h3 = element.query(By.css('h3'));
+    expect(h3).toBeTruthy();
+    expect(h3.nativeElement.textContent.trim()).toBe('Heading');
   });
 
   it('should handle variant h4', async () => {
@@ -122,7 +145,12 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('#### Heading');
+    expect(mockMarkdownRenderer.render).not.toHaveBeenCalled();
+    const element = fixture.debugElement.query(By.css('.a2ui-text.h4'));
+    expect(element).toBeTruthy();
+    const h4 = element.query(By.css('h4'));
+    expect(h4).toBeTruthy();
+    expect(h4.nativeElement.textContent.trim()).toBe('Heading');
   });
 
   it('should handle variant h5', async () => {
@@ -134,7 +162,12 @@ describe('TextComponent', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(mockMarkdownRenderer.render).toHaveBeenCalledWith('##### Heading');
+    expect(mockMarkdownRenderer.render).not.toHaveBeenCalled();
+    const element = fixture.debugElement.query(By.css('.a2ui-text.h5'));
+    expect(element).toBeTruthy();
+    const h5 = element.query(By.css('h5'));
+    expect(h5).toBeTruthy();
+    expect(h5.nativeElement.textContent.trim()).toBe('Heading');
   });
 
   it('should handle missing text property', async () => {

renderers/angular/src/v0_9/catalog/basic/text.component.ts

@@ -38,7 +38,35 @@ import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
 @Component({
   selector: 'a2ui-v09-text',
   standalone: true,
-  template: ` <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()"> </span> `,
+  template: `
+    @if (isNonMarkdownVariant()) {
+      <span [class]="'a2ui-text ' + variant()">
+        <!-- Nesting block elements like h1 inside a span is not correct HTML5. We should refactor this-->
+        @switch (variant()) {
+          @case ('h1') {
+            <h1>{{ text() }}</h1>
+          }
+          @case ('h2') {
+            <h2>{{ text() }}</h2>
+          }
+          @case ('h3') {
+            <h3>{{ text() }}</h3>
+          }
+          @case ('h4') {
+            <h4>{{ text() }}</h4>
+          }
+          @case ('h5') {
+            <h5>{{ text() }}</h5>
+          }
+          @case ('caption') {
+            <em>{{ text() }}</em>
+          }
+        }
+      </span>
+    } @else {
+      <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()"></span>
+    }
+  `,
   // We use :host ::ng-deep because the template content is injected via innerHTML (Markdown).
   // Angular's default view encapsulation cannot target elements injected via innerHTML because they lack the scoping attributes generated at compile time.
   // ::ng-deep allows styles to reach into the injected HTML, while :host keeps them scoped to this component.
@@ -107,42 +135,34 @@ import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
 export class TextComponent extends BasicCatalogComponent<typeof TextApi> {
   private markdownRenderer = inject(MarkdownRenderer);
 
+  private static readonly NON_MARKDOWN_VARIANTS = new Set<string>([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'caption',
+  ]);
+
   readonly variant = computed(() => this.props()['variant']?.value() || 'body');
   readonly text = computed(() => this.props()['text']?.value() || '');
 
+  readonly isNonMarkdownVariant = computed(() => {
+    return TextComponent.NON_MARKDOWN_VARIANTS.has(this.variant());
+  });
+
   resolvedText = signal<string>('');
   private renderRequestId = 0;
 
   constructor() {
     super();
     effect(() => {
-      const text = this.text();
-      const variant = this.variant();
-      let value = text;
-
-      switch (variant) {
-        case 'h1':
-          value = `# ${text}`;
-          break;
-        case 'h2':
-          value = `## ${text}`;
-          break;
-        case 'h3':
-          value = `### ${text}`;
-          break;
-        case 'h4':
-          value = `#### ${text}`;
-          break;
-        case 'h5':
-          value = `##### ${text}`;
-          break;
-        case 'caption':
-          value = `*${text}*`;
-          break;
+      if (this.isNonMarkdownVariant()) {
+        return;
       }
-
+      const text = this.text();
       const requestId = ++this.renderRequestId;
-      this.markdownRenderer.render(value).then(rendered => {
+      this.markdownRenderer.render(text).then(rendered => {
         if (requestId === this.renderRequestId) {
           this.resolvedText.set(rendered);
         }