web: added functionality for viewing docs/pdfs in attachment manager

apps/web/src/common/dialog-controller.tsx

@@ -186,6 +186,12 @@ export function showPromptDialog(props: {
   ));
 }
 
+export function showPdfViewDialog(props: { url: string; hash: string }) {
+  return showDialog("PdfViewDialog", (Dialog, perform) => (
+    <Dialog {...props} onClose={() => perform(null)} />
+  ));
+}
+
 export function showEmailChangeDialog() {
   return showDialog("EmailChangeDialog", (Dialog, perform) => (
     <Dialog onClose={() => perform(null)} />

apps/web/src/components/attachment/index.tsx

@@ -33,6 +33,7 @@ import {
   FileWebClip,
   Icon,
   Loading,
+  PasswordInvisible,
   References,
   Rename,
   Reupload,
@@ -42,11 +43,12 @@ import { showToast } from "../../utils/toast";
 import { hashNavigate } from "../../navigation";
 import {
   closeOpenedDialog,
+  showPdfViewDialog,
   showPromptDialog
 } from "../../common/dialog-controller";
 import { store } from "../../stores/attachment-store";
 import { db } from "../../common/db";
-import { saveAttachment } from "../../common/attachments";
+import { downloadAttachment, saveAttachment } from "../../common/attachments";
 import { reuploadAttachment } from "../editor/picker";
 import { Multiselect } from "../../common/multi-select";
 import { Menu } from "../../hooks/use-menu";
@@ -59,6 +61,9 @@ import { useEffect, useState } from "react";
 import { AppEventManager, AppEvents } from "../../common/app-events";
 import { getFormattedDate } from "@notesnook/common";
 import { MenuItem } from "@notesnook/ui";
+import { ScopedThemeProvider } from "../theme-provider";
+import { Lightbox } from "../lightbox";
+import ReactDOM from "react-dom";
 
 const FILE_ICONS: Record<string, Icon> = {
   "image/": FileImage,
@@ -235,6 +240,56 @@ const AttachmentMenuItems: (
   status?: AttachmentProgressStatus
 ) => MenuItem[] = (attachment, status) => {
   return [
+    {
+      type: "button",
+      key: "preview-doc",
+      title: "Preview Document",
+      icon: PasswordInvisible.path,
+      isHidden: !(attachment.metadata.type === "application/pdf"),
+      onClick: async () => {
+        const blob = await downloadAttachment(
+          attachment.metadata.hash,
+          "blob",
+          attachment.id.toString()
+        );
+        if (!blob) return;
+        await showPdfViewDialog({
+          url: URL.createObjectURL(blob),
+          hash: attachment.metadata.hash
+        });
+      }
+    },
+    {
+      type: "button",
+      key: "preview-image",
+      title: "Preview Image",
+      icon: PasswordInvisible.path,
+      isHidden: !attachment.metadata.type.startsWith("image/"),
+      onClick: async () => {
+        const container = document.getElementById("dialogContainer");
+        if (!(container instanceof HTMLElement)) return;
+
+        const dataurl = await downloadAttachment(
+          attachment.metadata.hash,
+          "base64",
+          attachment.id.toString()
+        );
+        if (!dataurl)
+          return showToast("error", "This image cannot be previewed.");
+
+        ReactDOM.render(
+          <ScopedThemeProvider>
+            <Lightbox
+              image={dataurl}
+              onClose={() => {
+                ReactDOM.unmountComponentAtNode(container);
+              }}
+            />
+          </ScopedThemeProvider>,
+          container
+        );
+      }
+    },
     {
       type: "button",
       key: "notes",

apps/web/src/dialogs/index.ts

@@ -52,6 +52,7 @@ const MigrationDialog = React.lazy(() => import("./migration-dialog"));
 const EmailChangeDialog = React.lazy(() => import("./email-change-dialog"));
 const AddTagsDialog = React.lazy(() => import("./add-tags-dialog"));
 const ThemeDetailsDialog = React.lazy(() => import("./theme-details-dialog"));
+const PdfViewDialog = React.lazy(() => import("./pdf-view-dialog"));
 
 export const Dialogs = {
   AddNotebookDialog,
@@ -79,5 +80,6 @@ export const Dialogs = {
   EmailChangeDialog,
   AddTagsDialog,
   SettingsDialog,
-  ThemeDetailsDialog
+  ThemeDetailsDialog,
+  PdfViewDialog
 };

apps/web/src/dialogs/pdf-view-dialog.tsx

@@ -0,0 +1,40 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
+import { Perform } from "../common/dialog-controller";
+import Dialog from "../components/dialog";
+
+const PDFPreview = React.lazy(() => import("../components/pdf-preview"));
+
+type PdfViewDialogProps = { onClose: Perform; url: string; hash: string };
+function PdfViewDialog({ onClose, hash, url }: PdfViewDialogProps) {
+  return (
+    <Dialog
+      isOpen={true}
+      width={"70%"}
+      onClose={() => onClose(false)}
+      noScroll
+      sx={{ bg: "transparent" }}
+    >
+      <PDFPreview fileUrl={url} hash={hash} onClose={() => onClose(false)} />
+    </Dialog>
+  );
+}
+
+export default PdfViewDialog;