From 8657f64cdc302ad93e7b96da397819e7d4ae8e96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Saquetim?=
 <1108771+megothss@users.noreply.github.com>
Date: Wed, 14 Aug 2024 11:52:43 -0300
Subject: [PATCH] DEV: Update heading positions when navigating directly
 between topics (#92)

---
 .../discourse/components/toc-contents.gjs     |  7 +++-
 spec/system/discotoc_timeline_user_spec.rb    | 34 ++++++++++++++++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/javascripts/discourse/components/toc-contents.gjs b/javascripts/discourse/components/toc-contents.gjs
index 163ec67..5bac763 100644
--- a/javascripts/discourse/components/toc-contents.gjs
+++ b/javascripts/discourse/components/toc-contents.gjs
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import { service } from "@ember/service";
 import { headerOffset } from "discourse/lib/offset-calculator";
 import { debounce } from "discourse-common/utils/decorators";
@@ -154,7 +155,11 @@ export default class TocContents extends Component {
     {{#unless @renderTimeline}}
       <TocMiniButtons @renderTimeline={{@renderTimeline}} @postID={{@postID}} />
     {{/unless}}
-    <div id="d-toc" {{didInsert this.setup}}>
+    <div
+      id="d-toc"
+      {{didInsert this.setup}}
+      {{didUpdate this.updateHeadingPositions @postID}}
+    >
 
       {{#each @tocStructure as |heading|}}
         <ul class="d-toc-heading">
diff --git a/spec/system/discotoc_timeline_user_spec.rb b/spec/system/discotoc_timeline_user_spec.rb
index c3804df..e5ac4c1 100644
--- a/spec/system/discotoc_timeline_user_spec.rb
+++ b/spec/system/discotoc_timeline_user_spec.rb
@@ -14,7 +14,7 @@ RSpec.describe "DiscoTOC", system: true do
       :post,
       raw:
         "<div data-theme-toc='true'></div>\n\n# Heading 1\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading",
-      topic: topic_1,
+      topic: topic_1
     )
   end
 
@@ -23,7 +23,7 @@ RSpec.describe "DiscoTOC", system: true do
       :post,
       raw:
         "\n# Heading 1\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading",
-      topic: topic_2,
+      topic: topic_2
     )
   end
 
@@ -32,7 +32,7 @@ RSpec.describe "DiscoTOC", system: true do
       :post,
       raw:
         "intentionally \n long \n content \n so \n there's \n plenty \n to be \n scrolled \n past \n which \n will \n force \n the \n timeline \n to \n hide \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll ",
-      topic: topic_1,
+      topic: topic_1
     )
   end
 
@@ -41,7 +41,7 @@ RSpec.describe "DiscoTOC", system: true do
       :post,
       raw:
         "<div data-theme-toc='true'></div>\n\n# Heading For Reply 1\nContent for the first heading\n## Heading For Reply 2\nContent for the second heading\n### Heading For Reply 3\nContent for the third heading\n# Heading For Reply 4\nContent for the fourth heading",
-      topic: topic_1,
+      topic: topic_1
     )
   end
 
@@ -50,7 +50,7 @@ RSpec.describe "DiscoTOC", system: true do
       :post,
       raw:
         "intentionally \n long \n content \n so \n there's \n plenty \n to be \n scrolled \n past \n which \n will \n force \n the \n timeline \n to \n hide \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll ",
-      topic: topic_1,
+      topic: topic_1
     )
   end
 
@@ -94,6 +94,30 @@ RSpec.describe "DiscoTOC", system: true do
     expect(page).to have_no_css(".d-toc-item.d-toc-h1")
   end
 
+  it "table of contents updates the highlighted section after navigating directly to other topic" do
+    source_topic = Fabricate(:topic, category: category, tags: [tag])
+
+    Fabricate(
+      :post,
+      topic: source_topic,
+      raw:
+        "<div data-theme-toc='true'></div>\n\n# Heading 1 on the source topic\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading\n<a href=c>Other topic</a>"
+    )
+    visit("/t/#{source_topic.id}")
+
+    expect(page).to have_css(
+      ".d-toc-item.d-toc-h1.active a[data-d-toc='toc-h1-heading-1-on-the-source-topic']"
+    )
+    find("a[href='/t/#{topic_1.slug}/#{topic_1.id}'").click
+
+    expect(page).to have_css(
+      ".d-toc-item.d-toc-h1.active a[data-d-toc='toc-h1-heading-1']"
+    )
+    expect(page).to have_no_css(
+      "a[data-d-toc='toc-h1-heading-1-on-the-source-topic']"
+    )
+  end
+
   it "timeline will appear without markup if auto_TOC_categories is set to the topic's category" do
     theme.update_setting(:auto_TOC_categories, "#{category.id}")
     theme.save!