gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: refactor to allow more markdown tags, syling changes to make lists and headings not take up as much space

Browse source
This commit is contained in:
SauceyRed 2025-06-03 20:52:42 +02:00
parent 263c823ceb
commit 67e10a4387
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/Message.vue
View file

@ -32,7 +32,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { parseInline } from 'marked'; import { parse } from 'marked';
const props = defineProps<{ const props = defineProps<{
class?: string, class?: string,
@ -53,13 +53,13 @@ const dateHidden = ref<boolean>(true);
const date = new Date(props.timestamp); const date = new Date(props.timestamp);
console.log("message:", props.text); console.log("message:", props.text);
console.log("author:", props.username) console.log("author:", props.username);
const sanitized = ref<string>(); const sanitized = ref<string>();
onMounted(async () => { onMounted(async () => {
const parsed = await parseInline(props.text, {gfm: true }); const parsed = await parse(props.text, { gfm: true });
sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] }); sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
console.log("adding listeners") console.log("adding listeners")
await nextTick(); await nextTick();
messageElement.value?.addEventListener("mouseenter", (e: Event) => { messageElement.value?.addEventListener("mouseenter", (e: Event) => {
@ -152,3 +152,16 @@ onMounted(async () => {
} }
*/ */
</style> </style>
<style module>
.message-text ul {
margin-top: 1dvh;
margin-bottom: 1dvh;
padding-left: 2dvw;
}
.message-text h1, h2, h3, h4, h5, h6 {
margin-top: 1dvh;
margin-bottom: 1dvh;
}
</style>