fix: component CodeBlock not able to highlight lines. #3480
Conversation
SahilDahekar
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe changes modify the Changes
Assessment against linked issues
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for asyncapi-website ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
SahilDahekar
changed the title
![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 (2)
components/editor/CodeBlock.tsx (2)
278-286: LGTM! Consider adding type annotation for better maintainability.The refactored lineNumberStyle implementation looks good with improved color contrast and explicit spacing.
Consider adding a type annotation for better maintainability:
- const styles = { + const styles: React.CSSProperties = {
292-303: LGTM! Consider performance optimization.The switch from Tailwind classes to explicit styles successfully fixes the highlighting issue. However, consider memoizing the styles to avoid creating new objects for each line.
Consider this optimization:
+ const baseStyle: React.CSSProperties = { paddingRight: '2rem' }; + const highlightedStyle: React.CSSProperties = { + ...baseStyle, + display: 'block', + width: '100%', + backgroundColor: '#3e4d64' + }; lineProps={(lineNumber: number) => ({ - style: { - paddingRight: '2rem', - ...(isHighlighted && { - display: 'block', - width: '100%', - backgroundColor: '#3e4d64' - }) - } + style: isHighlighted ? highlightedStyle : baseStyle })}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/editor/CodeBlock.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
components/editor/CodeBlock.tsx
[error] 290-290: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3480--asyncapi-website.netlify.app/ |
|
@SahilDahekar have a look at coderabbitai suggestions |
Done 👍 |
|
Technically looks fixed: https://deploy-preview-3480--asyncapi-website.netlify.app/docs/tutorials/getting-started/servers but I do not own code here for quite some time, so not reviewing if applied approach was correct |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3480 +/- ##
=======================================
Coverage 86.59% 86.59%
=======================================
Files 21 21
Lines 664 664
=======================================
Hits 575 575
Misses 89 89 ☔ View full report in Codecov by Sentry. |
Description
linePropsproperty onHighlightcomponent exported styles withclassNameproperty using tailwind css which for some reasonreact-sytax-highlightlibrary was not able to recognize.lineProps&lineNumberStylelogic to export exact css object instead of tailwind css.Related issue(s)
Fixes #3478
Summary by CodeRabbit