From 975f41bc08988ae129b7fc0803c5277be883bf83 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 21 May 2024 15:21:01 +0200
Subject: [PATCH 01/18] Display regular input field when token is applied [*]

[*] Numeric input renders default 0
---
 .../ui/workspace/tokens/editable_select.cljs  | 45 ++++++++++++-------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 65264f703..2679c22f0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -75,6 +75,11 @@
         min-val (get params :min)
         max-val (get params :max)
 
+        multiple? (= :multiple value)
+        token (when-not multiple?
+                (-> (filter :selected? options) (first)))
+        _ (js/console.log "token" token)
+
         emit-blur? (mf/use-ref nil)
         select-wrapper-ref (mf/use-ref)
 
@@ -187,21 +192,31 @@
 
     [:div {:class (dm/str class " " (stl/css :editable-select))
            :ref on-node-load}
-     (if (= type "number")
-       [:> numeric-input* {:value (or current-value "")
-                           :className input-class
-                           :on-change set-value
-                           :on-focus handle-focus
-                           :on-blur handle-blur
-                           :placeholder placeholder}]
-       [:input {:value (or current-value "")
-                :class input-class
-                :on-change handle-change-input
-                :on-key-down handle-key-down
-                :on-focus handle-focus
-                :on-blur handle-blur
-                :placeholder placeholder
-                :type type}])
+     (when token
+       [:div {:class (stl/css :token-pill)}
+        (:label token)])
+     (cond
+       token [:input {:value ""
+                      :class input-class
+                      :on-change handle-change-input
+                      :on-key-down handle-key-down
+                      :on-focus handle-focus
+                      :on-blur handle-blur
+                      :type type}]
+       (= type "number") [:> numeric-input* {:value (or current-value "")
+                                             :className input-class
+                                             :on-change set-value
+                                             :on-focus handle-focus
+                                             :on-blur handle-blur
+                                             :placeholder placeholder}]
+       :else [:input {:value (or current-value "")
+                      :class input-class
+                      :on-change handle-change-input
+                      :on-key-down handle-key-down
+                      :on-focus handle-focus
+                      :on-blur handle-blur
+                      :placeholder placeholder
+                      :type type}])
 
      (when (seq options)
        [:span {:class (stl/css :dropdown-button)

From 50354ccb71251919f93b6b51f9e743bee44db52e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 21 May 2024 15:40:19 +0200
Subject: [PATCH 02/18] Fix state being reset at start

---
 frontend/src/app/main/ui/workspace/tokens/editable_select.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 2679c22f0..5687d9c24 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -172,7 +172,7 @@
     (mf/use-effect
      (mf/deps value current-value)
      #(when (not= (str value) current-value)
-        (reset! state* {:current-value value})))
+        (swap! state* assoc :current-value value)))
 
     (mf/with-effect [is-open?]
       (let [wrapper-node (mf/ref-val select-wrapper-ref)

From 35f384ce9b38baa17bf31c84aeb5575bc86808b0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 21 May 2024 15:40:34 +0200
Subject: [PATCH 03/18] Use custom input value logic when token is applied

---
 .../ui/workspace/tokens/editable_select.cljs  | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 5687d9c24..cfa507b9e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -63,6 +63,7 @@
   (let [state* (mf/use-state {:id (uuid/next)
                               :is-open? false
                               :current-value value
+                              :token-value nil
                               :current-item nil
                               :top nil
                               :left nil
@@ -98,9 +99,15 @@
                                options)
                           (into {}))
 
+        set-token-value!
+        (fn [value]
+          (swap! state* assoc :token-value value))
+
         set-value
         (fn [value]
-          (swap! state* assoc :current-value value)
+          (swap! state* assoc
+                 :current-value value
+                 :token-value value)
           (when on-change (on-change value)))
 
         select-item
@@ -114,6 +121,7 @@
                  {:keys [value] :as item} (get labels-map label)]
              (swap! state* assoc
                     :current-value value
+                    :token-value nil
                     :current-item item)
              (when on-change (on-change item))
              (when on-blur (on-blur)))))
@@ -143,9 +151,14 @@
 
         handle-key-down
         (mf/use-fn
-         (mf/deps set-value is-open?)
-         (fn [event]
+         (mf/deps set-value is-open? token)
+         (fn [^js event]
            (cond
+             token (let [backspace? (kbd/backspace? event)
+                         value (-> event dom/get-target dom/get-value)
+                         caret-at-beginning? (= 0 (.. event -target -selectionStart))]
+                     (set-token-value! value)
+                     (js/console.log "backspace?" caret-at-beginning? (.. event -target)))
              is-open? (let [up? (kbd/up-arrow? event)
                             down? (kbd/down-arrow? event)]
                         (dom/prevent-default event)
@@ -196,7 +209,7 @@
        [:div {:class (stl/css :token-pill)}
         (:label token)])
      (cond
-       token [:input {:value ""
+       token [:input {:value (or (:token-value state) "")
                       :class input-class
                       :on-change handle-change-input
                       :on-key-down handle-key-down

From 7da382dfed20b5d6b2259968984b8d7e02bfe4cd Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 21 May 2024 15:47:18 +0200
Subject: [PATCH 04/18] Clear value when pressing backspace as last action

---
 .../src/app/main/ui/workspace/tokens/editable_select.cljs     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index cfa507b9e..be3212af4 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -157,7 +157,9 @@
              token (let [backspace? (kbd/backspace? event)
                          value (-> event dom/get-target dom/get-value)
                          caret-at-beginning? (= 0 (.. event -target -selectionStart))]
-                     (set-token-value! value)
+                     (cond
+                       (and backspace? caret-at-beginning?) (set-value "")
+                       :else (set-token-value! value))
                      (js/console.log "backspace?" caret-at-beginning? (.. event -target)))
              is-open? (let [up? (kbd/up-arrow? event)
                             down? (kbd/down-arrow? event)]

From 019759392cd8287b18cb2947e70836a8bd033c0e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 10:23:57 +0200
Subject: [PATCH 05/18] Unlink token when pressing backspace on empty input
 field

---
 .../ui/workspace/sidebar/options/menus/measures.cljs | 12 ++++++++++++
 .../main/ui/workspace/tokens/editable_select.cljs    |  9 +++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 1b862b22d..bc76f0108 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -291,6 +291,16 @@
              (on-switch-to-radius-4)
              (on-switch-to-radius-1))))
 
+        on-border-radius-token-unlink
+        (mf/use-fn
+         (mf/deps ids change-radius border-radius-tokens)
+         (fn [token]
+           (let [token-value (some-> token wtc/resolve-token-value)]
+             (st/emit!
+              (change-radius (fn [shape]
+                               (-> (update shape :applied-tokens d/without-keys #{:rx :ry :r1 :r2 :r3 :r4})
+                                   (ctsr/set-radius-1 token-value))))))))
+
         on-radius-1-change
         (mf/use-fn
          (mf/deps ids change-radius border-radius-tokens)
@@ -302,6 +312,7 @@
                                (-> (dt/maybe-apply-token-to-shape {:token token
                                                                    :shape shape
                                                                    :attributes (wtc/token-attributes :border-radius)})
+                                   (doto js/console.log)
                                    (ctsr/set-radius-1 (or token-value value)))))))))
 
         on-radius-multi-change
@@ -488,6 +499,7 @@
                [:span {:class (stl/css :icon)}  i/corner-radius]
                [:& editable-select
                 {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
+                 :on-token-remove on-border-radius-token-unlink
                  :class (stl/css :token-select)
                  :type "number"
                  :min 0
diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index be3212af4..a491ba222 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -59,7 +59,7 @@
                   [:span {:class (stl/css :check-icon)} i/tick]])))]]])
 
 (mf/defc editable-select
-  [{:keys [value type options class on-change placeholder on-blur input-class] :as params}]
+  [{:keys [value type options class on-change placeholder on-blur input-class on-token-remove] :as params}]
   (let [state* (mf/use-state {:id (uuid/next)
                               :is-open? false
                               :current-value value
@@ -79,7 +79,6 @@
         multiple? (= :multiple value)
         token (when-not multiple?
                 (-> (filter :selected? options) (first)))
-        _ (js/console.log "token" token)
 
         emit-blur? (mf/use-ref nil)
         select-wrapper-ref (mf/use-ref)
@@ -156,9 +155,11 @@
            (cond
              token (let [backspace? (kbd/backspace? event)
                          value (-> event dom/get-target dom/get-value)
-                         caret-at-beginning? (= 0 (.. event -target -selectionStart))]
+                         caret-at-beginning? (nil? (.. event -target -selectionStart))]
                      (cond
-                       (and backspace? caret-at-beginning?) (set-value "")
+                       (and backspace? caret-at-beginning?) (do
+                                                              (dom/prevent-default event)
+                                                              (on-token-remove token))
                        :else (set-token-value! value))
                      (js/console.log "backspace?" caret-at-beginning? (.. event -target)))
              is-open? (let [up? (kbd/up-arrow? event)

From 7c80f87f30a58a577cd44de1e84ca722a79a720f Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 14:13:23 +0200
Subject: [PATCH 06/18] Show value instead of label, add title

---
 .../src/app/main/ui/workspace/tokens/editable_select.cljs  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index a491ba222..e929277a9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -208,9 +208,10 @@
 
     [:div {:class (dm/str class " " (stl/css :editable-select))
            :ref on-node-load}
-     (when token
-       [:div {:class (stl/css :token-pill)}
-        (:label token)])
+     (when-let [{:keys [label value]} token]
+       [:div {:title (str label ": " value)
+              :class (stl/css :token-pill)}
+        value])
      (cond
        token [:input {:value (or (:token-value state) "")
                       :class input-class

From 42df4263759f6622dca1ca34795af3700414c2f1 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 14:13:33 +0200
Subject: [PATCH 07/18] Style pill and input combination

---
 .../main/ui/workspace/tokens/editable_select.scss   | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
index bfc2a0c9e..171cda9f1 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
@@ -38,6 +38,19 @@
     margin-bottom: 0;
   }
 
+  .token-pill {
+    background-color: rgb(94 107 120 / 25%);
+    border-radius: $br-4;
+    padding: $s-2 $s-6;
+    text-overflow: ellipsis;
+    flex: 0 0 auto;
+  }
+
+  .token-pill + input {
+    flex: 1 1 auto;
+    width: 0;
+  }
+
   .custom-select-dropdown {
     @extend .dropdown-wrapper;
     max-height: $s-320;

From 7e79cf274db9c0311e3b292ef7e3c2c6b620ab90 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 14:17:56 +0200
Subject: [PATCH 08/18] Fix input background being clipped on hover

---
 .../src/app/main/ui/workspace/tokens/editable_select.scss    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
index 171cda9f1..a789c014c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
@@ -17,6 +17,11 @@
   border-radius: $br-8;
   cursor: pointer;
 
+  background: transparent;
+  &:hover {
+    background: transparent;
+  }
+
   .dropdown-button {
     @include flexCenter;
     margin-right: -$s-8;

From 70336ea45ea4a87b9f511e0b82a3d60e587c7d1a Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 14:26:37 +0200
Subject: [PATCH 09/18] Style focused pill

---
 .../src/app/main/ui/workspace/tokens/editable_select.scss   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
index a789c014c..7bb4e7f4e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
@@ -21,6 +21,12 @@
   &:hover {
     background: transparent;
   }
+  &:focus-within {
+    .token-pill {
+      background-color: var(--button-primary-background-color-rest);
+      color: var(--button-primary-foreground-color-rest);
+    }
+  }
 
   .dropdown-button {
     @include flexCenter;

From 86b493522cf3adcbe393aa083e8a9e78627dc3ae Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 15:12:56 +0200
Subject: [PATCH 10/18] Remove unneeded focus hack

---
 .../ui/workspace/tokens/editable_select.cljs  | 20 +------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index e929277a9..5333b04cd 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -131,23 +131,6 @@
                 value (or (d/parse-double value) value)]
             (set-value value)))
 
-        on-node-load
-        (fn [node]
-          ;; There is a problem when changing the state in this callback that
-          ;; produces the dropdown to close in the same event
-          (when node
-            (timers/schedule
-             #(when-let [bounds (when node (dom/get-bounding-rect node))]
-                (let [{window-height :height} (dom/get-window-size)
-                      {:keys [left top height]} bounds
-                      bottom (when (< (- window-height top) 300) (- window-height top))
-                      top (when (>= (- window-height top) 300) (+ top height))]
-                  (swap! state*
-                         assoc
-                         :left left
-                         :top top
-                         :bottom bottom))))))
-
         handle-key-down
         (mf/use-fn
          (mf/deps set-value is-open? token)
@@ -206,8 +189,7 @@
       (mf/set-ref-val! emit-blur? (not is-open?)))
 
 
-    [:div {:class (dm/str class " " (stl/css :editable-select))
-           :ref on-node-load}
+    [:div {:class (dm/str class " " (stl/css :editable-select))}
      (when-let [{:keys [label value]} token]
        [:div {:title (str label ": " value)
               :class (stl/css :token-pill)}

From 2efd6e1584d407dd0ecae5e4f0190168d952035a Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 15:36:26 +0200
Subject: [PATCH 11/18] Refocus input on token deletion

---
 .../app/main/ui/workspace/tokens/editable_select.cljs    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 5333b04cd..692baeb5b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -70,6 +70,7 @@
                               :bottom nil})
         state (deref state*)
         is-open? (:is-open? state)
+        refocus? (:refocus? state)
         current-value (:current-value state)
         element-id (:id state)
 
@@ -142,7 +143,8 @@
                      (cond
                        (and backspace? caret-at-beginning?) (do
                                                               (dom/prevent-default event)
-                                                              (on-token-remove token))
+                                                              (on-token-remove token)
+                                                              (swap! state* assoc :refocus? true)
                        :else (set-token-value! value))
                      (js/console.log "backspace?" caret-at-beginning? (.. event -target)))
              is-open? (let [up? (kbd/up-arrow? event)
@@ -157,6 +159,8 @@
         handle-focus
         (mf/use-fn
          (fn []
+           (when refocus?
+             (swap! state* dissoc :refocus?))
            (mf/set-ref-val! emit-blur? false)))
 
         handle-blur
@@ -202,7 +206,8 @@
                       :on-focus handle-focus
                       :on-blur handle-blur
                       :type type}]
-       (= type "number") [:> numeric-input* {:value (or current-value "")
+       (= type "number") [:> numeric-input* {:autoFocus refocus?
+                                             :value (or current-value "")
                                              :className input-class
                                              :on-change set-value
                                              :on-focus handle-focus

From 6f5930bf15174c706aed48bcc7499899fb8e93fb Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 15:43:40 +0200
Subject: [PATCH 12/18] Clear token value on blur

---
 frontend/src/app/main/ui/workspace/tokens/editable_select.cljs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 692baeb5b..430064476 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -167,6 +167,7 @@
         (mf/use-fn
          (fn []
            (mf/set-ref-val! emit-blur? true)
+           (swap! state* assoc :token-value nil)
            (timers/schedule
             200
             (fn []

From 850bf80ffc63d451e48e9fbc40c10dee519261a8 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 15:59:22 +0200
Subject: [PATCH 13/18] Replace token with value when inserted after token
 input

---
 .../ui/workspace/tokens/editable_select.cljs  | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 430064476..edb6e45ca 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -17,6 +17,7 @@
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [app.util.timers :as timers]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (defn on-number-input-key-down [{:keys [event min-val max-val set-value!]}]
@@ -138,19 +139,26 @@
          (fn [^js event]
            (cond
              token (let [backspace? (kbd/backspace? event)
+                         enter? (kbd/enter? event)
                          value (-> event dom/get-target dom/get-value)
-                         caret-at-beginning? (nil? (.. event -target -selectionStart))]
+                         caret-at-beginning? (nil? (.. event -target -selectionStart))
+                         delete-token? (and backspace? caret-at-beginning?)
+                         replace-token-with-value? (and enter? (seq (str/trim value)))]
                      (cond
-                       (and backspace? caret-at-beginning?) (do
-                                                              (dom/prevent-default event)
-                                                              (on-token-remove token)
-                                                              (swap! state* assoc :refocus? true)
-                       :else (set-token-value! value))
-                     (js/console.log "backspace?" caret-at-beginning? (.. event -target)))
+                       delete-token? (do
+                                       (dom/prevent-default event)
+                                       (on-token-remove token)
+                                       ;; Re-focus the input value of the newly rendered input element
+                                       (swap! state* assoc :refocus? true))
+                       replace-token-with-value? (do
+                                                   (dom/prevent-default event)
+                                                   (set-token-value! nil)
+                                                   (on-token-remove token)
+                                                   (handle-change-input event))
+                       :else (set-token-value! value)))
              is-open? (let [up? (kbd/up-arrow? event)
                             down? (kbd/down-arrow? event)]
-                        (dom/prevent-default event)
-                        (js/console.log "up? down?" up? down?))
+                        (dom/prevent-default event))
              (= type "number") (on-number-input-key-down {:event event
                                                           :min-val min-val
                                                           :max-val max-val

From 2eb5efb2746b119c01f63a8ceac17595a36cc7de Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 16:13:58 +0200
Subject: [PATCH 14/18] Cleanup

---
 .../app/main/ui/workspace/sidebar/options/menus/measures.cljs    | 1 -
 frontend/src/app/main/ui/workspace/tokens/core.cljs              | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index bc76f0108..85b300746 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -312,7 +312,6 @@
                                (-> (dt/maybe-apply-token-to-shape {:token token
                                                                    :shape shape
                                                                    :attributes (wtc/token-attributes :border-radius)})
-                                   (doto js/console.log)
                                    (ctsr/set-radius-1 (or token-value value)))))))))
 
         on-radius-multi-change
diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index 786536893..9f0405a62 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -13,7 +13,6 @@
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.shape-layout :as dwsl]
-   [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.transforms :as dwt]
    [app.main.store :as st]))
 

From 5806ae7426e4c20effe7e0045cb57652920cbce8 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 16:20:40 +0200
Subject: [PATCH 15/18] Abstract functions

---
 frontend/src/app/main/data/tokens.cljs                      | 4 ++++
 .../main/ui/workspace/sidebar/options/menus/measures.cljs   | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 5f6c71e1e..e0b827518 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.data.tokens
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.changes-builder :as pcb]
    [app.common.geom.point :as gpt]
@@ -57,6 +58,9 @@
   (->> (map (fn [attr] [attr token-id]) attributes)
        (into {})))
 
+(defn unapply-token-id [shape attributes]
+  (update shape :applied-tokens d/without-keys attributes))
+
 (defn apply-token-id-to-attributes [{:keys [shape token-id attributes]}]
   (let [token (token-from-attributes token-id attributes)]
     (toggle-or-apply-token shape token)))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 85b300746..4a26f0f39 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -291,14 +291,14 @@
              (on-switch-to-radius-4)
              (on-switch-to-radius-1))))
 
-        on-border-radius-token-unlink
+        on-border-radius-token-unapply
         (mf/use-fn
          (mf/deps ids change-radius border-radius-tokens)
          (fn [token]
            (let [token-value (some-> token wtc/resolve-token-value)]
              (st/emit!
               (change-radius (fn [shape]
-                               (-> (update shape :applied-tokens d/without-keys #{:rx :ry :r1 :r2 :r3 :r4})
+                               (-> (dt/unapply-token-id shape (wtc/token-attributes :border-radius))
                                    (ctsr/set-radius-1 token-value))))))))
 
         on-radius-1-change
@@ -498,7 +498,7 @@
                [:span {:class (stl/css :icon)}  i/corner-radius]
                [:& editable-select
                 {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
-                 :on-token-remove on-border-radius-token-unlink
+                 :on-token-remove on-border-radius-token-unapply
                  :class (stl/css :token-select)
                  :type "number"
                  :min 0

From 5bccfa9e2fba81a2f306001d0df0fa4de07bdb6e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 16:29:18 +0200
Subject: [PATCH 16/18] Dont submit token when text is selected

---
 frontend/src/app/main/ui/workspace/tokens/editable_select.cljs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index edb6e45ca..8623cbda2 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -142,7 +142,8 @@
                          enter? (kbd/enter? event)
                          value (-> event dom/get-target dom/get-value)
                          caret-at-beginning? (nil? (.. event -target -selectionStart))
-                         delete-token? (and backspace? caret-at-beginning?)
+                         no-text-selected? (str/empty? (.toString (js/document.getSelection)))
+                         delete-token? (and backspace? caret-at-beginning? no-text-selected?)
                          replace-token-with-value? (and enter? (seq (str/trim value)))]
                      (cond
                        delete-token? (do

From b1379ed7dea857467243018789aa41ca144b372c Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 16:35:44 +0200
Subject: [PATCH 17/18] Fix refocus prop not being removed

---
 frontend/src/app/main/ui/workspace/tokens/editable_select.cljs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 8623cbda2..bce793631 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -167,6 +167,7 @@
 
         handle-focus
         (mf/use-fn
+         (mf/deps refocus?)
          (fn []
            (when refocus?
              (swap! state* dissoc :refocus?))

From cc0e4af4bc0d22f0e59db6259b413d5ebd37a9a4 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 22 May 2024 16:37:19 +0200
Subject: [PATCH 18/18] Fix token value not being removed after submit

---
 .../src/app/main/ui/workspace/tokens/editable_select.cljs     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index bce793631..afbd5a2ee 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -153,9 +153,9 @@
                                        (swap! state* assoc :refocus? true))
                        replace-token-with-value? (do
                                                    (dom/prevent-default event)
-                                                   (set-token-value! nil)
                                                    (on-token-remove token)
-                                                   (handle-change-input event))
+                                                   (handle-change-input event)
+                                                   (set-token-value! nil))
                        :else (set-token-value! value)))
              is-open? (let [up? (kbd/up-arrow? event)
                             down? (kbd/down-arrow? event)]