improve(pdf): load pdf assets to viewer

src/main/frontend/components/page.cljs

@@ -400,7 +400,8 @@
                       :z-index     1})]))])
 
             ;; related assets upload
-            (pdf-assets/uploader page-name)
+            (when (and (config/local-db? repo) (not block?))
+              (pdf-assets/uploader page-name))
 
             [:div
              (when (and block? (not sidebar?))

src/main/frontend/components/sidebar.cljs

@@ -353,7 +353,9 @@
                                    :main-content        main-content})]
 
                            (footer)]
-                          (right-sidebar/sidebar)]
+                          (right-sidebar/sidebar)
+
+                          [:div#app-single-container]]
 
                          (ui/notification)
                          (ui/modal)

src/main/frontend/extensions/pdf/assets.cljs

@@ -13,6 +13,18 @@
 
 (defonce *asset-uploading? (atom false))
 
+(defn inflate-asset
+  [filename]
+  (when-let [key (and
+                   (string/ends-with? filename ".pdf")
+                   (string/replace-first filename ".pdf" ""))]
+    {:key      key
+     :filename filename
+     :fullpath (utils/node-path.join
+                 "file://"                                  ;; TODO: bfs
+                 (config/get-repo-dir (state/get-current-repo))
+                 "assets" filename)}))
+
 (defn upload-asset!
   [page-block files refresh-file!]
   (let [repo (state/get-current-repo)
@@ -38,28 +50,31 @@
           [files, set-files!] (rum/use-state (get-in page [:block/properties :files]))
           files (if (string? files) [files] files)
           refresh-file! (rum/use-callback
-                           (fn [file-name]
-                             (let [files' (if-not (vector? files)
-                                            [file-name]
-                                            (conj files file-name))]
+                          (fn [file-name]
+                            (let [files' (if-not (vector? files)
+                                           [file-name]
+                                           (conj files file-name))]
 
-                               ;; sync
-                               (editor-handler/set-block-property!
-                                 page-uuid
-                                 :files (string/join "," files'))
+                              ;; sync
+                              (editor-handler/set-block-property!
+                                page-uuid
+                                :files files'               ;;(string/join "," files')
+                                )
 
-                               (let [props (db-model/get-page-properties page-name)]
-                                 (set-files! (:files props)))))
-                           [files])]
+                              (let [props (db-model/get-page-properties page-name)]
+                                (set-files! (:files props)))))
+                          [files])]
 
       (let [block-uuid (:block/uuid page)]
         [:div.extensions__pdf-assets-uploader
          (for [file files]
            [:a.ui__button
-            {:intent "logseq"}
+            {:intent   "logseq"
+             :on-click (fn []
+                         (when-let [current (inflate-asset file)]
+                           (state/set-state! :pdf/current current)))}
             svg/external-link
-            file]
-           )
+            file])
 
          [:label.ui__button.is-link
           {:for "upload-page-assets"}

src/main/frontend/extensions/pdf/highlights.cljs

@@ -6,10 +6,9 @@
             [frontend.handler.notification :as notification]
             [frontend.extensions.pdf.utils :as pdf-utils]
             [frontend.util :as front-utils]
+            [frontend.state :as state]
             [medley.core :as medley]))
 
-(defonce ACTIVE_FILE "https://phx-nine.vercel.app/clojure-hopl-iv-final.pdf")
-
 (defn dd [& args]
   (apply js/console.debug args))
 
@@ -324,6 +323,13 @@
          initial-hls
          (:loaded-pages ano-state)))]))
 
+(rum/defc pdf-toolbar
+  []
+  [:div.extensions__pdf-toolbar
+   [:div.r
+    [:a.button {:on-click #(state/set-state! :pdf/current nil)} "close"]
+    ]])
+
 (rum/defc pdf-loader
   [url]
   (let [*doc-ref (rum/use-ref nil)
@@ -345,23 +351,27 @@
                        (do
                          (set-state! {:status :loading})
                          (get-doc$ (clj->js opts)))
-                       #(do (js/console.log "+++" %)
-                            (set-state! {:pdf-document %})))
+                       #(set-state! {:pdf-document %}))
                      #(set-state! {:error %}))
             #(set-state! {:status :completed}))
 
           #()))
       [url])
 
+    (rum/use-effect!
+      (fn []
+        (dd "[ERROR loader]" (:error state)))
+      [(:error state)])
+
     [:div.extensions__pdf-loader {:ref *doc-ref}
      (if (= (:status state) :loading)
        [:div.flex.justify-center.items-center.h-screen.text-gray-500.text-md
         "Downloading PDF file " url]
-       (pdf-viewer url [] (:pdf-document state)))
-     [:h3 (str (:error state))]]))
+       [(pdf-toolbar)
+        (pdf-viewer url [] (:pdf-document state))])]))
 
-(rum/defc container
-  []
+(rum/defc pdf-container
+  [file]
   (let [[prepared set-prepared!] (rum/use-state false)]
 
     ;; load assets
@@ -372,28 +382,31 @@
           (fn [] (set-prepared! true))))
       [])
 
-    [:div.extensions__pdf-container.flex
-     (if prepared
-       (pdf-loader ACTIVE_FILE))]))
+    [:div.extensions__pdf-container
+     (if (and prepared file)
+       (pdf-loader file))]))
 
-(rum/defc playground
-  []
-  (let [[state, set-state!] (rum/use-state {:active false})]
+(rum/defc playground-effects
+  [active]
 
-    (rum/use-effect!
-      #(js/setTimeout (fn [] (set-state! {:active true})) 100)
-      [])
+  (rum/use-effect!
+    (fn []
+      (let [flg "is-pdf-active"
+            ^js cls (.-classList js/document.body)]
+        (and active (.add cls flg))
 
-    (rum/use-effect!
-      (fn []
-        (let [flg "is-pdf-active"
-              ^js cls (.-classList js/document.body)]
-          (.add cls flg)
-          #(.remove cls flg)))
-      [(:active state)])
+        #(.remove cls flg)))
 
+    [active])
+  nil)
+(rum/defcs playground < rum/reactive
+  []
+  (let [pdf-current (state/sub :pdf/current)]
     [:div.extensions__pdf-playground
-     (when (:active state)
+
+     (playground-effects (not (nil? pdf-current)))
+
+     (when pdf-current
        (js/ReactDOM.createPortal
-         (container)
+         (pdf-container (:fullpath pdf-current))
          (js/document.querySelector "#app-single-container")))]))

src/main/frontend/extensions/pdf/pdf.css

@@ -44,10 +44,28 @@
     }
   }
 
+  &-container {
+    display: flex;
+  }
+
   &-loader {
     position: relative;
   }
 
+  &-toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 38px;
+    z-index: 5;
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 1) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+
   &-viewer {
     position: absolute;
     overflow: auto;
@@ -152,10 +170,6 @@
       }
     }
   }
-
-  .Highlight--scrolledTo .hls-text-region-item {
-    background: var(--ph-highlight-scroll-into-color);
-  }
 }
 
 .hls-text-region-item {
@@ -253,6 +267,10 @@ body.is-pdf-active {
   #sidebar-nav-wrapper {
     border: none !important;
   }
+
+  #head {
+    padding-left: 0;
+  }
 }
 
 /* overrides for pdf_viewer.css from PDF.JS web viewer */

src/main/frontend/extensions/pdf/utils.cljs

@@ -68,10 +68,15 @@
     (fn [resolve]
       (load url resolve))))
 
+(def PDFJS_ROOT
+  (if (= js/location.protocol "file:")
+    "./js"
+    "./static/js"))
+
 (defn load-base-assets$
   []
-  (p/let [_ (js-load$ "./static/js/pdfjs/pdf.js")
-          _ (js-load$ "./static/js/pdfjs/pdf_viewer.js")]))
+  (p/let [_ (js-load$ (str PDFJS_ROOT "/pdfjs/pdf.js"))
+          _ (js-load$ (str PDFJS_ROOT "/pdfjs/pdf_viewer.js"))]))
 
 (defn get-page-from-el
   [^js/HTMLElement el]

src/main/frontend/state.cljs

@@ -132,6 +132,9 @@
       :plugin/selected-unpacked-pkg nil
       :plugin/active-readme         nil
 
+      ;; pdf
+      :pdf/current                  nil
+
       ;; all notification contents as k-v pairs
       :notification/contents {}
       :graph/syncing? false