[UXP-135][CST-14001] Add Markdown support to link rendering

Author: alisaismailati

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link/link.component.spec.ts

@@ -100,6 +100,41 @@ describe('LinkComponent', () => {
     });
   });
 
+  describe('with markdown link', () => {
+    beforeEach(() => {
+      component.metadataValue = { value: '[Example](http://example.com)' } as MetadataValue;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('check metadata rendering', (done) => {
+      const spanValueFound = fixture.debugElement.queryAll(By.css('span.link-value'));
+      expect(spanValueFound.length).toBe(1);
+
+      const valueFound = fixture.debugElement.queryAll(By.css('a'));
+      expect(valueFound.length).toBe(1);
+
+      expect(valueFound[0].nativeElement.textContent).toContain('Example');
+      expect(valueFound[0].nativeElement.href).toBe('http://example.com/');
+      done();
+    });
+
+    it('check value style', (done) => {
+      const valueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+      expect(valueFound.length).toBe(1);
+      done();
+    });
+
+    it('should return markdown link when metadataValue is in markdown format', () => {
+      const result = component.getLinkFromValue();
+      expect(result.href).toBe('http://example.com');
+      expect(result.text).toBe('Example');
+    });
+  });
+
   describe('with sub-type label', () => {
     beforeEach(() => {
       component.renderingSubType = 'LABEL';

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link/link.component.ts

@@ -60,17 +60,22 @@ export class LinkComponent extends RenderingTypeValueModelComponent implements O
     // If the component has label subtype get the text from translate service
     let linkText: string;
     let metadataValue: string;
+    const isMarkdownURLRegex = /^\[(?<label>.*)\]\((?<url>(?:http|ftp)s?:.*)\)$/;
 
     if (hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.EMAIL) {
-        this.isEmail = true;
-        metadataValue = 'mailto:' + this.metadataValue.value;
-        linkText = (hasValue(this.renderingSubType) &&
+      this.isEmail = true;
+      metadataValue = 'mailto:' + this.metadataValue.value;
+      linkText = (hasValue(this.renderingSubType) &&
         this.renderingSubType.toUpperCase() === TYPES.EMAIL) ? this.metadataValue.value : this.translateService.instant(this.field.label);
+    } else if (isMarkdownURLRegex.test(this.metadataValue.value)) {
+      const execRegex = isMarkdownURLRegex.exec(this.metadataValue.value).groups;
+      linkText = execRegex.label;
+      metadataValue = execRegex.url;
     } else {
-        const startsWithProtocol = [/^https?:\/\//, /^ftp:\/\//];
-        metadataValue = startsWithProtocol.some(rx => rx.test(this.metadataValue.value)) ? this.metadataValue.value : 'http://' + this.metadataValue.value;
-        linkText = (hasValue(this.renderingSubType) &&
-        this.renderingSubType.toUpperCase() === TYPES.LABEL) ? this.translateService.instant(this.field.label) : this.metadataValue.value;
+      const startsWithProtocol = [/^https?:\/\//, /^ftp:\/\//];
+      metadataValue = startsWithProtocol.some(rx => rx.test(this.metadataValue.value)) ? this.metadataValue.value : 'http://' + this.metadataValue.value;
+      linkText = (hasValue(this.renderingSubType) &&
+        this.renderingSubType?.toUpperCase() === TYPES.LABEL) ? this.translateService.instant(this.field.label) : this.metadataValue.value;
     }
 
     return {