# Fix cursor positioning, viewport motion based on cursor movement, horizontal scrollbar activity and overall scrollbar design. #386
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Calculates line content width based on rendered text, improving layout accuracy. - Ensures proper handling of tabs and variable-width characters. - Normalizes line endings on file read/write to prevent inconsistencies. - Recalculates metrics when font settings change to avoid layout issues.
Enhances the editor's scrollbar appearance and behavior by: - Implementing theme-aware scrollbar styling using CSS variables for better customization. - Ensuring consistent scrollbar behavior across different browsers. - Optimizing scrollbar size calculation based on zoom level. - Maintaining editor alignment and rendering quality.
This change fixes the cursor location on the last position of any row
WalkthroughThis PR addresses cursor synchronization and layout precision issues by implementing line-ending normalization, precise character width measurement infrastructure with off-DOM measurement contexts, dynamic viewport width calculations based on font metrics, and theme-aware scrollbar styling. It also improves zoom level boundary handling. Changes
Sequence Diagram(s)sequenceDiagram
participant Editor as Editor Component
participant Layout as useEditorLayout Hook
participant Fonts as document.fonts
participant Position as position.ts Utils
participant Cache as Measurement Cache
Editor->>Layout: Render with fontSize/fontFamily
activate Layout
rect rgb(200, 220, 255)
Note over Layout,Fonts: Font Loading Detection
Layout->>Fonts: Monitor ready/loadingdone events
Fonts-->>Layout: Font loaded
Layout->>Cache: clearCharWidthCache()
Cache-->>Layout: Cache cleared
end
Layout->>Position: useEffectDependency: fontFamily changed
activate Position
Position->>Cache: Create MeasurementContext
Cache-->>Position: Context ready (keyed by font+size+tabSize)
Position->>Position: computeCharacterWidths (full precision)
Position-->>Layout: Metrics updated
deactivate Position
Layout->>Layout: Compute effectiveFontFamily
Layout->>Position: useMemo(includeFont dependencies)
activate Position
Position->>Cache: getCharWidthCached(char, fontSize, fontFamily)
Cache-->>Position: Exact width (no rounding)
Position-->>Layout: Layout metrics
deactivate Position
deactivate Layout
Editor->>Editor: Render with precise layout
sequenceDiagram
participant Content as File Content
participant Buffer as Buffer Store
participant AppStore as App Store
participant Disk as Disk/Remote
Content->>Buffer: Load/Update Content
activate Buffer
Buffer->>Buffer: normalizeLineEndings(content)
Note over Buffer: Detect & store lineEnding
Buffer-->>AppStore: Buffer updated (content, lineEnding)
deactivate Buffer
AppStore->>AppStore: Autosave/Save triggered
activate AppStore
AppStore->>AppStore: applyLineEnding(content, lineEnding)
Note over AppStore: Transform LF back to original format
AppStore->>Disk: Write transformed content
Disk-->>AppStore: ✓ Saved
deactivate AppStore
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (16)
✅ Files skipped from review due to trivial changes (10)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (1)src/features/editor/components/rendering/viewport.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/editor/rendering/editor-viewport.tsx (1)
67-82: Avoid recalculating every line’s width on each change.
maxLineContentWidthnow iterates over every entry inlinesand runsgetLineRenderWidthper render. On large files this is O(total characters) per keystroke and will hammer responsiveness. Please cache or incrementally track the widest line instead of recomputing the full file on every update (e.g., maintain the max in a store and update only when affected lines change).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/components/editor/editor-stylesheet.tsx(1 hunks)src/components/editor/rendering/editor-viewport.tsx(5 hunks)src/hooks/use-editor-layout.ts(2 hunks)src/stores/app-store.ts(4 hunks)src/stores/buffer-store.ts(5 hunks)src/stores/zoom-store.ts(2 hunks)src/utils/editor-position.ts(3 hunks)src/utils/line-endings.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
src/stores/app-store.ts (2)
src/utils/line-endings.ts (1)
applyLineEnding(44-51)src/file-system/controllers/platform.ts (1)
writeFile(37-45)
src/hooks/use-editor-layout.ts (3)
src/stores/editor-settings-store.ts (1)
useEditorSettingsStore(29-52)src/stores/editor-view-store.ts (1)
useEditorViewStore(127-155)src/utils/editor-position.ts (3)
clearCharWidthCache(289-295)getLineHeight(60-63)getCharWidth(69-93)
src/stores/buffer-store.ts (2)
src/utils/line-endings.ts (2)
LineEnding(1-1)normalizeLineEndings(22-39)src/types/buffer.ts (1)
Buffer(1-14)
src/components/editor/rendering/editor-viewport.tsx (6)
src/stores/editor-settings-store.ts (1)
useEditorSettingsStore(29-52)src/hooks/use-editor-layout.ts (1)
useEditorLayout(7-62)src/stores/editor-view-store.ts (1)
useEditorViewStore(127-155)src/stores/zoom-store.ts (1)
useZoomStore(27-90)src/utils/editor-position.ts (2)
getLineRenderWidth(250-284)getScrollbarSize(328-339)src/constants/editor-constants.ts (1)
EDITOR_CONSTANTS(2-45)
src/utils/editor-position.ts (1)
src/constants/editor-constants.ts (1)
EDITOR_CONSTANTS(2-45)
Comment on lines
+133
to
135
| overflowX: "hidden", | ||
| overflowY: "auto", | ||
| height: `${viewportHeight}px`, |
There was a problem hiding this comment.
Horizontal scrolling regressed by overflowX: hidden.
Setting the viewport container to overflowX: "hidden" removes the horizontal scroll area entirely, so scrollbars never appear and scrollLeft stays pinned at zero. This blocks the fix we need for horizontal scrolling—the code content becomes inaccessible once it exceeds the viewport width. Please restore horizontal overflow (e.g., switch back to auto) so the editor can expose horizontal scroll again.
- overflowX: "hidden",
- overflowY: "auto",
+ overflowX: "auto",
+ overflowY: "auto",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| overflowX: "hidden", | |
| overflowY: "auto", | |
| height: `${viewportHeight}px`, | |
| overflowX: "auto", | |
| overflowY: "auto", | |
| height: `${viewportHeight}px`, |
🤖 Prompt for AI Agents
In src/components/editor/rendering/editor-viewport.tsx around lines 133 to 135,
the style sets overflowX: "hidden" which removes the horizontal scrollbar and
pins scrollLeft to zero; change overflowX back to "auto" (or remove the explicit
overflowX so it inherits/uses overflow: auto) so horizontal overflow is allowed
and the editor can scroll horizontally when content exceeds the viewport width.
Updated the import statement for `getLineRenderWidth` and `getScrollbarSize` to reflect the new file structure under the features directory.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fix cursor positioning, viewport motion based on cursor movement, horizontal scrollbar activity and overall scrollbar design.
Improve layout accuracy by calculating line content width based on rendered text and handling tabs and variable-width characters.
Normalize line endings on file read/write to prevent inconsistencies.
Optimize scrollbar appearance and behavior with theme-aware styling and consistent behavior across browsers.
Fix cursor location on the last position of any row by removing scrollbar gutter settings.
Ensure horizontal scrollbar functionality works correctly.
Related Issues
Fixes #382
Summary by CodeRabbit
Release Notes
New Features
Improvements