feat: Customize Markdown rendering styles

Author: Ayideyia

frontend/src/components/Confirm/index.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { h, onMounted, ref, render } from 'vue'
 import { marked } from 'marked'
 
 import useI18n from '@/lang'
+import { APP_TITLE, APP_VERSION, sampleID } from '@/utils'
+import CodeViewer from '@/components/CodeViewer/index.vue'
+import Divider from '@/components/Divider/index.vue'
 
 export type Options = {
   type: 'text' | 'markdown'
@@ -22,34 +25,97 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits(['confirm', 'cancel', 'finish'])
 
+const content = ref<string | Record<string, any>>('')
+const domContainers: (() => void)[] = []
+
 const { t } = useI18n.global
 
+marked.setOptions({ async: true })
+
+marked.use({
+  renderer: {
+    image({ href, title, text }) {
+      return `<img src="${href}" alt="${title || text}" style="max-width: 100%">`
+    },
+    link({ href, title }) {
+      return `<span onclick="Plugins.BrowserOpenURL('${href}')" style="color: var(--primary-color); cursor: pointer">${title || href}</span>`
+    },
+    blockquote({ tokens }) {
+      const text = this.parser.parse(tokens)
+      return `<div style="border-left: 4px solid var(--primary-color); padding: 8px; margin: 8px 0; display: flex; flex-direction: column; border-radius: 4px; background: var(--card-bg)">${text}</div>`
+    },
+    paragraph({ text }) {
+      return `<p style="margin: 0">${text}</p>`
+    },
+    list({ ordered, items }) {
+      const children = items
+        .map(({ tokens }) => {
+          const text = this.parser.parse(tokens)
+          return `<li style="padding: 0">${text}</li>`
+        })
+        .join('')
+      if (ordered) {
+        return `<ol style="margin: 0; padding: 8px 16px">${children}</ol>`
+      }
+      return `<ul style="margin: 0; padding: 8px 16px">${children}</ul>`
+    },
+    hr() {
+      const containerId = 'Br_' + sampleID()
+      const comp = h(Divider, () => APP_TITLE + '/' + APP_VERSION)
+      setTimeout(() => {
+        const div = document.getElementById(containerId)
+        if (!div) return
+        render(comp, div)
+        domContainers.push(() => render(null, div))
+      })
+      return `<div id="${containerId}"></div>`
+    },
+    code({ text, lang }) {
+      const containerId = 'CodeViewer_' + sampleID()
+      const comp = h(CodeViewer, { editable: false, modelValue: text, lang: lang as any })
+      setTimeout(() => {
+        const div = document.getElementById(containerId)
+        if (!div) return
+        render(comp, div)
+        domContainers.push(() => render(null, div))
+      })
+      return `<div id="${containerId}"></div>`
+    }
+  }
+})
+
+const renderContent = async () => {
+  if (typeof props.message !== 'string') {
+    content.value = props.message
+    return
+  }
+  if (props.options.type === 'text') {
+    content.value = t(props.message)
+    return
+  }
+  content.value = await marked.parse(props.message)
+}
+
+onMounted(renderContent)
+
 const handleConfirm = () => {
   emits('confirm', true)
   emits('finish')
+  domContainers.forEach((destroy) => destroy())
 }
 
 const handleCancel = () => {
   emits('cancel')
   emits('finish')
+  domContainers.forEach((destroy) => destroy())
 }
-
-const message = computed(() => {
-  if (typeof props.message !== 'string') {
-    return props.message
-  }
-  if (props.options.type === 'text') {
-    return t(props.message)
-  }
-  return marked.use().parse(props.message)
-})
 </script>
 
 <template>
   <Transition name="slide-down" appear>
     <div class="confirm">
       <div class="title">{{ t(title) }}</div>
-      <div class="message select-text" v-html="message"></div>
+      <div class="message select-text" v-html="content"></div>
       <div class="form-action">
         <Button v-if="cancel" @click="handleCancel" size="small">{{ t('common.cancel') }}</Button>
         <Button @click="handleConfirm" size="small" type="primary">

frontend/src/hooks/useAlert.ts

@@ -2,7 +2,7 @@ import { render, createVNode } from 'vue'
 
 import ConfirmComp, { type Options } from '@/components/Confirm/index.vue'
 
-const createAlert = (title: string, message: string, options: Partial<Options> = {}) => {
+const createAlert = (title: string, message: string, options: Options = { type: 'text' }) => {
   return new Promise((resolve) => {
     const dom = document.createElement('div')
     dom.style.cssText = `

frontend/src/hooks/useConfirm.ts

@@ -2,7 +2,7 @@ import { render, createVNode } from 'vue'
 
 import ConfirmComp, { type Options } from '@/components/Confirm/index.vue'
 
-const createConfirm = (title: string, message: string, options: Partial<Options> = {}) => {
+const createConfirm = (title: string, message: string, options: Options = { type: 'text' }) => {
   return new Promise((resolve, reject) => {
     const dom = document.createElement('div')
     dom.style.cssText = `