fix(settings/ui): id-keyed dependencies, RadioImageCard layout, rich-text caret#99
Conversation
evaluateDependencies looked up values[dep.key] directly. When the flat values map is keyed by the reconstructed dot-path instead of the plain field id, that lookup misses and every dependency-gated field collapses to hidden. Add layered resolution: direct id, then optional idIndex, then last dot-path-segment match. Makes the previously-dormant idIndex param useful and keeps plain-id dependencies working under either keying.
The contentEditable was bound with dangerouslySetInnerHTML={value}, so React
re-applied innerHTML on each keystroke-driven re-render and collapsed the
selection to the start — every typed char appeared to prepend (reversed/RTL
effect). Make it uncontrolled: drop dangerouslySetInnerHTML and only sync the
DOM from value/defaultValue when content differs and the editor isn't focused.
Image rendered at intrinsic size and was centered, leaving asymmetric whitespace that read as padding. Make the image block w-full and drop the centering wrapper so the illustration spans the full card width flush.
The base FieldLabel injects `*:data-[slot=field]:p-3` which targets the child Field with higher specificity than a `p-0!` on the Field itself, so under the global !important strategy it could not be overridden there. Neutralise it at the root via the same child-targeting utility (`*:data-[slot=field]:p-0`); twMerge collapses p-3 -> p-0 so the illustration sits flush.
FieldContent now uses the same px-5 py-4 padding as the header row, so the illustration is inset consistently with the title instead of bleeding flush.
|
Warning Review limit reached
More reviews will be available in 52 minutes and 14 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ 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 |
1 participant
Summary
Three independent fixes batched on this branch:
Settings — id-keyed dependency resolution (
settings-formatter.ts)evaluateDependenciesnow falls back when a direct id lookup misses: first an explicitidIndexmapping, then a stored key whose last dot-path segment equals the field id. Keeps id-keyed dependencies working regardless of whethervaluesis keyed by id or by reconstructed dot-path.RadioImageCard layout (
radio-group.tsx)Illustration now sits flush to the card edges. Neutralises the base
FieldLabel's*:data-[slot=field]:p-3via the same child-targeting utility (twMerge collapsesp-3→p-0) instead of ap-0!that the!importantstrategy couldn't override. Header/content padding bumped topx-5 py-4; title usestext-base text-foreground.RichTextEditor caret jump (
rich-text-editor.tsx)Dropped
dangerouslySetInnerHTML(re-applied innerHTML every keystroke → caret collapsed to start → reversed/RTL typing). Effect now writesinnerHTMLonly when content differs AND editor is not focused, so external updates still land but active typing keeps its caret.Test plan
npm run lint(warnings pre-existing in untouched files)npm run typecheck🤖 Generated with Claude Code