enhance(ux): keys ux for the property editor

src/main/frontend/components/property.cljs

@@ -605,13 +605,14 @@
                                                                                  (:block/uuid property)
                                                                                  {:properties {icon-property-id icon}})]
                                   (shui/popup-hide! id)))))}))]
-       [:button.flex
-        (when-not config/publishing?
-          {:on-click #(shui/popup-show! (.-target %) content-fn {:as-dropdown? true :auto-focus? true})})
-        (if icon
-          (icon-component/icon icon)
-          [:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"})
-           [:span.bullet]])])
+       (trigger-as :button
+         (-> (when-not config/publishing?
+               {:on-click #(shui/popup-show! (.-target %) content-fn {:as-dropdown? true :auto-focus? true})})
+           (assoc :class "flex items-center"))
+         (if icon
+           (icon-component/icon icon)
+           [:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"})
+            [:span.bullet]])))
 
      (if config/publishing?
        [:a.property-k.flex.select-none.jtrigger.pl-2
@@ -695,9 +696,10 @@
             {:class "col-span-3"}
             (inline-text {} :markdown (get-in property [:block/schema :description]))]
            (when-not collapsed?
-             [:div.property-value {:class (if block?
-                                            "block-property-value"
-                                            "col-span-3 inline-grid")}
+             [:div.property-value
+              {:class (if block?
+                        "block-property-value"
+                        "col-span-3 inline-grid")}
               (pv/property-value block property v opts)]))]))))
 
 (rum/defc properties-section < rum/reactive db-mixins/query

src/main/frontend/components/property/value.cljs

@@ -603,15 +603,17 @@
      (shui/dropdown-menu-trigger
       {:class "jtrigger flex flex-1"
        :on-click #(set-open! (not open?))
-       :on-key-down (fn [e]
-                      (when (= " " (util/ekey e))
-                        (set-open! true)))}
-      (if (string/blank? value)
-        [:div.opacity-50.pointer.text-sm "Empty"]
-        (value-f)))
-     (shui/dropdown-menu-content
-      {:align "start"
-       :on-interact-outside #(set-open! false)
+       :on-key-down (fn [^js e]
+                      (case (util/ekey e)
+                        (" " "Enter")
+                        (do (set-open! true) (util/stop e))
+                        :dune))}
+       (if (string/blank? value)
+         [:div.opacity-50.pointer.text-sm "Empty"]
+         (value-f)))
+      (shui/dropdown-menu-content
+        {:align "start"
+         :on-interact-outside #(set-open! false)
        :onEscapeKeyDown #(set-open! false)}
       [:div.property-select
        (case type
@@ -760,7 +762,6 @@
       (let [toggle-fn #(shui/popup-hide!)
             content-fn (fn [{:keys [_id content-props]}]
                          (select-cp {:content-props content-props}))]
-        ;;
         [:div.multi-values.jtrigger
          {:tab-index "0"
           :ref *el
@@ -771,11 +772,12 @@
                           (shui/popup-show! (rum/deref *el) content-fn
                             {:as-dropdown? true :as-content? false
                              :align "start" :auto-focus? true}))))
-          :on-key-up (fn [^js e]
-                       (case (.-key e)
-                         (" " "Enter")
-                         (some-> (rum/deref *el) (.click))
-                         :dune))
+          :on-key-down (fn [^js e]
+                         (case (.-key e)
+                           (" " "Enter")
+                           (do (some-> (rum/deref *el) (.click))
+                               (util/stop e))
+                           :dune))
           :class "flex flex-1 flex-row items-center flex-wrap gap-x-2 gap-y-2 pr-4"}
          (values-cp toggle-fn)])
       (select-cp {:content-props nil}))))
@@ -783,16 +785,16 @@
 (rum/defc property-value < rum/reactive
   [block property v opts]
   (ui/catch-error
-   (ui/block-error "Something wrong" {})
-   (let [dom-id (str "ls-property-" (:db/id block) "-" (:db/id property))
-         editor-id (str dom-id "-editor")
-         schema (:block/schema property)
-         multiple-values? (= :many (:cardinality schema))
-         editor-args {:block property
-                      :parent-block block
-                      :format :markdown}]
-     (cond
-       multiple-values?
+    (ui/block-error "Something wrong" {})
+    (let [dom-id (str "ls-property-" (:db/id block) "-" (:db/id property))
+          editor-id (str dom-id "-editor")
+          schema (:block/schema property)
+          multiple-values? (= :many (:cardinality schema))
+          editor-args {:block property
+                       :parent-block block
+                       :format :markdown}]
+      (cond
+        multiple-values?
        (multiple-values block property v opts schema)
 
        :else