From 7c7d2ea830e31238d5b8b78afab2f02012bd329a Mon Sep 17 00:00:00 2001
From: agarceau-netapp <agarceau@netapp.com>
Date: Wed, 26 Feb 2025 16:09:41 -0800
Subject: [PATCH] Expand dropdowns containing search terms

---
 src/index.html | 203 ++++++++++++++++++++++++++-----------------------
 1 file changed, 108 insertions(+), 95 deletions(-)

diff --git a/src/index.html b/src/index.html
index 9a5a82030..1256b119f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -190,6 +190,11 @@
     .matching-post {
       width: 100%;
     }
+    .matching-post p {
+      width: 100%;
+      overflow:hidden; 
+      white-space:nowrap; 
+    }
     .search-results-displayed h1 {
       padding-left: 50px;
     }
@@ -326,101 +331,109 @@ <h2>Spot by NetApp Documentation</h2>
   <!-- Custom Plugins -->
   
   <script>
-    (function () {
-      function storeSearchTermOnInput() {
-        const searchInput = document.querySelector('.sidebar input[type="search"]');
-        if (!searchInput) {
-          console.error("Search input not found!");
-          return;
-        }
-
-        function saveSearchTerm() {
-          const searchTerm = searchInput.value.trim();
-          if (searchTerm) {
-            sessionStorage.setItem("highlightSearchTerm", searchTerm);
-          }
-        }
-
-        searchInput.addEventListener("input", saveSearchTerm);
-        searchInput.addEventListener("blur", saveSearchTerm);
-      }
-
-      function highlightStoredSearchTerm() {
-        const searchTerm = sessionStorage.getItem("highlightSearchTerm");
-        if (!searchTerm) {
-          return;
-        }
-
-        sessionStorage.removeItem("highlightSearchTerm");
-
-        const content = document.querySelector(".markdown-section");
-        if (!content) {
-          console.error("Content section not found for highlighting.");
-          return;
-        }
-
-        const regex = new RegExp(`(${searchTerm})`, "gi");
-
-        function wrapMatches(node) {
-          if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "") {
-            if (
-              !node.parentNode ||
-              !node.parentNode.classList.contains("highlight")
-            ) {
-              const fragment = document.createDocumentFragment();
-              let lastIndex = 0;
-
-              node.nodeValue.replace(regex, (match, p1, offset) => {
-                fragment.appendChild(
-                  document.createTextNode(node.nodeValue.slice(lastIndex, offset))
-                );
-
-                const span = document.createElement("span");
-                span.className = "highlight";
-                span.textContent = p1;
-                fragment.appendChild(span);
-
-                lastIndex = offset + p1.length;
-              });
-
-              fragment.appendChild(
-                document.createTextNode(node.nodeValue.slice(lastIndex))
-              );
-              return fragment;
-            }
-          }
-
-          const clonedNode = node.cloneNode(false);
-          for (const child of node.childNodes) {
-            clonedNode.appendChild(wrapMatches(child));
-          }
-
-          return clonedNode;
-        }
-
-        content.querySelectorAll(".highlight").forEach((el) => {
-          el.replaceWith(document.createTextNode(el.textContent));
-        });
-
-        const nodes = [...content.childNodes];
-        for (const node of nodes) {
-          content.replaceChild(wrapMatches(node), node);
-        }
-      }
-
-      function customHighlightPlugin(hook) {
-        hook.doneEach(() => {
-          setTimeout(highlightStoredSearchTerm, 500);
-        });
-      }
-
-      window.$docsify.plugins = [].concat(
-        customHighlightPlugin,
-        window.$docsify.plugins || []
-      );
-
-      document.addEventListener("DOMContentLoaded", storeSearchTermOnInput);
-    })();
+   (function () {
+     function storeSearchTermOnInput() {
+       const searchInput = document.querySelector('.sidebar input[type="search"]');
+       if (!searchInput) {
+         console.error("Search input not found!");
+         return;
+       }
+
+       function saveSearchTerm() {
+         const searchTerm = searchInput.value.trim();
+         if (searchTerm) {
+           sessionStorage.setItem("highlightSearchTerm", searchTerm);
+         }
+       }
+
+       searchInput.addEventListener("input", saveSearchTerm);
+       searchInput.addEventListener("blur", saveSearchTerm);
+     }
+
+     function highlightStoredSearchTerm() {
+       const searchTerm = sessionStorage.getItem("highlightSearchTerm");
+       if (!searchTerm) {
+         return;
+       }
+
+       sessionStorage.removeItem("highlightSearchTerm");
+
+       const content = document.querySelector(".markdown-section");
+       if (!content) {
+         console.error("Content section not found for highlighting.");
+         return;
+       }
+
+       const regex = new RegExp(`(${searchTerm})`, "gi");
+
+       function wrapMatches(node) {
+         if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "") {
+           if (
+             !node.parentNode ||
+             !node.parentNode.classList.contains("highlight")
+           ) {
+             const fragment = document.createDocumentFragment();
+             let lastIndex = 0;
+
+             node.nodeValue.replace(regex, (match, p1, offset) => {
+               fragment.appendChild(
+                 document.createTextNode(node.nodeValue.slice(lastIndex, offset))
+               );
+
+               const span = document.createElement("span");
+               span.className = "highlight";
+               span.textContent = p1;
+               fragment.appendChild(span);
+
+               lastIndex = offset + p1.length;
+             });
+
+             fragment.appendChild(
+               document.createTextNode(node.nodeValue.slice(lastIndex))
+             );
+             return fragment;
+           }
+         }
+
+         const clonedNode = node.cloneNode(false);
+         for (const child of node.childNodes) {
+           clonedNode.appendChild(wrapMatches(child));
+         }
+
+         return clonedNode;
+       }
+
+       content.querySelectorAll(".highlight").forEach((el) => {
+         el.replaceWith(document.createTextNode(el.textContent));
+       });
+
+       const nodes = [...content.childNodes];
+       for (const node of nodes) {
+         content.replaceChild(wrapMatches(node), node);
+       }
+
+       // Find and open nearest <details> element
+       content.querySelectorAll(".highlight").forEach((el) => {
+         let detailsParent = el.closest("details");
+         if (detailsParent) {
+           detailsParent.setAttribute("open", "");
+         }
+       });
+     }
+
+     function customHighlightPlugin(hook) {
+       hook.doneEach(() => {
+         setTimeout(highlightStoredSearchTerm, 500);
+       });
+     }
+
+     window.$docsify.plugins = [].concat(
+       customHighlightPlugin,
+       window.$docsify.plugins || []
+     );
+
+     document.addEventListener("DOMContentLoaded", storeSearchTermOnInput);
+   })();
   </script>