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