From ce85a1b1d572924a71964d8c11e0ed16d9343df3 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 10 Mar 2023 09:53:18 +0100
Subject: [PATCH] :bug: Fix problem with text editor in Safari

---
 CHANGES.md                                            |  1 +
 .../src/app/main/ui/workspace/shapes/text/editor.cljs | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index 0a863b0e75..caf44f2ffa 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -25,6 +25,7 @@
 - Fix problem on selection numeric inputs on Firefox [#2991](https://github.com/penpot/penpot/issues/2991)
 - Changed the text dominant-baseline to use ideographic [Taiga #4791](https://tree.taiga.io/project/penpot/issue/4791)
 - Viewer wrong translations [Github #3035](https://github.com/penpot/penpot/issues/3035)
+- Fix problem with text editor in Safari
 
 ### :arrow_up: Deps updates
 
diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
index a866d451ab..8d274e84db 100644
--- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
@@ -12,6 +12,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.geom.shapes.text :as gsht]
    [app.common.text :as txt]
+   [app.config :as cf]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
@@ -271,6 +272,12 @@
         text-modifier
         (mf/deref text-modifier-ref)
 
+        ;; For Safari It's necesary to scale the editor with the zoom level to fix
+        ;; a problem with foreignObjects not scaling correctly with the viewbox
+        maybe-zoom
+        (when (cf/check-browser? :safari)
+          (mf/deref refs/selected-zoom))
+
         shape (cond-> shape
                 (some? text-modifier)
                 (dwt/apply-text-modifier text-modifier)
@@ -299,5 +306,7 @@
       [:div {:style {:position "fixed"
                      :left 0
                      :top  (- (:y shape) y)
-                     :pointer-events "all"}}
+                     :pointer-events "all"
+                     :transform-origin "top left"
+                     :transform (when maybe-zoom (dm/fmt "scale(%)" maybe-zoom))}}
        [:& text-shape-edit-html {:shape shape :key (str (:id shape))}]]]]))