From 8c866401b0c7575b22a7c7852842708e82e75df6 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 15 Sep 2022 14:23:46 +0200
Subject: [PATCH] fix: properly pass checkbox id to markdown renderer

---
 src/components/input/editor.vue | 2 +-
 src/helpers/markdownRenderer.ts | 4 ++--
 src/views/list/ListInfo.vue     | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index b3ad026c6..fde440b8e 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -222,7 +222,7 @@ export default defineComponent({
 			return checkboxes[n]
 		},
 		renderPreview() {
-			setupMarkdownRenderer()
+			setupMarkdownRenderer(this.checkboxId)
 
 			this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']})
 
diff --git a/src/helpers/markdownRenderer.ts b/src/helpers/markdownRenderer.ts
index eaf461105..4737b6659 100644
--- a/src/helpers/markdownRenderer.ts
+++ b/src/helpers/markdownRenderer.ts
@@ -1,7 +1,7 @@
 import {marked} from 'marked'
 import hljs from 'highlight.js/lib/common'
 
-export function setupMarkdownRenderer() {
+export function setupMarkdownRenderer(checkboxId: string) {
 	const renderer = new marked.Renderer()
 	const linkRenderer = renderer.link
 
@@ -26,7 +26,7 @@ export function setupMarkdownRenderer() {
 				}
 
 				checkboxNum++
-				return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this.checkboxId}"/>`
+				return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${checkboxId}"/>`
 			},
 			link: (href, title, text) => {
 				const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
diff --git a/src/views/list/ListInfo.vue b/src/views/list/ListInfo.vue
index 33d4164e6..bd6c9a16d 100644
--- a/src/views/list/ListInfo.vue
+++ b/src/views/list/ListInfo.vue
@@ -19,6 +19,7 @@ import {useStore} from '@/store'
 import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
+import {createRandomID} from '@/helpers/randomId'
 
 const props = defineProps({
 	listId: {
@@ -37,7 +38,7 @@ const htmlDescription = computed(() => {
 		return ''
 	}
 
-	setupMarkdownRenderer()
+	setupMarkdownRenderer(createRandomID())
 	return DOMPurify.sanitize(marked(description), {ADD_ATTR: ['target']})
 })
 </script>