Export PDF through print. (#1065)

Add print button for markdown panel

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);

web/styles/main.scss

@@ -226,4 +226,22 @@ body {
     padding: 0;
     margin: 0;
   }
-}
+}
+
+.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;
+}