diff --git a/CHANGES.md b/CHANGES.md index 66c4b22c14..4c8669e72e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -33,6 +33,9 @@ ### :bug: Bugs fixed - Fix problem with group coordinates [#2008](https://github.com/penpot/penpot/issues/2008) +- Fix problem with line-height and texts [Taiga #3578](https://tree.taiga.io/project/penpot/issue/3578) + + ### :arrow_up: Deps updates ### :heart: Community contributions by (Thank you!) diff --git a/frontend/src/app/main/ui/shapes/text/html_text.cljs b/frontend/src/app/main/ui/shapes/text/html_text.cljs index 50b26ad785..d7bfc78c11 100644 --- a/frontend/src/app/main/ui/shapes/text/html_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/html_text.cljs @@ -59,7 +59,7 @@ (mf/defc render-node {::mf/wrap-props false} [props] - (let [{:keys [type text children]} (obj/get props "node")] + (let [{:keys [type text children] :as parent} (obj/get props "node")] (if (string? text) [:> render-text props] (let [component (case type @@ -72,6 +72,7 @@ (for [[index node] (d/enumerate children)] (let [props (-> (obj/clone props) (obj/set! "node" node) + (obj/set! "parent" parent) (obj/set! "index" index) (obj/set! "key" index))] [:> render-node props]))]))))) @@ -92,6 +93,7 @@ :style {:position "fixed" :left 0 :top 0 + :background "white" :width (if (#{:auto-width} grow-type) 100000 width) :height (if (#{:auto-height :auto-width} grow-type) 100000 height)}} ;; We use a class here because react has a bug that won't use the appropriate selector for diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index 8082d00ff9..63b4c95efa 100644 --- a/frontend/src/app/main/ui/shapes/text/styles.cljs +++ b/frontend/src/app/main/ui/shapes/text/styles.cljs @@ -63,7 +63,6 @@ (let [letter-spacing (:letter-spacing data 0) text-decoration (:text-decoration data) text-transform (:text-transform data) - line-height (:line-height data 1.2) font-id (:font-id data (:font-id txt/default-text-attrs)) font-variant-id (:font-variant-id data) @@ -80,7 +79,6 @@ base #js {:textDecoration text-decoration :textTransform text-transform - :lineHeight (or line-height "1.2") :color (if show-text? text-color "transparent") :caretColor (or text-color "black") :overflowWrap "initial" diff --git a/frontend/src/app/main/ui/shapes/text/svg_text.cljs b/frontend/src/app/main/ui/shapes/text/svg_text.cljs index a94aaad623..b4585b532c 100644 --- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/svg_text.cljs @@ -87,15 +87,12 @@ [:> :g group-props (for [[index data] (d/enumerate position-data)] (let [y (- (:y data) (:height data)) - dominant-bl (when-not (cfg/check-browser? :safari) "text-before-edge") - alignment-bl (when (cfg/check-browser? :safari) "text-before-edge") - + dominant-bl "text-before-edge" rtl? (= "rtl" (:direction data)) props (-> #js {:key (dm/str "text-" (:id shape) "-" index) :x (if rtl? (+ (:x data) (:width data)) (:x data)) :y y :transform (position-data-transform shape data) - :alignmentBaseline alignment-bl :dominantBaseline dominant-bl :style (-> #js {:fontFamily (:font-family data) :fontSize (:font-size data) diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index b124d82e17..5b147fc76d 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -288,7 +288,7 @@ :height (or height (:height shape)) :fill "red"}]]] - [:foreignObject {:x (:x shape) :y (:y shape) :width "100%" :height "100%"} + [:foreignObject {:x (:x shape) :y (:y shape) :width width :height height} [:div {:style {:position "absolute" :left 0 :top 0 diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 101005e75b..3dfbe8cb88 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -20,7 +20,6 @@ [app.main.ui.workspace.shapes :as shapes] [app.main.ui.workspace.shapes.text.editor :as editor] [app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]] - [app.main.ui.workspace.shapes.text.viewport-texts :as stv] [app.main.ui.workspace.shapes.text.viewport-texts-html :as stvh] [app.main.ui.workspace.viewport.actions :as actions] [app.main.ui.workspace.viewport.comments :as comments] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index fd4127f80a..ef31ad7978 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -91,6 +91,11 @@ (when event (.stopPropagation event))) +(defn stop-immediate-propagation + [^js event] + (when event + (.stopImmediatePropagation event))) + (defn prevent-default [^js event] (when event @@ -596,3 +601,12 @@ (defn load-font [font] (let [fonts (.-fonts globals/document)] (.load fonts font))) + +(defn text-measure [font] + (let [element (.createElement globals/document "canvas") + context (.getContext element "2d") + _ (set! (.-font context) font) + measure ^js (.measureText context "Ag")] + + {:ascent (.-fontBoundingBoxAscent measure) + :descent (.-fontBoundingBoxDescent measure)}))