feat(cursor): allow cursor change to another style based on context

src/main/frontend/components/block.cljs

@@ -2073,7 +2073,7 @@
              [:ul#query-pages.mt-1
               (for [{:block/keys [name original-name] :as page-entity} result]
                 [:li.mt-1
-                 [:a {:href (rfe/href :page {:name name})
+                 [:a.page-ref {:href (rfe/href :page {:name name})
                       :on-click (fn [e]
                                   (util/stop e)
                                   (if (gobj/get e "shiftKey")

src/main/frontend/components/block.css

@@ -171,6 +171,14 @@
   }
 }
 
+/* Change to another cursor style if Shift key is active */
+[data-active-keystroke*="Shift" i]
+:is(.journal-title, .page-title,
+    .block-ref, .page-ref, a.tag, 
+    .bullet-container.cursor) {
+  cursor: context-menu;
+}
+
 .embed-page {
   @apply py-2 my-2 px-2;
 

src/main/frontend/components/journal.cljs

@@ -51,7 +51,7 @@
                                 data-page-tags
                                 (assoc :data-page-tags data-page-tags))
      (ui/foldable
-      [:a.initial-color.title
+      [:a.initial-color.title.journal-title
        {:href     (rfe/href :page {:name page})
         :on-click (fn [e]
                     (when (gobj/get e "shiftKey")

src/main/frontend/components/page.cljs

@@ -291,7 +291,7 @@
                        (not block?))
               [:div.flex.flex-row.space-between
                [:div.flex-1.flex-row
-                [:a {:on-click (fn [e]
+                [:a.page-title {:on-click (fn [e]
                                  (.preventDefault e)
                                  (when (gobj/get e "shiftKey")
                                    (when-let [page (db/pull repo '[*] [:block/name page-name])]

src/main/frontend/components/right_sidebar.cljs

@@ -72,7 +72,7 @@
     [:div.recent-pages.text-sm.flex-col.flex.ml-3.mt-2
      (if (seq pages)
        (for [page pages]
-         [:a.mb-1 {:key      (str "recent-page-" page)
+         [:a.page-ref.mb-1 {:key      (str "recent-page-" page)
                    :href     (rfe/href :page {:name page})
                    :on-click (fn [e]
                                (when (gobj/get e "shiftKey")
@@ -133,7 +133,7 @@
     :page
     (let [page-name (or (:block/name block-data)
                         db-id)]
-      [[:a {:href     (rfe/href :page {:name page-name})
+      [[:a.page-title {:href     (rfe/href :page {:name page-name})
             :on-click (fn [e]
                         (when (gobj/get e "shiftKey")
                           (.preventDefault e)))}

src/main/frontend/page.cljs

@@ -17,7 +17,9 @@
                    (ui/inject-document-devices-envs!)
                    (ui/inject-dynamic-style-node!)
                    (plugin-handler/host-mounted!)
-                   (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position!))]
+                   (let [td-fns [(ui/setup-active-keystroke!)
+                                 (ui/setup-active-keystroke!)]
+                         teardown-fn #(mapv (fn [f] (f)) td-fns)]
                      (assoc state ::teardown teardown-fn)))
    :will-unmount (fn [state]
                    (let [teardown (::teardown state)]
@@ -32,7 +34,7 @@
            (view route-match)
            (sidebar/sidebar
             route-match
-            (view route-match)))
+            (view route-match))))))))
 
         ;; FIXME: disable for now
         ;; (let [route-name (get-in route-match [:data :name])
@@ -51,4 +53,4 @@
         ;;           :timeout {:enter 300
         ;;                     :exit 200}}
         ;;          (route-view view route-match)))))))
-         )))))
+

src/main/frontend/ui.cljs

@@ -292,6 +292,25 @@
     (state/sync-system-theme!)
     #(.removeEventListener schemaMedia "change" state/sync-system-theme!)))
 
+(defn setup-active-keystroke! []
+  (let [active-keystroke (atom #{})
+        handle-global-keystroke
+        (fn [down? e]
+          (let [handler (if down? conj disj)
+                keystroke e.key]
+            (swap! active-keystroke handler keystroke))
+          (.setAttribute
+            js/document.body
+            "data-active-keystroke"
+            (apply str (interpose "+" (vec @active-keystroke)))))
+        keydown-handler (partial handle-global-keystroke true)
+        keyup-handler (partial handle-global-keystroke false)]
+    (.addEventListener js/window "keydown" keydown-handler)
+    (.addEventListener js/window "keyup" keyup-handler)
+    (fn []
+      (.removeEventListener js/window "keydown" keydown-handler)
+      (.removeEventListener js/window "keyup" keyup-handler))))
+
 (defn on-scroll
   [node on-load on-top-reached]
   (let [full-height (gobj/get node "scrollHeight")