diff --git a/package.json b/package.json
index c6cb7757..2b8e93ce 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8619d8c0..2b5dbe5d 100644
--- a/pnpm-lock.yaml
+++ b/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'}
diff --git a/src/tools/html-to-markdown/html-to-markdown.vue b/src/tools/html-to-markdown/html-to-markdown.vue
new file mode 100644
index 00000000..ac27e578
--- /dev/null
+++ b/src/tools/html-to-markdown/html-to-markdown.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/tools/html-to-markdown/index.ts b/src/tools/html-to-markdown/index.ts
new file mode 100644
index 00000000..5358b281
--- /dev/null
+++ b/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'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index aa861c93..02f40a47 100644
--- a/src/tools/index.ts
+++ b/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,
],
},
{
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index b5f423d2..9b540b2c 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/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();
const inputRef = ref();
const inputWrapperRef = ref();
+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"
/>