Refactor Turndown usage and add GFM plugin

Moved TurndownService initialization to a shared utility and integrated the @joplin/turndown-plugin-gfm for improved Markdown conversion. Updated WordImport.vue and markdown.ts to use the new utility, reducing code duplication and ensuring consistent Markdown output.

Author: ruibaby

ui/package.json

@@ -22,6 +22,7 @@
     "@halo-dev/api-client": "^2.21.1",
     "@halo-dev/components": "^2.21.0",
     "@halo-dev/console-shared": "^2.21.0",
+    "@joplin/turndown-plugin-gfm": "^1.0.62",
     "@tanstack/vue-query": "4",
     "@vueuse/core": "^11.3.0",
     "@vueuse/router": "^11.3.0",

ui/pnpm-lock.yaml

@@ -1,8 +1,8 @@
 import type { ContentWrapper, Post } from '@halo-dev/api-client';
 import MarkdownIt from 'markdown-it';
 import MarkdownItAnchor from 'markdown-it-anchor';
-import TurndownService from 'turndown';
 import { mergeMatter, readMatter } from './matter';
+import turndownService from './turndown';
 
 export function convertPostContentToMarkdown(
   post: Post,
@@ -13,10 +13,6 @@ export function convertPostContentToMarkdown(
     return content.raw || '';
   }
 
-  const turndownService = new TurndownService({
-    headingStyle: 'atx',
-    bulletListMarker: '-',
-  });
   const rawMarkdown = turndownService.turndown(content.raw || '');
 
   if (!needsFrontMatter) {

ui/src/utils/markdown.ts

@@ -0,0 +1,12 @@
+import TurndownService from 'turndown';
+// @ts-ignore
+import { gfm } from '@joplin/turndown-plugin-gfm';
+
+const turndownService = new TurndownService({
+  headingStyle: 'atx',
+  bulletListMarker: '-',
+});
+
+turndownService.use(gfm);
+
+export default turndownService;

ui/src/utils/turndown.ts

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { randomUUID } from '@/utils/id';
+import turndownService from '@/utils/turndown';
 import {
   consoleApiClient,
   ucApiClient,
@@ -17,7 +18,6 @@ import {
 import { useSessionStorage } from '@vueuse/core';
 import mammoth from 'mammoth';
 import PQueue from 'p-queue';
-import TurndownService from 'turndown';
 import { computed, reactive, ref } from 'vue';
 import MingcuteCheckCircleFill from '~icons/mingcute/check-circle-fill';
 import MingcuteCloseCircleLine from '~icons/mingcute/close-circle-line';
@@ -269,10 +269,6 @@ async function createPost(item: ImportItem, html: string) {
   };
 
   if (convertToMarkdown.value) {
-    const turndownService = new TurndownService({
-      headingStyle: 'atx',
-      bulletListMarker: '-',
-    });
     const markdown = turndownService.turndown(html);
     postToCreate.content!.raw = markdown;
     postToCreate.content!.content = html;