feat(outline): add document outline sidebar panel with heading navigation

Amit Haridas
2026-08-02 18:10:18 +05:30 · 2026-04-06 10:40:29 +05:30
parent 24cb99658e
commit b1a5784bcc
4 changed files with 180 additions and 0 deletions
@@ -0,0 +1,114 @@
+/**
+ * Document Outline Panel
+ * Parses markdown headings and renders a navigable tree in the sidebar.
+ */
+
+function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHeadingClick }) {
+    container.innerHTML = `
+        <div class="outline-panel">
+            <div class="outline-list" id="outline-list"></div>
+        </div>
+    `;
+
+    const listEl = document.getElementById('outline-list');
+    let headings = [];
+    let activeLine = 1;
+    let debounceTimer = null;
+
+    function parseHeadings(content) {
+        const result = [];
+        if (!content) return result;
+        const lines = content.split('\n');
+        const regex = /^(#{1,6})\s+(.+)$/;
+        for (let i = 0; i < lines.length; i++) {
+            const match = regex.exec(lines[i]);
+            if (match) {
+                result.push({
+                    level: match[1].length,
+                    text: match[2].trim(),
+                    line: i + 1
+                });
+            }
+        }
+        return result;
+    }
+
+    function findActiveHeading(currentLine) {
+        let active = null;
+        for (const h of headings) {
+            if (h.line <= currentLine) {
+                active = h;
+            } else {
+                break;
+            }
+        }
+        return active;
+    }
+
+    function renderHeadings() {
+        const content = getEditorContent();
+        headings = parseHeadings(content);
+        activeLine = getActiveLine();
+
+        if (headings.length === 0) {
+            listEl.innerHTML = `
+                <div class="outline-empty">
+                    <p>No headings found</p>
+                    <p class="outline-hint"># Heading 1</p>
+                    <p class="outline-hint">## Heading 2</p>
+                    <p class="outline-hint">### Heading 3</p>
+                </div>
+            `;
+            return;
+        }
+
+        const activeHeading = findActiveHeading(activeLine);
+
+        listEl.innerHTML = headings.map((h, idx) => `
+            <div class="outline-item outline-level-${h.level}${activeHeading && h.line === activeHeading.line ? ' active' : ''}"
+                 data-line="${h.line}" data-index="${idx}">
+                <span class="outline-text">${escapeHtml(h.text)}</span>
+                <span class="outline-badge">H${h.level}</span>
+            </div>
+        `).join('') + `<div class="outline-footer">${headings.length} heading${headings.length !== 1 ? 's' : ''}</div>`;
+
+        listEl.querySelectorAll('.outline-item').forEach(item => {
+            item.addEventListener('click', () => {
+                const line = parseInt(item.dataset.line, 10);
+                onHeadingClick(line);
+            });
+        });
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function refresh() {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(renderHeadings, 300);
+    }
+
+    function setActiveHeading(line) {
+        activeLine = line;
+        const activeHeading = findActiveHeading(line);
+
+        listEl.querySelectorAll('.outline-item').forEach(item => {
+            const itemLine = parseInt(item.dataset.line, 10);
+            if (activeHeading && itemLine === activeHeading.line) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+    }
+
+    container._refreshOutline = refresh;
+    container._setActiveHeading = setActiveHeading;
+
+    renderHeadings();
+}
+
+module.exports = { renderOutlinePanel };