mirrors/read-frog
2
0
Fork 0
mirror of https://github.com/mengxi-ream/read-frog.git synced 2026-04-30 01:56:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(selection-toolbar): add more cursor clearance after text selection (#1323)

Browse source
This commit is contained in:
MengXi 2026-04-12 21:33:00 -07:00 • committed by GitHub
commit da2e94bb15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 32 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.changeset/bright-tools-begin.md Normal file
View file

@ -0,0 +1,5 @@
---
"@read-frog/extension": patch
---
fix(selection-toolbar): add more cursor clearance after text selection

21
src/entrypoints/selection.content/selection-toolbar/__tests__/selection-toolbar.test.tsx
View file

@ -682,6 +682,27 @@ describe("selectionToolbar - positioning logic", () => {
})
})
it("should keep the bottom-right toolbar below the cursor to reduce accidental clicks", async () => {
render(
<div>
<SelectionToolbar />
<div data-testid="test-element">Test content</div>
</div>,
)
const target = screen.getByTestId("test-element")
const toolbar = getToolbarElement()
mockToolbarDimensions(toolbar, 200, 50)
await triggerMouseDownAndUp(target, 100, 100, 200, 200)
await waitFor(() => {
const topValue = Number.parseInt(toolbar.style.top)
expect(topValue - 200).toBeGreaterThanOrEqual(20)
})
})
it("should position toolbar at bottom-left when selecting from top-right to bottom-left", async () => {
render(
<div>

12
src/entrypoints/selection.content/selection-toolbar/index.tsx
View file

@ -199,18 +199,18 @@ function applyDirectionOffset(
tooltipWidth: number,
tooltipHeight: number,
): { x: number, y: number } {
const MARGIN = 12
const CURSOR_CLEARANCE = 20
switch (direction) {
case SelectionDirection.BOTTOM_RIGHT:
return { x: baseX - MARGIN, y: baseY + MARGIN }
return { x: baseX, y: baseY + CURSOR_CLEARANCE }
case SelectionDirection.BOTTOM_LEFT:
return { x: baseX - tooltipWidth + MARGIN, y: baseY + MARGIN }
return { x: baseX - tooltipWidth, y: baseY + CURSOR_CLEARANCE }
case SelectionDirection.TOP_RIGHT:
return { x: baseX - MARGIN, y: baseY - tooltipHeight - MARGIN }
return { x: baseX, y: baseY - tooltipHeight - CURSOR_CLEARANCE }
case SelectionDirection.TOP_LEFT:
return { x: baseX - tooltipWidth + MARGIN, y: baseY - tooltipHeight - MARGIN }
return { x: baseX - tooltipWidth, y: baseY - tooltipHeight - CURSOR_CLEARANCE }
default:
return { x: baseX - MARGIN, y: baseY + MARGIN }
return { x: baseX, y: baseY + CURSOR_CLEARANCE }
}
}