mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 07:11:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added Preview which was missing.

Browse source
This commit is contained in:
Leon Letto 2023-09-24 15:10:58 -07:00
parent 801e32b3c1
commit 383ec8a579
1 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/tools/html-md-converter/html-md-converter.vue
View file

@ -4,8 +4,10 @@ import { ref } from 'vue';
import { marked } from 'marked';
import { convertHtmlToMarkdown } from './html-md-converter-service';
import CCard from "@/ui/c-card/c-card.vue";
import CInputText from "@/ui/c-input-text/c-input-text.vue"; // Import the service function
import CCard from '@/ui/c-card/c-card.vue';
import CInputText from '@/ui/c-input-text/c-input-text.vue'; // Import the service function
const htmlInput = ref(''); // Reference for HTML input
const markdownOutput = ref(''); // Reference for Markdown output
@ -18,9 +20,9 @@ const previewHtml = computed(() => marked(markdownOutput.value));
</script>
<template>
<c-card>
<CCard>
<!-- Input area for HTML -->
<c-input-text v-model:value="htmlInput" multiline placeholder="Paste your HTML here..." rows="5" />
<CInputText v-model:value="htmlInput" multiline placeholder="Paste your HTML here..." rows="5" />
<!-- Convert button -->
<button @click="convertHtmlToMd">
@ -28,9 +30,9 @@ const previewHtml = computed(() => marked(markdownOutput.value));
</button>
<!-- Display area for converted Markdown -->
<c-input-text v-model:value="markdownOutput" multiline placeholder="Converted Markdown will appear here..." rows="5" />
<CInputText v-model:value="markdownOutput" multiline placeholder="Converted Markdown will appear here..." rows="5" />
<!-- Preview area for converted Markdown -->
<div v-html="previewHtml" />
</c-card>
</CCard>
</template>