🐛 Fix problems with text editor selection

CHANGES.md

@@ -30,6 +30,7 @@
 - Remove legacy system user and team [#843](https://github.com/penpot/penpot/issues/843)
 - Fix problem with zoom an selection rect [#845](https://github.com/penpot/penpot/issues/845)
 - Fix problem displaying team statistics [#859](https://github.com/penpot/penpot/issues/859)
+- Fix problems with text editor selection [Taiga #1546](https://tree.taiga.io/project/penpot/issue/1546)
 
 ### :arrow_up: Deps updates
 

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -163,10 +163,18 @@
    ::mf/wrap-props false
    ::mf/forward-ref true}
   [props ref]
-  (let [{:keys [id x y width height grow-type] :as shape} (obj/get props "shape")]
+  (let [{:keys [id x y width height grow-type] :as shape} (obj/get props "shape")
-    [:foreignObject {:transform (gsh/transform-matrix shape)
+        clip-id (str "clip-" id)]
-                     :x x :y y
+    [:g.text-editor {:clip-path (str "url(#" clip-id ")")}
-                     :width  (if (#{:auto-width} grow-type) 100000 width)
+     [:defs
-                     :height (if (#{:auto-height :auto-width} grow-type) 100000 height)}
+      ;; This clippath will cut the huge foreign object we use to calculate the automatic resize
+      [:clipPath {:id clip-id}
+       [:rect {:x x :y y
+               :width (+ width 8) :height (+ height 8)
+               :transform (gsh/transform-matrix shape)}]]]
+     [:foreignObject {:transform (gsh/transform-matrix shape)
+                      :x x :y y
+                      :width  (if (#{:auto-width} grow-type) 100000 width)
+                      :height (if (#{:auto-height :auto-width} grow-type) 100000 height)}
 
-     [:& text-shape-edit-html {:shape shape :key (str id)}]]))
+      [:& text-shape-edit-html {:shape shape :key (str id)}]]]))