html-md-converter

src/tools/html-md-converter/html-md-converter-service.ts

@@ -0,0 +1,13 @@
+import TurnDownService from 'turndown';
+
+const turnDownService = new TurnDownService();
+
+/**
+ * Converts the given HTML string to Markdown format.
+ *
+ * @param html - The HTML string to convert.
+ * @returns The converted Markdown string.
+ */
+export const convertHtmlToMarkdown = (html: string): string => {
+  return turnDownService.turndown(html);
+};

src/tools/html-md-converter/html-md-converter.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { convertHtmlToMarkdown } from './html-md-converter-service'; // Import the service function
+
+const htmlInput = ref(''); // Reference for HTML input
+const markdownOutput = ref(''); // Reference for Markdown output
+
+const convertHtmlToMd = () => {
+  markdownOutput.value = convertHtmlToMarkdown(htmlInput.value); // Using the service function here
+};
+</script>
+
+<template>
+  <c-card>
+    <!-- Input area for HTML -->
+    <c-input-text v-model:value="htmlInput" multiline placeholder="Paste your HTML here..." rows="5" />
+
+    <!-- Convert button -->
+    <button @click="convertHtmlToMd">Convert</button>
+
+    <!-- Display area for converted Markdown -->
+    <c-input-text v-model:value="markdownOutput" multiline placeholder="Converted Markdown will appear here..." rows="5" />
+
+    <!-- Optionally, you can add more features like 'Clear', 'Copy to Clipboard', etc. -->
+  </c-card>
+</template>
+

src/tools/html-md-converter/index.ts

@@ -0,0 +1,11 @@
+import {BrandHtml5} from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'HTML-MD converter',
+  path: '/html-md-converter',
+  description: 'Convert an html div with all contained data to Markdown using turndown',
+  keywords: ['html', 'md', 'converter'],
+  component: () => import('./html-md-converter.vue'),
+  icon: BrandHtml5,
+});

src/tools/index.ts

@@ -71,6 +71,7 @@ import { tool as urlParser } from './url-parser';
 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 htmlMdConverter } from './html-md-converter';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -95,6 +96,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      htmlMdConverter,
     ],
   },
   {