How would you enable the browser to auto-open the editor?

In the ElixirConf talk “Phoenix Field Notes” at 29:00, Chris McCord shows a nice trick where he clicks on an element in the browser, and the VsCode editor auto-opens to the component that generated the element. Wow!

When file-location annotations are available, how would you enable the browser to auto-open the editor? Is this something that would be done in a browser configuration, or would it be a JS concern built into phoenix.js, or something else? How would you select the editor? (Neovim vs VsCode vs …)

1 Like

We’ll use your configured ELIXIR_EDITOR, (which is what iex’s open/1 does already (check it out!)), and then on the server we just call System.cmd taking your ELIXIR_EDITOR and feeding it the file/line like iex does. Any editor with a cli that supports files/line args should work. ie here’s mine :slight_smile:

ELIXIR_EDITOR='code-insiders -g __FILE__:__LINE__ --reuse-window'
12 Likes

There was a thread about it here: Made a Source Code Inspector, useful in big projects or large teams

3 Likes

As of 12-July-2024, Phoenix uses PLUG_EDITOR. See PhoenixLiveReload for more information on jumping from the browser UI to HEEX function definitions.

1 Like

Once and if Make it easier to enable new phoenix_live_reload features by rhcarvalho · Pull Request #5799 · phoenixframework/phoenix · GitHub gets merged it should be as easy as uncommenting a few lines on new Phoenix apps :purple_heart:

I’ve been using this heex-jump feature for a couple days now - super handy. I found that the phoenix configuration was pretty simple, even the javascript cut-and-paste.

But I burned a bunch of time setting up the Protocol Handler, the XDG desktop files, learning how to test editor-launch from the browser and so forth.

I wrote bash scripts to make protocol-handler setup more simple and repeatable. Check out the repo at GitHub - andyl/plug_editor_launch: Editor Launch for PhoenixLiveReload