[Devtools] Make link style value clickable

[otakustay]

I didn't find a suitable place to open feature request of react devtools.

We're developing a babel plugin to inject a useDebugValue into every component so that developers can immediately see the source file path of inspecting component like:

We are expecting this file:// url clickable and open the default code editor on clicked, like those image urls in DOM panel:

This can be a helpful feature to help developers quickly location source files, stackoverflow questions and more

[kkragoth]

Hello,

I am very interested in starting to contribute to this project and I would like to grab this issue since it seems quite easy to start but I've never set up this devtools project so I am little nervous. If I could be pointed in right direction with docs (I saw architecture and dev workflow from issue Combine view highlighting code but all links would be useful!) and starting place for this issue I'd be happy to try this as a first issue

[bvaughn]

@kkragoth Feel free to work on this issue!

I just posted a contributing guide which should hopefully have all of the info you need to get started:
https://github.com/facebook/react/blob/main/packages/react-devtools/CONTRIBUTING.md

[bvaughn]

Please also keep in mind that links should not be clickable when props are editable, (since this would interfere with editing), only when they're read-only

[PrinceRajRoy]

@bvaughn I was trying this out, any suggestion how to use/open the default code editor? It works fine with vscode url path as
vscode://file/{path to file}

2021-07-09.15-35-29.mp4

[otakustay]

Default editor should be registered system wide, I think it is enough to just open the file:// protocol url and leave OS to decide which app to handle this

[kkragoth]

@otakustay I thought the same but I started working in parallel and file:/// seems to be intercepted by Chrome (for security reasons) and that's the issue that @PrinceRajRoy might be talking about.

Screen.Recording.2021-07-09.at.18.54.23.mov

[PrinceRajRoy]

@kkragoth indeed, I tried with firefox too, same security issue.

[otakustay]

This is not a problem, the displayed string is fully controlled by developers, they can change it to vscode:// if their default editor is vscode, for devtools it just renders a link and all behavior should comply with browser.

[rainedoescode]

It looks like it may be possible to use process.env.EDITOR to check the user's default text editor, but it's not guaranteed to be a coding environment

[anushaNemilidinne]

Hello! is anyone working on this issue? Been using React for almost 2 years and I always wanted to contribute to this open source project.

[bvaughn]

So far as I know, there is no open PR for this so it's still up for grabs.