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" />