feat(front): integrate markdown-it for rendering markdown content in MarkdownRender component

front/components/MarkdownRender.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import markdownit from 'markdown-it'
+import { cx } from 'class-variance-authority'
+const props = defineProps<{
+    markdown: string
+    class?: string
+}>()
+const renderHtml = computed(() => {
+    const md = markdownit()
+    return md.render(props?.markdown || '')
+})
+</script>
+<template>
+    <div :class="cx('prose', props?.class)" v-html="renderHtml" />
+</template>

front/components/Share/TextShareView.vue

@@ -7,6 +7,7 @@ import { isBoolean } from 'lodash-es';
 import { LucideCheck, LucideX } from 'lucide-vue-next';
 import { cx } from 'class-variance-authority';
 import { toast } from 'vue-sonner';
+import MarkdownRender from '@/components/MarkdownRender.vue'
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
@@ -24,7 +25,6 @@ onMounted(() => {
     start()
 })
 
-
 const fileShareInfo = computed(() => {
     return [
         { label: '需要密码', value: props?.data?.has_password ?? false },
@@ -65,7 +65,7 @@ const handlePreview = async () => {
 }
 </script>
 <template>
-    <div :class="cx('flex flex-col ', !!previewText ? 'gap-3' : 'gap-16 items-center')">
+    <div :class="cx('flex flex-col max-h-full', !!previewText ? 'gap-3' : 'gap-16 items-center')">
         <h1 class="text-xl">查看文本</h1>
         <template v-if="!previewText">
             <div class="flex flex-col gap-2 md:flex-row w-full">
@@ -81,7 +81,7 @@ const handlePreview = async () => {
             </div>
         </template>
         <template v-else>
-            <div class="prose rounded-md bg-white/70 p-3 w-full max-w-full min-h-80" v-html="previewText" />
+            <MarkdownRender :markdown="previewText" class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto" />
         </template>
     </div>
 </template>

front/components/Tiptap.vue

@@ -3,7 +3,6 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { Markdown } from 'tiptap-markdown';
 import Placeholder from '@tiptap/extension-placeholder'
-import { MarkdownPaste } from './Tiptap/ MarkdownPaste';
 const props = defineProps<{
   modelValue: string
   placeholder?: string
@@ -16,7 +15,10 @@ const editor = ref<Editor | undefined>(undefined)
 onMounted(() => {
   editor.value = new Editor({
     content: props.modelValue,
-    extensions: [StarterKit, Markdown, MarkdownPaste, Placeholder.configure({
+    extensions: [StarterKit, Markdown.configure({
+      transformPastedText: true,
+      transformCopiedText: true
+    }), Placeholder.configure({
       placeholder: props.placeholder ?? ''
     })],
     onUpdate: () => {

front/components/Tiptap/ MarkdownPaste.ts

@@ -1,25 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { marked } from 'marked'
-
-export const MarkdownPaste = Extension.create({
-    name: 'markdownPaste',
-    addProseMirrorPlugins() {
-        return [
-            new Plugin({
-                key: new PluginKey('markdownPaste'),
-                props: {
-                    handlePaste: (view, event) => {
-                        const clipboardText = event.clipboardData?.getData('text/plain')
-                        if (clipboardText) {
-                            const html = marked(clipboardText)
-                            this.editor.commands.insertContent(html)
-                            return true
-                        }
-                        return false
-                    },
-                },
-            }),
-        ]
-    },
-})