pdf viewer (#448)

* checkpoint on pdf viewer

* implement a pdf renderer (fix emain shFrameNavHandler to allow it)

src/electron/emain.ts

@@ -308,16 +308,21 @@ function shFrameNavHandler(event: Electron.Event<Electron.WebContentsWillFrameNa
         // only use this handler to process iframe events (non-iframe events go to shNavHandler)
         return;
     }
-    event.preventDefault();
     const url = event.url;
     console.log(`frame-navigation url=${url} frame=${event.frame.name}`);
     if (event.frame.name == "webview") {
         // "webview" links always open in new window
         // this will *not* effect the initial load because srcdoc does not count as an electron navigation
         console.log("open external, frameNav", url);
+        event.preventDefault();
         electron.shell.openExternal(url);
         return;
     }
+    if (event.frame.name == "pdfview" && url.startsWith("blob:file:///")) {
+        // allowed
+        return;
+    }
+    event.preventDefault();
     console.log("frame navigation canceled");
 }
 

src/models/model.ts

@@ -1550,12 +1550,15 @@ class Model {
         return remote.remotecanonicalname;
     }
 
-    readRemoteFile(screenId: string, lineId: string, path: string): Promise<ExtFile> {
-        const urlParams = {
+    readRemoteFile(screenId: string, lineId: string, path: string, mimetype?: string): Promise<ExtFile> {
+        const urlParams: Record<string, string> = {
             screenid: screenId,
             lineid: lineId,
             path: path,
         };
+        if (mimetype != null) {
+            urlParams["mimetype"] = mimetype;
+        }
         const usp = new URLSearchParams(urlParams);
         const url = new URL(this.getBaseHostPort() + "/api/read-file?" + usp.toString());
         const fetchHeaders = this.getFetchHeaders();

src/plugins/pdf/pdf.less

@@ -0,0 +1,7 @@
+.pdf-renderer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--termpad);
+}

src/plugins/pdf/pdf.tsx

@@ -0,0 +1,49 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobx from "mobx";
+import * as mobxReact from "mobx-react";
+
+import "./pdf.less";
+
+@mobxReact.observer
+class SimplePdfRenderer extends React.Component<
+    { data: ExtBlob; context: RendererContext; opts: RendererOpts; savedHeight: number },
+    {}
+> {
+    objUrl: string = null;
+
+    componentWillUnmount() {
+        if (this.objUrl != null) {
+            URL.revokeObjectURL(this.objUrl);
+        }
+    }
+
+    render() {
+        let dataBlob = this.props.data;
+        if (dataBlob == null || dataBlob.notFound) {
+            return (
+                <div className="pdf-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
+                    <div className="load-error-text">
+                        ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
+                    </div>
+                </div>
+            );
+        }
+        if (this.objUrl == null) {
+            const pdfBlob = new File([dataBlob], "test.pdf", { type: "application/pdf" });
+            this.objUrl = URL.createObjectURL(pdfBlob);
+        }
+        const opts = this.props.opts;
+        const maxHeight = opts.maxSize.height - 10;
+        const maxWidth = opts.maxSize.width - 10;
+        return (
+            <div className="pdf-renderer">
+                <iframe src={this.objUrl} width={maxWidth} height={maxHeight} name="pdfview" />
+            </div>
+        );
+    }
+}
+
+export { SimplePdfRenderer };