Conversation
部分 fp-* 題目把程式碼直接寫進 prompt/選項文字，只能當純文字擠成一行； 改為統一搬進既有的 code 欄位（QuestionOption 新增選填 code 欄位）， 交給 CodeBlock 元件做語法上色渲染。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 35 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (27)
📝 WalkthroughWalkthroughQuestion data now supports structured code examples for questions and options. Web and mobile question cards and review screens render these examples conditionally, with mobile support for non-scrolling option code blocks. ChangesQuestion code data and rendering
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant QuestionData
participant QuestionReview
participant CodeBlock
QuestionData->>QuestionReview: Provide question.code and option.code
QuestionReview->>CodeBlock: Render present question and option code
CodeBlock-->>QuestionReview: Display highlighted code
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/QuestionCard.tsx (1)
59-67: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winFix invalid HTML DOM nesting.
React will throw a
validateDOMNestingwarning because<button>elements cannot contain block-level elements like<pre>(which is rendered by theCodeBlockcomponent). This produces invalid HTML and can cause hydration mismatches or accessibility issues.Refactor the container into a semantic
<div>withrole="button"and add keyboard event handlers to retain full accessibility.🔧 Proposed fix
- <button - key={opt.id} - className={cls} - disabled={answered} - onClick={() => onSelect(opt.id)} - > - {opt.code && <CodeBlock code={opt.code} />} - {opt.text} - </button> + <div + key={opt.id} + className={cls} + role="button" + tabIndex={answered ? -1 : 0} + aria-disabled={answered} + onClick={() => { + if (!answered) onSelect(opt.id) + }} + onKeyDown={(e) => { + if (!answered && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault() + onSelect(opt.id) + } + }} + > + {opt.code && <CodeBlock code={opt.code} />} + <span>{opt.text}</span> + </div>(Note: Verify that your CSS in
index.csssafely targets.option-btnwithout strictly requiring abuttontag. For disabled styling, you might need to swap:disabledfor[aria-disabled="true"].)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/QuestionCard.tsx` around lines 59 - 67, Replace the native button container in the option rendering with a semantic div using role="button", preserving the existing className, key, selection callback, and answered state via aria-disabled. Add keyboard handlers to trigger onSelect for Enter and Space while preventing default Space behavior, and update disabled-state CSS selectors from :disabled to [aria-disabled="true"] if required by .option-btn styling.
🧹 Nitpick comments (1)
apps/mobile/components/CodeBlock.tsx (1)
45-49: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider wrapping the text in a
<View>for consistent box-model behavior.Applying container styles (like borders and margins) directly to a
<Text>node works in React Native, but can occasionally cause padding or layout clipping quirks on Android. Wrapping it in a<View>matches the layout structure of theScrollViewbranch and ensures maximum consistency.💡 Proposed refactor
Make sure to import
Viewfromreact-nativeif it isn't already imported:- if (!scroll) { - return <Text style={[styles.wrap, styles.code]}>{highlight(code)}</Text>; - } + if (!scroll) { + return ( + <View style={styles.wrap}> + <Text style={styles.code}>{highlight(code)}</Text> + </View> + ); + }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/mobile/components/CodeBlock.tsx` around lines 45 - 49, Wrap the non-scroll `highlight(code)` output in a `View` within `CodeBlock`, applying the existing container styles to the `View` and keeping the code text styles on the text content so its layout matches the `ScrollView` branch. Add the `View` import from react-native if needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/data/questions/fp-14-nested-data.json`:
- Around line 100-101: Correct the nested-update example around badNestedUpdate
so its stated failure mode matches runtime behavior: with an empty keys array,
update receives an undefined object and throws a TypeError while accessing
object[key], rather than causing infinite recursion or stack overflow. Update
the associated prompt, explanation, and answer rationale consistently, unless
you modify the example so it genuinely recurses indefinitely.
---
Outside diff comments:
In `@apps/web/src/components/QuestionCard.tsx`:
- Around line 59-67: Replace the native button container in the option rendering
with a semantic div using role="button", preserving the existing className, key,
selection callback, and answered state via aria-disabled. Add keyboard handlers
to trigger onSelect for Enter and Space while preventing default Space behavior,
and update disabled-state CSS selectors from :disabled to [aria-disabled="true"]
if required by .option-btn styling.
---
Nitpick comments:
In `@apps/mobile/components/CodeBlock.tsx`:
- Around line 45-49: Wrap the non-scroll `highlight(code)` output in a `View`
within `CodeBlock`, applying the existing container styles to the `View` and
keeping the code text styles on the text content so its layout matches the
`ScrollView` branch. Add the `View` import from react-native if needed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 3e27beaf-3d0e-42b6-974f-33a7d0367226
📒 Files selected for processing (18)
apps/mobile/components/CodeBlock.tsxapps/mobile/components/QuestionCard.tsxapps/mobile/screens/QuestionReview.tsxapps/web/src/components/QuestionCard.tsxapps/web/src/components/QuestionReview.tsxapps/web/src/index.cssdocs/question-format.mdpackages/core/src/data/questions/fp-1-welcome.jsonpackages/core/src/data/questions/fp-10-first-class-functions-1.jsonpackages/core/src/data/questions/fp-13-chaining.jsonpackages/core/src/data/questions/fp-14-nested-data.jsonpackages/core/src/data/questions/fp-15-timeline-diagrams.jsonpackages/core/src/data/questions/fp-3-actions-calculations-data.jsonpackages/core/src/data/questions/fp-4-extract-calculations.jsonpackages/core/src/data/questions/fp-5-improve-actions.jsonpackages/core/src/data/questions/fp-6-copy-on-write.jsonpackages/core/src/data/questions/fp-7-defensive-copying.jsonpackages/core/src/types.ts
答題後 disabled 的 <button> 會被移出 tab 順序，改用 aria-disabled 的 div 保留鍵盤/螢幕報讀器可及性；CodeBlock 非捲動分支補上 View 容器維持排版 一致；fp-14-q5 修正成實際會拋出 TypeError 而非無限遞迴塞爆堆疊。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
修正 fp/jsa/jsb/react 題庫中「答案需要記得某章節內容才能理解」的設計問題： 把「第一章的坑」「react-4 學過的時序」「react-8 教過」這類跨關卡引用， 改成把該觀念直接在題目或解析裡講清楚，不假設使用者記得或已完成其他關卡。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1 participant
部分 fp-* 題目把程式碼直接寫進 prompt/選項文字，只能當純文字擠成一行；
改為統一搬進既有的 code 欄位（QuestionOption 新增選填 code 欄位），
交給 CodeBlock 元件做語法上色渲染。
Summary by CodeRabbit