Update to use Anchor html

This commit is contained in:
Gregoire Parant 2021-02-11 14:49:32 +01:00
parent f98b107bb7
commit 0d104cb307
3 changed files with 15 additions and 7 deletions

View File

@ -170,7 +170,7 @@ export class DiscussionManager {
divMessage.appendChild(pMessage); divMessage.appendChild(pMessage);
const userMessage: HTMLParagraphElement = document.createElement('p'); const userMessage: HTMLParagraphElement = document.createElement('p');
userMessage.innerHTML = HtmlUtils.urlify(message); userMessage.append(HtmlUtils.urlify(message));
userMessage.classList.add('body'); userMessage.classList.add('body');
divMessage.appendChild(userMessage); divMessage.appendChild(userMessage);
this.divMessages?.appendChild(divMessage); this.divMessages?.appendChild(divMessage);

View File

@ -24,11 +24,19 @@ export class HtmlUtils {
throw new Error("Cannot find HTML element with id '"+id+"'"); 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; const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, (url: string) => { text.replace(urlRegex, (url: string) => {
return '<a href="' + url + '" target="_blank" style=":visited {color: white}">' + url + '</a>'; 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 { private static isHtmlElement<T extends HTMLElement>(elem: HTMLElement | null): elem is T {

View File

@ -4,11 +4,11 @@ import {HtmlUtils} from "../../../src/WebRtc/HtmlUtils";
describe("urlify()", () => { describe("urlify()", () => {
it("should transform an url into a link", () => { it("should transform an url into a link", () => {
const text = HtmlUtils.urlify('https://google.com'); 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", () => { it("should not transform a normal text into a link", () => {
const text = HtmlUtils.urlify('hello'); const text = HtmlUtils.urlify('hello');
expect(text).toEqual('hello'); expect(text.innerHTML).toEqual('hello');
}); });
}); });