From 830c0436c859c7721f53d5059909ee075696eba9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E5=BF=83?=
 <41134017+Lhcfl@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:40:11 +0800
Subject: [PATCH] FEATURE: Allow TOC for replies (#90)

* FEATURE: Allow TOC for replies

This commit adds an optional setting that allows enabling a TOC for
replies. TOCs for replies are not affected by autoTOC settings like
`auto_TOC_tags` and must be inserted manually.
---
 common/common.scss                            |   3 +-
 .../discourse/components/toc-contents.gjs     |  79 ++++++++-----
 .../discourse/components/toc-heading.gjs      |   4 +-
 javascripts/discourse/components/toc-mini.gjs |   4 +-
 .../initializers/disco-toc-composer.js        |   8 +-
 .../discourse/services/toc-processor.js       |  49 ++++++--
 locales/en.yml                                |   1 +
 settings.yml                                  |   2 +
 spec/system/discotoc_author_spec.rb           |  34 ++++--
 spec/system/discotoc_progress_user_spec.rb    | 111 ++++++++++++++----
 spec/system/discotoc_timeline_user_spec.rb    |  96 +++++++++++----
 11 files changed, 296 insertions(+), 95 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 0e71f5d..d9777fc 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -215,7 +215,8 @@ html.rtl SELECTOR {
 }
 
 // Composer preview notice
-.edit-title .d-editor-preview [data-theme-toc] {
+.edit-title .d-editor-preview [data-theme-toc],
+body.toc-for-replies-enabled .d-editor-preview [data-theme-toc] {
   background: var(--tertiary);
   color: var(--secondary);
   position: sticky;
diff --git a/javascripts/discourse/components/toc-contents.gjs b/javascripts/discourse/components/toc-contents.gjs
index eb16ae3..163ec67 100644
--- a/javascripts/discourse/components/toc-contents.gjs
+++ b/javascripts/discourse/components/toc-contents.gjs
@@ -4,7 +4,6 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { service } from "@ember/service";
 import { headerOffset } from "discourse/lib/offset-calculator";
-import { slugify } from "discourse/lib/utilities";
 import { debounce } from "discourse-common/utils/decorators";
 import TocHeading from "../components/toc-heading";
 import TocLargeButtons from "../components/toc-large-buttons";
@@ -16,18 +15,20 @@ const RESIZE_DEBOUNCE = 200;
 
 export default class TocContents extends Component {
   @service tocProcessor;
+  @service appEvents;
 
   @tracked activeHeadingId = null;
   @tracked headingPositions = [];
   @tracked activeAncestorIds = [];
 
-  get flattenedToc() {
-    return this.flattenTocStructure(this.args.tocStructure);
+  get mappedToc() {
+    return this.mappedTocStructure(this.args.tocStructure);
   }
 
   @action
   setup() {
     this.listenForScroll();
+    this.listenForPostChange();
     this.listenForResize();
     this.updateHeadingPositions();
     this.updateActiveHeadingOnScroll(); // manual on setup so active class is added
@@ -37,6 +38,10 @@ export default class TocContents extends Component {
     super.willDestroy(...arguments);
     window.removeEventListener("scroll", this.updateActiveHeadingOnScroll);
     window.removeEventListener("resize", this.calculateHeadingPositions);
+    this.appEvents.off(
+      "topic:current-post-changed",
+      this.calculateHeadingPositions
+    );
   }
 
   @action
@@ -50,6 +55,14 @@ export default class TocContents extends Component {
     window.addEventListener("resize", this.calculateHeadingPositions);
   }
 
+  @action
+  listenForPostChange() {
+    this.appEvents.on(
+      "topic:current-post-changed",
+      this.calculateHeadingPositions
+    );
+  }
+
   @debounce(RESIZE_DEBOUNCE)
   calculateHeadingPositions() {
     this.updateHeadingPositions();
@@ -71,17 +84,27 @@ export default class TocContents extends Component {
       return;
     }
 
-    this.headingPositions = Array.from(headings).map((heading) => {
-      const id = this.getIdFromHeading(heading);
-      return {
-        id,
-        position:
-          heading.getBoundingClientRect().top +
-          window.scrollY -
-          headerOffset() -
-          POSITION_BUFFER,
-      };
-    });
+    const sameIdCount = new Map();
+    const mappedToc = this.mappedToc;
+    this.headingPositions = Array.from(headings)
+      .map((heading) => {
+        const id = this.tocProcessor.getIdFromHeading(
+          this.args.postID,
+          heading,
+          sameIdCount
+        );
+        return mappedToc[id]
+          ? {
+              id,
+              position:
+                heading.getBoundingClientRect().top +
+                window.scrollY -
+                headerOffset() -
+                POSITION_BUFFER,
+            }
+          : null;
+      })
+      .compact();
   }
 
   @debounce(SCROLL_DEBOUNCE)
@@ -104,9 +127,8 @@ export default class TocContents extends Component {
       }
     }
 
-    const activeHeading = this.flattenedToc.find(
-      (h) => h.id === this.headingPositions[activeIndex]?.id
-    );
+    const activeHeading =
+      this.mappedToc[this.headingPositions[activeIndex]?.id];
 
     this.activeHeadingId = activeHeading?.id;
     this.activeAncestorIds = [];
@@ -117,20 +139,15 @@ export default class TocContents extends Component {
     }
   }
 
-  getIdFromHeading(heading) {
-    // reuse content from autolinked headings
-    const tagName = heading.tagName.toLowerCase();
-    const text = heading.textContent.trim();
-    const anchor = heading.querySelector("a.anchor");
-    return anchor ? anchor.name : `toc-${tagName}-${slugify(text)}`;
-  }
-
-  flattenTocStructure(tocStructure) {
-    // the post content is flat, but we want to keep the relationships added in tocStructure
-    return tocStructure.flatMap((item) => [
-      item,
-      ...(item.subItems ? this.flattenTocStructure(item.subItems) : []),
-    ]);
+  mappedTocStructure(tocStructure, map = null) {
+    map ??= {};
+    for (const item of tocStructure) {
+      map[item.id] = item;
+      if (item.subItems) {
+        this.mappedTocStructure(item.subItems, map);
+      }
+    }
+    return map;
   }
 
   <template>
diff --git a/javascripts/discourse/components/toc-heading.gjs b/javascripts/discourse/components/toc-heading.gjs
index 8d3995f..fa52db8 100644
--- a/javascripts/discourse/components/toc-heading.gjs
+++ b/javascripts/discourse/components/toc-heading.gjs
@@ -42,7 +42,9 @@ export default class TocHeading extends Component {
       return;
     }
 
-    const targetElement = document.querySelector(`a[name="${targetId}"]`);
+    const targetElement =
+      document.querySelector(`a[name="${targetId}"]`) ||
+      document.getElementById(targetId);
     if (targetElement) {
       const headerOffsetValue = headerOffset();
       const elementPosition =
diff --git a/javascripts/discourse/components/toc-mini.gjs b/javascripts/discourse/components/toc-mini.gjs
index e414aba..0edc0e7 100644
--- a/javascripts/discourse/components/toc-mini.gjs
+++ b/javascripts/discourse/components/toc-mini.gjs
@@ -39,13 +39,13 @@ export default class TocMini extends Component {
 
   <template>
     {{#if this.tocProcessor.hasTOC}}
-      <div class="d-toc-mini">
+      <span class="d-toc-mini">
         <DButton
           class="btn-primary"
           @icon="stream"
           @action={{this.toggleTOCOverlay}}
         />
-      </div>
+      </span>
     {{/if}}
   </template>
 }
diff --git a/javascripts/discourse/initializers/disco-toc-composer.js b/javascripts/discourse/initializers/disco-toc-composer.js
index cd040ab..5303cc2 100644
--- a/javascripts/discourse/initializers/disco-toc-composer.js
+++ b/javascripts/discourse/initializers/disco-toc-composer.js
@@ -30,9 +30,15 @@ export default {
           icon: "align-left",
           label: themePrefix("insert_table_of_contents"),
           condition: (composer) => {
-            return composer.model.topicFirstPost;
+            return (
+              settings.enable_TOC_for_replies || composer.model.topicFirstPost
+            );
           },
         });
+
+        if (settings.enable_TOC_for_replies) {
+          document.body.classList.add("toc-for-replies-enabled");
+        }
       }
     });
   },
diff --git a/javascripts/discourse/services/toc-processor.js b/javascripts/discourse/services/toc-processor.js
index 78dea3f..a0a42a9 100644
--- a/javascripts/discourse/services/toc-processor.js
+++ b/javascripts/discourse/services/toc-processor.js
@@ -64,7 +64,7 @@ export default class TocProcessor extends Service {
   }
 
   shouldDisplayToc(post) {
-    return post.post_number === 1;
+    return settings.enable_TOC_for_replies || post.post_number === 1;
   }
 
   containsTocMarkup(content) {
@@ -133,22 +133,42 @@ export default class TocProcessor extends Service {
     );
   }
 
+  /**
+   * @param {number} postId
+   * @param {HTMLHeadingElement} heading
+   * @param {Map<string, number>} sameIdCount
+   */
+  getIdFromHeading(postId, heading, sameIdCount) {
+    const anchor = heading.querySelector("a.anchor");
+    if (anchor) {
+      return anchor.name;
+    }
+    const lowerTagName = heading.tagName.toLowerCase();
+    const text = heading.textContent.trim();
+    let slug = `${slugify(text)}`;
+    if (sameIdCount.has(slug)) {
+      sameIdCount.set(slug, sameIdCount.get(slug) + 1);
+      slug = `${slug}-${sameIdCount.get(slug)}`;
+    } else {
+      sameIdCount.set(slug, 1);
+    }
+    const res = `p-${postId}-toc-${lowerTagName}-${slug}`;
+    heading.id = res;
+    return res;
+  }
+
   generateTocStructure(headings) {
     let root = { subItems: [], level: 0 };
     let ancestors = [root];
 
-    headings.forEach((heading, index) => {
+    const sameIdCount = new Map();
+
+    headings.forEach((heading) => {
       const level = parseInt(heading.tagName[1], 10);
       const text = heading.textContent.trim();
       const lowerTagName = heading.tagName.toLowerCase();
-      const anchor = heading.querySelector("a.anchor");
 
-      let id;
-      if (anchor) {
-        id = anchor.name;
-      } else {
-        id = `toc-${lowerTagName}-${slugify(text) || index}`;
-      }
+      const id = this.getIdFromHeading(this.postID, heading, sameIdCount);
 
       // Remove irrelevant ancestors
       while (ancestors[ancestors.length - 1].level >= level) {
@@ -172,7 +192,7 @@ export default class TocProcessor extends Service {
   }
 
   jumpToEnd(renderTimeline, postID) {
-    const buffer = 150;
+    let buffer = 150;
     const postContainer = document.querySelector(`[data-post-id="${postID}"]`);
 
     if (!renderTimeline) {
@@ -185,6 +205,15 @@ export default class TocProcessor extends Service {
       const topicMapHeight =
         postContainer.querySelector(`.topic-map`)?.offsetHeight || 0;
 
+      if (
+        postContainer.parentElement?.nextElementSibling?.querySelector(
+          "div[data-theme-toc]"
+        )
+      ) {
+        // but if the next post also has a toc, just jump to it
+        buffer = 30 - topicMapHeight;
+      }
+
       const offsetPosition =
         postContainer.getBoundingClientRect().bottom +
         window.scrollY -
diff --git a/locales/en.yml b/locales/en.yml
index dbc075a..68fc798 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -12,3 +12,4 @@ en:
       auto_TOC_categories: Automatically enable TOC on topics in these categories
       auto_TOC_tags: Automatically enable TOC on topics with these tags
       TOC_min_heading: Minimum number of headings in a topic for the table of contents to be shown
+      enable_TOC_for_replies: Allows TOC for replies. TOCs for replies are not affected by the <b>auto TOC tags</b> and <b>auto TOC categories</b> settings and must be inserted manually.
diff --git a/settings.yml b/settings.yml
index dd936e6..181f146 100644
--- a/settings.yml
+++ b/settings.yml
@@ -16,6 +16,8 @@ auto_TOC_tags:
   type: list
   list_type: tag
   default: ""
+enable_TOC_for_replies:
+  default: false
 TOC_min_heading:
   default: 3
   min: 1
diff --git a/spec/system/discotoc_author_spec.rb b/spec/system/discotoc_author_spec.rb
index 3fb034b..2977d3b 100644
--- a/spec/system/discotoc_author_spec.rb
+++ b/spec/system/discotoc_author_spec.rb
@@ -7,14 +7,17 @@ RSpec.describe "DiscoTOC", system: true do
   fab!(:user) { Fabricate(:user, trust_level: TrustLevel[1], refresh_auto_groups: true) }
 
   fab!(:topic_1) { Fabricate(:topic) }
-  fab!(:post_1) {
-    Fabricate(: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)
-  }
-
-  before do 
-    sign_in(user)
+  fab!(:post_1) do
+    Fabricate(
+      :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,
+    )
   end
 
+  before { sign_in(user) }
+
   it "composer has table of contents button" do
     visit("/c/#{category.id}")
 
@@ -35,7 +38,7 @@ RSpec.describe "DiscoTOC", system: true do
   end
 
   it "table of contents button is hidden by trust level setting" do
-    theme.update_setting(:minimum_trust_level_to_create_TOC, "2" )
+    theme.update_setting(:minimum_trust_level_to_create_TOC, "2")
     theme.save!
 
     visit("/c/#{category.id}")
@@ -54,5 +57,20 @@ RSpec.describe "DiscoTOC", system: true do
 
     expect(page).to have_no_css("[data-name='Insert table of contents']")
   end
- 
+
+  context "when enable TOC for replies" do
+    before do
+      theme.update_setting(:enable_TOC_for_replies, true)
+      theme.save!
+    end
+
+    it "table of contents button does appear on replies" do
+      visit("/t/#{topic_1.id}")
+
+      find(".reply").click
+      find(".toolbar-popup-menu-options").click
+
+      expect(page).to have_css("[data-name='Insert table of contents']")
+    end
+  end
 end
diff --git a/spec/system/discotoc_progress_user_spec.rb b/spec/system/discotoc_progress_user_spec.rb
index bf4a2bd..0643d53 100644
--- a/spec/system/discotoc_progress_user_spec.rb
+++ b/spec/system/discotoc_progress_user_spec.rb
@@ -6,20 +6,53 @@ RSpec.describe "DiscoTOC", system: true do
   fab!(:category)
   fab!(:tag)
 
-  fab!(:topic_1) { Fabricate(:topic) }
+  fab!(:topic_1) { Fabricate(:topic, category: category, tags: [tag]) }
   fab!(:topic_2) { Fabricate(:topic, category: category, tags: [tag]) }
-  
-  fab!(:post_1) {
-    Fabricate(: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)
-  }
 
-  fab!(:post_2) {
-    Fabricate(: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)
-  }
+  fab!(:post_1) do
+    Fabricate(
+      :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,
+    )
+  end
 
-  fab!(:post_3) {
-    Fabricate(: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)
-  }
+  fab!(:post_2) do
+    Fabricate(
+      :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,
+    )
+  end
+
+  fab!(:post_3) do
+    Fabricate(
+      :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,
+    )
+  end
+
+  fab!(:post_4) do
+    Fabricate(
+      :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,
+    )
+  end
+
+  fab!(:post_5) do
+    Fabricate(
+      :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,
+    )
+  end
 
   it "table of contents button appears in mobile view" do
     visit("/t/#{topic_1.id}/?mobile_view=1")
@@ -50,7 +83,7 @@ RSpec.describe "DiscoTOC", system: true do
       window.scrollTo(0, document.body.scrollHeight);
     JS
 
-    expect(page).to have_css(".d-toc-mini")
+    expect(page).to have_no_css(".d-toc-mini")
   end
 
   it "d-toc-mini does not appear if the first post does not contain the markup" do
@@ -60,36 +93,72 @@ RSpec.describe "DiscoTOC", system: true do
   end
 
   it "d-toc-mini 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.update_setting(:auto_TOC_categories, "#{category.id}")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}/?mobile_view=1")
 
     expect(page).to have_css(".d-toc-mini")
   end
 
+  context "when disable TOC for replies" do
+    before do
+      theme.update_setting(:enable_TOC_for_replies, false)
+      theme.save!
+    end
+
+    it "table of contents button won't appears in mobile view for replies" do
+      visit("/t/-/#{topic_1.id}/3/?mobile_view=1")
+
+      expect(page).to have_no_css(".d-toc-mini")
+    end
+  end
+
+  context "when enable TOC for replies" do
+    before do
+      theme.update_setting(:enable_TOC_for_replies, true)
+      theme.save!
+    end
+
+    it "table of contents button appears in mobile view for replies" do
+      visit("/t/-/#{topic_1.id}/3/?mobile_view=1")
+
+      expect(page).to have_css(".d-toc-mini")
+    end
+
+    it "d-toc-mini will not appear without markup for replies regardless of auto_TOC_categories and auto_TOC_tags" do
+      theme.update_setting(:auto_TOC_categories, "#{category.id}")
+      theme.update_setting(:auto_TOC_tags, "#{tag.name}")
+      theme.save!
+
+      visit("/t/-/#{topic_1.id}/2/?mobile_view=1")
+
+      expect(page).to have_no_css(".d-toc-mini")
+    end
+  end
+
   it "d-toc-mini will not appear automatically if auto_TOC_categories is set to a different category" do
-    theme.update_setting(:auto_TOC_categories, "99" )
+    theme.update_setting(:auto_TOC_categories, "99")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}/?mobile_view=1")
 
     expect(page).to have_no_css(".d-toc-mini")
   end
 
   it "d-toc-mini will appear without markup if auto_TOC_tags is set to the topic's tag" do
-    theme.update_setting(:auto_TOC_tags, "#{tag.name}" )
+    theme.update_setting(:auto_TOC_tags, "#{tag.name}")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}/?mobile_view=1")
 
     expect(page).to have_css(".d-toc-mini")
   end
 
   it "d-toc-mini will not appear automatically if auto_TOC_tags is set to a different tag" do
-    theme.update_setting(:auto_TOC_tags, "wrong-tag" )
+    theme.update_setting(:auto_TOC_tags, "wrong-tag")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}/?mobile_view=1")
 
     expect(page).to have_no_css(".d-toc-mini")
@@ -98,7 +167,7 @@ RSpec.describe "DiscoTOC", system: true do
   it "d-toc-mini does not appear if it has fewer headings than TOC_min_heading setting" do
     theme.update_setting(:TOC_min_heading, 5)
     theme.save!
-    
+
     visit("/t/#{topic_1.id}/?mobile_view=1")
 
     expect(page).to have_no_css(".d-toc-mini")
diff --git a/spec/system/discotoc_timeline_user_spec.rb b/spec/system/discotoc_timeline_user_spec.rb
index 4d5fb3d..c3804df 100644
--- a/spec/system/discotoc_timeline_user_spec.rb
+++ b/spec/system/discotoc_timeline_user_spec.rb
@@ -6,20 +6,53 @@ RSpec.describe "DiscoTOC", system: true do
   fab!(:category)
   fab!(:tag)
 
-  fab!(:topic_1) { Fabricate(:topic) }
+  fab!(:topic_1) { Fabricate(:topic, category: category, tags: [tag]) }
   fab!(:topic_2) { Fabricate(:topic, category: category, tags: [tag]) }
-  
-  fab!(:post_1) {
-    Fabricate(: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)
-  }
 
-  fab!(:post_2) {
-    Fabricate(: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)
-  }
+  fab!(:post_1) do
+    Fabricate(
+      :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,
+    )
+  end
 
-  fab!(:post_3) {
-    Fabricate(: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)
-  }
+  fab!(:post_2) do
+    Fabricate(
+      :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,
+    )
+  end
+
+  fab!(:post_3) do
+    Fabricate(
+      :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,
+    )
+  end
+
+  fab!(:post_4) do
+    Fabricate(
+      :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,
+    )
+  end
+
+  fab!(:post_5) do
+    Fabricate(
+      :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,
+    )
+  end
 
   it "table of contents appears when the relevant markup is added to first post in topic" do
     visit("/t/#{topic_1.id}")
@@ -62,36 +95,36 @@ RSpec.describe "DiscoTOC", system: true do
   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.update_setting(:auto_TOC_categories, "#{category.id}")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}")
 
     expect(page).to have_css(".d-toc-item.d-toc-h1")
   end
 
   it "timeline will not appear automatically if auto_TOC_categories is set to a different category" do
-    theme.update_setting(:auto_TOC_categories, "99" )
+    theme.update_setting(:auto_TOC_categories, "99")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}")
 
     expect(page).to have_no_css(".d-toc-item.d-toc-h1")
   end
 
   it "timeline will appear without markup if auto_TOC_tags is set to the topic's tag" do
-    theme.update_setting(:auto_TOC_tags, "#{tag.name}" )
+    theme.update_setting(:auto_TOC_tags, "#{tag.name}")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}")
 
     expect(page).to have_css(".d-toc-item.d-toc-h1")
   end
 
   it "timeline will not appear automatically if auto_TOC_tags is set to a different tag" do
-    theme.update_setting(:auto_TOC_tags, "wrong-tag" )
+    theme.update_setting(:auto_TOC_tags, "wrong-tag")
     theme.save!
-    
+
     visit("/t/#{topic_2.id}")
 
     expect(page).to have_no_css(".d-toc-item.d-toc-h1")
@@ -100,9 +133,32 @@ RSpec.describe "DiscoTOC", system: true do
   it "timeline does not appear if it has fewer headings than TOC_min_heading setting" do
     theme.update_setting(:TOC_min_heading, 5)
     theme.save!
-    
+
     visit("/t/#{topic_1.id}")
 
     expect(page).to have_no_css(".d-toc-item.d-toc-h1")
   end
+
+  context "when enable TOC for replies" do
+    before do
+      theme.update_setting(:enable_TOC_for_replies, true)
+      theme.save!
+    end
+
+    it "timeline does not appear for replies when the table of contents is shown" do
+      visit("/t/-/#{topic_1.id}/3")
+
+      expect(page).to have_no_css(".topic-timeline")
+    end
+
+    it "d-toc-mini will not appear without markup for replies regardless of auto_TOC_categories and auto_TOC_tags" do
+      theme.update_setting(:auto_TOC_categories, "#{category.id}")
+      theme.update_setting(:auto_TOC_tags, "#{tag.name}")
+      theme.save!
+
+      visit("/t/-/#{topic_1.id}/2")
+
+      expect(page).to have_no_css(".d-toc-item.d-toc-h1")
+    end
+  end
 end