Added markdown parsing

This commit is contained in:
ParisNeo 2023-05-07 10:20:59 +02:00
parent 8d96ac2187
commit 63e82dfceb
6 changed files with 98 additions and 5 deletions

1
.gitignore vendored
View File

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

54
web/package-lock.json generated
View File

@ -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==",
"dev": true
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
"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",

View File

@ -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"

View File

@ -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>

View File

@ -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
},

View File

@ -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
},