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 number

TipTap 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 buttons

Multi-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:

LanguageServerFeatures
TypeScript/JavaScriptTypeScript Language ServerIntelliSense, diagnostics, refactoring
PythonPyrightType checking, auto-completion
RustRust AnalyzerBorrow checker, cargo integration
GoGoPLSGo modules, auto-imports
JSONJSON Language ServerSchema 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 content

Keyboard Shortcuts

ShortcutActionContext
Cmd+SSave current file/noteEditor
Cmd+WClose current tabEditor
Cmd+TNew tabEditor
Cmd+1-9Switch to tab by numberEditor
Ctrl+TabNext tabEditor
Shift+Ctrl+TabPrevious tabEditor
Cmd+FFind in fileMonaco
Cmd+HFind and replaceMonaco