From b91e955486b2f8db8ef98401856531acc76d664f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Schr=C3=B6dl?= Date: Wed, 6 Aug 2025 16:23:38 +0200 Subject: [PATCH] :sparkles: Text decoration fixes (#7066) * :sparkles: Show text more options when apply text decoration token * :bug: Fix placeholder --- common/src/app/common/types/token.cljc | 7 +++++++ frontend/src/app/main/data/style_dictionary.cljs | 8 ++++---- .../main/data/workspace/tokens/application.cljs | 11 +++++++++-- .../ui/workspace/sidebar/options/menus/text.cljs | 14 +++++++++++++- .../workspace/tokens/management/create/form.cljs | 7 +++---- 5 files changed, 36 insertions(+), 11 deletions(-) diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index f35d5145c7..049866a689 100644 --- a/common/src/app/common/types/token.cljc +++ b/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))) diff --git a/frontend/src/app/main/data/style_dictionary.cljs b/frontend/src/app/main/data/style_dictionary.cljs index bc016d2b92..a692204f50 100644 --- a/frontend/src/app/main/data/style_dictionary.cljs +++ b/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)] diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index 02ea07b465..f71eb721f0 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/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}]}} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index ac1f35506f..daaee565ec 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/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)} diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs index 8ae4823e35..19d13c8f23 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs +++ b/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}]