Skip to content

fix(diffs): place selection action above bottom-up selections#922

Merged
mdo merged 8 commits into
beta-1.3from
mdo/beta-selection-action
Jul 6, 2026
Merged

fix(diffs): place selection action above bottom-up selections#922
mdo merged 8 commits into
beta-1.3from
mdo/beta-selection-action

Conversation

@mdo

@mdo mdo commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Render the selection-action popover above the selection for backward (bottom-up) selections instead of covering its first line, and preserve the selection direction across a refocus so the caret/popover no longer jump to the bottom.

@mdo mdo requested review from ije and necolas June 30, 2026 21:26
@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pierre-docs-diffs Ready Ready Preview Jul 3, 2026 10:07am
pierre-docs-diffshub Ready Ready Preview Jul 3, 2026 10:07am
pierre-docs-trees Ready Ready Preview Jul 3, 2026 10:07am
pierrejs-diff-demo Ready Ready Preview Jul 3, 2026 10:07am

Request Review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 51568f0433

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/diffs/src/editor/editor.ts Outdated

@necolas necolas left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm once agents are appeased

@mdo mdo force-pushed the mdo/beta-selection-action branch from 51568f0 to 0fb995a Compare June 30, 2026 22:06
@mdo

mdo commented Jun 30, 2026

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0fb995ad81

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/diffs/src/editor/editor.ts Outdated
Comment thread packages/diffs/src/editor/editor.ts Outdated
mdo added 5 commits July 1, 2026 10:39
Render the selection-action popover above the selection for backward
(bottom-up) selections instead of covering its first line, and preserve
the selection direction across a refocus so the caret/popover no longer
jump to the bottom.
@mdo

mdo commented Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

Follow-up from the reviews here and latest beta-1.3 changes—this extends the edge-avoidance logic to the marker hover popup, fixes a virtualization edge case, and tightens things up a bit.

What changed

  • Pulled choosePopoverPlacement out into a shared popoverPlacement.ts and hooked the marker hover popup up to it too, so hovering a squiggle near the bottom of the screen now flips the popup above instead of clipping off-screen.
  • The selection-action popover could try to anchor its fallback position to a line that isn't even rendered (outside the virtualized window), which produced garbage coordinates for long backward selections. Now it just checks visibility first.
  • Added a little hysteresis (4px) to the flip decision so a selection sitting right on the boundary doesn't flicker between above/below on every keystroke.
  • The popover now re-checks its placement on scroll/resize instead of staying stuck on whatever side it picked last.
  • Double-checked that IME composition doesn't break the direction-preservation fix — turns out it's already covered.

Bonus find: the existing refocus keeps a backward selection backward test wasn't worth it — it passed even with the real fix ripped out, because leftover focus-handling state was silently swallowing the test's event before it ever hit the code being tested. Fixed that too.

Added tests for all of the above (marker popup placement, the fallback-visibility fix, hysteresis, composition). Full diffs suite (804 tests) + lint/format/typecheck all green.

@ije

ije commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator
Screenshot 2026-07-02 at 08 53 15 The selection action widget position on a backward selection shifted 2 lines

update: fixed in 51512b6

@mdo

mdo commented Jul 2, 2026

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 51512b6549

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +62 to +64
this.#resizeObserver = new ResizeObserver(() => {
this.#height = this.#popover.offsetHeight;
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Recompute placement when the action content resizes

When the consumer-rendered selection action changes height after it is mounted (for example async content, loaded icons, or responsive wrapping), this observer only updates the cached height and never schedules #updateSelectionActionPopover(). For selections near the top/bottom of the visible scrollport, the popover can remain on a side that no longer fits and be clipped until some unrelated selection/scroll/resize event forces a reposition.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed in 471928e

@ije ije left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this works great to me

@mdo mdo merged commit 84b5573 into beta-1.3 Jul 6, 2026
8 checks passed
@mdo mdo deleted the mdo/beta-selection-action branch July 6, 2026 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants