enhance(ui): refactor the global context menu with the shui popup

deps/shui/src/logseq/shui/popup/core.cljs

@@ -66,7 +66,8 @@
         position (cond
                    (vector? event) event
 
-                   (instance? js/MouseEvent (or (.-nativeEvent event) event))
+                   (or (instance? js/MouseEvent (or (.-nativeEvent event) event))
+                     (instance? js/goog.events.BrowserEvent event))
                    (do (vreset! *target (.-target (or (.-nativeEvent event) event)))
                        [(.-clientX event) (.-clientY event)])
 

src/main/frontend/components/content.cljs

@@ -25,6 +25,7 @@
             [frontend.persist-db.browser :as db-browser]
             [frontend.state :as state]
             [frontend.ui :as ui]
+            [logseq.shui.ui :as shui]
             [frontend.util :as util]
             [frontend.util.url :as url-util]
             [goog.dom :as gdom]
@@ -399,31 +400,47 @@
                         (cond
                           page
                           (do
-                            (common-handler/show-custom-context-menu!
-                             e
-                             (page-title-custom-context-menu-content page))
+                            (shui/popup-show!
+                              e
+                              (fn [{:keys [id]}]
+                                [:div
+                                 {:on-click #(shui/popup-hide! id)}
+                                 (page-title-custom-context-menu-content page)])
+                              {:content-props {:class "ls-context-menu-content"}})
                             (state/set-state! :page-title/context nil))
 
                           block-ref
                           (do
-                            (common-handler/show-custom-context-menu!
-                             e
-                             (block-ref-custom-context-menu-content block block-ref))
+                            (shui/popup-show!
+                              e
+                              (fn [{:keys [id]}]
+                                [:div
+                                 {:on-click #(shui/popup-hide! id)}
+                                 (block-ref-custom-context-menu-content block block-ref)])
+                              {:content-props {:class "ls-context-menu-content"}})
                             (state/set-state! :block-ref/context nil))
 
                           (and (state/selection?) (not (d/has-class? target "bullet")))
-                          (common-handler/show-custom-context-menu!
-                           e
-                           (custom-context-menu-content))
+                          (shui/popup-show!
+                            e
+                            (fn [{:keys [id]}]
+                              [:div
+                               {:on-click #(shui/popup-hide! id)}
+                               (custom-context-menu-content)])
+                            {:content-props {:class "ls-context-menu-content"}})
 
                           (and block-id (parse-uuid block-id))
                           (let [block (.closest target ".ls-block")]
                             (when block
                               (state/clear-selection!)
                               (state/conj-selection-block! block :down))
-                            (common-handler/show-custom-context-menu!
-                             e
-                             (block-context-menu-content target (uuid block-id))))
+                            (shui/popup-show!
+                              e
+                              (fn [{:keys [id]}]
+                                [:div
+                                 {:on-click #(shui/popup-hide! id)}
+                                 (block-context-menu-content target (uuid block-id))])
+                              {:content-props {:class "ls-context-menu-content"}}))
 
                           :else
                           nil))))))

src/main/frontend/components/content.css

@@ -17,3 +17,11 @@
   z-index: calc(var(--ls-z-index-level-1) + 1);
   width: 270px;
 }
+
+.ls-context-menu-content {
+  @apply p-0;
+
+  .menu-links-wrapper {
+    @apply border-none shadow-none;
+  }
+}