Merge 5eaab0cab8 into b430baef40

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",
     "@types/figlet": "^1.5.8",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
@@ -82,6 +83,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

@@ -23,6 +23,9 @@ dependencies:
   '@tiptap/vue-3':
     specifier: 2.0.3
     version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.6)(vue@3.3.4)
+  '@types/turndown':
+    specifier: ^5.0.4
+    version: 5.0.4
   '@types/figlet':
     specifier: ^1.5.8
     version: 1.5.8
@@ -146,6 +149,9 @@ dependencies:
   sql-formatter:
     specifier: ^13.0.0
     version: 13.0.0
+  turndown:
+    specifier: ^7.1.2
+    version: 7.1.2
   ua-parser-js:
     specifier: ^1.0.35
     version: 1.0.35
@@ -3054,6 +3060,10 @@ packages:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
     dev: true
 
+  /@types/turndown@5.0.4:
+    resolution: {integrity: sha512-28GI33lCCkU4SGH1GvjDhFgOVr+Tym4PXGBIU1buJUa6xQolniPArtUT+kv42RR2N9MsMLInkr904Aq+ESHBJg==}
+    dev: false
+
   /@types/ua-parser-js@0.7.36:
     resolution: {integrity: sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==}
     dev: true
@@ -4920,6 +4930,10 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
+  /domino@2.1.6:
+    resolution: {integrity: sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==}
+    dev: false
+
   /dompurify@3.0.6:
     resolution: {integrity: sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==}
     dev: false
@@ -8518,6 +8532,12 @@ packages:
       typescript: 5.2.2
     dev: true
 
+  /turndown@7.1.2:
+    resolution: {integrity: sha512-ntI9R7fcUKjqBP6QU8rBK2Ehyt8LAzt3UBT9JR9tgo6GtuKvyUzpayWmeMKJw1DPdXzktvtIT8m2mVXz+bL/Qg==}
+    dependencies:
+      domino: 2.1.6
+    dev: false
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}

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

@@ -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/index.ts

@@ -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/index.ts

@@ -81,6 +81,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[] = [
   {
@@ -107,6 +108,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      htmlToMarkdown,
     ],
   },
   {

src/ui/c-input-text/c-input-text.vue

@@ -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(() => {
@@ -171,6 +195,7 @@ defineExpose({
           :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
           :spellcheck="spellcheck ?? (rawText ? false : undefined)"
           :rows="rows"
+          @paste="onPasteInputHtml"
         />
 
         <input
@@ -192,6 +217,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 = ''">