From 56418169574f6db602138728b24e88ce3d42cc38 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 25 Feb 2024 12:41:40 +0100 Subject: [PATCH 1/5] 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/5] 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, ], }, { From d1fc7ec93940c91faf89457e4b67575f51b4aa48 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 29 Sep 2024 22:54:32 +0200 Subject: [PATCH 3/5] fix: add GFM Tables, Strikeout, task list --- components.d.ts | 7 ++----- package.json | 5 +++-- pnpm-lock.yaml | 21 +++++++++++++------ .../html-to-markdown/html-to-markdown.vue | 9 +++++++- .../html-to-markdown/turndown-plugin-gfm.d.ts | 3 +++ 5 files changed, 31 insertions(+), 14 deletions(-) create mode 100644 src/tools/html-to-markdown/turndown-plugin-gfm.d.ts diff --git a/components.d.ts b/components.d.ts index 8e59366a..98122a9e 100644 --- a/components.d.ts +++ b/components.d.ts @@ -86,6 +86,7 @@ declare module '@vue/runtime-core' { HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'] 'Home.page': typeof import('./src/pages/Home.page.vue')['default'] HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'] + HtmlToMarkdown: typeof import('./src/tools/html-to-markdown/html-to-markdown.vue')['default'] HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'] HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'] IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default'] @@ -130,23 +131,19 @@ declare module '@vue/runtime-core' { MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] - NButton: typeof import('naive-ui')['NButton'] NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] + NDivider: typeof import('naive-ui')['NDivider'] NEllipsis: typeof import('naive-ui')['NEllipsis'] - NForm: typeof import('naive-ui')['NForm'] NFormItem: typeof import('naive-ui')['NFormItem'] NH1: typeof import('naive-ui')['NH1'] NH3: typeof import('naive-ui')['NH3'] NIcon: typeof import('naive-ui')['NIcon'] - NInputNumber: typeof import('naive-ui')['NInputNumber'] NLayout: typeof import('naive-ui')['NLayout'] NLayoutSider: typeof import('naive-ui')['NLayoutSider'] NMenu: typeof import('naive-ui')['NMenu'] NScrollbar: typeof import('naive-ui')['NScrollbar'] - NSlider: typeof import('naive-ui')['NSlider'] - NSwitch: typeof import('naive-ui')['NSwitch'] NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default'] OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'] PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default'] diff --git a/package.json b/package.json index ec1a8b60..130ee8d3 100644 --- a/package.json +++ b/package.json @@ -35,15 +35,16 @@ "release": "node ./scripts/release.mjs" }, "dependencies": { + "@guyplusplus/turndown-plugin-gfm": "^1.0.7", "@it-tools/bip39": "^0.0.4", "@it-tools/oggen": "^1.3.0", "@sindresorhus/slugify": "^2.2.1", "@tiptap/pm": "2.1.6", "@tiptap/starter-kit": "2.1.6", "@tiptap/vue-3": "2.0.3", - "@types/turndown": "^5.0.4", - "@types/markdown-it": "^13.0.7", "@types/figlet": "^1.5.8", + "@types/markdown-it": "^13.0.7", + "@types/turndown": "^5.0.4", "@vicons/material": "^0.12.0", "@vicons/tabler": "^0.12.0", "@vueuse/core": "^10.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc85d8c6..d0d916ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@guyplusplus/turndown-plugin-gfm': + specifier: ^1.0.7 + version: 1.0.7 '@it-tools/bip39': specifier: ^0.0.4 version: 0.0.4 @@ -26,12 +29,12 @@ dependencies: '@types/figlet': specifier: ^1.5.8 version: 1.5.8 - '@types/turndown': - specifier: ^5.0.4 - version: 5.0.5 '@types/markdown-it': specifier: ^13.0.7 version: 13.0.9 + '@types/turndown': + specifier: ^5.0.4 + version: 5.0.5 '@vicons/material': specifier: ^0.12.0 version: 0.12.0 @@ -2171,6 +2174,12 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true + /@guyplusplus/turndown-plugin-gfm@1.0.7: + resolution: {integrity: sha512-k2KATk491JIeq1KNsjOwaD88cdknQeTpKVXh9OuZfHdjFuSEtEVVDCfCbxzmRvJxeKDPbZQl8DGP5o7SaIvWBw==} + dependencies: + turndown: 7.2.0 + dev: false + /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} engines: {node: '>=10.10.0'} @@ -3385,7 +3394,7 @@ packages: dependencies: '@unhead/dom': 0.5.1 '@unhead/schema': 0.5.1 - '@vueuse/shared': 11.0.3(vue@3.3.4) + '@vueuse/shared': 11.1.0(vue@3.3.4) unhead: 0.5.1 vue: 3.3.4 transitivePeerDependencies: @@ -4027,8 +4036,8 @@ packages: - vue dev: false - /@vueuse/shared@11.0.3(vue@3.3.4): - resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==} + /@vueuse/shared@11.1.0(vue@3.3.4): + resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==} dependencies: vue-demi: 0.14.10(vue@3.3.4) transitivePeerDependencies: diff --git a/src/tools/html-to-markdown/html-to-markdown.vue b/src/tools/html-to-markdown/html-to-markdown.vue index ac27e578..79fe7a33 100644 --- a/src/tools/html-to-markdown/html-to-markdown.vue +++ b/src/tools/html-to-markdown/html-to-markdown.vue @@ -1,12 +1,19 @@ diff --git a/src/tools/html-to-markdown/turndown-plugin-gfm.d.ts b/src/tools/html-to-markdown/turndown-plugin-gfm.d.ts new file mode 100644 index 00000000..0cb88c54 --- /dev/null +++ b/src/tools/html-to-markdown/turndown-plugin-gfm.d.ts @@ -0,0 +1,3 @@ +declare module '@guyplusplus/turndown-plugin-gfm' { + export function gfm(turndown: any); +} \ No newline at end of file From 3ca488e17048f0fe396c11c8e79798418a010272 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 15 Dec 2024 19:37:56 +0100 Subject: [PATCH 4/5] fix: paste-html fallback to text --- src/ui/c-input-text/c-input-text.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue index 9b540b2c..cef739ed 100644 --- a/src/ui/c-input-text/c-input-text.vue +++ b/src/ui/c-input-text/c-input-text.vue @@ -96,9 +96,9 @@ function onPasteInputHtml(evt: ClipboardEvent) { if (!target) { return false; } - evt.preventDefault(); const textHtmlData = evt.clipboardData?.getData('text/html'); if (textHtmlData && textHtmlData !== '') { + evt.preventDefault(); value.value = textHtmlData; return true; } @@ -364,4 +364,4 @@ defineExpose({ } } } - + \ No newline at end of file From 3ee86abb4d96e6ab10414fa7977b6f80aa6b25e5 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 15 Dec 2024 19:41:28 +0100 Subject: [PATCH 5/5] fix: lint --- src/modules/command-palette/command-palette.vue | 2 +- src/ui/c-input-text/c-input-text.vue | 2 +- src/ui/c-select/c-select.vue | 2 +- src/ui/c-table/c-table.vue | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/modules/command-palette/command-palette.vue b/src/modules/command-palette/command-palette.vue index bceef5cd..5d953fee 100644 --- a/src/modules/command-palette/command-palette.vue +++ b/src/modules/command-palette/command-palette.vue @@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
-
+
{{ category }}
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue index cef739ed..88d45d3f 100644 --- a/src/ui/c-input-text/c-input-text.vue +++ b/src/ui/c-input-text/c-input-text.vue @@ -364,4 +364,4 @@ defineExpose({ } } } - \ No newline at end of file + diff --git a/src/ui/c-select/c-select.vue b/src/ui/c-select/c-select.vue index 7b3607c9..38e2eb8f 100644 --- a/src/ui/c-select/c-select.vue +++ b/src/ui/c-select/c-select.vue @@ -151,7 +151,7 @@ function onSearchInput() { >
- + {{ selectedOption.label }} diff --git a/src/ui/c-table/c-table.vue b/src/ui/c-table/c-table.vue index ef569890..43293ab3 100644 --- a/src/ui/c-table/c-table.vue +++ b/src/ui/c-table/c-table.vue @@ -39,7 +39,7 @@ const headers = computed(() => {