From a07e229aaa7519bcc7d09d815a27e18692ffbe5f Mon Sep 17 00:00:00 2001 From: Deborah Emeni Date: Sun, 25 Feb 2024 14:39:53 +0100 Subject: [PATCH] exporting markdown as pdf feature --- lib/getPDFstyles.ts | 5 +++ lib/utils.ts | 84 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 lib/getPDFstyles.ts diff --git a/lib/getPDFstyles.ts b/lib/getPDFstyles.ts new file mode 100644 index 0000000..5ec39ba --- /dev/null +++ b/lib/getPDFstyles.ts @@ -0,0 +1,5 @@ +export default () => { + return ` + + ` +} \ No newline at end of file diff --git a/lib/utils.ts b/lib/utils.ts index d084cca..7a69a63 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,6 +1,90 @@ import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" +import getPDFstyles from "./getPDFstyles"; +import marked from "marked"; +import toImage from "dom-to-image" +import download from "downloadjs" +import html2pdf from "html2pdf.js" + export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } + +export function handleSaveAsHTML(code: string) { + const fileName = prompt("Name your file", "mark.html"); + if (!fileName) { + return; + } + const file = createFile(marked(code)); + const fileNameWithExt = + fileName.replace(/.html$/, "") + ".html" || "mark.html"; + exportFile(fileNameWithExt, file); +} + +export function handleSaveFile(code: string) { + const fileName = prompt("Name your file", "mark.md"); + if (!fileName) { + return; + } + const file = createFile(code); + const fileNameWithExt = fileName.replace(/.md$/, "") + ".md" || "mark.md"; + exportFile(fileNameWithExt, file); +} + +async function handleSaveAsPDF(code: string) { + try { + let htmlString = marked(code); + htmlString += ``; + const options = { + margin: 0.25, + filename: "mark.pdf", + jsPDF: { unit: "in", format: "a4", orientation: "portrait" }, + }; + + html2pdf().set(options).from(htmlString, "string").to("pdf").save(); + } catch (err) { + console.error(err); + } +} +export async function handleSaveAsImage() { + try { + + setTimeout(() => { + toImage + .toBlob(document.querySelector(".markdown-preview"), { + bgcolor: "#fff", + }) + .then((blob: any) => { + download(blob, `mark.png`, "image/png"); + + }) + .catch((err: any) => { + console.error(err); + }); + }, 250); + } catch (err) { + console.error(err); + } +} + +function createFile(data: any) { + return new Blob([data], { type: "text/plain" }); +} + +function exportFile(filename: string, file: File | Blob | string, generateDataURI = true) { + const a = document.createElement("a"); + document.body.appendChild(a); + let uri; + if (generateDataURI) { + uri = window.URL.createObjectURL(file as File); + } else { + uri = file as string; + } + a.href = uri; + a.download = filename; + a.click(); + document.body.removeChild(a); +}