FIX: Restore support for docs plugin (#24)

common/common.scss

@@ -212,3 +212,10 @@ a.d-toc-close {
     content: "#{$composer_toc_text}";
   }
 }
+
+// Docs plugin outlet
+.below-docs-topic-outlet.d-toc-wrapper {
+  position: sticky;
+  top: calc(var(--header-offset, 60px) + 1em);
+  max-height: calc(100vh - 2em - var(--header-offset, 60px));
+}

javascripts/discourse/connectors/below-docs-topic/d-toc-wrapper.hbs

@@ -0,0 +1 @@
+{{!-- Docs TOC placeholder --}}

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

@@ -76,52 +76,16 @@ export default {
         }
       });
 
+      api.onAppEvent("docs-topic:current-post-scrolled", () => {
+        this.updateTOCSidebar();
+      });
+
       api.onAppEvent("topic:current-post-scrolled", (args) => {
         if (args.postIndex !== 1) {
           return;
         }
 
-        if (!document.querySelector(".d-toc-cooked")) {
+        this.updateTOCSidebar();
-          return;
-        }
-
-        const headings = document.querySelectorAll(".d-toc-post-heading");
-        let closestHeadingDistance = null;
-        let closestHeading = null;
-
-        headings.forEach((heading) => {
-          const distance = Math.abs(
-            domUtils.offset(heading).top - headerOffset() - window.scrollY
-          );
-          if (
-            closestHeadingDistance == null ||
-            distance < closestHeadingDistance
-          ) {
-            closestHeadingDistance = distance;
-            closestHeading = heading;
-          } else {
-            return false;
-          }
-        });
-
-        if (closestHeading) {
-          document.querySelectorAll("#d-toc li").forEach((listItem) => {
-            listItem.classList.remove("active");
-            listItem.classList.remove("direct-active");
-          });
-
-          const anchor = document.querySelector(
-            `#d-toc a[data-d-toc="${closestHeading.getAttribute("id")}"]`
-          );
-
-          if (!anchor) {
-            return;
-          }
-          anchor.parentElement.classList.add("direct-active");
-          parentsUntil(anchor, "#d-toc", ".d-toc-item").forEach((liParent) => {
-            liParent.classList.add("active");
-          });
-        }
       });
 
       api.cleanupStream(() => {
@@ -131,6 +95,47 @@ export default {
     });
   },
 
+  updateTOCSidebar() {
+    if (!document.querySelector(".d-toc-cooked")) {
+      return;
+    }
+
+    const headings = document.querySelectorAll(".d-toc-post-heading");
+    let closestHeadingDistance = null;
+    let closestHeading = null;
+
+    headings.forEach((heading) => {
+      const distance = Math.abs(
+        domUtils.offset(heading).top - headerOffset() - window.scrollY
+      );
+      if (closestHeadingDistance == null || distance < closestHeadingDistance) {
+        closestHeadingDistance = distance;
+        closestHeading = heading;
+      } else {
+        return false;
+      }
+    });
+
+    if (closestHeading) {
+      document.querySelectorAll("#d-toc li").forEach((listItem) => {
+        listItem.classList.remove("active");
+        listItem.classList.remove("direct-active");
+      });
+
+      const anchor = document.querySelector(
+        `#d-toc a[data-d-toc="${closestHeading.getAttribute("id")}"]`
+      );
+
+      if (!anchor) {
+        return;
+      }
+      anchor.parentElement.classList.add("direct-active");
+      parentsUntil(anchor, "#d-toc", ".d-toc-item").forEach((liParent) => {
+        liParent.classList.add("active");
+      });
+    }
+  },
+
   insertTOC(headings) {
     const dToc = document.createElement("div");
     dToc.classList.add("d-toc-main");