From 96c7076fb5333882dd354c5f156232217d4fab13 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 22 Feb 2024 22:16:40 -0500
Subject: [PATCH] feat(popover): add support for PDF (#913)

* feat(popover): add support for PDF

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: split pdf by ';'

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: remove unnecessary check

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/popover.inline.ts | 17 +++++++++++---
 quartz/components/styles/popover.scss       | 25 +++++++++++++++------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index d0346b05b..dee0a7876 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -47,8 +47,8 @@ async function mouseEnterHandler(
   }
 
   if (!response) return
-  const contentType = response.headers.get("Content-Type")
-  const contentTypeCategory = contentType?.split("/")[0] ?? "text"
+  const [contentType] = response.headers.get("Content-Type")!.split(";")
+  const [contentTypeCategory, typeInfo] = contentType.split("/")
 
   const popoverElement = document.createElement("div")
   popoverElement.classList.add("popover")
@@ -56,7 +56,7 @@ async function mouseEnterHandler(
   popoverInner.classList.add("popover-inner")
   popoverElement.appendChild(popoverInner)
 
-  popoverInner.dataset.contentType = contentTypeCategory
+  popoverInner.dataset.contentType = contentType ?? undefined
 
   switch (contentTypeCategory) {
     case "image":
@@ -69,6 +69,17 @@ async function mouseEnterHandler(
 
       popoverInner.appendChild(img)
       break
+    case "application":
+      switch (typeInfo) {
+        case "pdf":
+          const pdf = document.createElement("iframe")
+          pdf.src = targetUrl.toString()
+          popoverInner.appendChild(pdf)
+          break
+        default:
+          break
+      }
+      break
     default:
       const contents = await response.text()
       const html = p.parseFromString(contents, "text/html")
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index 141b89ddf..b1694f97c 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -38,14 +38,25 @@
     white-space: normal;
   }
 
-  & > .popover-inner[data-content-type="image"] {
-    padding: 0;
-    max-height: 100%;
+  & > .popover-inner[data-content-type] {
+    &[data-content-type*="pdf"],
+    &[data-content-type*="image"] {
+      padding: 0;
+      max-height: 100%;
+    }
 
-    img {
-      margin: 0;
-      border-radius: 0;
-      display: block;
+    &[data-content-type*="image"] {
+      img {
+        margin: 0;
+        border-radius: 0;
+        display: block;
+      }
+    }
+
+    &[data-content-type*="pdf"] {
+      iframe {
+        width: 100%;
+      }
     }
   }