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

🐛 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

View File

@ -367,6 +367,9 @@
(when (cf/check-browser? :safari)
(mf/deref refs/selected-zoom))
vbox
(mf/deref refs/vbox)
shape (cond-> shape
(some? text-modifier)
(dwt/apply-text-modifier text-modifier)
@ -385,13 +388,20 @@
selrect-width (:width selrect)
max-width (max width selrect-width)
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)
y (:y selrect)
y (case valign
"bottom" (+ y (- selrect-height height))
"center" (+ y (/ (- selrect-height height) 2))
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)
x (mth/min (dm/get-prop bounds :x)

View File

@ -53,7 +53,10 @@
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;
display: inline;
line-height: inherit;
@ -75,11 +78,11 @@
.grow-type-auto-width {
[data-itype="span"],
[data-itype="paragraph"] {
white-space: nowrap;
}
[data-itype="span"] {
white-space-collapse: preserve;
// Keep auto-width editing on a single preformatted line so trailing
// spaces are part of caret geometry and browser selection math.
white-space: pre;
overflow-wrap: normal;
word-break: keep-all;
}
}