From 95722a6469c6b4213c6b3b33e63a005b905625e1 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Sun, 25 Aug 2024 22:31:54 +0200
Subject: [PATCH] feat: add print button

---
 components.d.ts                                 |  1 +
 src/tools/markdown-to-html/index.ts             |  8 ++++----
 src/tools/markdown-to-html/markdown-to-html.vue | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 5a50ef8c..d64cec87 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -128,6 +128,7 @@ 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']
diff --git a/src/tools/markdown-to-html/index.ts b/src/tools/markdown-to-html/index.ts
index 0536d067..212b483f 100644
--- a/src/tools/markdown-to-html/index.ts
+++ b/src/tools/markdown-to-html/index.ts
@@ -2,11 +2,11 @@ import { Markdown } from '@vicons/tabler';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
-  name: 'Markdown to html',
+  name: 'Markdown to Html',
   path: '/markdown-to-html',
-  description: '',
-  keywords: ['markdown', 'html', 'converter'],
+  description: 'Convert Markdown to Html and allow to print (as PDF)',
+  keywords: ['markdown', 'html', 'converter', 'pdf'],
   component: () => import('./markdown-to-html.vue'),
   icon: Markdown,
-  createdAt: new Date('2024-02-25'),
+  createdAt: new Date('2024-08-15'),
 });
diff --git a/src/tools/markdown-to-html/markdown-to-html.vue b/src/tools/markdown-to-html/markdown-to-html.vue
index 9bde3886..21d19d31 100644
--- a/src/tools/markdown-to-html/markdown-to-html.vue
+++ b/src/tools/markdown-to-html/markdown-to-html.vue
@@ -7,6 +7,15 @@ const outputHtml = computed(() => {
   const md = markdownit();
   return md.render(inputMarkdown.value);
 });
+
+function printHtml() {
+  const w = window.open();
+  if (w === null) {
+    return;
+  }
+  w.document.body.innerHTML = outputHtml.value;
+  w.print();
+}
 </script>
 
 <template>
@@ -25,5 +34,11 @@ const outputHtml = computed(() => {
     <n-form-item label="Output HTML:">
       <TextareaCopyable :value="outputHtml" :word-wrap="true" language="html" />
     </n-form-item>
+
+    <div flex justify-center>
+      <n-button @click="printHtml">
+        Print (ie, use a PDF Printer to get a PDF file)
+      </n-button>
+    </div>
   </div>
 </template>