fix(rich-input.tsx): replace default scrollbar with themed scrollbar in Summary Editor, fixed issue #2420 #2421
Conversation
…in Summary Editor, fixed AmruthPillai#2420
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughRefactors the rich-input component's layout by wrapping Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
libs/ui/src/components/rich-input.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
libs/ui/src/components/rich-input.tsx (2)
libs/ui/src/components/scroll-area.tsx (1)
ScrollArea(5-40)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
🪛 ESLint
libs/ui/src/components/rich-input.tsx
[error] 1-50: Run autofix to sort these imports!
(simple-import-sort/imports)
🔇 Additional comments (2)
libs/ui/src/components/rich-input.tsx (2)
50-50: LGTM!The ScrollArea import is correctly added and necessary for the themed scrollbar implementation.
501-501: Border and padding appropriately moved to ScrollArea.The migration of border and padding styles from EditorContent to the ScrollArea wrapper is correct and aligns with the themed scrollbar implementation.
| className={cn( | ||
| "grid min-h-[160px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50", | ||
| hideToolbar && "pt-2", |
There was a problem hiding this comment.
🧩 Analysis chain
Verify focus-visible styles on EditorContent.
The focus-visible:outline-none and focus-visible:ring-1 styles are applied to the EditorContent container, but the actual focusable element is the contenteditable prose element inside. These focus styles may not trigger as expected.
Run the following script to check if there are other focus styles defined for the inner prose element or if focus delegation is handled elsewhere:
🏁 Script executed:
#!/bin/bash
# Search for focus-related styles in TipTap configuration and related files
rg -nP --type=tsx --type=ts -C3 'focus.*outline|outline.*focus|focus.*ring|ring.*focus' -g '!**/node_modules/**'Length of output: 27
I'll rerun the search with corrected ripgrep syntax. The issue is that ripgrep uses different type names; let me search using file glob patterns instead:
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for focus-related styles using glob patterns
rg -nP -C3 'focus.*outline|outline.*focus|focus.*ring|ring.*focus' --glob='*.tsx' --glob='*.ts'
Length of output: 22898
🏁 Script executed:
#!/bin/bash
# Also check the rich-input.tsx file directly to understand structure
rg -nP -C5 'EditorContent|contenteditable|prose' libs/ui/src/components/rich-input.tsxLength of output: 2355
🏁 Script executed:
#!/bin/bash
# Search for TipTap-related focus configurations
rg -nP -C3 'TipTap|Editor\(' --glob='*.tsx' --glob='*.ts' | head -100Length of output: 492
🏁 Script executed:
#!/bin/bash
# Look for focus event handlers or refs in the component
rg -nP -C3 'onFocus|onBlur|ref.*focus' libs/ui/src/components/rich-input.tsxLength of output: 0
🏁 Script executed:
#!/bin/bash
# Check if there are any CSS/style files related to EditorContent
fd -e css -e scss -e less | xargs rg -l 'EditorContent|prose' 2>/dev/nullLength of output: 33
---
🏁 Script executed:
```shell
#!/bin/bash
# Check the CSS file for prose-related focus styles
cat apps/artboard/src/styles/main.css | grep -A 5 -B 5 'prose\|focus'
Length of output: 403
🏁 Script executed:
#!/bin/bash
# Look for how EditorContent component might delegate focus or handle focus styling
rg -nP 'EditorContent|\.ProseMirror' --glob='*.tsx' --glob='*.ts' --glob='*.css' -C 2Length of output: 1408
🏁 Script executed:
#!/bin/bash
# Check if there's any global prose styling that handles focus
rg -nP 'prose.*focus|focus.*prose' --glob='*.css' --glob='*.scss'Length of output: 0
🏁 Script executed:
#!/bin/bash
# Verify TipTap prosemirror focus behavior - check for any refs or focus management
rg -nP 'useEditor|prosemirror|contenteditable' libs/ui/src/components/rich-input.tsx -A 10 -B 2Length of output: 1028
Apply focus styles to the inner contenteditable element, not the EditorContent container.
The focus-visible styles on the EditorContent wrapper (line 505) never trigger because the container itself is not focusable. Focus lands on the inner contenteditable element, which only has focus:outline-none with no alternative focus ring. Move the focus styling to editorProps.attributes (line 478) so it applies to the actual focusable prose element.
Lines to fix:
- Line 478: Add
focus:ring-1 focus:ring-primaryto the prose element - Line 505: Remove
focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primaryfrom the container
🤖 Prompt for AI Agents
In libs/ui/src/components/rich-input.tsx around lines 478 and 504-506, the
focus-visible styles are applied to the EditorContent wrapper which is not
focusable; move those focus-ring classes to the actual contenteditable element:
add "focus:ring-1 focus:ring-primary" (and keep "focus:outline-none") to the
prose element via editorProps.attributes at line 478, and remove
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
from the EditorContent container classes at lines 504-506 so the visible focus
ring appears on the real focus target.
There was a problem hiding this comment.
Pull Request Overview
Replace the default scrollbar in the Summary editor with a themed scrollbar by wrapping the editor content in a ScrollArea.
- Wrap EditorContent with ScrollArea to apply themed scrollbar
- Move border/padding styling from EditorContent to ScrollArea and remove overflow-y-scroll from editor content classes
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| attributes: { | ||
| class: cn( | ||
| "prose prose-sm prose-zinc max-h-[200px] max-w-none overflow-y-scroll dark:prose-invert focus:outline-none [&_*]:my-2", | ||
| "prose prose-sm prose-zinc max-h-[200px] max-w-none dark:prose-invert focus:outline-none [&_*]:my-2", |
There was a problem hiding this comment.
Removing overflow-y-scroll but keeping max-h-[200px] on the inner editor content caps its height without making it scrollable; the overflow will not be managed by the ScrollArea. Move the height constraint to the ScrollArea wrapper (or its viewport) and remove max-h-[200px] here so the content can grow and the ScrollArea can handle scrolling.
| {...props} | ||
| /> | ||
|
|
||
| <ScrollArea orientation="vertical" className="rounded-sm border px-3 py-2"> |
There was a problem hiding this comment.
The ScrollArea wrapper lacks a height constraint, so it won’t create a scrollable viewport. Add max-h-[200px] (moved from the inner editor) to the ScrollArea and let the child content grow; for example:
| "grid min-h-[160px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50", | ||
| hideToolbar && "pt-2", | ||
| className, |
There was a problem hiding this comment.
[nitpick] className is still applied to EditorContent, but the visible border/padding moved to the ScrollArea wrapper. This changes how consumers style the component and may be a breaking change (styling the border no longer works via className). For backward compatibility, consider applying className to the ScrollArea (e.g., className={cn("max-h-[200px] rounded-sm border px-3 py-2", className)}) and, if needed, introduce a separate prop (e.g., contentClassName) for EditorContent.
|
@AmruthPillai can I make changes based on Copilot response? |
|
This looks good to me, I wouldn't worry too much about copilot's reviews. Thank you so much for your contribution! |
2 participants
Old Summary editor with default scrollbar
New themed scrollbar added ✅
Summary by CodeRabbit
Refactor
Style