html-md-converter

.eslintrc-auto-import.json

@@ -286,6 +286,7 @@
     "watchTriggerable": true,
     "watchWithFilter": true,
     "whenever": true,
-    "toValue": true
+    "toValue": true,
+    "WritableComputedRef": true
   }
 }

auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
@@ -288,7 +289,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'

components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     '404.page': typeof import('./src/pages/404.page.vue')['default']
     About: typeof import('./src/pages/About.vue')['default']
@@ -74,6 +72,7 @@ declare module '@vue/runtime-core' {
     HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
     'Home.page': typeof import('./src/pages/Home.page.vue')['default']
     HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
+    HtmlMdConverter: typeof import('./src/tools/html-md-converter/html-md-converter.vue')['default']
     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']

package.json

@@ -76,6 +76,7 @@
     "qrcode": "^1.5.1",
     "randombytes": "^2.1.0",
     "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",
@@ -105,6 +106,7 @@
     "@types/node-forge": "^1.3.2",
     "@types/qrcode": "^1.5.0",
     "@types/randombytes": "^2.0.0",
+    "@types/turndown": "^5.0.2",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
     "@unocss/eslint-config": "^0.55.0",

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,
     ],
   },
   {