feat(ui): Adjust linkify directive

to be able to process HTML elements and Text.
Will be used additionally in the abstract and landing page.

libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts

@@ -52,6 +52,16 @@ const testingUrls = [
     'http://foo.com/(something)?after=parens',
   ],
 ]
+
+const testWithMultipleUrls = {
+  input:
+    'Fourteenth links http://foo.com/(something)?after=parens with multiple links http://foo.com/(something)?before=multiple',
+  output: [
+    'http://foo.com/(something)?after=parens',
+    'http://foo.com/(something)?before=multiple',
+  ],
+}
+
 @Component({
   template: `<div [gnUiLinkify]>{{ text }}</div>`,
 })
@@ -80,23 +90,37 @@ describe('GnUiLinkifyDirective', () => {
         component.text = input
         fixture.detectChanges()
         await fixture.whenStable()
-        const href = getAnchorElement().nativeElement.getAttribute('href')
+        const href = getAnchorElement()[0].nativeElement.getAttribute('href')
         expect(href).toBe(output)
       }
     )
+
+    it('should create multiple anchor elements with the correct href', async () => {
+      component.text = testWithMultipleUrls.input
+      const output = testWithMultipleUrls.output
+      fixture.detectChanges()
+      await fixture.whenStable()
+      const amountOfAnchors = getAnchorElement().length
+      const firstHref = getAnchorElement()[0].nativeElement.getAttribute('href')
+      const secondHref =
+        getAnchorElement()[1].nativeElement.getAttribute('href')
+      expect(amountOfAnchors).toBe(2)
+      expect(firstHref).toBe(output[0])
+      expect(secondHref).toBe(output[1])
+    })
   })
 
   it('should have the target attribute set to "_blank"', async () => {
     component.text = 'Click this link https://www.example.com/'
     fixture.detectChanges()
     await fixture.whenStable()
-    const target = getAnchorElement().nativeElement.getAttribute('target')
+    const target = getAnchorElement()[0].nativeElement.getAttribute('target')
     expect(target).toBe('_blank')
   })
   function getAnchorElement() {
     debugElement = fixture.debugElement.query(
       By.directive(GnUiLinkifyDirective)
     )
-    return debugElement.query(By.css('a'))
+    return debugElement.queryAll(By.css('a'))
   }
 })

libs/ui/elements/src/lib/metadata-info/linkify.directive.ts

@@ -9,30 +9,72 @@ export class GnUiLinkifyDirective implements OnInit {
 
   ngOnInit() {
     setTimeout(() => {
-      this.processLinks()
+      this.processLinks(this.el.nativeElement)
     }, 0)
   }
 
-  private processLinks() {
-    const container = this.el.nativeElement
-
+  private processLinks(container: HTMLElement | ChildNode) {
     const nodes = Array.from(container.childNodes)
+
     nodes.forEach((node) => {
       if (node instanceof Text) {
         const textNode = node as Text
-        const linkified = this.linkifyText(textNode.nodeValue)
-        const span = this.renderer.createElement('span')
-        span.innerHTML = linkified
-        container.insertBefore(span, textNode)
-        container.removeChild(textNode)
+        const linkified = this.linkifyNode(textNode.nodeValue)
+        if (linkified) {
+          this.createLinkElements(container, linkified, node)
+        }
+      } else if (node instanceof HTMLAnchorElement) {
+        const url = node.href
+        const displayValue = node.innerHTML
+        const linkified = this.linkifyNode(displayValue, url)
+        if (linkified) {
+          this.createLinkElements(container, linkified, node)
+        }
+      } else {
+        this.processLinks(node)
       }
     })
   }
 
-  private linkifyText(text: string): string {
-    return text.replace(/(\bhttps?:\/\/\S+\b[=)/]?)/g, (match) => {
-      return `<a href="${match}" target="_blank"
-                  class="text-primary cursor-pointer hover:underline">${match} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`
+  private linkifyNode(displayValue: string, url?: string): string | undefined {
+    if (url) {
+      displayValue = this.createLink(displayValue, url)
+    } else {
+      const urlRegex = /\bhttps?:\/\/\S+\b[=)/]?/g
+      const matches = displayValue.match(urlRegex)
+
+      if (matches && matches.length > 0) {
+        matches.forEach((match) => {
+          url = match
+
+          displayValue = displayValue.replace(match, (match) => {
+            return this.createLink(match, url)
+          })
+        })
+      }
+    }
+
+    return displayValue
+  }
+
+  private createLinkElements(
+    container: HTMLElement | ChildNode,
+    htmlContent: string,
+    node: ChildNode
+  ): void {
+    const div = this.renderer.createElement('div')
+    div.innerHTML = htmlContent
+
+    const fragment = document.createDocumentFragment()
+    Array.from(div.childNodes).forEach((childNode: ChildNode) => {
+      fragment.appendChild(childNode)
     })
+
+    container.insertBefore(fragment, node)
+    container.removeChild(node)
+  }
+
+  private createLink(displayValue: string, url: string): string {
+    return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`
   }
 }

libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -11,6 +11,7 @@
         <p
           class="whitespace-pre-line break-words sm:mb-4 sm:pr-16"
           [innerHTML]="metadata.abstract"
+          gnUiLinkify
         ></p>
         <ng-container *ngIf="metadata.keywords?.length">
           <p class="mb-3 font-medium text-primary text-sm" translate>
@@ -100,11 +101,7 @@
     <p class="text-sm" translate>record.metadata.sheet</p>
     <p class="text-primary font-medium mt-1" translate>
       <a [href]="metadata.landingPage" target="_blank">
-        <mat-icon
-          class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black !w-[20px]"
-          >open_in_new</mat-icon
-        >
-        <span class="break-all">{{ metadata.landingPage }}</span>
+        <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
       </a>
     </p>
   </div>