DEV: A few more fixes (#27)

- fix `Ctrl` + clicking on other links in a page with DiscoTOC
- visually show third level in TOC
- fix overlapping levels for long TOCs
- remove support for h6 headings

common/common.scss

@@ -36,11 +36,14 @@ $padding-basis: 0.75em;
       &.active,
       .d-toc-wrapper.overlay & {
         ul {
-          max-height: 50em;
+          max-height: 150em;
           overflow: visible;
           opacity: 1;
         }
       }
+      > a:hover {
+        color: var(--primary-high);
+      }
       &.direct-active > a {
         position: relative;
         color: var(--primary);
@@ -61,8 +64,16 @@ $padding-basis: 0.75em;
         // it's odd that we need this
         margin-left: -1px;
       }
-      ul {
-        margin-bottom: 0.5em;
+
+      li.d-toc-h2 ~ li.d-toc-h3,
+      li.d-toc-h2 ~ li.d-toc-h4,
+      li.d-toc-h2 ~ li.d-toc-h5,
+      li.d-toc-h3 ~ li.d-toc-h4,
+      li.d-toc-h3 ~ li.d-toc-h5,
+      li.d-toc-h4 ~ li.d-toc-h5 {
+        > a {
+          padding-left: $padding-basis;
+        }
       }
     }
   }

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

@@ -25,7 +25,7 @@ export default {
             }
 
             let dTocHeadingSelectors =
-              ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5, :scope > h6";
+              ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5";
             const headings = el.querySelectorAll(dTocHeadingSelectors);
 
             if (headings.length < 1) {
@@ -193,16 +193,18 @@ export default {
             top: rect.bottom + window.scrollY - headerOffset() - 10,
             behavior: "smooth",
           });
+
+          e.preventDefault();
+          return false;
         }
       }
 
       // close overlay
       if (e.target.closest("a").classList.contains("d-toc-close")) {
         document.querySelector(".d-toc-wrapper").classList.remove("overlay");
+        e.preventDefault();
+        return false;
       }
-
-      e.preventDefault();
-      return false;
     }
 
     if (!document.querySelector(".d-toc-wrapper.overlay")) {
@@ -263,6 +265,7 @@ export default {
     clonedNode.querySelector("span.clicks")?.remove();
     const li = document.createElement("li");
     li.classList.add("d-toc-item");
+    li.classList.add(`d-toc-${clonedNode.tagName.toLowerCase()}`);
 
     li.innerHTML = `<a data-d-toc="${clonedNode.getAttribute("id")}">${
       clonedNode.textContent