From c63cec5d2b91dff106c8bea6a4094bbc8eba256a Mon Sep 17 00:00:00 2001 From: keven1024 Date: Tue, 20 May 2025 11:38:58 +0800 Subject: [PATCH] feat(front): integrate markdown-it for rendering markdown content in MarkdownRender component --- front/components/MarkdownRender.vue | 15 ++ front/components/Share/TextShareView.vue | 6 +- front/components/Tiptap.vue | 6 +- front/components/Tiptap/ MarkdownPaste.ts | 25 ---- front/package.json | 2 + front/pages/s/[id].vue | 2 +- pnpm-lock.yaml | 172 +++++++++++----------- 7 files changed, 114 insertions(+), 114 deletions(-) create mode 100644 front/components/MarkdownRender.vue delete mode 100644 front/components/Tiptap/ MarkdownPaste.ts diff --git a/front/components/MarkdownRender.vue b/front/components/MarkdownRender.vue new file mode 100644 index 0000000..18d7cc6 --- /dev/null +++ b/front/components/MarkdownRender.vue @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/front/components/Share/TextShareView.vue b/front/components/Share/TextShareView.vue index 67a1813..e04124d 100644 --- a/front/components/Share/TextShareView.vue +++ b/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 () => { } \ No newline at end of file diff --git a/front/components/Tiptap.vue b/front/components/Tiptap.vue index a0f5b48..68442f9 100644 --- a/front/components/Tiptap.vue +++ b/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(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: () => { diff --git a/front/components/Tiptap/ MarkdownPaste.ts b/front/components/Tiptap/ MarkdownPaste.ts deleted file mode 100644 index abd8aaf..0000000 --- a/front/components/Tiptap/ MarkdownPaste.ts +++ /dev/null @@ -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 - }, - }, - }), - ] - }, -}) \ No newline at end of file diff --git a/front/package.json b/front/package.json index bb2d176..4407cd1 100644 --- a/front/package.json +++ b/front/package.json @@ -38,6 +38,7 @@ "filesize": "^10.1.6", "lodash-es": "^4.17.21", "lucide-vue-next": "^0.487.0", + "markdown-it": "^14.1.0", "motion-v": "1.0.0-beta.2", "nuxt": "^3.16.0", "nuxt-lucide-icons": "1.0.5", @@ -60,6 +61,7 @@ "@serwist/nuxt": "^9.0.12", "@serwist/vite": "^9.0.12", "@tailwindcss/typography": "^0.5.16", + "@types/markdown-it": "^14.1.2", "@vueuse/core": "^13.0.0", "@vueuse/nuxt": "^13.0.0", "serwist": "^9.0.12" diff --git a/front/pages/s/[id].vue b/front/pages/s/[id].vue index 45a001b..a92f121 100644 --- a/front/pages/s/[id].vue +++ b/front/pages/s/[id].vue @@ -39,7 +39,7 @@ const componentMap = {