Editor and Workspace
Kowork features a powerful multi-tab editor with Monaco code editor, TipTap rich text editor, LSP integration, and comprehensive workspace management.
Overview
The editor system provides:
- Monaco code editor - full-featured code editing with IntelliSense, syntax highlighting, and LSP support
- TipTap rich text editor - WYSIWYG markdown editor with live preview and formatting tools
- Multi-tab editing - work on multiple files simultaneously with tab persistence
- LSP integration - Language Server Protocol support for TypeScript, Python, Rust, Go, and more
- Workspace management - select folders, scan file trees, watch for changes
Monaco Code Editor
The Monaco editor (the same editor powering VS Code) provides a professional code editing experience with:
Language Support
Syntax highlighting for TypeScript, JavaScript, Python, Rust, Go, Java, C++, and 30+ other languages.
IntelliSense
Auto-completion, parameter hints, and quick documentation via Language Server Protocol.
Performance
Optimized for large files with automatic feature throttling above 1MB, supports files up to 10MB.
Custom Theming
Kollabor dark theme with lime accents, matching the overall app design system.
Key features:
// Component: CodeEditor.vue
// Location: src-vue/src/components/editor/CodeEditor.vue
// Dynamic loading - Monaco is loaded on-demand to reduce initial bundle size
// Global singleton prevents duplicate loads across editor instances
const globalMonacoModule = loadMonaco(); // 3MB bundle
// Performance optimizations for large files
const isLargeFile = fileSize > 1024 * 1024; // 1MB threshold
if (isLargeFile) {
// Disable expensive features
minimap: false,
smoothScrolling: false,
cursorSmoothCaretAnimation: 'off'
}
// Keyboard shortcuts
Cmd+S // Save file
Cmd+W // Close tab
Cmd+T // New tab
Cmd+1-9 // Switch to tab by numberTipTap Rich Text Editor
TipTap provides a WYSIWYG markdown editing experience for notes with extensive formatting capabilities:
Rich Formatting
Bold, italic, strikethrough, headings, lists, links, images, code blocks, tables, and more.
Markdown Support
Native markdown parsing and serialization with GFM tables, task lists, and syntax highlighting.
Source Mode
Toggle between WYSIWYG and raw markdown source editing with syntax preservation.
Advanced Features
LaTeX math equations, YouTube embeds, mentions, footnotes, and drag-and-drop image uploads.
Available extensions:
// Component: NoteEditor.vue
// Location: src-vue/src/components/notes/NoteEditor.vue
extensions: [
StarterKit, // Basic markdown support
Link, // Hyperlinks with auto-detection
Image, // Image embeds
CodeBlockLowlight, // Syntax highlighting (JavaScript, Python, etc.)
Table, TableRow, // GFM-style tables
TaskList, TaskItem, // Checkboxes
Mathematics, // LaTeX equations via KaTeX
Youtube, // Video embeds
Highlight, // Text highlighting
TextAlign, // Left/center/right/justify
Markdown, // Markdown parsing and serialization
]
// Bubble menu - appears on text selection
// Floating menu - appears on empty lines with quick insert buttonsMulti-Tab Editing
Work on multiple files, notes, and chats simultaneously with the tab system:
- Tab Types: Files, Notes, Chats, Transcriptions, and Home (sticky tab)
- Persistence: Tabs are restored on app restart with cursor and scroll position
- Dirty State Tracking: Visual indicators for unsaved changes
- Reordering: Drag-and-drop to rearrange tabs
- Scrolling: Horizontal scroll for many tabs with mouse wheel support
- Keyboard Navigation: Switch between tabs using Cmd+1-9 or Ctrl+Tab
// Composable: useEditor()
// Location: src-vue/src/composables/useEditor.ts
interface EditorTab {
id: string;
type: 'file' | 'note' | 'chat' | 'home' | 'transcription';
path: string; // Relative path for files, ID for notes/chats
workspaceRoot?: string; // Only for files
name: string;
language?: string; // For syntax highlighting
content: string;
isDirty: boolean; // Unsaved changes
isActive: boolean;
isSticky?: boolean; // Cannot be closed (Home tab)
lspStatus?: 'inactive' | 'connecting' | 'active' | 'error';
lintIssues?: LspDiagnostic[];
}
// Tab operations
openFile(filePath, workspaceRoot)
openNote(noteId, note)
openChat(chatId, chat)
closeTab(tabId, force?)
saveTab(tabId)
switchToTab(tabId)
reorderTab(draggedTabId, targetTabId)Language Server Protocol (LSP)
LSP integration provides professional IDE features for supported languages:
| Language | Server | Features |
|---|---|---|
TypeScript/JavaScript | TypeScript Language Server | IntelliSense, diagnostics, refactoring |
Python | Pyright | Type checking, auto-completion |
Rust | Rust Analyzer | Borrow checker, cargo integration |
Go | GoPLS | Go modules, auto-imports |
JSON | JSON Language Server | Schema validation, formatting |
LSP features are automatically enabled when a language server is running:
// Auto-start LSP servers on file open
async function ensureLspRunning(language, workspaceRoot) {
// Check if auto-start is enabled
const autoStart = settings.lsp?.autoStart !== false;
// Find configured server for this language
const serverConfig = lspServers.find(s => s.language === language);
// Start server if not running
await nativeAPI.startLanguageServer(language, workspaceRoot);
// Wait for server to be ready (up to 5 seconds)
// Then call openDocument to enable diagnostics
}
// Diagnostic polling (every 3 seconds)
async function pollLspStatus() {
const servers = await nativeAPI.listLanguageServers();
const diagnostics = await nativeAPI.getDiagnostics(filePath);
// Update Monaco markers with LSP diagnostics
monaco.editor.setModelMarkers(model, 'lsp', markers);
}Workspace Management
Workspace features allow you to work with local project directories:
Folder Selection
Use the system dialog to select any folder as your workspace root.
File Tree Scanning
Automatically scans workspace with smart filtering (ignores node_modules, .git, etc.).
File Operations
Read, write, create, delete, rename files and directories within the workspace.
File Watching
Real-time notifications for file changes (create, modify, delete) via notify library.
Workspace commands (Rust backend):
// Tauri commands in src-tauri/src/commands/workspace.rs
// Select and scan workspace
select_workspace_folder() // Open system dialog
scan_workspace_folder(folderPath) // Get file tree (max depth: 5)
// File operations (all paths validated for security)
read_workspace_file(workspaceRoot, filePath)
save_workspace_file(workspaceRoot, filePath, content)
create_workspace_file(workspaceRoot, filePath, content)
delete_workspace_item(workspaceRoot, filePath)
rename_workspace_item(workspaceRoot, oldPath, newPath)
create_workspace_directory(workspaceRoot, dirPath)
// File watching
watch_workspace_folder(folderPath) // Start watching
stop_watching_workspace(folderPath) // Stop watching
list_workspace_watchers() // List active watchers
// Persistence (stored in ~/.kollabor/workspaces.json)
add_workspace_folder(path)
list_persisted_workspace_folders()
remove_workspace_folder(folderId)Security features:
- Path Validation: All paths are canonicalized and validated to prevent directory traversal
- TOCTOU Protection: Atomic file handle validation prevents symlink replacement attacks
- Smart Filtering: Ignores .git, node_modules, and other build artifacts automatically
- Atomic Writes: Uses temp files + rename for crash-safe file operations
- Size Limits: Maximum file size of 50MB for IPC transfers
File Metadata
Files can be enhanced with metadata stored in ~/.kollabor/.file-metadata/:
Tags
Organize files with custom tags for easy filtering and search.
AI Questions
Attach questions to files for AI context and documentation.
Versions
Track file versions with timestamps and descriptions.
Notes System
Notes provide a dedicated space for markdown documentation with AI-powered features:
// Note operations (stored in ~/.kollabor/notes/)
interface Note {
id: string;
title: string;
content: string; // Markdown format
tags: string[];
createdAt: string;
updatedAt: string;
metadata?: NoteMetadata; // AI context, linked files, etc.
}
// CRUD operations
createNote(note)
listNotes()
updateNote(noteId, updates)
deleteNote(noteId)
// AI-powered features
enhanceNoteWithAI(noteId, prompt) // Rewrite, expand, summarize
generateNoteTags(content) // Auto-tag based on contentKeyboard Shortcuts
| Shortcut | Action | Context |
|---|---|---|
Cmd+S | Save current file/note | Editor |
Cmd+W | Close current tab | Editor |
Cmd+T | New tab | Editor |
Cmd+1-9 | Switch to tab by number | Editor |
Ctrl+Tab | Next tab | Editor |
Shift+Ctrl+Tab | Previous tab | Editor |
Cmd+F | Find in file | Monaco |
Cmd+H | Find and replace | Monaco |