From 790b9e764bcfebce76556a562dc08569fd35161d Mon Sep 17 00:00:00 2001
From: Javier Goday <jgoday@gmail.com>
Date: Mon, 26 Apr 2021 14:22:33 +0200
Subject: [PATCH] Feature cell link (#239)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* #99: Add anchor links to sections and cells

* Restores some css classes removed by error

* Focus cell based on anchor link

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
---
 assets/js/session/index.js                    | 22 +++++++++++++++++++
 .../live/session_live/cell_component.ex       | 14 ++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/assets/js/session/index.js b/assets/js/session/index.js
index 8d63c6b45..2e7433dff 100644
--- a/assets/js/session/index.js
+++ b/assets/js/session/index.js
@@ -59,6 +59,14 @@ const Session = {
       handleCellIndicatorsClick(this, event);
     });
 
+    window.addEventListener(
+      "phx:page-loading-stop",
+      () => {
+        focusCellFromUrl(this);
+      },
+      { once: true }
+    );
+
     // DOM setup
 
     updateSectionListHighlight();
@@ -282,6 +290,20 @@ function handleCellIndicatorsClick(hook, event) {
   }
 }
 
+/**
+ * Focuses cell based on the given URL.
+ */
+function focusCellFromUrl(hook) {
+  const hash = window.location.hash;
+
+  if (hash.startsWith("#cell-")) {
+    const cellId = hash.replace(/^#cell-/, "");
+    if (getCellById(cellId)) {
+      setFocusedCell(hook, cellId);
+    }
+  }
+}
+
 /**
  * Handles the main notebook area being scrolled.
  */
diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex
index 87a164f35..aad8cb9f7 100644
--- a/lib/livebook_web/live/session_live/cell_component.ex
+++ b/lib/livebook_web/live/session_live/cell_component.ex
@@ -19,6 +19,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     ~L"""
     <div class="mb-1 flex items-center justify-end">
       <div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
+        <%= render_cell_anchor_link(@cell_view) %>
         <span class="tooltip top" aria-label="Edit content" data-element="enable-insert-mode-button">
           <button class="icon-button">
             <%= remix_icon("pencil-line", class: "text-xl") %>
@@ -97,6 +98,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
         <% end %>
       </div>
       <div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
+        <%= render_cell_anchor_link(@cell_view) %>
         <span class="tooltip top" aria-label="Cell settings">
           <%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell_view.id), class: "icon-button" do %>
             <%= remix_icon("list-settings-line", class: "text-xl") %>
@@ -163,6 +165,18 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     """
   end
 
+  defp render_cell_anchor_link(cell_view) do
+    assigns = %{cell_view: cell_view}
+
+    ~L"""
+    <span class="tooltip top" aria-label="Link">
+      <a href="#cell-<%= @cell_view.id %>" class="icon-button">
+        <%= remix_icon("link", class: "text-xl") %>
+      </a>
+    </span>
+    """
+  end
+
   # The whole page has to load and then hooks are mounded.
   # There may be a tiny delay before the markdown is rendered
   # or editors are mounted, so show neat placeholders immediately.