Fix editor jump when entering image edit mode

[juliaroldi]

Summary

Fixes the editor jumping/scrolling when an image is selected for editing. In createImageWrapper.ts, attaching the shadow root replaces the rendered light-DOM image with a taller edit wrapper (border + resize/rotate/crop handles), which grows the surrounding line box and causes the browser to scroll the selection back into view.

This pins the shadow host span to the original image's footprint — captured from image.offsetWidth/offsetHeight before the shadow root takes over — by setting display: inline-block, fixed width/height, vertical-align: bottom, and overflow: visible. The handles and wrapper still overflow the host visually, but the line box no longer grows, so the editor stays put. Pinning is skipped when the image has no measurable footprint (offsetWidth/offsetHeight of 0).

How to test

1. Run the unit tests:

   yarn test:fast --testPathPattern=createImageWrapper
   

   New tests cover both branches: the shadow host is pinned to the image footprint when dimensions are non-zero, and left untouched when they are 0.
2. Manual check: insert a tall image into the editor and place the caret/scroll so the image sits near the viewport edge, then click the image to enter edit mode.
   • Before this fix: the editor scrolls/jumps as the edit wrapper enlarges the line box.
   • After this fix: the image edit handles appear in place without the editor scrolling.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-06-18 20:58 UTC