Added markdown parsing

.gitignore

@@ -167,3 +167,4 @@ backends/
 web/.env.build
 web/.env.dev
 web/.env.development
+node_modules/

web/package-lock.json

@@ -12,6 +12,8 @@
         "feather-icons": "^4.29.0",
         "flowbite": "^1.6.5",
         "flowbite-vue": "^0.0.10",
+        "markdown-it": "^13.0.1",
+        "markdown-it-emoji": "^2.0.2",
         "socket.io-client": "^4.6.1",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -902,8 +904,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-      "dev": true
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -1274,6 +1275,17 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.17",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.17.tgz",
@@ -2043,6 +2055,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2095,6 +2115,31 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-emoji": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-2.0.2.tgz",
+      "integrity": "sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ=="
+    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2959,6 +3004,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",

web/package.json

@@ -14,6 +14,8 @@
     "feather-icons": "^4.29.0",
     "flowbite": "^1.6.5",
     "flowbite-vue": "^0.0.10",
+    "markdown-it": "^13.0.1",
+    "markdown-it-emoji": "^2.0.2",
     "socket.io-client": "^4.6.1",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

web/src/components/MarkdownRenderer.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+      <div v-html="renderedMarkdown"></div>
+    </div>
+</template>
+  
+<script>
+  import MarkdownIt from 'markdown-it';
+  import emoji from 'markdown-it-emoji';
+  
+  export default {
+    props: {
+      markdownText: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        renderedMarkdown: ''
+      };
+    },
+    mounted() {
+      const markdownIt = new MarkdownIt().use(emoji);
+      this.renderedMarkdown = markdownIt.render(this.markdownText);
+    },
+    watch: {
+      markdownText(newText) {
+        const markdownIt = new MarkdownIt().use(emoji);
+        this.renderedMarkdown = markdownIt.render(newText);
+      }
+    }
+  };
+</script>
+  

web/src/components/Message.vue

@@ -11,7 +11,8 @@
         </div>
         <div class="-mt-4  ml-10 mr-0 pt-1 px-2 max-w-screen-2xl  ">
             <!-- CONTENT/MESSAGE -->
-            {{ message.content }}
+            <markdown-renderer :markdown-text="message.content"></markdown-renderer>
+
         </div>
         <div class="invisible group-hover:visible flex flex-row mt-3 -mb-2">
             <!-- MESSAGE CONTROLS -->
@@ -44,15 +45,19 @@
                     :class="message.rank > 0 ? 'bg-secondary' : 'bg-red-600'" title="Rank">{{ message.rank }}
                 </div>
             </div>
-        </div>
+        </div>        
     </div>
 </template>
 
 <script>
 import {nextTick} from 'vue'
 import feather from 'feather-icons'
+import MarkdownRenderer from './MarkdownRenderer.vue';
 export default {
     name: 'Message',
+    components: {
+        MarkdownRenderer
+    },
     props: {
         message: Object
     },

web/src/views/DiscussionsView.vue

@@ -400,7 +400,7 @@ export default {
         },
         steamMessageContent(content) {
             // Streams response message content from backend
-            //console.log(content)
+            console.log(content)
             const lastMsg = this.discussionArr[this.discussionArr.length - 1]
             lastMsg.content = content.data
         },