feat(new tool): HTML to Markdown (with paste)

Convert HTML to Markdown, allow pasting from clipboard (ie, pasting part of a web page or copy paste from Word)
Fix partially CorentinTh#538. Inspired by CorentinTh#632
Using turndown

Author: sharevb

package.json

@@ -41,6 +41,7 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
+    "@types/turndown": "^5.0.4",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -79,6 +80,7 @@
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
+    "turndown": "^7.1.2",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",

pnpm-lock.yaml

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import TurndownService from 'turndown';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const turndownService = new TurndownService();
+
+const inputHtml = ref('');
+const outputMarkdown = computed(() => {
+  return turndownService.turndown(inputHtml.value ?? '');
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputHtml"
+      multiline raw-text
+      placeholder="Your Html content..."
+      rows="8"
+      autofocus
+      label="Your Html to convert (can paste from clipboard):"
+      paste-html
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output markdown:">
+      <TextareaCopyable :value="outputMarkdown" />
+    </n-form-item>
+  </div>
+</template>

src/tools/html-to-markdown/html-to-markdown.vue

@@ -0,0 +1,12 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Html to markdown',
+  path: '/html-to-markdown',
+  description: 'Convert HTML (either from clipboard) to Markdown',
+  keywords: ['html', 'markdown', 'converter'],
+  component: () => import('./html-to-markdown.vue'),
+  icon: Markdown,
+  createdAt: new Date('2024-01-17'),
+});

src/tools/html-to-markdown/index.ts

@@ -77,6 +77,7 @@ import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
 import { tool as yamlViewer } from './yaml-viewer';
+import { tool as htmlToMarkdown } from './html-to-markdown';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -103,6 +104,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      htmlToMarkdown,
     ],
   },
   {