Rich text fixes/improvements #3087
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR introduces styling flexibility to the RichTextEditor system by adding a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/ui/oauth-apps/add-edit-integration-form.tsx (1)
244-270: LGTM! Rich text editor implementation is solid.The conversion from TextareaAutosize to RichTextEditor is well-implemented:
- Proper permission handling via
editable={canManageApp}and container disabled styling- Feature selection (headings, bold, italic, links) is appropriate for integration overview
- The
style="relaxed"and overflow/scrolling fixes align with PR objectives- Markdown extraction in onChange correctly syncs editor state with form data
- Initial value and null handling are correct
Optional: Consider improving type safety on line 255
The type assertion
(editor as any).getMarkdown()works correctly since markdown mode is enabled, but could be improved with proper typing. However, this would require changes to the RichTextProvider types in the @dub/ui package, which is outside the scope of this PR.If you decide to improve this in a future PR, you could add proper typing to the editor instance when markdown is enabled:
// In packages/ui/src/rich-text-area/rich-text-provider.tsx // Add a type that includes getMarkdown() when markdown is true
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsx(4 hunks)apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsx(1 hunks)apps/web/ui/messages/messages-panel.tsx(2 hunks)apps/web/ui/oauth-apps/add-edit-app-form.tsx(2 hunks)apps/web/ui/oauth-apps/add-edit-integration-form.tsx(2 hunks)apps/web/ui/partners/bounties/claim-bounty-modal.tsx(2 hunks)apps/web/ui/shared/max-characters-counter.tsx(1 hunks)apps/web/ui/shared/message-input.tsx(1 hunks)packages/ui/src/rich-text-area/rich-text-provider.tsx(5 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: TWilson023
Repo: dubinc/dub PR: 2872
File: apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/profile-details-form.tsx:180-189
Timestamp: 2025-09-24T15:50:16.414Z
Learning: TWilson023 prefers to keep security vulnerability fixes separate from refactoring PRs when the vulnerable code is existing and was only moved/relocated rather than newly introduced.
📚 Learning: 2025-10-15T01:05:43.266Z
Learnt from: steven-tey
Repo: dubinc/dub PR: 2958
File: apps/web/app/app.dub.co/(dashboard)/[slug]/settings/members/page-client.tsx:432-457
Timestamp: 2025-10-15T01:05:43.266Z
Learning: In apps/web/app/app.dub.co/(dashboard)/[slug]/settings/members/page-client.tsx, defer refactoring the custom MenuItem component (lines 432-457) to use the shared dub/ui MenuItem component to a future PR, as requested by steven-tey.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsxapps/web/ui/oauth-apps/add-edit-integration-form.tsx
📚 Learning: 2025-09-24T15:47:40.293Z
Learnt from: TWilson023
Repo: dubinc/dub PR: 2872
File: apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/about-you-form.tsx:152-157
Timestamp: 2025-09-24T15:47:40.293Z
Learning: The Button component from dub/ui automatically adds type="button" when an onClick prop is passed, preventing accidental form submissions without requiring explicit type specification. The implementation uses: type={onClick ? "button" : type}
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsxapps/web/ui/oauth-apps/add-edit-integration-form.tsx
📚 Learning: 2025-09-24T15:47:40.293Z
Learnt from: TWilson023
Repo: dubinc/dub PR: 2872
File: apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/about-you-form.tsx:152-157
Timestamp: 2025-09-24T15:47:40.293Z
Learning: The Button component from dub/ui automatically adds type="button" when an onClick prop is passed, preventing accidental form submissions without requiring explicit type specification.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsxapps/web/ui/oauth-apps/add-edit-app-form.tsxapps/web/ui/oauth-apps/add-edit-integration-form.tsx
📚 Learning: 2025-09-24T16:10:37.349Z
Learnt from: TWilson023
Repo: dubinc/dub PR: 2872
File: apps/web/ui/partners/partner-about.tsx:11-11
Timestamp: 2025-09-24T16:10:37.349Z
Learning: In the Dub codebase, the team prefers to import Icon as a runtime value from "dub/ui" and uses Icon as both a type and variable name in component props, even when this creates shadowing. This is their established pattern and should not be suggested for refactoring.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsxapps/web/ui/oauth-apps/add-edit-app-form.tsxapps/web/ui/messages/messages-panel.tsxapps/web/ui/oauth-apps/add-edit-integration-form.tsx
📚 Learning: 2025-09-24T15:47:40.293Z
Learnt from: TWilson023
Repo: dubinc/dub PR: 2872
File: apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/about-you-form.tsx:152-157
Timestamp: 2025-09-24T15:47:40.293Z
Learning: The Button component from dub/ui automatically sets type="button" when an onClick prop is passed and defaults to type="submit" otherwise, using the logic: type={props.onClick ? "button" : "submit"}. This prevents accidental form submissions when buttons are used for modal triggers or other non-form actions.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsx
🧬 Code graph analysis (5)
apps/web/ui/partners/bounties/claim-bounty-modal.tsx (1)
packages/ui/src/rich-text-area/rich-text-provider.tsx (1)
PROSE_STYLES(20-24)
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsx (2)
apps/web/ui/shared/max-characters-counter.tsx (1)
MaxCharactersCounter(4-26)apps/web/lib/constants/bounties.ts (1)
BOUNTY_DESCRIPTION_MAX_LENGTH(1-1)
apps/web/ui/oauth-apps/add-edit-app-form.tsx (3)
packages/ui/src/rich-text-area/rich-text-provider.tsx (1)
RichTextProvider(69-242)packages/ui/src/rich-text-area/index.tsx (1)
RichTextArea(9-32)packages/ui/src/rich-text-area/rich-text-toolbar.tsx (1)
RichTextToolbar(16-129)
apps/web/ui/messages/messages-panel.tsx (1)
packages/ui/src/rich-text-area/rich-text-provider.tsx (1)
PROSE_STYLES(20-24)
apps/web/ui/oauth-apps/add-edit-integration-form.tsx (3)
packages/ui/src/rich-text-area/rich-text-provider.tsx (1)
RichTextProvider(69-242)packages/ui/src/rich-text-area/index.tsx (1)
RichTextArea(9-32)packages/ui/src/rich-text-area/rich-text-toolbar.tsx (1)
RichTextToolbar(16-129)
⏰ 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)
- GitHub Check: build
🔇 Additional comments (13)
apps/web/ui/shared/max-characters-counter.tsx (1)
1-26: LGTM! Clean implementation of formatted character counting.The addition of
nFormatterfor both current and max values provides consistency, and the optionalspacedprop adds useful flexibility for different UI contexts. The implementation is straightforward and correct.apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsx (1)
514-514: LGTM! Appropriate styling choice for campaign editor.The
style="relaxed"prop applies the relaxed prose spacing variant, which is suitable for a campaign editor where content benefits from more breathing room.apps/web/ui/shared/message-input.tsx (1)
56-60: LGTM! Appropriate styling and overflow handling for message input.The
style="condensed"provides tight spacing suitable for message inputs, and the addition ofoverflow-auto scrollbar-hideenables clean scrolling when content exceeds the max height.apps/web/ui/partners/bounties/claim-bounty-modal.tsx (1)
419-421: LGTM! Standardizes prose styling for bounty descriptions.Applying
PROSE_STYLES.defaultensures consistent vertical spacing for markdown content across the application.apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/add-edit-bounty-sheet.tsx (2)
825-825: LGTM! Increased editor height improves UX for longer descriptions.Doubling the
max-heightfrommax-h-24tomax-h-48provides more space for bounty descriptions, which is appropriate given the complexity of bounty requirements.
850-856: LGTM! Consistent character counter implementation.Using the
MaxCharactersCountercomponent with thespacedprop provides formatted, readable character counts that align with the shared component pattern.apps/web/ui/messages/messages-panel.tsx (1)
192-193: LGTM! Standardizes message markdown styling.Applying
PROSE_STYLES.condensedprovides consistent tight paragraph spacing while also adding appropriate list spacing that was previously missing.apps/web/ui/oauth-apps/add-edit-app-form.tsx (1)
338-364: LGTM! Excellent UX improvement with rich text editor.The replacement of the plain textarea with a full-featured rich text editor significantly enhances the editing experience for OAuth app overviews. The implementation properly handles:
- Feature selection (headings, bold, italic, links)
- Markdown support for the overview content
- Disabled state via
canManageApp- Appropriate height constraints and scrolling
- Styling consistency with the new
style="relaxed"proppackages/ui/src/rich-text-area/rich-text-provider.tsx (4)
20-24: LGTM! Well-designed style system for rich text editors.The
PROSE_STYLESconstant provides a clean, reusable way to define spacing presets:
default: Balanced spacing suitable for most contentcondensed: Tight spacing for compact interfaces like messagesrelaxed: Maximum spacing by relying on default prose stylesThe
as constensures type safety, and exporting enables consistent usage across components.
40-40: LGTM! Type-safe style prop with sensible default.The
styleprop useskeyof typeof PROSE_STYLESfor type safety, ensuring only valid style variants can be passed. The default value of"default"maintains backward compatibility.Also applies to: 78-78
123-123: LGTM! Correct handling of editable prop for placeholder behavior.Using
editable ?? trueensures the placeholder displays correctly wheneditableis undefined. The comment clearly explains the rationale.
205-207: LGTM! Proper integration of style system into editor.The
PROSE_STYLES[style]application in the className correctly applies the selected spacing preset to the editor content.apps/web/ui/oauth-apps/add-edit-integration-form.tsx (1)
13-15: LGTM! Imports added correctly.The new RichTextArea, RichTextProvider, and RichTextToolbar imports are necessary for the rich text editor implementation and follow the existing import pattern.
prosespacing+consistencySummary by CodeRabbit
New Features
Improvements