🎉 Add feature to select full values on click at the design sidebar

CHANGES.md

@@ -18,7 +18,8 @@
 - Update Typography palette order (by @akshay-gupta7) [Github #3156](https://github.com/penpot/penpot/pull/3156)
 - Palettes (color, typographies) empty state (by @akshay-gupta7) [Github #3160](https://github.com/penpot/penpot/pull/3160)
 - Duplicate objects via drag + alt (by @akshay-gupta7) [Github #3147](https://github.com/penpot/penpot/pull/3147)
--Set line-height to auto as 1.2 (by @akshay-gupta7) [Github #3185](https://github.com/penpot/penpot/pull/3185)
+- Set line-height to auto as 1.2 (by @akshay-gupta7) [Github #3185](https://github.com/penpot/penpot/pull/3185)
+- Click to select full values at the design sidebar (by @akshay-gupta7) [Github #3179](https://github.com/penpot/penpot/pull/3179)
 
 ## 1.18.3 (Unreleased)
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs

@@ -11,11 +11,15 @@
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (def blur-attrs [:blur])
 
+(defn select-all [event]
+  (dom/select-text! (dom/get-target event)))
+
 (defn create-blur []
   (let [id (uuid/next)]
     {:id id
@@ -82,6 +86,7 @@
      (cond
        has-value?
        [:div.element-set-content
+        {:on-focus select-all}
         [:& input-row {:label "Value"
                        :class "pixels"
                        :min "0"

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -37,6 +37,9 @@
     ""
     (ust/format-precision value 2)))
 
+(defn select-all [event]
+  (dom/select-text! (dom/get-target event)))
+
 (defn- get-next-font
   [{:keys [id] :as current} fonts]
   (if (seq fonts)
@@ -340,6 +343,7 @@
 
 
      [:div.row-flex
+      {:on-focus select-all}
       (let [size-options [8 9 10 11 12 14 16 18 24 36 48 72]
             size-options (if (= font-size :multiple) (into [""] size-options) size-options)]
         [:& editable-select
@@ -394,6 +398,7 @@
         :placeholder (tr "settings.multiple")
         :nillable line-height-nillable
         :on-change #(handle-change % :line-height)
+        :on-focus select-all
         :on-blur on-blur}]]
 
      [:div.input-icon
@@ -407,6 +412,7 @@
         :value (attr->string letter-spacing)
         :placeholder (tr "settings.multiple")
         :on-change #(handle-change % :letter-spacing)
+        :on-focus select-all
         :on-blur on-blur}]]]))
 
 (mf/defc text-transform-options