enhance(ux): improve image asset ux

public/index.html

@@ -53,6 +53,8 @@
 <script defer type="module" src="/static/js/pdfjs/pdf.mjs"></script>
 <script defer type="module" src="/static/js/pdf_viewer3.mjs"></script>
 <script defer src="/static/js/eventemitter3.umd.min.js"></script>
+<script defer src="/static/js/photoswipe.umd.min.js"></script>
+<script defer src="/static/js/photoswipe-lightbox.umd.min.js"></script>
 <script defer src="/static/js/html2canvas.min.js"></script>
 <script defer src="/static/js/lsplugin.core.js"></script>
 <script defer src="/static/js/react.production.min.js"></script>

resources/index.html

@@ -52,6 +52,8 @@ const portal = new MagicPortal(worker);
 <script defer type="module" src="./js/pdfjs/pdf.mjs"></script>
 <script defer type="module" src="./js/pdf_viewer3.mjs"></script>
 <script defer src="./js/eventemitter3.umd.min.js"></script>
+<script defer src="./js/photoswipe.umd.min.js"></script>
+<script defer src="./js/photoswipe-lightbox.umd.min.js"></script>
 <script defer src="./js/html2canvas.min.js"></script>
 <script defer src="./js/lsplugin.core.js"></script>
 <script defer src="./js/react.production.min.js"></script>

src/main/frontend/components/block.cljs

@@ -252,7 +252,7 @@
           [:p.text-error.text-xs [:small.opacity-80
                                   (util/format "%s not found!" (string/capitalize type))]])))))
 
-(defn open-lightbox
+(defn open-lightbox!
   [e]
   (let [images (js/document.querySelectorAll ".asset-container img")
         images (to-array images)
@@ -303,9 +303,15 @@
 (defonce *resizing-image? (atom false))
 (rum/defc asset-container
   [asset-block src title metadata {:keys [breadcrumb? positioned? local? full-text]}]
-  (let [*el-ref (rum/use-ref nil)]
+  (let [*el-ref (rum/use-ref nil)
+        image-src (fs/asset-path-normalize src)
+        get-blockid #(some-> (rum/deref *el-ref) (.closest "[blockid]") (.getAttribute "blockid") (uuid))]
     [:div.asset-container
      {:key "resize-asset-container"
+      :on-pointer-down util/stop
+      :on-click (fn [e]
+                  (when (= "IMG" (some-> (.-target e) (.-nodeName)))
+                    (open-lightbox! e)))
       :ref *el-ref}
      [:img.rounded-sm.relative
       (merge
@@ -317,14 +323,13 @@
      (when (and (not breadcrumb?)
              (not positioned?))
        [:<>
-        (let [image-src (fs/asset-path-normalize src)
-              handle-copy!
+        (let [handle-copy!
               (fn [_e]
                 (-> (util/copy-image-to-clipboard image-src)
                   (p/then #(notification/show! "Copied!" :success))))
               handle-delete!
               (fn [_e]
-                (when-let [block-id (some-> (rum/deref *el-ref) (.closest "[blockid]") (.getAttribute "blockid") (uuid))]
+                (when-let [block-id (get-blockid)]
                   (let [*local-selected? (atom local?)]
                     (-> (shui/dialog-confirm!
                           [:div.text-xs.opacity-60.-my-2
@@ -360,14 +365,13 @@
                                 [:div
                                  {:on-click #(shui/popup-hide!)}
                                  (shui/dropdown-menu-item
-                                   {:on-click handle-copy!}
+                                   {:on-click #(some-> (db/entity [:block/uuid (get-blockid)]) (editor-handler/edit-block! :max))}
                                    [:span.flex.items-center.gap-1
-                                    (ui/icon "copy") (t :asset/copy)])
+                                    (ui/icon "edit") (t :asset/edit-block)])
                                  (shui/dropdown-menu-item
-                                   {:on-click open-lightbox}
+                                   {:on-click handle-copy!}
                                    [:span.flex.items-center.gap-1
-                                    (ui/icon "maximize") (t :asset/maximize)])
-
+                                    (ui/icon "copy") (t :asset/copy)])
                                  (when (util/electron?)
                                    (shui/dropdown-menu-item
                                      {:on-click (fn [e]

src/main/frontend/components/block.css

@@ -1122,7 +1122,7 @@ html.is-mac {
 }
 
 .ls-resize-image {
-  @apply flex relative w-fit;
+  @apply flex relative w-fit cursor-pointer;
 
   .handle-left, .handle-right {
     @apply absolute w-[6px] h-[15%] min-h-[30px] bg-black/30 hover:bg-black/70

src/main/frontend/extensions/lightbox.cljs

@@ -1,14 +1,10 @@
 (ns frontend.extensions.lightbox
-  (:require [promesa.core :as p]
-            [cljs-bean.core :as bean]
-            [frontend.util :as util]))
+  (:require [cljs-bean.core :as bean]))
 
 (defn preview-images!
   [images]
-  (p/let [_ (util/js-load$ (str util/JS_ROOT "/photoswipe.umd.min.js"))
-          _ (util/js-load$ (str util/JS_ROOT "/photoswipe-lightbox.umd.min.js"))]
-    (let [options {:dataSource images :pswpModule js/window.PhotoSwipe :showHideAnimationType "fade"}
-          ^js lightbox (js/window.PhotoSwipeLightbox. (bean/->js options))]
-      (doto lightbox
-        (.init)
-        (.loadAndOpen 0)))))
+  (let [options {:dataSource images :pswpModule js/window.PhotoSwipe :showHideAnimationType "fade"}
+        ^js lightbox (js/window.PhotoSwipeLightbox. (bean/->js options))]
+    (doto lightbox
+      (.init)
+      (.loadAndOpen 0))))

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

@@ -380,7 +380,7 @@
        (when-let [e (some->> (:key current) (str "hls__") (db-model/get-page))]
          (rfe/push-state :page {:name (str (:block/uuid e))} (if id {:anchor (str "block-content-" + id)} nil)))))))
 
-(defn open-lightbox
+(defn open-lightbox!
   [e]
   (let [images (js/document.querySelectorAll ".hl-area img")
         images (to-array images)
@@ -443,7 +443,7 @@
               {:title (t :asset/maximize)
                :tabIndex "-1"
                :on-pointer-down util/stop
-               :on-click open-lightbox}
+               :on-click open-lightbox!}
 
               (ui/icon "maximize")]]
             [:img.w-full {:src @*src}]]])))))

src/resources/dicts/en.edn

@@ -176,6 +176,7 @@
  :asset/copy "Copy image"
  :asset/maximize "Maximize image"
  :asset/ref-block "Asset ref block"
+ :asset/edit-block "Edit block"
  :asset/confirm-delete "Are you sure you want to delete this {1}?"
  :asset/physical-delete "Remove the file too (notice it can't be restored)"
  :color/gray "Gray"