feat: Smart Props Editor Plugin for live prop editing#289
Draft
feat: Smart Props Editor Plugin for live prop editing#289
Conversation
- Plugin registers a 'Props' action in context menu with 'P' shortcut - Floating panel with Shadow DOM isolation for style encapsulation - Context-aware prop inference: style objects get CSS sub-editors, event handlers show read-only badges, boolean HTML attrs get toggles - Type-aware fallback: color pickers for hex/rgb strings, number steppers for numeric values, expandable key-value for objects - Style sub-editors: color pickers for *Color props, number+unit dropdowns for size props, selects for display/position/overflow - Live prop application for host fibers (pendingProps + scheduleUpdate) and composite fibers (overrideProps via React DevTools protocol) - Reset button restores original memoizedProps - Draggable panel header, viewport-aware positioning - Hides on deactivate, element select, or explicit close Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new built-in plugin
props-editorthat enables live editing of React component props directly from the React Grab overlay. Users can select an element, open the context menu, and click "Props" (or pressP) to launch a floating editor panel.How it works
Prop Type Inference
Two-layer inference system determines the appropriate editor for each prop:
Context-aware rules (prop name determines editor):
children(string) → Textareastyle(object) → Expandable CSS sub-editor sectionclassName→ Text inputsrc,href→ URL input with link previewdisabled,checked,hidden, etc. → Toggle switchplaceholder,title,alt, etc. → Text inputonClick,onChange, etc. → Read-only "(event handler)" badgekey,ref,$$typeof→ Hidden (internal React props)Type-aware fallback (value type as fallback):
#hexorrgb(...)→ Color pickerStyle sub-editors (CSS property-aware):
color,backgroundColor, etc. → Color pickerfontSize,width,padding*, etc. → Number + unit dropdown (px/rem/em/%)fontWeight→ Select (100-900 / normal/bold)display→ Select (block/flex/grid/none/...)position→ Select (static/relative/absolute/fixed/sticky)overflow→ Select (visible/hidden/scroll/auto)Applying Changes
div,span, etc.): Setsfiber.pendingProps+fiber.alternate.pendingProps, then callsrenderer.scheduleUpdate(fiber)renderer.overrideProps(fiber, path, value)via the React DevTools protocol, falling back to direct pendingProps mutationPanel UI
mount-root.ts) for zero style conflictsmemoizedPropsFiles changed
packages/react-grab/src/core/plugins/props-editor.ts— New plugin (prop inference, panel UI, prop application, plugin wiring)packages/react-grab/src/core/index.tsx— RegisterpropsEditorPluginas a built-inTesting
Summary by cubic
Adds a built-in
props-editorplugin to edit React component props live from the overlay. Open it from the context menu “Props” action or press P to launch a floating editor panel.New Features
P) to open a floating, draggable panel near the selected element. Shadow DOM isolated.children,style, boolean HTML attrs, and read-only event handlers; fallbacks include color pickers, numbers, toggles, and object expanders.display,position,overflow,fontWeight.pendingProps/scheduleUpdatefor host nodes andoverridePropsfor components; Reset restores originalmemoizedProps; auto-hides on deactivate or new selection; registered as a built-in inpackages/react-grab/src/core/index.tsx.Refactors
packages/react-grab/package.jsonandsrc/core/store.ts(no functional changes).Written for commit 208a65d. Summary will update on new commits.