Allow to open project in VS Code or other editor from the preview

[JonnyBurger]

Workflow:

I cd into a project, run npm start.
Then I realize I forgot to run code ., and I need to Ctrl+C, run it and then start the preview again.

Somewhere around here we could put a button "Open in VS Code", but of course it should be editor agnostic. The logic from the error overlay should be reused:

[JonnyBurger]

Better idea: Put it as another item in the File menu, then it can also be invoked using Cmd+K!

[MehmetAdemi]

/bounty 100

[algora-io]

💎 $100.00 bounty created by MehmetAdemi
👉 To solve this bounty, join Algora and reply here with /solution <PR_NUMBER> (e.g. /solution 42)
📝 To receive payouts, you will complete a one-time step with Stripe Connect
💵 Payment arrives in your account 2-5 days after the bounty is rewarded
💯 You keep 100% of the bounty award
🙏 Thank you for contributing to remotion-dev!

[mykeels]

How can an "Open in VS Code" button be editor-agnostic? Does it let you open in any editor of your choice? Perhaps, a link to the error overlay logic will help?

[MehmetAdemi]

Hi @mykeels, this was just an example. The button doesn't have to be "Open in VS Code" but more like "Open in IDE". It should let you open in any editor of your choice 👍🏼. Yes, a link like that would help. 👍🏼
It's much appreciated that you want to tackle this issue! Nevertheless, we are still trying out the bounty platform Algora this month. Since you already contributed once, we would look for another contributor if you don't mind. I would suggest if there isn't anyone willing to tackle this issue by Wednesday, you are free to go ahead and solve it. Is this OK?

[mykeels]

Sounds great!

[RohovDmytro]

I made a shallow search.

• The editor package should be updated
• use-menu-structure.tsx contains buttons handlers
• launch editor inspiration from react team:
  https://github.com/facebook/create-react-app/blob/19fa58d527ae74f2b6baa0867463eea1d290f9a5/packages/react-dev-utils/launchEditor.js

I'm not planning to proceed further. It should be easy to open a specific file, not sure about opening a specific folder.

[orimdominic]

I've started working on this

[MehmetAdemi]

@RohovDmytro Thanks for the input!
@orimdominic Let's go! 🚀

[uditkumar01]

Instead of showing a button, we can ask user to open the project in their preferred code editor, such as Visual Studio Code when the npm start command runs. This approach is much simpler and have a similar implementation here.

what do you think 🤔 ?

[orimdominic]

I think that @uditkumar01 has a point.
If the button is on the UI, how many times would the user need to use it? Once the editor is opened, they will have no need to click on the button again.

[JonnyBurger]

We already ask the user after they have initialized the project if they want to open it in their editor.
So this flow is intended for the all the times after the initialization of the project.

Allowing to do it via CLI is also a good idea, but it should never block the start of the preview server.
For simplicity, I suggest that we simply add a menu item that opens the folder in the users favorite editor from the preview.

This should be simple, as this functionality has already been implemented in the error overlay: https://github.com/remotion-dev/remotion/blob/a255b47c0daa632e4fbb49675853dff618a42788/packages/cli/src/preview-server/error-overlay/remotion-overlay/OpenInEditor.tsx

[MehmetAdemi]

/solution 1569

[algora-io]

👉 @orimdominic Complete your account setup and reply here again with /solution <PR_NUMBER> (e.g. /solution 42)

[orimdominic]

/solution 1569

[algora-io]

💡 Solution posted: #1569
👉 @MehmetAdemi To reward this solution, complete your payment on Algora

[algora-io]

🎉🎈 @orimdominic has been awarded $100.00! 🎈🎊