diff --git a/exporter/src/app/http/export.cljs b/exporter/src/app/http/export.cljs index 62eb4a2fe..a3ff36dbd 100644 --- a/exporter/src/app/http/export.cljs +++ b/exporter/src/app/http/export.cljs @@ -95,8 +95,8 @@ (defn- find-filename-candidate [params used] (loop [index 0] - (let [candidate (str (str/slug (:name params)) - (str/trim (str/blank? (:suffix params ""))) + (let [candidate (str (:name params) + (:suffix params "") (when (pos? index) (str "-" (inc index))) (case (:type params) diff --git a/exporter/src/app/http/export_bitmap.cljs b/exporter/src/app/http/export_bitmap.cljs index e41b2e584..b2c46c9e2 100644 --- a/exporter/src/app/http/export_bitmap.cljs +++ b/exporter/src/app/http/export_bitmap.cljs @@ -62,8 +62,8 @@ (p/let [content (screenshot-object browser params)] {:content content :filename (or (:filename params) - (str (str/slug (:name params)) - (str/trim (:suffix params "")) + (str (:name params) + (:suffix params "") (case (:type params) :png ".png" :jpeg ".jpg"))) diff --git a/exporter/src/app/http/export_svg.cljs b/exporter/src/app/http/export_svg.cljs index f0efa14b5..a5e9e8955 100644 --- a/exporter/src/app/http/export_svg.cljs +++ b/exporter/src/app/http/export_svg.cljs @@ -261,8 +261,8 @@ (p/let [content (render-object browser params)] {:content content :filename (or (:filename params) - (str (str/slug (:name params)) - (str/trim (:suffix params "")) + (str (:name params) + (:suffix params "") ".svg")) :length (alength content) :mime-type "image/svg+xml"})) diff --git a/frontend/src/app/main/ui/handoff/attributes/image.cljs b/frontend/src/app/main/ui/handoff/attributes/image.cljs index 30ffb53d4..6fff88cc3 100644 --- a/frontend/src/app/main/ui/handoff/attributes/image.cljs +++ b/frontend/src/app/main/ui/handoff/attributes/image.cljs @@ -13,6 +13,7 @@ [cuerdas.core :as str] [app.config :as cfg] [app.util.i18n :refer [t]] + [app.util.dom :as dom] [app.main.ui.icons :as i] [app.util.code-gen :as cg] [app.main.ui.components.copy-button :refer [copy-button]])) @@ -20,18 +21,6 @@ (defn has-image? [shape] (and (= (:type shape) :image))) -(defn mtype->extension [mtype] - ;; https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types - (case mtype - "image/apng" "apng" - "image/avif" "avif" - "image/gif" "gif" - "image/jpeg" "jpg" - "image/png" "png" - "image/svg+xml" "svg" - "image/webp" "webp" - nil)) - (mf/defc image-panel [{:keys [shapes locale]}] (let [shapes (->> shapes (filter has-image?))] (for [shape shapes] @@ -52,7 +41,7 @@ (let [mtype (-> shape :metadata :mtype) name (:name shape) - extension (mtype->extension mtype)] + extension (dom/mtype->extension mtype)] [:a.download-button {:target "_blank" :download (if extension (str name "." extension) diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index c22da1aa6..d3d9b769c 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -115,7 +115,9 @@ (let [shape (unchecked-get props "shape") grow-type (unchecked-get props "grow-type") embed-fonts? (mf/use-ctx muc/embed-ctx) - {:keys [id x y width height content]} shape] + {:keys [id x y width height content]} shape + ;; We add 8px to add a padding for the exporter + width (+ width 8)] [:foreignObject {:x x :y y :id (:id shape) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs index f25469a8f..8dc48bf43 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs @@ -35,11 +35,15 @@ :exports exports}})) (defn- trigger-download - [name blob] + [filename blob] (let [link (dom/create-element "a") - uri (dom/create-uri blob)] + uri (dom/create-uri blob) + extension (dom/mtype->extension (.-type ^js blob)) + filename (if extension + (str filename "." extension) + filename)] (obj/set! link "href" uri) - (obj/set! link "download" (str/slug name)) + (obj/set! link "download" filename) (obj/set! (.-style ^js link) "display" "none") (.appendChild (.-body ^js js/document) link) (.click link) @@ -51,6 +55,11 @@ exports (:exports shape []) loading? (mf/use-state false) + filename (cond-> (:name shape) + (and (= (count exports) 1) + (not (empty (:suffix (first exports))))) + (str (:suffix (first exports)))) + on-download (mf/use-callback (mf/deps shape) @@ -62,7 +71,7 @@ (fn [{:keys [status body] :as response}] (js/console.log status body) (if (= status 200) - (trigger-download (:name shape) body) + (trigger-download filename body) (st/emit! (dm/error (tr "errors.unexpected-error"))))) (constantly nil) (fn [] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index ce3ab54f1..502e88be8 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -257,3 +257,15 @@ (defn get-data [^js node ^string attr] (.getAttribute node (str "data-" attr))) + +(defn mtype->extension [mtype] + ;; https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types + (case mtype + "image/apng" "apng" + "image/avif" "avif" + "image/gif" "gif" + "image/jpeg" "jpg" + "image/png" "png" + "image/svg+xml" "svg" + "image/webp" "webp" + nil))