From 56418169574f6db602138728b24e88ce3d42cc38 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 25 Feb 2024 12:41:40 +0100 Subject: [PATCH 1/2] feat(c-input-text): handle paste htm Add paste-html prop to allow pasting html directly --- src/ui/c-input-text/c-input-text.vue | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) 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" /> From d724281f07a3e00e90e0b1879dff9f84b5e93d07 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 25 Feb 2024 12:47:40 +0100 Subject: [PATCH 2/2] feat(new tool): HTML to Markdown (with paste) Convert HTML to Markdown, allow pasting from clipboard (ie, pasting part of a web page or copy paste from Word) Fix partially #538. Inspired by #632 Using turndown --- package.json | 2 ++ pnpm-lock.yaml | 32 +++++++++++++++---- .../html-to-markdown/html-to-markdown.vue | 31 ++++++++++++++++++ src/tools/html-to-markdown/index.ts | 12 +++++++ src/tools/index.ts | 2 ++ 5 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 src/tools/html-to-markdown/html-to-markdown.vue create mode 100644 src/tools/html-to-markdown/index.ts diff --git a/package.json b/package.json index 65f29dbd..a5380242 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", "@vicons/material": "^0.12.0", "@vicons/tabler": "^0.12.0", "@vueuse/core": "^10.3.0", @@ -79,6 +80,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 a6f7c32f..44b636fa 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 '@vicons/material': specifier: ^0.12.0 version: 0.12.0 @@ -137,6 +140,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 @@ -3041,6 +3047,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 @@ -3341,7 +3351,7 @@ packages: dependencies: '@unhead/dom': 0.5.1 '@unhead/schema': 0.5.1 - '@vueuse/shared': 10.7.2(vue@3.3.4) + '@vueuse/shared': 10.8.0(vue@3.3.4) unhead: 0.5.1 vue: 3.3.4 transitivePeerDependencies: @@ -3983,10 +3993,10 @@ packages: - vue dev: false - /@vueuse/shared@10.7.2(vue@3.3.4): - resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==} + /@vueuse/shared@10.8.0(vue@3.3.4): + resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==} dependencies: - vue-demi: 0.14.6(vue@3.3.4) + vue-demi: 0.14.7(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -4907,6 +4917,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 @@ -8495,6 +8509,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'} @@ -9135,8 +9155,8 @@ packages: vue: 3.3.4 dev: false - /vue-demi@0.14.6(vue@3.3.4): - resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} + /vue-demi@0.14.7(vue@3.3.4): + resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} engines: {node: '>=12'} hasBin: true requiresBuild: true 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 2a477ed2..aa2418b2 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -77,6 +77,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[] = [ { @@ -103,6 +104,7 @@ export const toolsByCategory: ToolCategory[] = [ listConverter, tomlToJson, tomlToYaml, + htmlToMarkdown, ], }, {