From bddb1b5da9cdb56b058058676d2a53b8ff55a88e Mon Sep 17 00:00:00 2001
From: Ruibin Xing <xingrobin@gmail.com>
Date: Wed, 28 Aug 2024 23:32:29 +0800
Subject: [PATCH] Export PDF through print. (#1065)

Add print button for markdown panel
---
 plugs/markdown/preview.ts | 18 +++++++++++++++++-
 web/styles/main.scss      | 20 +++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/plugs/markdown/preview.ts b/plugs/markdown/preview.ts
index c4c6ea30..e470d0e1 100644
--- a/plugs/markdown/preview.ts
+++ b/plugs/markdown/preview.ts
@@ -35,6 +35,7 @@ export async function updateMarkdownPreview() {
     },
   });
   const customStyles = await editor.getUiOption("customStyles");
+  const toolbar = renderToolbar();
   await editor.showPanel(
     "rhs",
     2,
@@ -45,12 +46,27 @@ export async function updateMarkdownPreview() {
         ${customStyles ?? ""}
       </style>
 
-      <div id="root" class="sb-preview">${html}</div>
+      <div id="root" class="sb-preview">${toolbar}${html}</div>
     `,
     js,
   );
 }
 
+function renderToolbar(): string {
+  return `<div class="sb-markdown-toolbar">
+            <button onClick="window.print()">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                  viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                  class="feather feather-printer">
+                <polyline points="6 9 6 2 18 2 18 9"/>
+                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
+                <rect x="6" y="14" width="12" height="8"/>
+              </svg>
+            </button>
+          </div>`;
+}
+
 export async function previewClickHandler(e: any) {
   const [eventName, arg] = JSON.parse(e);
   // console.log("Got click", eventName, arg);
diff --git a/web/styles/main.scss b/web/styles/main.scss
index 744b9b18..b450e4b3 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -226,4 +226,22 @@ body {
     padding: 0;
     margin: 0;
   }
-}
\ No newline at end of file
+}
+
+.sb-preview {
+  position: relative;
+}
+
+.sb-markdown-toolbar {
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.2s;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+
+.sb-markdown-toolbar:hover {
+  opacity: 1;
+}