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
This commit is contained in:
sharevb 2024-02-25 12:47:40 +01:00 committed by ShareVB
parent 5641816957
commit d724281f07
5 changed files with 73 additions and 6 deletions

View file

@ -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>

View file

@ -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'),
});

View file

@ -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,
],
},
{