From 966f5d8450da01da7e5e7ac0961e92014cde4623 Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Tue, 10 Sep 2024 21:39:05 +0300
Subject: [PATCH] Implement link URLs/mails/... in chat #67
---
frontend/package-lock.json | 35 ++++++++++++++-----
frontend/package.json | 2 ++
.../lib/components/sessions/message.svelte | 4 ++-
.../lib/components/sessions/writebox.svelte | 4 +--
4 files changed, 33 insertions(+), 12 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b0f32bab..908ce7dc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,8 @@
"version": "0.0.1",
"dependencies": {
"emoji-picker-element": "^1.21.3",
+ "linkify-html": "^4.1.3",
+ "linkifyjs": "^4.1.3",
"sanitize-html": "^2.13.0",
"svelte-gravatar": "^1.0.3",
"svelte-i18n": "^4.0.0",
@@ -1727,9 +1729,9 @@
}
},
"node_modules/axios": {
- "version": "1.7.3",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
- "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+ "version": "1.7.7",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+ "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3633,6 +3635,21 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/linkify-html": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/linkify-html/-/linkify-html-4.1.3.tgz",
+ "integrity": "sha512-Ejb8X/pOxB4IVqG1U37tnF85UW3JtX+eHudH3zlZ2pODz2e/J7zQ/vj+VDWffwhTecJqdRehhluwrRmKoJz+iQ==",
+ "license": "MIT",
+ "peerDependencies": {
+ "linkifyjs": "^4.0.0"
+ }
+ },
+ "node_modules/linkifyjs": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+ "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg==",
+ "license": "MIT"
+ },
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -3756,9 +3773,9 @@
}
},
"node_modules/micromatch": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
- "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+ "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -5104,9 +5121,9 @@
}
},
"node_modules/svelte": {
- "version": "4.2.18",
- "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz",
- "integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==",
+ "version": "4.2.19",
+ "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
+ "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.2.1",
diff --git a/frontend/package.json b/frontend/package.json
index 5548b0f0..f04376bc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,6 +47,8 @@
"type": "module",
"dependencies": {
"emoji-picker-element": "^1.21.3",
+ "linkify-html": "^4.1.3",
+ "linkifyjs": "^4.1.3",
"sanitize-html": "^2.13.0",
"svelte-gravatar": "^1.0.3",
"svelte-i18n": "^4.0.0",
diff --git a/frontend/src/lib/components/sessions/message.svelte b/frontend/src/lib/components/sessions/message.svelte
index 98c69042..fe1c8d65 100644
--- a/frontend/src/lib/components/sessions/message.svelte
+++ b/frontend/src/lib/components/sessions/message.svelte
@@ -10,6 +10,8 @@
import ChatBubble from '../icons/chatBubble.svelte';
import { get } from 'svelte/store';
import type Feedback from '$lib/types/feedback';
+ import linkifyHtml from 'linkify-html';
+ import { sanitize } from '$lib/utils/sanitize';
export let message: Message;
@@ -194,7 +196,7 @@
>
{/if}
{:else}
- {part.text}
+ {@html linkifyHtml(sanitize(part.text), { className: 'underline' })}
{/if}
{/each}
</div>
diff --git a/frontend/src/lib/components/sessions/writebox.svelte b/frontend/src/lib/components/sessions/writebox.svelte
index 0dc329d0..40613786 100644
--- a/frontend/src/lib/components/sessions/writebox.svelte
+++ b/frontend/src/lib/components/sessions/writebox.svelte
@@ -25,8 +25,8 @@
let disabled =
us == null ||
session.users.find((u) => us.id === u.id) === undefined ||
- new Date() > session.end_time ||
- new Date() < session.start_time;
+ new Date().getTime() > session.end_time.getTime() + 3600000 ||
+ new Date().getTime() < session.start_time.getTime() - 3600000;
async function sendMessage() {
message = message.trim();
--
GitLab