@commentray/render 0.1.2 → 0.2.0

package/dist/code-browser-client.js

@@ -488,6 +488,12 @@ function findSearchHitButton(leaf, searchResults) {
     }
     return null;
 }
+function listSearchHitButtons(searchResults) {
+    return [...searchResults.querySelectorAll("button.hit")].filter((el) => el instanceof HTMLButtonElement);
+}
+function listDocumentedTreeFileLinks(treeHost) {
+    return [...treeHost.querySelectorAll("a.tree-file-link")].filter((el) => el instanceof HTMLAnchorElement);
+}
 function scrollCodeHitToView(line) {
     const el = document.getElementById(`code-line-${String(line)}`);
     if (el)
@@ -561,12 +567,77 @@ function emptyBrowsePreviewInnerHtml(scope, filePathLabel, mutable) {
     const hint = emptyBrowsePreviewHint("commentray-and-paths", fb.length, fb.length, true);
     return emptySearchBrowsePreviewInnerHtml(hint, fb, hitCtx);
 }
+function wireSearchResultsHitListKeyboard(searchResults, searchInput) {
+    searchResults.addEventListener("keydown", (e) => {
+        if (e.isComposing || searchResults.hidden)
+            return;
+        const hits = listSearchHitButtons(searchResults);
+        if (hits.length === 0)
+            return;
+        const active = document.activeElement;
+        if (!(active instanceof HTMLButtonElement) || !active.classList.contains("hit"))
+            return;
+        const idx = hits.indexOf(active);
+        if (idx < 0)
+            return;
+        if (e.key === "ArrowDown" && idx < hits.length - 1) {
+            hits[idx + 1].focus({ preventScroll: true });
+            e.preventDefault();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            if (idx > 0) {
+                hits[idx - 1].focus({ preventScroll: true });
+                e.preventDefault();
+                return;
+            }
+            searchInput.focus({ preventScroll: true });
+            e.preventDefault();
+        }
+    });
+}
+function wireSearchInputKeyboard(searchInput, searchResults, actions) {
+    const { renderEmptyBrowsePreview, runSearch, cancelDebounceTimer, hitClickDeps } = actions;
+    searchInput.addEventListener("keydown", (e) => {
+        if (e.isComposing)
+            return;
+        if (e.key === "ArrowDown") {
+            if (!searchResults.hidden) {
+                const hits = listSearchHitButtons(searchResults);
+                if (hits.length > 0 && document.activeElement === searchInput) {
+                    hits[0].focus({ preventScroll: true });
+                    e.preventDefault();
+                    return;
+                }
+            }
+            if (tokenizeQuery(searchInput.value).length > 0)
+                return;
+            renderEmptyBrowsePreview();
+            e.preventDefault();
+            return;
+        }
+        if (e.key !== "Enter")
+            return;
+        cancelDebounceTimer();
+        if (tokenizeQuery(searchInput.value).length > 0) {
+            runSearch();
+        }
+        const hits = listSearchHitButtons(searchResults);
+        if (!searchResults.hidden && hits.length > 0 && document.activeElement === searchInput) {
+            e.preventDefault();
+            handleSearchHitButtonClick(hits[0], hitClickDeps);
+        }
+    });
+}
 function wireSearchUi(ctx) {
     const { scope, filePathLabel, mutable, rawCode, searchInput, searchClear, searchResults, docScrollEl, } = ctx;
     let debounceTimer;
-    function clearSearch() {
+    function cancelDebounceTimer() {
         clearTimeout(debounceTimer);
         debounceTimer = undefined;
+    }
+    function clearSearch() {
+        cancelDebounceTimer();
         searchInput.value = "";
         searchResults.innerHTML = "";
         searchResults.hidden = true;
@@ -610,17 +681,16 @@ function wireSearchUi(ctx) {
             return;
         handleSearchHitButtonClick(hit, hitClickDeps);
     });
+    wireSearchResultsHitListKeyboard(searchResults, searchInput);
     searchInput.addEventListener("input", () => {
         clearTimeout(debounceTimer);
         debounceTimer = setTimeout(runSearch, 200);
     });
-    searchInput.addEventListener("keydown", (e) => {
-        if (e.key !== "ArrowDown")
-            return;
-        if (tokenizeQuery(searchInput.value).length > 0)
-            return;
-        renderEmptyBrowsePreview();
-        e.preventDefault();
+    wireSearchInputKeyboard(searchInput, searchResults, {
+        renderEmptyBrowsePreview,
+        runSearch,
+        cancelDebounceTimer,
+        hitClickDeps,
     });
     searchClear.addEventListener("click", clearSearch);
     document.addEventListener("keydown", (e) => {
@@ -1569,12 +1639,52 @@ function wireDocumentedFilesTree() {
             sum.focus({ preventScroll: true });
     }
     document.addEventListener("keydown", onDocumentedFilesHubEscape, true);
+    treeMount.addEventListener("keydown", (e) => {
+        if (!detailsHub.open || e.isComposing)
+            return;
+        const t = e.target;
+        if (!(t instanceof HTMLAnchorElement) || !t.classList.contains("tree-file-link"))
+            return;
+        const links = listDocumentedTreeFileLinks(treeMount);
+        if (links.length === 0)
+            return;
+        const idx = links.indexOf(t);
+        if (idx < 0)
+            return;
+        if (e.key === "ArrowDown") {
+            if (idx < links.length - 1) {
+                links[idx + 1].focus({ preventScroll: true });
+                e.preventDefault();
+            }
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            if (idx > 0) {
+                links[idx - 1].focus({ preventScroll: true });
+                e.preventDefault();
+                return;
+            }
+            if (filterInput instanceof HTMLInputElement) {
+                filterInput.focus({ preventScroll: true });
+                e.preventDefault();
+            }
+        }
+    });
     if (filterInput instanceof HTMLInputElement) {
         filterInput.addEventListener("input", () => {
             if (!detailsHub.open || cachedPairs === null)
                 return;
             applyFilterAndRender();
         });
+        filterInput.addEventListener("keydown", (e) => {
+            if (!detailsHub.open || e.isComposing || e.key !== "ArrowDown")
+                return;
+            const links = listDocumentedTreeFileLinks(treeMount);
+            if (links.length === 0)
+                return;
+            links[0].focus({ preventScroll: true });
+            e.preventDefault();
+        });
     }
 }
 function wireSplitter(storageSplit, shell, codePane, gutter, initialPct) {