feat(editor): Add rounded selection#757
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 292fc8c32b
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| if (wrapStartChar === wrapEndChar) { | ||
| segmentWidth = this.#metrics.ch; |
There was a problem hiding this comment.
In wrap mode, any segment where wrapStartChar === wrapEndChar now gets a 1ch highlight. This happens for a multi-line selection ending at column 0 of a wrapped line, and also at soft-wrap boundaries where the selection only touches the next visual segment; the old code skipped those duplicate zero-width slices or rendered 0 width at the true line end. As a result the editor shows an extra highlighted cell on lines/segments that are not actually selected.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
Adds configurable rounded selection rendering to the diffs editor, updating selection range rendering and CSS while also reorganizing nearby editor-related types.
Changes:
- Adds
roundedSelectiontoEditorOptions. - Reworks selection range rendering to support rounded-corner overlays.
- Adds CSS selectors for rounded selection corners and renames component option types.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
packages/diffs/src/types.ts |
Renames/reorders editor and component-related exported interfaces. |
packages/diffs/src/editor/editor.ts |
Adds rounded-selection option and rewrites selection rendering/caching logic. |
packages/diffs/src/editor/css.ts |
Adds CSS rules for rounded selection corner rendering. |
Comments suppressed due to low confidence (1)
packages/diffs/src/types.ts:896
- Renaming the exported
DiffsEditorOptionstype without leaving an alias is a public API break:types.tsis re-exported fromsrc/index.ts, and there are no remainingDiffsEditorOptionsexports. Existing consumers importing this type will fail to compile even though this PR is about selection rendering.
export interface DiffsComponentOptions extends BaseCodeOptions {
enableGutterUtility?: boolean;
enableLineSelection?: boolean;
expandUnchanged?: boolean;
lineHoverHighlight?: 'disabled' | 'both' | 'number' | 'line';
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (wrapStartChar === wrapEndChar) { | ||
| segmentWidth = this.#metrics.ch; |
| if (!isLastLine) { | ||
| segmentWidth += this.#metrics.ch; | ||
| } |
| const top = this.#getLineY(line) + wrapLine * lineHeight; | ||
| const css = `width:${ch}px;transform:translateX(${left}px) translateY(${top}px);`; |
| if ( | ||
| previousSelectionRange === undefined || | ||
| previousSelectionRange.line !== line || | ||
| previousSelectionRange.wrapLine !== wrapLine | ||
| ) { | ||
| renderCtx.previousSelectionRange = { | ||
| element, | ||
| line, | ||
| wrapLine, | ||
| left, | ||
| width, | ||
| }; | ||
| } |
| height: 100%; | ||
| background-color: var(--diffs-bg); | ||
| } | ||
| [data-rtl] { |
| // Render one selection range div for a single visual line. `applyEolSpacing` | ||
| // controls whether the trailing one-character "line continuation" marker is | ||
| // appended at the end. For wrapped logical lines this must be false on every | ||
| // visual segment except the last one, since an intra-line wrap is not a real | ||
| // newline and shouldn't visually extend past the wrapped content. |
| if ( | ||
| previousSelectionRange === undefined || | ||
| end <= previousSelectionRange.left | ||
| ) { | ||
| ['rtl', 'rtr', 'rbl', 'rbr'].forEach((key) => { | ||
| dataset[key] = ''; | ||
| }); | ||
| } else { |
↓
Can be disabled by adding: