From 9390c1e7be82d92010856631ed02c23a06947ea5 Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandro.alonso@kaleidos.net>
Date: Wed, 23 Jul 2025 11:46:58 +0200
Subject: [PATCH] :bug: Fix "Copy as SVG" generates different code from the
 Inspect panel (#6945)

---
 CHANGES.md                                          | 1 +
 frontend/src/app/main/data/preview.cljs             | 3 +--
 frontend/src/app/main/data/workspace/clipboard.cljs | 4 ++--
 frontend/src/app/main/ui/inspect/code.cljs          | 3 +--
 frontend/src/app/plugins/api.cljs                   | 2 +-
 frontend/src/app/util/code_gen.cljs                 | 6 ++++++
 frontend/src/app/util/code_gen/markup_svg.cljs      | 6 ++++++
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index c441b794dc..4193b156db 100644
--- a/CHANGES.md
+++ b/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)
 
diff --git a/frontend/src/app/main/data/preview.cljs b/frontend/src/app/main/data/preview.cljs
index 7be41d6e2d..fc4d4ca5dd 100644
--- a/frontend/src/app/main/data/preview.cljs
+++ b/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
diff --git a/frontend/src/app/main/data/workspace/clipboard.cljs b/frontend/src/app/main/data/workspace/clipboard.cljs
index 1a40e0ed3b..b943aad80a 100644
--- a/frontend/src/app/main/data/workspace/clipboard.cljs
+++ b/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
   []
diff --git a/frontend/src/app/main/ui/inspect/code.cljs b/frontend/src/app/main/ui/inspect/code.cljs
index eaca3f114c..7268a120e6 100644
--- a/frontend/src/app/main/ui/inspect/code.cljs
+++ b/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
diff --git a/frontend/src/app/plugins/api.cljs b/frontend/src/app/plugins/api.cljs
index 28e8ed6b7b..641f99897b 100644
--- a/frontend/src/app/plugins/api.cljs
+++ b/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]
diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs
index 99c5a4e89c..953b61165a 100644
--- a/frontend/src/app/util/code_gen.cljs
+++ b/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))
diff --git a/frontend/src/app/util/code_gen/markup_svg.cljs b/frontend/src/app/util/code_gen/markup_svg.cljs
index a25177bee2..65044af6d7 100644
--- a/frontend/src/app/util/code_gen/markup_svg.cljs
+++ b/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")))