✨ Text decoration fixes (#7066)

* ✨ Show text more options when apply text decoration token

* 🐛 Fix placeholder

common/src/app/common/types/token.cljc

@@ -374,3 +374,10 @@
   "Joins font family `value` into a string to be edited with a single input."
   [font-families]
   (str/join ", " font-families))
+
+(def text-decoration-values #{"none" "underline" "strike-through"})
+
+(defn valid-text-decoration [value]
+  (let [normalized-value (str/lower (str/trim value))]
+    (when (contains? text-decoration-values normalized-value)
+      normalized-value)))

frontend/src/app/main/data/style_dictionary.cljs

@@ -12,6 +12,7 @@
    [app.common.logging :as l]
    [app.common.schema :as sm]
    [app.common.time :as ct]
+   [app.common.types.token :as ctt]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.tinycolor :as tinycolor]
    [app.main.data.workspace.tokens.errors :as wte]
@@ -179,12 +180,11 @@
   "Parses `value` of a text-decoration `sd-token` into a map like `{:value \"underline\"}`.
   If the `value` is not parseable and/or has missing references returns a map with `:errors`."
   [value]
-  (let [normalized-value (str/lower (str/trim value))
-        valid? (contains? #{"none" "underline" "strike-through"} normalized-value)
+  (let [valid-text-decoration (ctt/valid-text-decoration value)
         references (seq (ctob/find-token-value-references value))]
     (cond
-      valid?
-      {:value normalized-value}
+      valid-text-decoration
+      {:value valid-text-decoration}
 
       references
       {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]

frontend/src/app/main/data/workspace/tokens/application.cljs

@@ -310,12 +310,19 @@
 (defn update-text-decoration
   ([value shape-ids attributes] (update-text-decoration value shape-ids attributes nil))
   ([value shape-ids _attributes page-id]
-   (when (string? value)
+   (when (ctt/valid-text-decoration value)
      (let [css-value (case value
                        "strike-through" "line-through"
                        value)]
        (generate-text-shape-update {:text-decoration css-value} shape-ids page-id)))))
 
+(defn update-text-decoration-interactive
+  ([value shape-ids attributes] (update-text-decoration-interactive value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (when (ctt/valid-text-decoration value)
+     (st/emit! (ptk/data-event :expand-text-more-options))
+     (update-text-decoration value shape-ids attributes page-id))))
+
 ;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
 
 (defn apply-token
@@ -496,7 +503,7 @@
    :text-decoration
    {:title "Text Decoration"
     :attributes ctt/text-decoration-keys
-    :on-update-shape update-text-decoration
+    :on-update-shape update-text-decoration-interactive
     :modal {:key :tokens/text-decoration
             :fields [{:label "Text Decoration"
                       :key :text-decoration}]}}

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

@@ -22,12 +22,16 @@
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
-   [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry text-options]]
+   [app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options
+                                                                   typography-entry]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.text.ui :as txu]
    [app.util.timers :as ts]
+   [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 (mf/defc text-align-options
@@ -270,6 +274,11 @@
          (fn [changes]
            (st/emit! (dwl/update-typography (merge typography changes) file-id))))
 
+        expand-stream
+        (mf/with-memo []
+          (->> st/stream
+               (rx/filter (ptk/type? :expand-text-more-options))))
+
         multiple? (->> values vals (d/seek #(= % :multiple)))
 
         opts #js {:ids ids
@@ -284,6 +293,9 @@
                        (when (not= "INPUT" (-> (dom/get-active) (dom/get-tag-name)))
                          (let [node (txu/get-text-editor-content)]
                            (dom/focus! node))))))}]
+    (hooks/use-stream
+     expand-stream
+     #(swap! state* assoc-in [:more-options] true))
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}

frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs

@@ -795,10 +795,9 @@
 
 (mf/defc text-decoration-form*
   [{:keys [token] :rest props}]
-  (let [placeholder (tr "workspace.tokens.text-decoration-value-enter")]
-    [:> form*
-     (mf/spread-props props {:token token
-                             :input-placeholder placeholder})]))
+  [:> form*
+   (mf/spread-props props {:token token
+                           :input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")})])
 
 (mf/defc form-wrapper*
   [{:keys [token token-type] :as props}]