@bcc-code/vue-bcc-chat-ui 3.4.0 → 3.5.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "type": "module",
   "private": false,
   "files": [
@@ -22,21 +22,23 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.4",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
-    "sass": "^1.72.0",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.6",
-    "vite-plugin-dts": "^3.7.3",
+    "sass": "^1.74.1",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
+    "vite-plugin-dts": "^3.8.1",
     "vue": "^3.4.21"
   },
   "dependencies": {
     "@cometchat/chat-sdk-javascript": "^4.0.4",
-    "@cometchat/chat-uikit-vue": "^4.3.1",
-    "@cometchat/uikit-resources": "^4.3.1",
-    "@cometchat/uikit-shared": "^4.3.2",
+    "@cometchat/chat-uikit-vue": "^4.3.2",
+    "@cometchat/uikit-resources": "^4.3.2",
+    "@cometchat/uikit-shared": "^4.3.3",
+    "dompurify": "^3.0.11",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0"
   },

package/src/components/BccChatMessageBubble.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
 import { User } from '@cometchat/chat-sdk-javascript'
+import DOMPurify from 'dompurify';
 
 const props = defineProps<{
 	text: string,
@@ -9,72 +10,59 @@ const props = defineProps<{
 }>()
 
 function toMarkdownHtml(str: string) {
-	// Regex to match URLs that may or may not start with "www." and are not already part of a Markdown link
-	const urlRegex = /([^\]]\(|[^\(]|^\(?)((?:https?|ftp):\/\/[^\s\]\)]*|www\.[^\s\]\)]+)(?=[\s\]\)](?!\()|$)/g;
-
-	// Replacing URLs in the string with Markdown links
-	let outStr = str.replace(urlRegex, formatUrlToMarkdown);
-
-	outStr = formatMentionsInText(outStr);
-
-	outStr = cleanUpHTML(outStr);
+	str = formatMentionsInText(str);
 
 	const md = new MarkdownIt({
 		breaks: true,
 		typographer: true,
+		linkify: true,
+		html: true
 	});
 
-	return md.render(outStr);
+	str = md.render(str);
+
+	str = DOMPurify.sanitize(str, {
+		ALLOWED_TAGS: [
+			"a", // links
+			"ul", "ol", "li", // lists
+			"p", // paragraphs
+			"b", "strong", // bold
+			"i", "em", // italics
+			"u", // underline
+			"s", // strikethrough
+			"img", // images
+			"blockquote", // indented text
+			"hr", // horizontal line
+			"pre", // constant width text
+			"br", // newline 
+			"div" // newline on mobile 
+		]
+	})
+
+	return str
 }
 
-// Function to format a URL into a Markdown link
-function formatUrlToMarkdown(_match: string, group1: string, group2: string) {
-	let url = group2;
-	// Prepend "http://" to URLs starting with "www."
-	if (url.startsWith('www.')) {
-		url = 'http://' + url;
-	}
-	const hostname = new URL(url).hostname;
-	return `${group1}[${hostname}](${url})`;
-};
-
 function formatMentionsInText(text: string) {
-  return text.replace(/<@uid:(.*?)>/g, (_match: string, uid: string) => {
-    const user = (props.mentionedUsers || []).find((user) => user.getUid() === uid);
-    // Check if a userName exists for the given uid; if not, keep the original match
-    if (user) {
-      return `**${user.getName()}**`;
-    } else {
-      return `**@unknown**`;
-    }
-  });
+	return text.replace(/<@uid:(.*?)>/g, (_match: string, uid: string) => {
+		const user = (props.mentionedUsers || []).find((user) => user.getUid() === uid);
+		// Check if a userName exists for the given uid; if not, keep the original match
+		if (user) {
+			return `**${user.getName()}**`;
+		} else {
+			return `**@unknown**`;
+		}
+	});
 }
 
-// Due to how mobile adds line breaks we need to remove them
-function cleanUpHTML(input: string) {
-  // Step 1: Replace <div><br></div> with <br>
-  let cleaned = input.replace(/<div><br><\/div>/g, '\n');
-  
-  // Step 2: Replace opening <div> that follows any content or at the start with <br>
-  cleaned = cleaned.replace(/(^|<\/div>)(<div>)/g, '$1\n');
-  
-  // Step 3: Remove all remaining <div> and </div> tags
-  cleaned = cleaned.replace(/<\/?div>/g, '');
-  
-  return cleaned;
-}
 </script>
 
 <template>
-	<div v-if="metadata && metadata.translated_message"
-		v-html="toMarkdownHtml(metadata.translated_message)"
-		class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation"
-	/>
-	<div
-		v-html="toMarkdownHtml(text)"
-		class="bcc-chat-msg-bubble"
-		:class="{'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message}"
-	/>  
+	<div>
+		<div v-if="metadata && metadata.translated_message" v-html="toMarkdownHtml(metadata.translated_message)"
+			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
+		<div v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble"
+			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
+	</div>
 </template>
 
 <style lang="scss">
@@ -88,7 +76,7 @@ function cleanUpHTML(input: string) {
 
 	p {
 		color: var(--cc__text-color);
-		line-height: 1.2;		
+		line-height: 1.2;
 		word-break: break-word;
 		text-align: left;
 		white-space: normal;
@@ -98,6 +86,7 @@ function cleanUpHTML(input: string) {
 	p:first-child {
 		margin-top: 0;
 	}
+
 	p:last-child {
 		margin-bottom: 0;
 	}
@@ -106,14 +95,17 @@ function cleanUpHTML(input: string) {
 		font-size: 1.6em;
 		font-weight: 800;
 	}
+
 	h2 {
 		font-size: 1.4em;
 		font-weight: 700;
 	}
+
 	h3 {
 		font-size: 1.2em;
 		font-weight: 600;
 	}
+
 	h4 {
 		font-size: 1em;
 		font-weight: 500;
@@ -130,6 +122,7 @@ function cleanUpHTML(input: string) {
 		list-style: disc;
 		margin: 8px 0;
 	}
+
 	ol {
 		padding-left: 16px;
 		list-style: decimal;