feat(comments): support markdown render

components/Fancybox.client.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { Fancybox } from '@fancyapps/ui'
+import type { OptionsType } from '@fancyapps/ui/types/Fancybox/options'
+import '@fancyapps/ui/dist/fancybox/fancybox.css'
+
+const container = ref<HTMLElement | null>(null)
+const props = defineProps<{
+  options?: Partial<OptionsType>
+}>()
+
+onMounted(() => {
+  if (!container.value) return
+  Fancybox.bind(container.value, '[data-fancybox]', {
+    ...(props.options || {})
+  })
+})
+
+onUpdated(() => {
+  if (!container.value) return
+  Fancybox.unbind(container.value)
+  Fancybox.close()
+
+  Fancybox.bind(container.value, '[data-fancybox]', {
+    ...(props.options || {})
+  })
+})
+
+onUnmounted(() => {
+  if (!container.value) return
+  Fancybox.unbind(container.value)
+  Fancybox.close()
+})
+</script>
+
+<template>
+  <div ref="container">
+    <slot></slot>
+  </div>
+</template>

components/poll/Comments.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+
+// FilterXSS
 import { filterXSS } from 'xss'
 import type { PollDetailRes } from '@/composables/api'
 import { getAvatarURLByHash } from '~/utils/avatar'
 const props = defineProps<{
   records: PollDetailRes['records']
 }>()
 const records = computed(() => props.records.filter((v) => v.comment))
+
 // watch(records, (val) => console.log(val))
 </script>
 <template>
@@ -27,11 +30,14 @@ const records = computed(() => props.records.filter((v) => v.comment))
                 {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
               </span>
             </div>
-            <!-- eslint-disable vue/no-v-html-->
-            <div
-              class=":uno: text-sm underline-offset-2.5"
-              v-html="filterXSS(formatPollComment(record.comment))"
-            ></div>
+            <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component-->
+            <Fancybox
+              class="content"
+              v-html="
+                renderMarkdown(filterXSS(formatPollComment(record.comment)))
+              "
+            >
+            </Fancybox>
           </div>
         </div>
         <!-- <a-divider v-if="index < records.length - 1" class=":uno: !my-3" /> -->
@@ -47,16 +53,41 @@ const records = computed(() => props.records.filter((v) => v.comment))
 
   .comments {
     .comment {
-      @apply flex my-4 items-center;
+      @apply flex my-4;
 
       .avatar {
         @apply w-fit h-fit mr-3 flex;
 
         img {
-          @apply rounded-full w-9.5 h-9.5 border-1 border-solid border-gray-200;
+          @apply rounded-full w-9.5 h-9.5 border-1 border-solid border-gray-200 mt-0;
           @apply select-none;
         }
       }
+
+      .content {
+        @apply text-sm underline-offset-2.5 w-full;
+
+        img {
+          @apply rounded-lg w-full h-auto;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.poll-comments-container {
+  .comments {
+    .comment {
+      .content {
+        p {
+          @apply mt-0 my-1;
+        }
+
+        img {
+          @apply rounded-md w-full h-auto my-2;
+        }
+      }
     }
   }
 }

package.json

@@ -18,6 +18,7 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@fancyapps/ui": "^5.0.22",
     "@iconify/json": "^2.2.117",
     "@nuxt/devtools": "latest",
     "@nuxtjs/color-mode": "^3.3.0",
@@ -26,6 +27,8 @@
     "@pinia-plugin-persistedstate/nuxt": "^1.1.2",
     "@pinia/nuxt": "^0.4.11",
     "@types/crypto-js": "^4.1.2",
+    "@types/markdown-it": "^13.0.1",
+    "@types/markdown-it-emoji": "^2.0.2",
     "@types/md5": "^2.3.2",
     "@types/node": "^20.6.2",
     "@types/validator": "^13.11.1",
@@ -60,6 +63,8 @@
     "esno": "^0.17.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
+    "markdown-it": "^13.0.1",
+    "markdown-it-emoji": "^2.0.2",
     "md5": "^2.3.0",
     "meilisearch": "^0.34.2",
     "modern-normalize": "^2.0.0",