Wiki Editor & Content Authoring
Relevant source files
The following files were used as context for generating this wiki page:
The Wiki Editor & Content Authoring system in Archivum is designed to provide a high-performance, browser-based Markdown editing experience that replicates the functionality of manual personal knowledge management (PKM) tools like Obsidian. It centralizes content creation through a combination of manual user input and automated agent-authored syntheses.
The system is built on the CodeMirror 6 framework, providing a extensible editor that supports real-time syntax highlighting, custom "wikilink" behavior, and a seamless auto-save mechanism. Content is stored as canonical Markdown files, often enriched with YAML frontmatter for metadata tracking such as tags, entities, and source URLs.
Sources: archivum-prd-v1.0.md:162-180, apps/frontend/src/components/Editor/Editor.tsx
Editor Architecture and Logic
The editor is encapsulated in a React component that manages the lifecycle of the CodeMirror instance. It integrates with the application's global state to provide context-aware features like page navigation and link validation.
Core Component Structure
The Editor component serves as a wrapper for the EditorView and EditorState from CodeMirror. It uses useImperativeHandle to expose methods like getContent() and focus() to parent containers, specifically the WikiPage component.
This diagram shows the relationship between the page container, the core editor component, and its functional extensions.
Sources: apps/frontend/src/components/Editor/Editor.tsx:28-55, apps/frontend/src/pages/WikiPage.tsx:165-175
Synchronization and Persistence
Archivum implements a robust auto-save mechanism to ensure data durability without requiring manual "Save" actions.
- Content Saving: Changes to the document body are debounced by 1000ms. When the timer expires, the editor calls the
updatePageAPI endpoint. - Metadata Saving: Page metadata (titles and tags) is handled separately in
WikiPage.tsx. Changes to these fields are debounced by 650ms to minimize API traffic while maintaining a responsive UI.
The sequence of events for the debounced content persistence loop.
Sources: apps/frontend/src/components/Editor/Editor.tsx:57-73, apps/frontend/src/pages/WikiPage.tsx:75-93
Wikilink System
A fundamental feature of the authoring environment is the [[wikilink]] system, which allows users to create cross-references between pages.
Autocomplete and Navigation
The wikilinkExtension.ts file provides a custom CodeMirror extension that detects the [[ trigger. It filters the global list of wiki pages by title or slug to provide a dropdown of suggestions.
| Feature | Implementation Detail |
|---|---|
| Trigger | Regex match for [[ followed by text |
| Search Logic | Case-insensitive inclusion check on page titles and slugs |
| Apply Syntax | Formats selection as [[slug|Title]] |
| Visuals | Existing pages use cm-wikilink-existing (blue/underline); missing pages use cm-wikilink-missing (gray/dotted) |
Sources: apps/frontend/src/components/Editor/wikilinkExtension.ts:16-35, apps/frontend/src/components/Editor/wikilinkExtension.ts:133-150
Link Decoration Logic
The system uses a ViewPlugin to decorate links in the viewport. It checks every detected slug against a slugSet derived from the current library to determine if the target exists.
The logic flow for determining the visual style and behavior of a wikilink within the editor.
Sources: apps/frontend/src/components/Editor/wikilinkExtension.ts:72-101
Agent-Authored Content
Archivum distinguishes between user-authored and agent-authored content. The WikiAgent in the backend generates structured knowledge following strict formatting rules.
Extraction and Frontmatter
When the agent processes a source (file or URL), it generates a JSON object containing the page content. This content includes a YAML frontmatter block, which is essential for the system's metadata parsing.
Agent Output Schema:
- Slug: Kebab-case identifier.
- Title: Human-readable page name.
- Content: Markdown string starting with
---metadata. - Tags: Categorical labels.
Sources: apps/backend/archivum/ingest/agent.py:30-50, apps/backend/archivum/ingest/agent.py:190-210
Content Guidelines
The system prompt for the authoring agent enforces an encyclopedic style:
- No meta-commentary (e.g., "This document discusses...").
- Extensive use of
[[wikilink]]syntax for named entities. - Inclusion of
source_urlin frontmatter for provenance.
Sources: apps/backend/archivum/ingest/agent.py:44-55
Content Management Actions
The WikiPage container provides the administrative interface for individual pages, allowing for metadata updates, deletion, and public sharing.
Page Actions and Exporting
Users can interact with the page via a menu that provides exporting and sharing capabilities.
| Action | Technical Mechanism | File Reference |
|---|---|---|
| Share | Generates a 32-byte URL-safe token and saves to share_links table | WikiPage.tsx:128-142 |
| Delete | API call to remove the Markdown file and its vector/graph indices | WikiPage.tsx:106-126 |
| Export HTML | GET /api/export?format=html | WikiPage.tsx:218-220 |
| Export PDF | GET /api/export?format=pdf (rendered via WeasyPrint) | WikiPage.tsx:222-224 |
Sources: apps/frontend/src/pages/WikiPage.tsx:216-245, archivum-prd-v1.0.md:330-340
Public Content Rendering
For shared or public pages, Archivum uses a specialized lightweight renderer rather than the full CodeMirror editor. This component uses DOMPurify to sanitize the HTML output generated from the Markdown content.
// Example of Markdown to HTML translation in PublicWikiPage
function renderMarkdown(text: string): string {
return text
.replace(/^# (.+)$/gm, '<h1 class="text-xl font-bold text-text-primary mt-6 mb-2">$1</h1>')
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-accent hover:underline" target="_blank">$1</a>')
// ... additional regex replacements
}
Sources: apps/frontend/src/pages/PublicWikiPage.tsx:7-30, apps/frontend/src/pages/PublicWikiPage.tsx:58-65
Summary
The Wiki Editor and Content Authoring module provides a hybrid environment where human intuition meets AI synthesis. By using CodeMirror 6 and a debounced persistence layer, Archivum ensures that the knowledge base remains both highly interactive and structurally consistent across its Markdown, vector, and graph storage layers.