scroll and highlight selected line

added line numbers to source view, fixed css selectors

app/lib/firehose_web/live/microprints_live.ex

@@ -26,7 +26,7 @@ defmodule FirehoseWeb.MicroprintsLive do
        |> assign(:page_title, "Microprints")
        |> assign(:microprints, [])
        |> assign(:expanded_path, nil)
-       |> assign(:source_content, nil)
+       |> assign(:source_lines, nil)
        |> assign(:highlighted_path, nil)
        |> assign(:highlighted_line, nil)
        |> put_flash(:error, "Error loading microprints: #{inspect(e)}")}
@@ -80,8 +80,8 @@ defmodule FirehoseWeb.MicroprintsLive do
                   highlighted_line={@highlighted_line}
                 />
 
-                <%= if @expanded_path == path and @source_content do %>                  <.source_viewer
-                    source_content={@source_content}
+                <%= if @expanded_path == path and @source_lines do %>                  <.source_viewer
+                    source_lines={@source_lines}
                     highlighted_line={@highlighted_line}
                     language="elixir"
                     file_path={path}
@@ -120,7 +120,7 @@ defmodule FirehoseWeb.MicroprintsLive do
       |> assign(:highlighted_path, path)
       |> assign(:highlighted_line, highlighted)
       |> assign(:expanded_path, expanded)
-      |> assign(:source_content, nil)
+      |> assign(:source_lines, nil)
 
     {:noreply, push_patch(socket, to: build_params(socket))}
   end
@@ -133,7 +133,7 @@ defmodule FirehoseWeb.MicroprintsLive do
         _ -> path
       end
 
-    source_content =
+    source_lines =
       case expanded do
         nil -> nil
         ^path ->
@@ -146,7 +146,7 @@ defmodule FirehoseWeb.MicroprintsLive do
           end
       end
 
-    socket = socket |> assign(:expanded_path, expanded) |> assign(:source_content, source_content)
+    socket = socket |> assign(:expanded_path, expanded) |> assign(:source_lines, source_lines)
 
     {:noreply, push_patch(socket, to: build_params(socket))}
   end
@@ -158,7 +158,7 @@ defmodule FirehoseWeb.MicroprintsLive do
     highlighted_path = params["highlighted"]
     highlighted_line = if params["line"], do: String.to_integer(params["line"]), else: nil
 
-    source_content =
+    source_lines =
       if expanded_path do
         item = Enum.find(socket.assigns.microprints, &(&1.path == expanded_path))
 
@@ -170,7 +170,7 @@ defmodule FirehoseWeb.MicroprintsLive do
 
     socket
     |> assign(:expanded_path, expanded_path)
-    |> assign(:source_content, source_content)
+    |> assign(:source_lines, source_lines)
     |> assign(:highlighted_path, highlighted_path)
     |> assign(:highlighted_line, highlighted_line)
   end
@@ -325,13 +325,8 @@ defmodule FirehoseWeb.MicroprintsLive do
 
   defp read_source(abs_path) do
     case File.read(abs_path) do
-      {:ok, content} ->
-        content
-        |> String.replace("<", "&lt;")
-        |> String.replace(">", "&gt;")
-
-      {:error, _} ->
-        nil
+      {:ok, content} -> String.split(content, "\n")
+      {:error, _} -> nil
     end
   end
 
@@ -353,7 +348,17 @@ defmodule FirehoseWeb.MicroprintsLive do
       data-language={@language}
       style="background: var(--sv-bg); color: var(--sv-text);"
     >
-      <pre id={@viewer_id <> "-pre"} phx-update="ignore" class="m-0 p-2"><code class={"language-#{@language || "plaintext"}"}><%= @source_content %></code></pre>
+      <div class="sv-lines p-2">
+        <%= for {line, num} <- Enum.with_index(@source_lines || [], 1) do %>
+          <div
+            id={"line-#{num}"}
+            class={"sv-line" <> if @highlighted_line == num, do: " sv-line-highlighted", else: ""}
+          >
+            <span class="sv-line-number"><%= num %></span>
+            <span class="sv-line-content"><%= line %></span>
+          </div>
+        <% end %>
+      </div>
     </div>
     """
   end