Enhancement: Allow opening LiveView/LiveComponent in editor (#925)

* add path to file and open editor button

* change detecting editor logic

* add error flash

* change tooltip message

* add docs

* add link to docs

Author: srzeszut

assets/app/icons/external-link.svg

@@ -83,7 +83,7 @@ module.exports = {
         'survey-link': 'var(--survey-link)',
         'survey-link-hover': 'var(--survey-link-hover)',
       },
-      screens: { xs: '380px', md_ct: '860px' },
+      screens: { xs: '380px', md_ct: '860px', sm_bi: '1200px', sm_ct: '600px' },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],
         code: [

assets/app/tailwind.config.js

@@ -0,0 +1,38 @@
+# Open files in your editor
+
+This feature allows you to open files and specific lines directly from the **LiveDebugger** in your preferred editor.
+
+## How it works
+The debugger determines which editor to use by checking environment variables in the following order:
+1. **`ELIXIR_EDITOR`**: Elixir-specific editor (takes priority).
+2. **`TERM_PROGRAM`**: Automatically set by integrated terminals (e.g., in VS Code or Zed).
+3. **`EDITOR`**: Default system editor (used if ELIXIR_EDITOR is not set and integrated terminal is not detected).
+
+
+## Integrated Terminal Support
+If you are using an integrated terminal inside **VS Code** or **Zed**, the editor opens automatically via the `TERM_PROGRAM` variable.
+
+## GUI Editors
+Add the following to your shell profile (`.zshrc`, `.bashrc`, etc.) to ensure files open in your preferred editor from any terminal session:
+
+For Visual Studio Code
+    export ELIXIR_EDITOR="code --goto"
+For Zed
+    export ELIXIR_EDITOR="zed"
+
+For complex setups use the `__FILE__` and `__LINE__` placeholders.
+
+```bash
+export ELIXIR_EDITOR="my_editor +__LINE__ __FILE__"
+```
+
+## Terminal Editors
+
+Opening terminal editor directly is not supported because of the potential lock of the iex session. 
+We recommend using **Tmux** to open the file in a new window or a split pane.
+
+### Example configuration
+
+For Tmux and Helix
+    
+    export ELIXIR_EDITOR="tmux neww 'hx __FILE__:__LINE__'"

docs/open_in_editor.md

@@ -52,7 +52,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command:
-      'cd .. && MIX_ENV=test iex -e "Application.put_env(:live_debugger, :e2e?, true)" -S mix',
+      'cd .. && env -u TERM_PROGRAM -u EDITOR -u ELIXIR_EDITOR MIX_ENV=test iex -e "Application.put_env(:live_debugger, :e2e?, true)" -S mix',
     url: 'http://localhost:4005',
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',

e2e/playwright.config.ts

@@ -103,3 +103,8 @@ test('return button redirects to active live views dashboard', async ({
     dbgApp.getByRole('heading', { name: 'Active LiveViews' })
   ).toBeVisible();
 });
+
+test('Open in editor is disabled when envs are not set', async ({ dbgApp }) => {
+  const openButton = dbgApp.getByRole('button', { name: 'Open in editor' });
+  await expect(openButton).toBeDisabled();
+});

e2e/tests/node-inspector.spec.ts

@@ -0,0 +1,70 @@
+defmodule LiveDebugger.App.Debugger.Utils.Editor do
+  @moduledoc """
+  Utilities for opening editors
+  """
+
+  require Logger
+
+  @term_to_cmd %{
+    "vscode" => "code -g",
+    "zed" => "zed"
+  }
+
+  @spec detect_editor() :: String.t() | nil
+  def detect_editor() do
+    cond do
+      elixir_editor = System.get_env("ELIXIR_EDITOR") ->
+        elixir_editor
+
+      mapped_editor = Map.get(@term_to_cmd, System.get_env("TERM_PROGRAM")) ->
+        mapped_editor
+
+      system_editor = System.get_env("EDITOR") ->
+        system_editor
+
+      true ->
+        nil
+    end
+  end
+
+  @spec get_editor_cmd(String.t(), String.t(), integer()) :: String.t()
+  def get_editor_cmd(editor, file, line)
+      when is_binary(file) and is_integer(line) and is_binary(editor) do
+    if editor =~ "__FILE__" or editor =~ "__LINE__" do
+      editor
+      |> String.replace("__FILE__", inspect(file))
+      |> String.replace("__LINE__", Integer.to_string(line))
+    else
+      "#{editor} #{inspect(file)}:#{line}"
+    end
+  end
+
+  @spec run_shell_cmd(String.t()) :: :ok | {:error, term()}
+  def run_shell_cmd(command) do
+    case System.shell(command, stderr_to_stdout: true) do
+      {_output, 0} ->
+        :ok
+
+      {output, status} ->
+        msg = format_shell_error(command, output, status)
+        Logger.error(msg)
+        {:error, msg}
+    end
+  end
+
+  defp format_shell_error(command, output, 127) do
+    command_name =
+      output
+      |> String.split(":")
+      |> Enum.at(-2, command)
+      |> String.trim()
+
+    """
+    Error when opening editor: Could not find the "#{command_name}" command.
+    """
+  end
+
+  defp format_shell_error(_command, output, status) do
+    "Error when opening editor: Command failed with status #{status}. Output: #{String.trim(output)}"
+  end
+end

lib/live_debugger/app/debugger/utils/editor.ex

@@ -5,19 +5,35 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
 
   use LiveDebugger.App.Web, :live_component
 
+  import LiveDebugger.App.Web.Hooks.Flash, only: [push_flash: 3]
   alias LiveDebugger.App.Debugger.Structs.TreeNode
   alias LiveDebugger.App.Debugger.Queries.Node, as: NodeQueries
   alias LiveDebugger.App.Debugger.Web.LiveComponents.SendEventFullscreen
   alias LiveDebugger.App.Utils.Parsers
-
   alias LiveDebugger.App.Debugger.Web.Components.Pages
+  alias LiveDebugger.App.Debugger.Utils.Editor
+  alias LiveDebugger.App.Web.Hooks.Flash.LinkFlashData
+
+  @editor_docs_url "https://hexdocs.pm/live_debugger/open_in_editor.html"
 
   @impl true
+  def update(%{:editor_error => editor_error}, socket) do
+    socket
+    |> push_flash(:error, %LinkFlashData{
+      text: editor_error,
+      url: @editor_docs_url,
+      label: "See the docs"
+    })
+    |> ok()
+  end
+
   def update(assigns, socket) do
     socket
     |> assign(:id, assigns.id)
     |> assign(:node_id, assigns.node_id)
     |> assign(:lv_process, assigns.lv_process)
+    |> assign(:elixir_editor, Editor.detect_editor())
+    |> assign(:editor_docs_url, @editor_docs_url)
     |> assign_node_type()
     |> assign_async_node_module()
     |> ok()
@@ -43,17 +59,85 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
             <p>Couldn't load basic information about the node.</p>
           </.alert>
         </:failed>
-        <div class="flex flex-row gap-8 max-md_ct:flex-col max-md_ct:gap-2 md_ct:items-center p-3">
-          <div class="min-w-0 flex flex-col gap-2 max-md_ct:border-b max-md_ct:border-default-border">
+        <div class="flex flex-row gap-8 max-sm_bi:flex-col max-sm_bi:gap-4 sm_bi:items-center p-3">
+          <div class="min-w-0 flex flex-col gap-2">
             <span class="font-medium">Module:</span>
             <div class="flex gap-2 min-w-0">
-              <.tooltip id={@id <> "-current-node-module"} content={node_module} class="truncate">
-                <%= node_module %>
+              <.tooltip
+                id={@id <> "-current-node-module"}
+                content={node_module.module_name}
+                class="truncate"
+              >
+                <%= node_module.module_name %>
+              </.tooltip>
+              <.copy_button id="copy-button-module-name" value={node_module.module_name} />
+            </div>
+          </div>
+
+          <div class="min-w-0 flex flex-col gap-2">
+            <span class="font-medium">Path:</span>
+
+            <div class="flex flex-row gap-2">
+              <.tooltip
+                id={@id <> "-current-node-module-path"}
+                content={node_module.module_path <> ":" <> Integer.to_string(node_module.line)}
+                class="truncate"
+              >
+                <%= node_module.module_path <> ":" <> Integer.to_string(node_module.line) %>
               </.tooltip>
-              <.copy_button id="copy-button-module-name" value={node_module} />
+              <.copy_button id="copy-button-module-path" value={node_module.module_path} />
+            </div>
+          </div>
+
+          <div class="shrink-0 flex flex-col gap-2 max-sm_bi:border-b max-sm_bi:border-default-border pb-2">
+            <span class="font-medium">Type:</span>
+            <span><%= @node_type %></span>
+          </div>
+
+          <div class="flex flex-row gap-2 max-sm_ct:flex-col sm_bi:ml-auto">
+            <div class="flex flex-row gap-2">
+              <.button
+                class="shrink-0 sm_bi:ml-auto"
+                variant="secondary"
+                size="sm"
+                id="send-event-button"
+                disabled={not @lv_process.alive?}
+                phx-click="open-send-event"
+                phx-target={@myself}
+              >
+                <.icon name="icon-send" class="w-4 h-4" /> Send Event
+              </.button>
+
+              <div class="flex flex-row items-center gap-2">
+                <.button
+                  disabled={!@elixir_editor}
+                  class="shrink-0"
+                  variant="secondary"
+                  id="open-in-editor"
+                  size="sm"
+                  phx-click="open-in-editor"
+                  phx-target={@myself}
+                  phx-value-file={node_module.module_path}
+                  phx-value-line={node_module.line}
+                >
+                  <.icon name="icon-external-link" class="w-4 h-4" /> Open in Editor
+                </.button>
+
+                <.tooltip
+                  id={@id <> "-env-not-set"}
+                  content="Cannot open in editor? Click to see the documentation."
+                >
+                  <span :if={!@elixir_editor} class="text-error-text">
+                    <.link href={@editor_docs_url} target="_blank">
+                      <.icon name="icon-info" class="w-4 h-4" />
+                    </.link>
+                  </span>
+                </.tooltip>
+              </div>
             </div>
+
             <.button
-              class="shrink-0 md_ct:ml-auto md_ct:hidden mb-3"
+              class="shrink-0 sm_bi:ml-auto md_ct:hidden"
               variant="secondary"
               size="sm"
               id="show-components-tree-button"
@@ -62,22 +146,6 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
               <.icon name="icon-component" class="w-4 h-4" /> Show Components Tree
             </.button>
           </div>
-          <div class="shrink-0 flex flex-col gap-2">
-            <span class="font-medium">Type:</span>
-            <span><%= @node_type %></span>
-          </div>
-
-          <.button
-            class="shrink-0 md_ct:ml-auto"
-            variant="secondary"
-            size="sm"
-            id="send-event-button"
-            disabled={not @lv_process.alive?}
-            phx-click="open-send-event"
-            phx-target={@myself}
-          >
-            <.icon name="icon-send" class="w-4 h-4" /> Send Event
-          </.button>
         </div>
       </.async_result>
       <.live_component
@@ -97,6 +165,29 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
     |> noreply()
   end
 
+  def handle_event("open-in-editor", %{"file" => file, "line" => line}, socket) do
+    cmd = Editor.get_editor_cmd(socket.assigns.elixir_editor, file, line |> String.to_integer())
+
+    # Some editors may block iex, so we spawn a new process
+    component_id = socket.assigns.id
+    component_pid = self()
+
+    spawn(fn ->
+      case Editor.run_shell_cmd(cmd) do
+        :ok ->
+          :ok
+
+        {:error, reason} ->
+          send_update(component_pid, __MODULE__,
+            id: component_id,
+            editor_error: reason
+          )
+      end
+    end)
+
+    {:noreply, socket}
+  end
+
   defp assign_node_type(socket) do
     node_type =
       socket.assigns.node_id
@@ -116,12 +207,34 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
     assign_async(socket, :node_module, fn ->
       case NodeQueries.get_module_from_id(node_id, pid) do
         {:ok, module} ->
-          node_module = Parsers.module_to_string(module)
-          {:ok, %{node_module: node_module}}
+          line = get_module_line(module)
+
+          path = module.__info__(:compile) |> Keyword.get(:source) |> List.to_string()
+
+          module_name = Parsers.module_to_string(module)
+
+          {:ok,
+           %{
+             node_module: %{
+               module_name: module_name,
+               module_path: path,
+               line: line
+             }
+           }}
 
         :error ->
           {:error, "Failed to get node module"}
       end
     end)
   end
+
+  defp get_module_line(module) do
+    case Code.fetch_docs(module) do
+      {:docs_v1, _, _, _, _, %{source_annos: [{line, _column} | _]}, _} ->
+        line
+
+      _ ->
+        1
+    end
+  end
 end