🐛 Fix problem with line-height and texts

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!)
 

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

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"

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")
+              dominant-bl "text-before-edge"
-              alignment-bl (when (cfg/check-browser? :safari) "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)

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

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]

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)}))