enhance(dev): add debug option for the property edit dropdown

src/main/frontend/components/property.cljs

@@ -669,11 +669,12 @@
                                             (when (util/meta-key? e)
                                               (route-handler/redirect-to-page! (:block/uuid property))
                                               (.preventDefault e)))
-                         :on-context-menu (fn [^js e]
+                         :on-context-menu (fn [^js/MouseEvent e]
                                             (util/stop e)
                                             (shui/popup-show! (.-target e)
                                               (fn [{:keys [id]}]
-                                                (property-v2/dropdown-editor id property))
+                                                (property-v2/dropdown-editor id property
+                                                  {:debug? (.-altKey e)}))
                                               {:content-props
                                                {:class "ls-property-dropdown-editor as-root"}
                                                :align "start"

src/main/frontend/components/property_v2.cljs

@@ -1,6 +1,7 @@
 (ns frontend.components.property-v2
   (:require [clojure.string :as string]
             [frontend.components.icon :as icon-component]
+            [frontend.handler.common.developer :as dev-common-handler]
             [frontend.handler.db-based.property :as db-property-handler]
             [frontend.db :as db]
             [frontend.handler.property :as property-handler]
@@ -221,7 +222,7 @@
 (rum/defc dropdown-editor-impl
   "popup-id: dropdown popup id
    property: block entity"
-  [_popup-id property]
+  [_popup-id property opts]
   (let [title (:block/title property)
         property-type (get-in property [:block/schema :type])
         property-type-label (some-> property-type (property-type-label))
@@ -266,9 +267,18 @@
                                   (util/stop e)
                                   (-> (shui/dialog-confirm! "remove?")
                                     (p/then (fn [] (shui/popup-hide-all!)))
-                                    (p/catch (fn [] (restore-root-highlight-item! :remove-property)))))}})]))
+                                    (p/catch (fn [] (restore-root-highlight-item! :remove-property)))))}})
+     (when (:debug? opts)
+       [:<>
+        (shui/dropdown-menu-separator)
+        (dropdown-editor-menuitem
+          {:icon :bug :title (str (:db/ident property)) :desc "" :disabled? false
+           :item-props {:class "opacity-60 focus:opacity-100 focus:!text-red-rx-08"
+                        :on-select (fn []
+                                     (dev-common-handler/show-entity-data (:db/id property))
+                                     (shui/popup-hide!))}})])]))
 
 (rum/defc dropdown-editor < rum/reactive
-  [popup-id property]
+  [popup-id property opts]
   (let [property1 (db/sub-block (:db/id property))]
-    (dropdown-editor-impl popup-id property1)))
+    (dropdown-editor-impl popup-id property1 opts)))

src/main/frontend/handler/common/developer.cljs

@@ -38,7 +38,7 @@
         pull-data (with-out-str (pprint/pprint result))]
     (println pull-data)
     (notification/show!
-     [:div
+     [:div.ls-wrap-widen
       [:pre.code pull-data]
       [:br]
       (ui/button "Copy to clipboard"
@@ -53,7 +53,7 @@
                      with-out-str)]
     (println ast-data)
     (notification/show!
-     [:div
+     [:div.ls-wrap-widen
       ;; Show clipboard at top since content is really long for pages
       (ui/button "Copy to clipboard"
                  :on-click #(.writeText js/navigator.clipboard ast-data))

src/main/frontend/ui.css

@@ -70,6 +70,10 @@
 
     background-color: or(--ls-notification-background, --lx-gray-03, --ls-tertiary-background-color, --rx-gray-03);
     color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color, --rx-gray-11);
+
+    &:has(.ls-wrap-widen) {
+      @apply w-2xl max-w-[96vw];
+    }
   }
 }