From 0d104cb307580bc55e1ae87076b40dce8cd21253 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 11 Feb 2021 14:49:32 +0100
Subject: [PATCH] Update to use Anchor html

---
 front/src/WebRtc/DiscussionManager.ts    |  2 +-
 front/src/WebRtc/HtmlUtils.ts            | 16 ++++++++++++----
 front/tests/Phaser/Game/HtmlUtilsTest.ts |  4 ++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 1bd488e9..30422c3d 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -170,7 +170,7 @@ export class DiscussionManager {
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
-        userMessage.innerHTML = HtmlUtils.urlify(message);
+        userMessage.append(HtmlUtils.urlify(message));
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
         this.divMessages?.appendChild(divMessage);
diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts
index 9b4d9bb8..c9f44ee4 100644
--- a/front/src/WebRtc/HtmlUtils.ts
+++ b/front/src/WebRtc/HtmlUtils.ts
@@ -24,11 +24,19 @@ export class HtmlUtils {
         throw new Error("Cannot find HTML element with id '"+id+"'");
     }
 
-    public static urlify(text: string): string {
+    public static urlify(text: string): HTMLSpanElement {
+        const textReturn : HTMLSpanElement = document.createElement('span');
+        textReturn.innerText = text;
         const urlRegex = /(https?:\/\/[^\s]+)/g;
-        return text.replace(urlRegex, (url: string) => {
-            return '<a href="' + url + '" target="_blank" style=":visited {color: white}">' + url + '</a>';
-        })
+        text.replace(urlRegex, (url: string) => {
+            let link : HTMLAnchorElement = document.createElement('a');
+            link.innerText  = ` ${url}`;
+            link.href = url;
+            link.target = '_blank';
+            textReturn.append(link);
+            return url;
+        });
+        return textReturn;
     }
 
     private static isHtmlElement<T extends HTMLElement>(elem: HTMLElement | null): elem is T {
diff --git a/front/tests/Phaser/Game/HtmlUtilsTest.ts b/front/tests/Phaser/Game/HtmlUtilsTest.ts
index 8ef1d476..65d37519 100644
--- a/front/tests/Phaser/Game/HtmlUtilsTest.ts
+++ b/front/tests/Phaser/Game/HtmlUtilsTest.ts
@@ -4,11 +4,11 @@ import {HtmlUtils} from "../../../src/WebRtc/HtmlUtils";
 describe("urlify()", () => {
     it("should transform an url into a link", () => {
         const text = HtmlUtils.urlify('https://google.com');
-        expect(text).toEqual('<a href="https://google.com" target="_blank" style=":visited {color: white}">https://google.com</a>');
+        expect(text.innerHTML).toEqual('<a href="https://google.com" target="_blank" style=":visited {color: white}">https://google.com</a>');
     });
 
     it("should not transform a normal text into a link", () => {
         const text = HtmlUtils.urlify('hello');
-        expect(text).toEqual('hello');
+        expect(text.innerHTML).toEqual('hello');
     });
 });
\ No newline at end of file