Index headings nested in custom elements

javascripts/discourse/initializers/disco-toc-main.js

@@ -37,9 +37,7 @@
               return;
             }
 
-            let dTocHeadingSelectors =
-              ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5";
-            const headings = el.querySelectorAll(dTocHeadingSelectors);
+            const headings = el.querySelectorAll(generateSelectors(settings.TOC_custom_selector));
 
             if (headings.length < settings.TOC_min_heading) {
               return;
@@ -295,6 +293,22 @@
   },
 };
 
+function generateSelectors(customSelector) {
+  let rootSelector = ":scope";
+  let headings = ["h1", "h2", "h3", "h4", "h5"];
+  let rootSelectors;
+  let customSelectors;
+
+  rootSelectors = 
+    headings.map(heading => `${rootSelector} > ${heading}`).join(", ");
+  if(customSelector) {
+    customSelectors = 
+      headings.map(heading => `${rootSelector} > ${customSelector} > ${heading}`).join(", ");
+  }
+
+  return `${rootSelectors}, ${customSelectors}`;
+}
+
 function parentsUntil(el, selector, filter) {
   const result = [];
   const matchesSelector =

locales/en.yml

@@ -7,3 +7,4 @@ en:
       minimum_trust_level_to_create_TOC: The minimum trust level a user must have in order to see the TOC button in the composer
       auto_TOC_categories: automatically enable TOC on topics in these categories
       auto_TOC_tags: automatically enable TOC on topics with these tags
+      TOC_custom_selector: By default DiscoTOC only indexes headings in the post's root element. Here you can specify an intermediate CSS selector.<br>Ie. `.my-div` will be interpreted as `:root > .my-div > [h1, h2, ...]`.

settings.yml

@@ -24,3 +24,5 @@ TOC_min_heading:
   default: 3
   min: 1
   max: 10000
+TOC_custom_selector:
+  default: ""