github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-13 15:38:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9077 from penpot/ladybenko-13971-fix-trailing-whitespace

Browse Source 
🐛 Fix trailing whitespace behavior in v2 editor
This commit is contained in:
Aitor Moreno 2026-04-22 11:30:01 +02:00 committed by GitHub
commit e3981a0cf3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -367,6 +367,9 @@
(when (cf/check-browser? :safari) (when (cf/check-browser? :safari)
(mf/deref refs/selected-zoom)) (mf/deref refs/selected-zoom))
vbox
(mf/deref refs/vbox)
shape (cond-> shape shape (cond-> shape
(some? text-modifier) (some? text-modifier)
(dwt/apply-text-modifier text-modifier) (dwt/apply-text-modifier text-modifier)
@ -385,13 +388,20 @@
selrect-width (:width selrect) selrect-width (:width selrect)
max-width (max width selrect-width) max-width (max width selrect-width)
max-height (max height selrect-height) max-height (max height selrect-height)
;; During auto-width editing we keep the shape width trimmed, but the caret
;; must be able to move after trailing spaces. Expand only the editor
;; overlay up to one viewport width to avoid clipping caret rendering.
viewport-width (or (:width vbox) 0)
overlay-width (if (= (:grow-type shape) :auto-width)
(+ max-width viewport-width)
max-width)
valign (-> shape :content :vertical-align) valign (-> shape :content :vertical-align)
y (:y selrect) y (:y selrect)
y (case valign y (case valign
"bottom" (+ y (- selrect-height height)) "bottom" (+ y (- selrect-height height))
"center" (+ y (/ (- selrect-height height) 2)) "center" (+ y (/ (- selrect-height height) 2))
y)] y)]
[(assoc selrect :y y :width max-width :height max-height) transform]) [(assoc selrect :y y :width overlay-width :height max-height) transform])
(let [bounds (gst/shape->rect shape) (let [bounds (gst/shape->rect shape)
x (mth/min (dm/get-prop bounds :x) x (mth/min (dm/get-prop bounds :x)

15
frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss
View File

@ -53,7 +53,10 @@
font-size: 0px; font-size: 0px;
} }
[data-itype="inline"] { // Text spans emitted by @penpot/text-editor use `data-itype="span"`.
// Keep whitespace rules attached to the real node type so trailing spaces
// are handled consistently while editing.
[data-itype="span"] {
box-sizing: content-box; box-sizing: content-box;
display: inline; display: inline;
line-height: inherit; line-height: inherit;
@ -75,11 +78,11 @@
.grow-type-auto-width { .grow-type-auto-width {
[data-itype="span"], [data-itype="span"],
[data-itype="paragraph"] { [data-itype="paragraph"] {
white-space: nowrap; // Keep auto-width editing on a single preformatted line so trailing
} // spaces are part of caret geometry and browser selection math.
white-space: pre;
[data-itype="span"] { overflow-wrap: normal;
white-space-collapse: preserve; word-break: keep-all;
} }
} }