Merge branch 'feat/html-to-md-converter' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -39,6 +39,7 @@
     "@github/paste-markdown": "^1.5.3",
     "@chenfengyuan/vue-barcode": "^2.0.2",
     "@guolao/vue-monaco-editor": "^1.4.1",
+    "@guyplusplus/turndown-plugin-gfm": "^1.0.7",
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
     "@regexper/render": "^1.0.0",
@@ -55,6 +56,7 @@
     "@types/lodash.defaultsdeep": "^4.6.9",
     "@types/lodash.flattendeep": "^4.4.9",
     "@types/lodash.last": "^3.0.9",
+    "@types/turndown": "^5.0.4",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.11.1",
@@ -136,6 +138,7 @@
     "rtf-stream-parser": "^3.8.0",
     "sql-formatter": "^13.0.0",
     "sshpk": "^1.18.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,38 @@
+<script setup lang="ts">
+import TurndownService from 'turndown';
+import { gfm as addGFM } from '@guyplusplus/turndown-plugin-gfm';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const turndownService = new TurndownService();
+addGFM(turndownService);
+
+const inputHtml = ref('');
+const outputMarkdown = computed(() => {
+  try {
+    return turndownService.turndown(inputHtml.value ?? '');
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+</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

@@ -0,0 +1,3 @@
+declare module '@guyplusplus/turndown-plugin-gfm' {
+    export function gfm(turndown: any);
+}

src/tools/html-to-markdown/turndown-plugin-gfm.d.ts

@@ -116,6 +116,7 @@ import { tool as dockerComposeToDockerRunConverter } from './docker-compose-to-d
 import { tool as yamlViewer } from './yaml-viewer';
 import { tool as barcodeReader } from './barcode-reader';
 import { tool as barcodeGenerator } from './barcode-generator';
+import { tool as htmlToMarkdown } from './html-to-markdown';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -158,6 +159,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      htmlToMarkdown,
       xmlToJson,
       jsonToXml,
       markdownToHtml,

src/tools/index.ts

@@ -31,6 +31,7 @@ const props = withDefaults(
     autosize?: boolean
     autofocus?: boolean
     monospace?: boolean
+    pasteHtml?: boolean
   }>(),
   {
     value: '',
@@ -58,13 +59,14 @@ const props = withDefaults(
     autosize: false,
     autofocus: false,
     monospace: false,
+    pasteHtml: false,
   },
 );
 const emit = defineEmits(['update:value']);
 const value = useVModel(props, 'value', emit);
 const showPassword = ref(false);
 
-const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus, monospace } = toRefs(props);
+const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus, monospace, pasteHtml } = toRefs(props);
 
 const validation
   = props.validation
@@ -81,6 +83,28 @@ const textareaRef = ref<HTMLTextAreaElement>();
 const inputRef = ref<HTMLInputElement>();
 const inputWrapperRef = ref<HTMLElement>();
 
+interface HTMLElementWithValue {
+  value?: string
+}
+
+function onPasteInputHtml(evt: ClipboardEvent) {
+  if (!pasteHtml.value) {
+    return false;
+  }
+
+  const target = (evt.target as HTMLElementWithValue);
+  if (!target) {
+    return false;
+  }
+  evt.preventDefault();
+  const textHtmlData = evt.clipboardData?.getData('text/html');
+  if (textHtmlData && textHtmlData !== '') {
+    value.value = textHtmlData;
+    return true;
+  }
+  return false;
+}
+
 watch(
   [value, autosize, multiline, inputWrapperRef, textareaRef],
   () => nextTick(() => {
@@ -173,6 +197,7 @@ defineExpose({
           :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
           :spellcheck="spellcheck ?? (rawText ? false : undefined)"
           :rows="rows"
+          @paste="onPasteInputHtml"
         />
 
         <input
@@ -194,6 +219,7 @@ defineExpose({
           :autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
           :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
           :spellcheck="spellcheck ?? (rawText ? false : undefined)"
+          @paste="onPasteInputHtml"
         >
 
         <c-button v-if="clearable && value" variant="text" circle size="small" @click="value = ''">