github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-12 23:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8830 from penpot/superalex-fix-text-selection-on-vertical-align-middle-bottom

Browse Source 
🐛 Fix text selection on vertical align middle/bottom
This commit is contained in:
Aitor Moreno 2026-03-30 17:15:11 +02:00 committed by GitHub
commit 5ed949f2b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
View File

@ -205,6 +205,19 @@
(dwt/dispose! instance) (dwt/dispose! instance)
(st/emit! (dwt/update-editor nil))))) (st/emit! (dwt/update-editor nil)))))
(defn vertical-align-editor-classes
"Returns `[align-top? align-center? align-bottom?]` for the text editor root
flex layout. When `render-wasm?` is true, the `foreignObject` is already
positioned using the same vertical offset as Skia (`content_rect`); applying
`justify-content` center/end here would double the offset and misalign the DOM
editor with the rendered text, caret, and selection."
[content render-wasm?]
(if render-wasm?
[true false false]
[(= (:vertical-align content "top") "top")
(= (:vertical-align content) "center")
(= (:vertical-align content) "bottom")]))
(defn get-color-from-content [content] (defn get-color-from-content [content]
(let [fills (->> (tree-seq map? :children content) (let [fills (->> (tree-seq map? :children content)
(mapcat :fills) (mapcat :fills)
@ -225,7 +238,7 @@
"Text editor (HTML)" "Text editor (HTML)"
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]
::mf/props :obj} ::mf/props :obj}
[{:keys [shape canvas-ref]}] [{:keys [shape canvas-ref render-wasm?] :or {render-wasm? false}}]
(let [content (:content shape) (let [content (:content shape)
shape-id (dm/get-prop shape :id) shape-id (dm/get-prop shape :id)
fill-color (get-color-from-content content) fill-color (get-color-from-content content)
@ -244,6 +257,9 @@
text-color (or fill-color (get-default-text-color {:frame frame text-color (or fill-color (get-default-text-color {:frame frame
:background-color background-color}) color/black) :background-color background-color}) color/black)
[align-top? align-center? align-bottom?]
(vertical-align-editor-classes content render-wasm?)
fonts fonts
(-> (mf/use-memo (mf/deps content) #(get-fonts content)) (-> (mf/use-memo (mf/deps content) #(get-fonts content))
(h/use-equal-memo))] (h/use-equal-memo))]
@ -291,9 +307,9 @@
:grow-type-fixed (= (:grow-type shape) :fixed) :grow-type-fixed (= (:grow-type shape) :fixed)
:grow-type-auto-width (= (:grow-type shape) :auto-width) :grow-type-auto-width (= (:grow-type shape) :auto-width)
:grow-type-auto-height (= (:grow-type shape) :auto-height) :grow-type-auto-height (= (:grow-type shape) :auto-height)
:align-top (= (:vertical-align content "top") "top") :align-top align-top?
:align-center (= (:vertical-align content) "center") :align-center align-center?
:align-bottom (= (:vertical-align content) "bottom"))) :align-bottom align-bottom?))
:ref editor-ref :ref editor-ref
:data-testid "text-editor-content" :data-testid "text-editor-content"
:data-x (dm/get-prop shape :x) :data-x (dm/get-prop shape :x)
@ -435,4 +451,5 @@
[:div {:style style} [:div {:style style}
[:& text-editor-html {:shape shape [:& text-editor-html {:shape shape
:canvas-ref canvas-ref :canvas-ref canvas-ref
:render-wasm? render-wasm?
:key (dm/str shape-id)}]]]])) :key (dm/str shape-id)}]]]]))