From 56c087e79a504266353bed16794cf88c32abafac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Fri, 18 Jun 2021 13:21:48 +0200
Subject: [PATCH] Improve section links behaviour (#367)

* Limit the impact of section html id changing

* Make sure section links scroll to section after loading finishes
---
 assets/js/session/index.js                              | 8 ++++++++
 lib/livebook_web/live/session_live/section_component.ex | 3 +--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/assets/js/session/index.js b/assets/js/session/index.js
index 3686114d7..c37d07968 100644
--- a/assets/js/session/index.js
+++ b/assets/js/session/index.js
@@ -472,6 +472,14 @@ function focusCellFromUrl(hook) {
     if (getCellById(cellId)) {
       setFocusedCell(hook, cellId);
     }
+  } else {
+    // Explicitly scroll to the target element
+    // after the loading finishes
+    const htmlId = hash.replace(/^#/, "");
+    const element = document.getElementById(htmlId);
+    if (element) {
+      element.scrollIntoView();
+    }
   }
 }
 
diff --git a/lib/livebook_web/live/session_live/section_component.ex b/lib/livebook_web/live/session_live/section_component.ex
index 5aa08e2ce..19a46368a 100644
--- a/lib/livebook_web/live/session_live/section_component.ex
+++ b/lib/livebook_web/live/session_live/section_component.ex
@@ -4,13 +4,12 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
   def render(assigns) do
     ~L"""
     <div
-      id="<%= @section_view.html_id %>"
       data-element="section"
       data-section-id="<%= @section_view.id %>">
       <div class="flex space-x-4 items-center" data-element="section-headline">
         <h2 class="flex-grow text-gray-800 font-semibold text-2xl px-1 -ml-1 rounded-lg border  border-transparent hover:border-blue-200 focus:border-blue-300"
           data-element="section-name"
-          id="section-<%= @section_view.id %>-name"
+          id="<%= @section_view.html_id %>"
           contenteditable
           spellcheck="false"
           phx-blur="set_section_name"