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

Author: megothss

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 @@
       :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 @@
       :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 @@
       :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 @@
       :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 @@
       :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 @@
     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!