@bcc-code/vue-bcc-chat-ui 2.1.1 → 2.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "type": "module",
   "private": false,
   "files": [
@@ -22,6 +22,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@types/markdown-it": "^13.0.7",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
@@ -37,7 +38,7 @@
     "@cometchat/uikit-resources": "^4.2.2",
     "@cometchat/uikit-shared": "^4.2.2",
     "jwt-decode": "^4.0.0",
-    "vue-markdown-render": "^2.1.1"
+    "markdown-it": "npm:@esm-bundle/markdown-it@^13.0.1"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageBubble.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import VueMarkdown from 'vue-markdown-render'
+import markdownit from 'markdown-it/esm';
 
 defineProps<{
 	text: string
 }>()
 
-// Replacing URLs in the string with Markdown links
-function linkify(str: string) {
+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;
 
@@ -21,14 +20,18 @@ function linkify(str: string) {
         return `[${hostname}](${url})`;
     };
 
-    return str.replace(urlRegex, formatUrlToMarkdown);
+	// Replacing URLs in the string with Markdown links
+	const outStr = str.replace(urlRegex, formatUrlToMarkdown);
+	const md = new markdownit({
+		typographer: true,
+	});
+
+	return md.render(outStr);
 }
 </script>
 
 <template>
-	<vue-markdown :source="linkify(text)" :options="{
-		typographer: true,
-	}" class="bcc-chat-msg-bubble" />  
+	<div v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble" />  
 </template>
 
 <style lang="scss">