Link will now be white and underline + Click on the game to lose focus of input field (#1315)

* Link will now be white and underline
Click on the game to lose focus of input field

* Use bind:this instead of querySelector
Add isClickedInside and isClickedOutside to HtmlUtils to know if the user click inside/outside an element targeted

front/src/WebRtc/HtmlUtils.ts

@@ -31,7 +31,7 @@ export class HtmlUtils {
         return p.innerHTML;
     }
 
-    public static urlify(text: string): string {
+    public static urlify(text: string, style: string = ""): string {
         const urlRegex = /(https?:\/\/[^\s]+)/g;
         text = HtmlUtils.escapeHtml(text);
         return text.replace(urlRegex, (url: string) => {
@@ -40,10 +40,19 @@ export class HtmlUtils {
             link.target = "_blank";
             const text = document.createTextNode(url);
             link.appendChild(text);
+            link.setAttribute("style", style);
             return link.outerHTML;
         });
     }
 
+    public static isClickedInside(event: MouseEvent, target: HTMLElement): boolean {
+        return !!event.composedPath().find((et) => et === target);
+    }
+
+    public static isClickedOutside(event: MouseEvent, target: HTMLElement): boolean {
+        return !this.isClickedInside(event, target);
+    }
+
     private static isHtmlElement<T extends HTMLElement>(elem: HTMLElement | null): elem is T {
         return elem !== null;
     }