@bcc-code/vue-bcc-chat-ui 5.6.4 → 5.6.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "5.6.4",
+  "version": "5.6.5",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageBubble.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import MarkdownIt from 'markdown-it'
-import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript'
-import DOMPurify from 'dompurify';
-import { inject, ref } from 'vue';
+import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript';
 import { CometChatTheme, fontHelper } from '@cometchat/uikit-resources';
-import BccReplyPreview from "./BccReplyPreview.vue";
-import BccImageBubble from './BccImageBubble.vue';
+import { inject, ref } from 'vue';
+import chat from "../chat";
 import { offlineStore } from '../offline';
+import BccImageBubble from './BccImageBubble.vue';
+import BccReplyPreview from "./BccReplyPreview.vue";
 
 const props = defineProps({
 	id: {
@@ -42,51 +41,6 @@ const props = defineProps({
   }
 })
 
-function toMarkdownHtml(str: string) {
-	str = formatMentionsInText(str);
-
-	const md = new MarkdownIt({
-		breaks: true,
-		typographer: true,
-		linkify: true,
-		html: true
-	});
-
-	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 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**`;
-		}
-	});
-}
-
 let parentMsgRef = ref<BaseMessage>();
 if (props.metadata?.replyToMessageId) {
 	let guidString = props.guid?.toString()
@@ -141,9 +95,9 @@ const replyPreviewStyle = {
 				:src="src"
 			/>
 		</div>
-		<div v-if="text && metadata && metadata.translated_message" v-html="toMarkdownHtml(metadata.translated_message)"
+		<div v-if="text && metadata && metadata.translated_message" v-html="chat.toMarkdownHtml(metadata.translated_message, mentionedUsers)"
 			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
-		<div v-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble" :id="id"
+		<div v-if="text" v-html="chat.toMarkdownHtml(text, mentionedUsers)" class="bcc-chat-msg-bubble" :id="id"
 			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
 	</div>
 </template>

package/src/components/BccReplyPreview.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
 import { CometChatTheme, CometChatUIKitConstants } from "@cometchat/uikit-resources";
 import { inject, ref } from "vue";
+import chat from '../chat';
+import { getMessageTextPreview, getSenderDisplayName, proxyImage } from "../chat/data";
 import { ReplyPreviewStyle } from "../chat/replyStyle";
-import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
-import { getMessageTextPreview, proxyImage, getSenderDisplayName } from "../chat/data";
 
 const props = defineProps({
   replyToMessage: { type: BaseMessage },
@@ -64,9 +65,7 @@ function getThumbnailURL() {
       <p class="bcc__reply_preview__title" :style="titleStyle()">
         {{ props.titlePrefix + ( getSenderDisplayName(props.replyToMessage) || "" ) || "Reply to ..." }}
       </p>
-      <p class="cc__preview__subtitle" :style="subtitleStyle()">
-        {{ getMessageTextPreview(props?.replyToMessage) || "‎" }}
-      </p>
+      <p class="cc__preview__subtitle" v-html="chat.toMarkdownHtml(getMessageTextPreview(props?.replyToMessage), props.replyToMessage?.getMentionedUsers()) || '‎'" :style="subtitleStyle()"/>
     </div>
   </div>
 </template>
@@ -92,7 +91,7 @@ function getThumbnailURL() {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 8;
   word-break: break-all;
 }
 .bcc__reply_preview__content > .bcc__reply_preview__title {