🐛 Fix problem with masked texts on exporting

CHANGES.md

@@ -15,6 +15,7 @@
 - Fix error screen when operations over comments fail [#1219](https://github.com/penpot/penpot/issues/1219)
 - Fix undo problem when changing typography/color from library [#1230](https://github.com/penpot/penpot/issues/1230)
 - Fix problem with text margin while rendering [#1231](https://github.com/penpot/penpot/issues/1231)
+- Fix problem with masked texts on exporting [Taiga #2116](https://tree.taiga.io/project/penpot/issue/2116)
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes

exporter/src/app/renderer/svg.cljs

@@ -210,11 +210,10 @@
                    :height (.. attrs -height -value)
                    :colors (.split colors ",")}))
 
-          (extract-single-node [node]
+          (extract-single-node [[shot node]]
             (log/trace :fn :extract-single-node)
 
-            (p/let [attrs (bw/eval! node extract-element-attrs)
+            (p/let [attrs (bw/eval! node extract-element-attrs)]
-                    shot  (bw/screenshot node {:omit-background? true :type "png"})]
               {:id     (unchecked-get attrs "id")
                :x      (unchecked-get attrs "x")
                :y      (unchecked-get attrs "y")
@@ -223,13 +222,21 @@
                :colors (vec (unchecked-get attrs "colors"))
                :data   shot}))
 
+          (resolve-text-node [page node]
+            (p/let [attrs (bw/eval! node extract-element-attrs)
+                    id (unchecked-get attrs "id")
+                    text-node (bw/select page (str "#screenshot-text-" id " foreignObject"))
+                    shot (bw/screenshot text-node {:omit-background? true :type "png"})]
+              [shot node]))
+
           (clean-temp-data [{:keys [tempdir] :as node}]
             (p/do!
              (sh/rmdir! tempdir)
              (dissoc node :tempdir)))
 
-          (process-text-node [item]
+          (process-text-node [page item]
             (-> (p/resolved item)
+                (p/then (partial resolve-text-node page))
                 (p/then extract-single-node)
                 (p/then trace-node)
                 (p/then clean-temp-data)))
@@ -237,7 +244,7 @@
           (process-text-nodes [page]
             (log/trace :fn :process-text-nodes)
             (-> (bw/select-all page "#screenshot foreignObject")
-                (p/then (fn [nodes] (p/all (map process-text-node nodes))))))
+                (p/then (fn [nodes] (p/all (map (partial process-text-node page) nodes))))))
 
           (extract-svg [page]
             (p/let [dom     (bw/select page "#screenshot")
@@ -271,7 +278,7 @@
             (p/let [page (render-in-page page rctx)]
               (extract-svg page)))]
 
-    (let [path   (str "/render-object/" file-id "/" page-id "/" object-id)
+    (let [path   (str "/render-object/" file-id "/" page-id "/" object-id "?render-texts=true")
           uri    (-> (u/uri (cf/get :public-uri))
                      (assoc :path "/")
                      (assoc :fragment path))

frontend/src/app/main/ui.cljs

@@ -154,10 +154,12 @@
        (do
          (let [file-id      (uuid (get-in route [:path-params :file-id]))
                page-id      (uuid (get-in route [:path-params :page-id]))
-               object-id (uuid (get-in route [:path-params :object-id]))]
+               object-id    (uuid (get-in route [:path-params :object-id]))
+               render-texts (get-in route [:query-params :render-texts])]
            [:& render/render-object {:file-id file-id
                                      :page-id page-id
-                                     :object-id object-id}]))
+                                     :object-id object-id
+                                     :render-texts? (and (some? render-texts) (= render-texts "true"))}]))
 
        :render-sprite
        (do

frontend/src/app/main/ui/render.cljs

@@ -27,7 +27,7 @@
 
 (mf/defc object-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [objects object-id zoom] :or {zoom 1} :as props}]
+  [{:keys [objects object-id zoom render-texts?] :or {zoom 1} :as props}]
   (let [object   (get objects object-id)
         frame-id (if (= :frame (:type object))
                    (:id object)
@@ -76,7 +76,11 @@
         (mf/use-memo
          (mf/deps objects)
          #(exports/shape-wrapper-factory objects))
-        ]
+
+        text-shapes
+        (->> objects
+             (filter (fn [[id shape]] (= :text (:type shape))))
+             (mapv second))]
 
     (mf/use-effect
      (mf/deps width height)
@@ -100,7 +104,19 @@
         :frame [:& frame-wrapper {:shape object :view-box vbox}]
         :group [:> shape-container {:shape object}
                 [:& group-wrapper {:shape object}]]
-        [:& shape-wrapper {:shape object}])]]))
+        [:& shape-wrapper {:shape object}])]
+
+     ;; Auxiliary SVG for rendering text-shapes
+     (when render-texts?
+       (for [object text-shapes]
+         [:svg {:id (str "screenshot-text-" (:id object))
+                :view-box (str "0 0 " (:width object) " " (:height object))
+                :width (:width object)
+                :height (:height object)
+                :version "1.1"
+                :xmlns "http://www.w3.org/2000/svg"
+                :xmlnsXlink "http://www.w3.org/1999/xlink"}
+          [:& shape-wrapper {:shape (-> object (assoc :x 0 :y 0))}]]))]))
 
 (defn- adapt-root-frame
   [objects object-id]
@@ -120,7 +136,7 @@
 ;; backend entry point for download only the data of single page.
 
 (mf/defc render-object
-  [{:keys [file-id page-id object-id] :as props}]
+  [{:keys [file-id page-id object-id render-texts?] :as props}]
   (let [objects (mf/use-state nil)]
     (mf/use-effect
      (mf/deps file-id page-id object-id)
@@ -140,6 +156,7 @@
     (when @objects
       [:& object-svg {:objects @objects
                       :object-id object-id
+                      :render-texts? render-texts?
                       :zoom 1}])))
 
 (mf/defc render-sprite

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -18,7 +18,8 @@
   (let [valign (:vertical-align node "top")
         width  (some-> (:width shape) (+ 1))
         base   #js {:height (or (:height shape) "100%")
-                    :width  (or width "100%")}]
+                    :width  (or width "100%")
+                    :fontFamily "sourcesanspro"}]
     (cond-> base
       (= valign "top")     (obj/set! "justifyContent" "flex-start")
       (= valign "center")  (obj/set! "justifyContent" "center")