+46

src/css/app.css

reviewed

··· 3112 3112 border-radius: 2px; 3113 3113 } 3114 3114 3115 3115 + /* Minimap */ 3116 3116 + .minimap { 3117 3117 + position: fixed; 3118 3118 + right: 0; 3119 3119 + top: 60px; 3120 3120 + bottom: 0; 3121 3121 + width: 140px; 3122 3122 + background: var(--color-surface); 3123 3123 + border-left: 1px solid var(--color-border); 3124 3124 + overflow: hidden; 3125 3125 + z-index: 10; 3126 3126 + font-size: 0.65rem; 3127 3127 + line-height: 1.3; 3128 3128 + } 3129 3129 + 3130 3130 + .minimap-viewport { 3131 3131 + position: absolute; 3132 3132 + right: 0; 3133 3133 + left: 0; 3134 3134 + background: oklch(0.65 0.1 250 / 0.1); 3135 3135 + border: 1px solid oklch(0.65 0.1 250 / 0.3); 3136 3136 + border-radius: 2px; 3137 3137 + pointer-events: none; 3138 3138 + transition: top 0.1s ease, height 0.1s ease; 3139 3139 + } 3140 3140 + 3141 3141 + .minimap-headings { 3142 3142 + padding: 8px 10px; 3143 3143 + cursor: pointer; 3144 3144 + } 3145 3145 + 3146 3146 + .minimap-heading { 3147 3147 + padding: 2px 0; 3148 3148 + color: var(--color-text-muted); 3149 3149 + white-space: nowrap; 3150 3150 + overflow: hidden; 3151 3151 + text-overflow: ellipsis; 3152 3152 + transition: color 0.15s; 3153 3153 + } 3154 3154 + .minimap-heading:hover { 3155 3155 + color: var(--color-text); 3156 3156 + } 3157 3157 + .minimap-heading[data-level="1"] { font-weight: 600; color: var(--color-text); } 3158 3158 + .minimap-heading[data-level="2"] { padding-left: 8px; } 3159 3159 + .minimap-heading[data-level="3"] { padding-left: 16px; font-size: 0.6rem; } 3160 3160 + 3115 3161 .footnote-section { 3116 3162 border-top: 1px solid var(--color-border); 3117 3163 margin-top: 2rem;

+4

src/docs/index.html

reviewed

··· 373 373 374 374 <div class="editor-container"> 375 375 <div class="editor-wrapper" id="editor"></div> 376 376 + <div class="minimap" id="minimap" style="display:none"> 377 377 + <div class="minimap-viewport" id="minimap-viewport"></div> 378 378 + <div class="minimap-headings" id="minimap-headings"></div> 379 379 + </div> 376 380 <textarea class="markdown-source-textarea" id="markdown-source" style="display:none" spellcheck="false" aria-label="Markdown source editor"></textarea> 377 381 <div class="footnote-section" id="footnote-section" style="display:none"></div> 378 382 </div>

+51

src/docs/main.ts

reviewed

··· 51 51 import { createMarkdownToggle, TOGGLE_MODE } from './markdown-toggle.js'; 52 52 import { VersionManager, computeWordCount } from '../lib/version-history.js'; 53 53 import { createVersionPanel } from '../version-panel.js'; 54 54 + import { extractHeadings, computeViewportIndicator } from './minimap.js'; 54 55 import { SuggestionManager, createSuggestionAttrs } from '../lib/suggesting.js'; 55 56 import { OfflineManager } from '../lib/offline.js'; 56 57 import { extractHeadings, OutlineState } from './outline.js'; ··· 1228 1229 } 1229 1230 editor.on('update', updateFootnoteSection); 1230 1231 updateFootnoteSection(); 1232 1232 + 1233 1233 + // --- Minimap (#60) --- 1234 1234 + const minimapEl = document.getElementById('minimap') as HTMLElement; 1235 1235 + const minimapViewport = document.getElementById('minimap-viewport') as HTMLElement; 1236 1236 + const minimapHeadingsEl = document.getElementById('minimap-headings') as HTMLElement; 1237 1237 + 1238 1238 + function updateMinimap() { 1239 1239 + const html = editor.getHTML(); 1240 1240 + const headings = extractHeadings(html); 1241 1241 + 1242 1242 + if (headings.length < 2) { 1243 1243 + minimapEl.style.display = 'none'; 1244 1244 + return; 1245 1245 + } 1246 1246 + 1247 1247 + minimapEl.style.display = ''; 1248 1248 + minimapHeadingsEl.innerHTML = headings.map(h => 1249 1249 + `<div class="minimap-heading" data-level="${h.level}" title="${h.text}">${h.text}</div>` 1250 1250 + ).join(''); 1251 1251 + 1252 1252 + // Click to scroll to heading 1253 1253 + minimapHeadingsEl.querySelectorAll('.minimap-heading').forEach((el, i) => { 1254 1254 + el.addEventListener('click', () => { 1255 1255 + const headingEls = editor.view.dom.querySelectorAll('h1, h2, h3, h4, h5, h6'); 1256 1256 + if (headingEls[i]) { 1257 1257 + headingEls[i].scrollIntoView({ behavior: 'smooth', block: 'start' }); 1258 1258 + } 1259 1259 + }); 1260 1260 + }); 1261 1261 + 1262 1262 + updateMinimapViewport(); 1263 1263 + } 1264 1264 + 1265 1265 + function updateMinimapViewport() { 1266 1266 + const editorEl = editor.view.dom.closest('.editor-container') || editor.view.dom.parentElement; 1267 1267 + if (!editorEl) return; 1268 1268 + const scrollEl = editorEl.closest('.editor-container') || document.documentElement; 1269 1269 + const { top, height } = computeViewportIndicator( 1270 1270 + scrollEl.scrollTop, 1271 1271 + scrollEl.clientHeight, 1272 1272 + scrollEl.scrollHeight, 1273 1273 + ); 1274 1274 + minimapViewport.style.top = top + '%'; 1275 1275 + minimapViewport.style.height = height + '%'; 1276 1276 + } 1277 1277 + 1278 1278 + editor.on('update', updateMinimap); 1279 1279 + document.addEventListener('scroll', updateMinimapViewport, { passive: true }); 1280 1280 + // Delayed initial render 1281 1281 + setTimeout(updateMinimap, 500); 1231 1282 1232 1283 // --- Keyboard Shortcut Cheatsheet Modal (#15) --- 1233 1284 const DOCS_SHORTCUTS = [

+64

src/docs/minimap.ts

reviewed

··· 1 1 + /** 2 2 + * Document Minimap — VS Code-style overview for long documents. 3 3 + * 4 4 + * Pure logic module: heading extraction, viewport calculation. 5 5 + * DOM rendering is handled in main.ts. 6 6 + */ 7 7 + 8 8 + export interface MinimapHeading { 9 9 + level: number; 10 10 + text: string; 11 11 + id: string; 12 12 + } 13 13 + 14 14 + export interface ViewportIndicator { 15 15 + top: number; // percentage 16 16 + height: number; // percentage 17 17 + } 18 18 + 19 19 + /** 20 20 + * Extract headings from HTML content for the minimap outline. 21 21 + */ 22 22 + export function extractHeadings(html: string): MinimapHeading[] { 23 23 + if (!html) return []; 24 24 + 25 25 + const headings: MinimapHeading[] = []; 26 26 + // Match h1-h6 tags with optional id attribute 27 27 + const regex = /<h([1-6])(?:\s[^>]*?(?:id="([^"]*)")?[^>]*)?>([\s\S]*?)<\/h\1>/gi; 28 28 + let match; 29 29 + 30 30 + while ((match = regex.exec(html)) !== null) { 31 31 + const level = parseInt(match[1], 10); 32 32 + const id = match[2] || ''; 33 33 + // Strip HTML tags from heading text 34 34 + const text = match[3].replace(/<[^>]+>/g, '').trim(); 35 35 + if (text) { 36 36 + headings.push({ level, text, id }); 37 37 + } 38 38 + } 39 39 + 40 40 + return headings; 41 41 + } 42 42 + 43 43 + /** 44 44 + * Compute the viewport indicator position and size as percentages. 45 45 + */ 46 46 + export function computeViewportIndicator( 47 47 + scrollTop: number, 48 48 + viewportHeight: number, 49 49 + totalHeight: number, 50 50 + ): ViewportIndicator { 51 51 + if (totalHeight <= 0) { 52 52 + return { top: 0, height: 100 }; 53 53 + } 54 54 + 55 55 + const top = Math.max(0, (scrollTop / totalHeight) * 100); 56 56 + let height = Math.max(5, (viewportHeight / totalHeight) * 100); 57 57 + 58 58 + // Clamp so it doesn't overflow 59 59 + if (top + height > 100) { 60 60 + height = 100 - top; 61 61 + } 62 62 + 63 63 + return { top, height }; 64 64 + }

+64

tests/minimap.test.ts

reviewed

··· 1 1 + import { describe, it, expect } from 'vitest'; 2 2 + import { 3 3 + extractHeadings, 4 4 + computeViewportIndicator, 5 5 + type MinimapHeading, 6 6 + } from '../src/docs/minimap.js'; 7 7 + 8 8 + describe('Document Minimap', () => { 9 9 + describe('extractHeadings', () => { 10 10 + it('extracts headings from HTML', () => { 11 11 + const html = '<h1>Title</h1><p>Some text</p><h2>Section A</h2><p>More text</p><h3>Subsection</h3>'; 12 12 + const headings = extractHeadings(html); 13 13 + expect(headings).toHaveLength(3); 14 14 + expect(headings[0]).toEqual({ level: 1, text: 'Title', id: '' }); 15 15 + expect(headings[1]).toEqual({ level: 2, text: 'Section A', id: '' }); 16 16 + expect(headings[2]).toEqual({ level: 3, text: 'Subsection', id: '' }); 17 17 + }); 18 18 + 19 19 + it('returns empty array for no headings', () => { 20 20 + expect(extractHeadings('<p>Just text</p>')).toEqual([]); 21 21 + }); 22 22 + 23 23 + it('handles empty HTML', () => { 24 24 + expect(extractHeadings('')).toEqual([]); 25 25 + }); 26 26 + 27 27 + it('strips HTML tags from heading text', () => { 28 28 + const html = '<h1><strong>Bold</strong> Title</h1>'; 29 29 + const headings = extractHeadings(html); 30 30 + expect(headings[0].text).toBe('Bold Title'); 31 31 + }); 32 32 + 33 33 + it('extracts heading ids if present', () => { 34 34 + const html = '<h1 id="intro">Introduction</h1><h2 id="ch1">Chapter 1</h2>'; 35 35 + const headings = extractHeadings(html); 36 36 + expect(headings[0].id).toBe('intro'); 37 37 + expect(headings[1].id).toBe('ch1'); 38 38 + }); 39 39 + }); 40 40 + 41 41 + describe('computeViewportIndicator', () => { 42 42 + it('computes viewport position as percentage', () => { 43 43 + const result = computeViewportIndicator(100, 500, 2000); 44 44 + expect(result.top).toBe(5); // 100/2000 * 100 45 45 + expect(result.height).toBe(25); // 500/2000 * 100 46 46 + }); 47 47 + 48 48 + it('clamps to 100% max', () => { 49 49 + const result = computeViewportIndicator(1800, 500, 2000); 50 50 + expect(result.top + result.height).toBeLessThanOrEqual(100); 51 51 + }); 52 52 + 53 53 + it('handles zero total height', () => { 54 54 + const result = computeViewportIndicator(0, 500, 0); 55 55 + expect(result.top).toBe(0); 56 56 + expect(result.height).toBe(100); 57 57 + }); 58 58 + 59 59 + it('minimum height is 5%', () => { 60 60 + const result = computeViewportIndicator(0, 10, 10000); 61 61 + expect(result.height).toBeGreaterThanOrEqual(5); 62 62 + }); 63 63 + }); 64 64 + });