Added Preview which was missing.

auto-imports.d.ts

@@ -1,7 +1,6 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
@@ -289,7 +288,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'

components.d.ts

@@ -3,9 +3,11 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
 export {}
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     '404.page': typeof import('./src/pages/404.page.vue')['default']
     About: typeof import('./src/pages/About.vue')['default']
@@ -77,24 +79,12 @@ declare module 'vue' {
     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']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
-    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
-    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
-    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
-    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
-    IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
-    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
-    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
-    IconMdiPause: typeof import('~icons/mdi/pause')['default']
-    IconMdiPlay: typeof import('~icons/mdi/play')['default']
-    IconMdiRecord: typeof import('~icons/mdi/record')['default']
-    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
-    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -119,44 +109,22 @@ declare module 'vue' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDatePicker: typeof import('naive-ui')['NDatePicker']
-    NDivider: typeof import('naive-ui')['NDivider']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
-    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NImage: typeof import('naive-ui')['NImage']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NP: typeof import('naive-ui')['NP']
-    NPageHeader: typeof import('naive-ui')['NPageHeader']
-    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NStatistic: typeof import('naive-ui')['NStatistic']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NUpload: typeof import('naive-ui')['NUpload']
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     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']
     PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']

package.json

@@ -40,6 +40,7 @@
     "@tiptap/pm": "^2.1.6",
     "@tiptap/starter-kit": "^2.1.6",
     "@tiptap/vue-3": "^2.0.3",
+    "@types/marked": "^5.0.1",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -64,6 +65,7 @@
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
+    "marked": "^9.0.3",
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",
     "monaco-editor": "^0.43.0",
@@ -100,6 +102,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/jsdom": "^21.0.0",
     "@types/lodash": "^4.14.192",
+    "@types/marked": "^5.0.1",
     "@types/mime-types": "^2.1.1",
     "@types/netmask": "^2.0.0",
     "@types/node": "^18.15.11",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@tiptap/vue-3':
     specifier: ^2.0.3
     version: 2.0.3(@tiptap/core@2.1.6)(@tiptap/pm@2.1.6)(vue@3.3.4)
+  '@types/marked':
+    specifier: ^5.0.1
+    version: 5.0.1
   '@vicons/material':
     specifier: ^0.12.0
     version: 0.12.0
@@ -95,6 +98,9 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
+  marked:
+    specifier: ^9.0.3
+    version: 9.0.3
   mathjs:
     specifier: ^11.9.1
     version: 11.9.1
@@ -2896,6 +2902,10 @@ packages:
       '@types/mdurl': 1.0.2
     dev: true
 
+  /@types/marked@5.0.1:
+    resolution: {integrity: sha512-Y3pAUzHKh605fN6fvASsz5FDSWbZcs/65Q6xYRmnIP9ZIYz27T4IOmXfH9gWJV1dpi7f1e7z7nBGUTx/a0ptpA==}
+    dev: false
+
   /@types/mdast@3.0.11:
     resolution: {integrity: sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==}
     dependencies:
@@ -6554,6 +6564,12 @@ packages:
       mdurl: 1.0.1
       uc.micro: 1.0.6
 
+  /marked@9.0.3:
+    resolution: {integrity: sha512-pI/k4nzBG1PEq1J3XFEHxVvjicfjl8rgaMaqclouGSMPhk7Q3Ejb2ZRxx/ZQOcQ1909HzVoWCFYq6oLgtL4BpQ==}
+    engines: {node: '>= 16'}
+    hasBin: true
+    dev: false
+
   /mathjs@11.9.1:
     resolution: {integrity: sha512-VdB9ELZ6Dwda13j5d1eCBETmPO8m9qIJETUdfZmTA9cPnXUiIk7UuoAmvxFqtfAe32XYuRugAec2Ndv0/RfRhg==}
     engines: {node: '>= 14'}
@@ -7678,10 +7694,12 @@ packages:
 
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
     dev: true
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
 
   /semver@7.5.1:
     resolution: {integrity: sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==}

src/tools/html-md-converter/html-md-converter.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { convertHtmlToMarkdown } from './html-md-converter-service'; // Import the service function
+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
 
 const htmlInput = ref(''); // Reference for HTML input
 const markdownOutput = ref(''); // Reference for Markdown output
@@ -9,6 +13,8 @@ const markdownOutput = ref(''); // Reference for Markdown output
 function convertHtmlToMd() {
   markdownOutput.value = convertHtmlToMarkdown(htmlInput.value); // Using the service function here
 }
+
+const previewHtml = computed(() => marked(markdownOutput.value));
 </script>
 
 <template>
@@ -24,6 +30,7 @@ function convertHtmlToMd() {
     <!-- Display area for converted Markdown -->
     <c-input-text v-model:value="markdownOutput" multiline placeholder="Converted Markdown will appear here..." rows="5" />
 
-    <!-- Optionally, you can add more features like 'Clear', 'Copy to Clipboard', etc. -->
+    <!-- Preview area for converted Markdown -->
+    <div v-html="previewHtml" />
   </c-card>
 </template>