🐛 Fix "Copy as SVG" generates different code from the Inspect panel (#6945)

CHANGES.md

@@ -45,6 +45,7 @@
 - Fix ESC key not closing Add/Manage Libraries modal [Taiga #11523](https://tree.taiga.io/project/penpot/issue/11523)
 - Fix copying a shadow color from info tab [Taiga #11211](https://tree.taiga.io/project/penpot/issue/11211)
 - Fix remove color button in the gradient editor [Taiga #11623](https://tree.taiga.io/project/penpot/issue/11623)
+- Fix "Copy as SVG" generates different code from the Inspect panel [Taiga #11519](https://tree.taiga.io/project/penpot/issue/11519)
 
 ## 2.8.1 (Unreleased)
 

frontend/src/app/main/data/preview.cljs

@@ -80,8 +80,7 @@
                            (cb/format-code style-type)))
 
                       markup-code
-                      (-> (cg/generate-markup-code objects markup-type [shape])
-                          (cb/format-code markup-type))]
+                      (cg/generate-formatted-markup-code objects markup-type [shape])]
 
                   (update-preview-window
                    preview

frontend/src/app/main/data/workspace/clipboard.cljs

@@ -346,8 +346,8 @@
                  (gsh/translate-to-frame % (get objects parent-frame-id)))
 
             shapes          (mapv maybe-translate selected)
-            svg             (svg/generate-markup objects shapes)]
-        (wapi/write-to-clipboard svg)))))
+            svg-formatted   (svg/generate-formatted-markup objects shapes)]
+        (wapi/write-to-clipboard svg-formatted)))))
 
 (defn copy-selected-css
   []

frontend/src/app/main/ui/inspect/code.cljs

@@ -149,8 +149,7 @@
         (mf/use-memo
          (mf/deps markup-type shapes images-data)
          (fn []
-           (-> (cg/generate-markup-code objects markup-type shapes)
-               (cb/format-code markup-type))))
+           (cg/generate-formatted-markup-code objects markup-type shapes)))
 
         on-markup-copied
         (mf/use-fn

frontend/src/app/plugins/api.cljs

@@ -410,7 +410,7 @@
           :else
           (let [objects (u/locate-objects)
                 shapes (into [] (map u/proxy->shape) shapes)]
-            (cg/generate-markup-code objects type shapes)))))
+            (cg/generate-formatted-markup-code objects type shapes)))))
 
     :generateStyle
     (fn [shapes options]

frontend/src/app/util/code_gen.cljs

@@ -6,6 +6,7 @@
 
 (ns app.util.code-gen
   (:require
+   [app.util.code-beautify :as cb]
    [app.util.code-gen.markup-html :as html]
    [app.util.code-gen.markup-svg :as svg]
    [app.util.code-gen.style-css :as css]))
@@ -18,6 +19,11 @@
           "svg"  svg/generate-markup)]
     (generate-markup objects shapes)))
 
+(defn generate-formatted-markup-code
+  [objects type shapes]
+  (let [markup (generate-markup-code objects type shapes)]
+    (cb/format-code markup type)))
+
 (defn generate-style-code
   ([objects type root-shapes all-shapes]
    (generate-style-code objects type root-shapes all-shapes nil))

frontend/src/app/util/code_gen/markup_svg.cljs

@@ -8,6 +8,7 @@
   (:require
    ["react-dom/server" :as rds]
    [app.main.render :as render]
+   [app.util.code-beautify :as cb]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
@@ -24,3 +25,8 @@
   (->> shapes
        (map #(generate-svg objects %))
        (str/join "\n")))
+
+(defn generate-formatted-markup
+  [objects shapes]
+  (let [markup (generate-markup objects shapes)]
+    (cb/format-code markup "svg")))