✨ Add copy-as-svg to contextual menu (#6510)

* ✨ Add "copy as svg" to contextual menu

* 🌐 Add a few translations of the new string

* 📚 Document commit message format for translations

* 📎 Log SVG import errors to the console

* 📎 Update CHANGES.md (two PRs)

---------

Signed-off-by: Miguel de Benito Delgado <m.debenito.d@gmail.com>

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

@@ -1545,8 +1545,9 @@
 (dm/export dwcp/paste-from-event)
 (dm/export dwcp/copy-selected-css)
 (dm/export dwcp/copy-selected-css-nested)
-(dm/export dwcp/copy-selected-text)
 (dm/export dwcp/copy-selected-props)
+(dm/export dwcp/copy-selected-svg)
+(dm/export dwcp/copy-selected-text)
 (dm/export dwcp/paste-selected-props)
 (dm/export dwcp/paste-shapes)
 (dm/export dwcp/paste-data-valid?)

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

@@ -45,6 +45,7 @@
    [app.main.repo :as rp]
    [app.main.router :as rt]
    [app.main.streams :as ms]
+   [app.util.code-gen.markup-svg :as svg]
    [app.util.code-gen.style-css :as css]
    [app.util.globals :as ug]
    [app.util.http :as http]
@@ -329,6 +330,25 @@
               :else
               (rx/empty))))))))
 
+(defn copy-selected-svg
+  []
+  (ptk/reify ::copy-selected-svg
+    ptk/EffectEvent
+    (effect [_ state _]
+      (let [objects         (dsh/lookup-page-objects state)
+            selected        (->> (dsh/lookup-selected state)
+                                 (ctst/sort-z-index objects)
+                                 (mapv (d/getf objects)))
+            parent-frame-id (cfh/common-parent-frame objects selected)
+
+            maybe-translate
+            #(if (= parent-frame-id uuid/zero) %
+                 (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)))))
+
 (defn copy-selected-css
   []
   (ptk/reify ::copy-selected-css

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.exceptions :as ex]
    [app.common.files.changes-builder :as pcb]
    [app.common.files.helpers :as cfh]
    [app.common.files.shapes-builder :as sb]
@@ -119,6 +120,7 @@
                   (dwu/commit-undo-transaction undo-id)))
 
          (catch :default cause
-           (rx/throw {:type :svg-parser
-                      :data cause})))))))
+           (js/console.error cause)
+           (rx/throw (ex/error :type :svg-parser
+                               :hint (ex-message cause)))))))))
 

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

@@ -162,6 +162,9 @@
         handle-paste-props
         (mf/use-callback #(st/emit! (dw/paste-selected-props)))
 
+        handle-copy-svg
+        (mf/use-callback #(st/emit! (dw/copy-selected-svg)))
+
         handle-copy-text
         (mf/use-callback #(st/emit! (dw/copy-selected-text)))
 
@@ -201,6 +204,8 @@
 
      [:> menu-entry* {:title (tr "workspace.shape.menu.copy-paste-as")
                       :on-pointer-enter (when (cf/check-browser? :chrome) handle-hover-copy-paste)}
+      [:> menu-entry* {:title (tr "workspace.shape.menu.copy-svg")
+                       :on-click handle-copy-svg}]
       [:> menu-entry* {:title (tr "workspace.shape.menu.copy-css")
                        :on-click handle-copy-css}]
       [:> menu-entry* {:title (tr "workspace.shape.menu.copy-css-nested")