🐛 Fix color picker for texts in root frame

CHANGES.md

@@ -25,6 +25,7 @@
 - Fix workspace header presence styles and invalid link [Taiga #1813](https://tree.taiga.io/project/penpot/issue/1813).
 - Fix color-input wrong behavior (on workspace page color) [Taiga #1795](https://tree.taiga.io/project/penpot/issue/1795).
 - Fix file contextual menu in shared libraries at dashboard [Taiga #1865](https://tree.taiga.io/project/penpot/issue/1865).
+- Fix problem with color picker and fonts [#1049](https://github.com/penpot/penpot/issues/1049)
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes

frontend/src/app/main/exports.cljs

@@ -25,6 +25,7 @@
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.text :as text]
+   [app.main.ui.shapes.text.fontfaces :as ff]
    [app.util.object :as obj]
    [app.util.timers :as ts]
    [cuerdas.core :as str]
@@ -133,8 +134,14 @@
   [{:keys [data width height thumbnails? embed?] :as props}]
   (let [objects (:objects data)
         root    (get objects uuid/zero)
-        shapes  (->> (:shapes root)
-                     (map #(get objects %)))
+        shapes
+        (->> (:shapes root)
+             (map #(get objects %)))
+
+        root-children
+        (->> shapes
+             (filter #(not= :frame (:type %)))
+             (mapcat #(cp/get-object-with-children (:id %) objects)))
 
         vport   (when (and (some? width) (some? height))
                   {:width width :height height})
@@ -161,7 +168,7 @@
                     :background background-color}}
 
       [:& use/export-page {:options (:options data)}]
-
+      [:& ff/fontfaces-style {:shapes root-children}]
       (for [item shapes]
         (let [frame? (= (:type item) :frame)]
           (cond

frontend/src/app/main/ui/workspace/shapes.cljs

@@ -13,11 +13,13 @@
   common."
   (:require
    [app.common.geom.shapes :as geom]
+   [app.common.pages :as cp]
    [app.common.uuid :as uuid]
    [app.main.refs :as refs]
    [app.main.ui.shapes.circle :as circle]
    [app.main.ui.shapes.image :as image]
    [app.main.ui.shapes.rect :as rect]
+   [app.main.ui.shapes.text.fontfaces :as ff]
    [app.main.ui.workspace.shapes.bounding-box :refer [bounding-box]]
    [app.main.ui.workspace.shapes.common :as common]
    [app.main.ui.workspace.shapes.frame :as frame]
@@ -53,18 +55,24 @@
   [props]
   (let [objects       (obj/get props "objects")
         active-frames (obj/get props "active-frames")
-        root-shapes (get-in objects [uuid/zero :shapes])
-        shapes      (->> root-shapes (mapv #(get objects %)))]
+        root-shapes   (get-in objects [uuid/zero :shapes])
+        shapes        (->> root-shapes (mapv #(get objects %)))
 
-    (for [item shapes]
-      (if (= (:type item) :frame)
-        [:& frame-wrapper {:shape item
-                           :key (:id item)
-                           :objects objects
-                           :thumbnail? (not (get active-frames (:id item) false))}]
+        root-children (->> shapes
+                           (filter #(not= :frame (:type %)))
+                           (mapcat #(cp/get-object-with-children (:id %) objects)))]
 
-        [:& shape-wrapper {:shape item
-                           :key (:id item)}]))))
+    [:*
+     [:& ff/fontfaces-style {:shapes root-children}]
+     (for [item shapes]
+       (if (= (:type item) :frame)
+         [:& frame-wrapper {:shape item
+                            :key (:id item)
+                            :objects objects
+                            :thumbnail? (not (get active-frames (:id item) false))}]
+
+         [:& shape-wrapper {:shape item
+                            :key (:id item)}]))]))
 
 (mf/defc shape-wrapper
   {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]