Add backlink

This commit is contained in:
2025-11-12 09:31:09 +01:00
parent 5e30a5cf5d
commit 584a4a0acd
25 changed files with 1769 additions and 79 deletions

View File

@ -170,6 +170,58 @@ User types in editor → CodeMirror EditorView.updateListener
└─ HTMX updates file tree automatically
```
### 6. Creating Links Between Notes (Internal Links)
```
User types /ilink → SlashCommands detects slash + query
├─ Filters commands by query
└─ Shows command palette
└─ User selects "ilink" → SlashCommands.openLinkInserter()
├─ Saves current cursor position
└─ Opens LinkInserter modal
User types query → LinkInserter searches
├─ Debounce 200ms
└─ fetch('/api/search?query=...')
├─ Go Server queries indexer
├─ Returns HTML results
└─ LinkInserter parses HTML
├─ Extracts title, path, tags
├─ Renders in modal
└─ Updates keyboard selection
User selects note → LinkInserter.selectResult()
(Enter/click) │
├─ Calls callback with {title, path}
└─ SlashCommands.openLinkInserter callback
├─ Builds HTML with HTMX: <a href="#" hx-get="/api/notes/path">title</a>
├─ Uses CodeMirror transaction
├─ Replaces /ilink with HTML link
├─ Positions cursor after link
└─ Closes modal
Preview Rendering → marked.js parses Markdown (including inline HTML)
├─ DOMPurify sanitizes (allows hx-* attributes)
├─ htmx.process() activates HTMX on links
└─ Links become clickable → load note via HTMX
```
**Key Design Decisions**:
- **No new backend code**: Reuses existing `/api/search` endpoint for search, `/api/notes/` for navigation
- **Database-free**: Leverages in-memory indexer for speed
- **Consistent UX**: Modal design matches SearchModal styling
- **Clickable links**: HTML with HTMX attributes, rendered directly by marked.js
- **HTMX integration**: Links use `hx-get` to load notes without page reload
- **Keyboard-first**: Full keyboard navigation without mouse
## Frontend Architecture
### Build Process (Vite)
@ -224,6 +276,17 @@ Executed in browser → Initializes components
- Result highlighting
- Uses HTMX search API
**link-inserter.js**
- LinkInserter class for internal note linking
- Modal search interface for `/ilink` command
- Fuzzy search across notes
- Keyboard navigation (↑/↓/Enter/Esc)
- Integration with SlashCommands
- Uses HTMX search API for consistency
- Inserts Markdown links into editor
**Note**: `/link` command inserts standard Markdown template `[texte](url)` for external links
**ui.js**
- Sidebar toggle (mobile/desktop)
- Simple utility functions