fix(docs): horizontal scroll triggering intersection observer #4341
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces modifications to the Changes
Possibly related PRs
Suggested reviewers
📜 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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
apps/docs/components/docs/components/codeblock.tsx (2)
102-105: LGTM! Consider extracting the style to a constant.The fix for the horizontal scrolling issue is elegant and well-documented. The comments clearly explain the problem and solution.
Consider extracting the inline styles to a constant or CSS class for better maintainability:
+const CODE_BLOCK_WRAPPER_STYLES = { + width: "fit-content", +} as const; <div ref={intersectionRef} style={{ height: isVisible ? "auto" : `${height}px`, - width: "fit-content", + ...CODE_BLOCK_WRAPPER_STYLES, }} >
Line range hint
1-300: Consider architectural improvements for better performance.Here are some suggestions to enhance the component's architecture:
- Extract the intersection observer logic into a custom hook for better reusability and separation of concerns.
- Optimize the selection change handler by using
useCallbackand moving it outside the effect.- Consider memoizing the
CodeBlockHighlightcomponent to prevent unnecessary re-renders.Here's an example of how to implement these improvements:
// Custom hook for handling code block visibility const useCodeBlockVisibility = (height: number) => { const [intersectionRef, isVisible] = useIntersectionObserver({ threshold: 0, }); return { ref: intersectionRef, style: { height: isVisible ? "auto" : `${height}px`, width: "fit-content", }, isVisible, }; }; // Optimized selection change handler const useSelectionChangeHandler = (codeString: string) => { const lastSelectionText = useRef<string | null>(null); const handleSelectionChange = useCallback(() => { if (!window.getSelection) return; // ... rest of the handler logic }, [codeString]); useEffect(() => { const debouncedHandler = debounce(handleSelectionChange, 1000); document.addEventListener("selectionchange", debouncedHandler); return () => document.removeEventListener("selectionchange", debouncedHandler); }, [handleSelectionChange]); }; // Memoized CodeBlockHighlight const MemoizedCodeBlockHighlight = memo(CodeBlockHighlight);
Peterl561
force-pushed
the
fix/codeblock-disappear-on-horizontal-scroll
branch
from
f16a82a to
7742902
Compare
There was a problem hiding this comment.
@Peterl561 Next time please create the branch from main instead of canary for doc changes (fixes only) so that the PR won't include unrelated changes. You may reset the branch to main and add back the changes, or you can recreate a new PR.
Closes #
📝 Description
Codeblockdisappears when out of view for performance reasonsCodeblocktriggers this as well due to weirddisplay: contentsbehaviorwidth: fit-contentsoCodeblockintersection observer ref remains in view when scrolled horizontally⛳️ Current behavior (updates)
white border added to wrapper for reference
before.mp4
🚀 New behavior
white border added to wrapper for reference
after.mp4
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
I have no idea why
display: contentsis used here. Was added in this commit.Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
divto fit content.