feat: open file in local editor when clicking component tag

[tt-a1i]

Summary

Adds the ability to click on the floating label to open the selected element's source file directly in your local editor.

Changes

1. Click to open in editor: When clicking the component tag in the floating label, opens the file at the component's location in your preferred editor

2. Improved file path detection: Prioritizes data-component-path and data-component-line DOM attributes (added by tools like lovable-tagger) over React Fiber stack traces, providing more accurate source file locations

Supported Editors

• VS Code (default)
• Cursor
• Windsurf
• Trae
• WebStorm
• Zed

Configuration

Users need to configure their Vite project:

// vite.config.ts
export default defineConfig({
  define: {
    __PROJECT_ROOT__: JSON.stringify(process.cwd()),
    __PREFERRED_EDITOR__: JSON.stringify(process.env.REACT_GRAB_EDITOR || 'vscode'),
  },
})

Fallback Behavior

• If __PROJECT_ROOT__ is not defined, falls back to opening react-grab.com/open-file
• If no DOM attributes are found, falls back to React Fiber stack trace for file path detection

Closes #50

[vercel]

@tt-a1i is attempting to deploy a commit to the Million Team on Vercel.

A member of the Team first needs to authorize it.

[tt-a1i]

Hi @aidenybai 👋

I've updated this PR to also include JetBrains Rider support, which addresses #48.

I wanted to check if this approach works for you:

1. DOM attribute priority: The implementation now checks for data-component-path and data-component-line attributes first (commonly added by tools like lovable-tagger), falling back to the React Fiber stack if those aren't present. This provides more accurate source locations in projects using such tools.

2. Editor URL schemes: Using platform-standard URL schemes for each editor (vscode://, cursor://, rider://, etc.).

Would love to hear your thoughts on whether this direction makes sense for the project! Happy to adjust based on your feedback.

[tt-a1i]

Also curious about your thoughts on the interaction design:

Current approach:

• Click the component label → opens file in editor
• Uses data-component-path attribute (from tools like lovable-tagger) when available, falls back to React Fiber stack

Editor configuration:
You can configure your preferred editor via environment(.env):

REACT_GRAB_EDITOR=cursor  # or: vscode | windsurf | trae | webstorm | rider | zed

Defaults to vscode if not specified.

What do you think of this way?

[atresnjo]

ayy yeah this is the only missing piece

[kp-perigonai]

huge! 🎉 makes life so much easier