DEV: Update heading positions when navigating directly between topics (#92)

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">

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!