Discreetly/frontend
1
0
Fork 0
mirror of https://github.com/Discreetly/frontend.git synced 2026-01-09 21:08:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding some libraries to update text chat and created BubbleText component

Browse Source
This commit is contained in:
Blake Duncan
2023-08-29 16:48:16 -04:00
parent e500c3430e
commit 498301c27c
4 changed files with 91 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
package-lock.json generated
View File

@@ -13,9 +13,12 @@
"@ethersproject/strings": "^5.7.0",
"@semaphore-protocol/group": "^3.10.1",
"@semaphore-protocol/identity": "^3.10.1",
"autolinker": "^4.0.0",
"date-fns": "^2.30.0",
"discreetly-interfaces": "^0.1.38",
"dompurify": "^3.0.5",
"libsodium-wrappers": "^0.7.11",
"marked": "^7.0.5",
"poseidon-lite": "^0.2.0",
"qr-scanner": "^1.4.2",
"qrcode": "^1.5.3",
@@ -29,6 +32,7 @@
"@sveltejs/adapter-cloudflare": "^2.3.0",
"@sveltejs/kit": "^1.21.0",
"@tailwindcss/forms": "^0.5.3",
"@types/dompurify": "^3.0.2",
"@types/qrcode": "^1.5.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
@@ -1045,6 +1049,15 @@
"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==",
"dev": true
},
"node_modules/@types/dompurify": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.2.tgz",
"integrity": "sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==",
"dev": true,
"dependencies": {
"@types/trusted-types": "*"
}
},
"node_modules/@types/estree": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
@@ -1089,6 +1102,12 @@
"integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==",
"dev": true
},
"node_modules/@types/trusted-types": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
"dev": true
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -1400,6 +1419,14 @@
"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
},
"node_modules/autolinker": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/autolinker/-/autolinker-4.0.0.tgz",
"integrity": "sha512-fl5Kh6BmEEZx+IWBfEirnRUU5+cOiV0OK7PEt0RBKvJMJ8GaRseIOeDU3FKf4j3CE5HVefcjHmhYPOcaVt0bZw==",
"dependencies": {
"tslib": "^2.3.0"
}
},
"node_modules/autoprefixer": {
"version": "10.4.15",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
@@ -1993,6 +2020,11 @@
"node": ">=6.0.0"
}
},
"node_modules/dompurify": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.5.tgz",
"integrity": "sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A=="
},
"node_modules/ejs": {
"version": "3.1.9",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
@@ -3297,6 +3329,17 @@
"node": ">=12"
}
},
"node_modules/marked": {
"version": "7.0.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-7.0.5.tgz",
"integrity": "sha512-lwNAFTfXgqpt/XvK17a/8wY9/q6fcSPZT1aP6QW0u74VwaJF/Z9KbRcX23sWE4tODM+AolJNcUtErTkgOeFP/Q==",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 16"
}
},
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -4827,8 +4870,7 @@
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
"dev": true
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/tsutils": {
"version": "3.21.0",

4
package.json
View File

@@ -21,6 +21,7 @@
"@sveltejs/adapter-cloudflare": "^2.3.0",
"@sveltejs/kit": "^1.21.0",
"@tailwindcss/forms": "^0.5.3",
"@types/dompurify": "^3.0.2",
"@types/qrcode": "^1.5.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
@@ -50,9 +51,12 @@
"@ethersproject/strings": "^5.7.0",
"@semaphore-protocol/group": "^3.10.1",
"@semaphore-protocol/identity": "^3.10.1",
"autolinker": "^4.0.0",
"date-fns": "^2.30.0",
"discreetly-interfaces": "^0.1.38",
"dompurify": "^3.0.5",
"libsodium-wrappers": "^0.7.11",
"marked": "^7.0.5",
"poseidon-lite": "^0.2.0",
"qr-scanner": "^1.4.2",
"qrcode": "^1.5.3",

40
src/routes/chat/BubbleText.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import * as marked from 'marked';
import Autolinker from 'autolinker';
import DOMPurify from 'dompurify';
export let bubbleText: string;
function formatText(text: string): string {
// Format URLs
let editedText = Autolinker.link(text, {
stripPrefix: false,
stripTrailingSlash: false,
newWindow: true,
replaceFn: (match) => {
// Only replacing URLs. We can also replace email, phone, mention, and hashtag if we want.
if (match.getType() === 'url') {
return true;
}
return false;
}
});
// Sanitize HTML - This step must go after the Autolinker url step
editedText = DOMPurify.sanitize(editedText);
// Format Markdown
editedText = marked.parse(editedText);
// Format newlines
editedText = editedText.replace(/\\n/g, '<br>');
return editedText;
}
</script>
<section id="BubbleText">
<div class="text-surface-800-100-token whitespace-pre">{@html formatText(bubbleText)}</div>
</section>
<style></style>

5
src/routes/chat/Conversation.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import { currentRoomMessages, currentSelectedRoom } from '$lib/stores';
import { currentRoomMessages } from '$lib/stores';
import { getEpochFromTimestamp, getTimestampFromEpoch } from '$lib/utils/rateLimit';
import type { MessageI } from 'discreetly-interfaces';
import { onMount } from 'svelte';
import BubbleText from './BubbleText.svelte';
export let roomRateLimit: number;
@@ -54,7 +55,7 @@
>
{/if}
</header>
<p class="text-surface-800-100-token">{bubble.message}</p>
<BubbleText bubbleText={JSON.stringify(bubble.message)} />
</div>
</div>
{/each}