Dossier

A Notion-like block editor inside VS Code. Create rich pages with structured blocks, link them in a nested hierarchy, and export to markdown — all without leaving your IDE.

Features

Block Editor

• 15 block types — paragraph, headings (H1-H3), bullet list, numbered list, to-do, code (syntax highlighted), callout, toggle, table, divider, image, page link, mermaid diagram
• Slash commands — type / to insert any block type with filtering
• Inline formatting — bold, italic, code, strikethrough, links
• Markdown paste — paste markdown text and it auto-converts to proper blocks
• Copy as markdown — copied blocks produce clean markdown in external apps

Pages & Navigation

• Page hierarchy — nest pages as children, navigate via sidebar tree or breadcrumbs
• Page linking — @ or [[ triggers insert inline link chips or full-width cards
• Drag-and-drop — rearrange pages in the sidebar (with circular reference prevention)
• Back/forward — Alt+Left / Alt+Right navigation history
• Search — full-text search across all pages with highlighted results

Data Management

• Version history — automatic snapshots with restore via QuickPick
• Trash — soft delete with 30-day retention, restore or permanent delete
• Image handling — paste or drop images, drag-to-resize
• Templates — save pages as templates, create new pages from them
• Markdown export — single page or bulk export preserving directory hierarchy
• Auto markdown sync — optionally mirror pages as .md files on every save
• Atomic writes — crash-safe saves via tmp+rename
• Read-only protection — .dossier files are marked read-only at the OS level to prevent manual edits

Developer Experience

• Theme-aware — adapts to VS Code light, dark, and high-contrast themes
• Workspace or global storage — store pages per-project (.dossier/) or globally
• Git-friendly — each page is a separate JSON file; .gitignore suggestions included

Getting Started

Prerequisites

• VS Code v1.85+
• Node.js v18+

Install & Run

git clone https://github.com/karan62kj/dossier.git
cd dossier
npm install

Press F5 in VS Code to launch the Extension Development Host.

Commands

Keyboard Shortcuts

Settings

Architecture

Two isolated runtimes communicating via postMessage:

Host (Node.js)                    Webview (Browser)
├── extension.ts                  ├── main.tsx
├── providers/                    ├── App.tsx
│   ├── DossierEditorProvider.ts    ├── Editor.tsx
│   ├── PageTreeProvider.ts       ├── components/
│   ├── TrashTreeProvider.ts      ├── extensions/
│   └── SearchViewProvider.ts     ├── utils/
├── services/                     │   ├── serialization.ts
│   ├── StorageService.ts         │   ├── markdownParser.ts
│   ├── SearchService.ts          │   └── markdownSerializer.ts
│   ├── HistoryService.ts         └── styles/
│   ├── TemplateService.ts
│   ├── MarkdownExporter.ts
│   └── NavigationService.ts
└── models/ (shared types)
    ├── types.ts
    └── messages.ts

Storage Layout

.dossier/
├── index.json           # Page manifest
├── pages/               # One JSON file per page
├── assets/              # Pasted/dropped images
├── history/             # Version snapshots
├── trash/               # Soft-deleted pages
├── templates/           # Saved page templates
└── md/                  # Auto-exported markdown (if enabled)

Build Scripts

npm run build          # Production build (host + webview)
npm run watch          # Dev mode — watches both pipelines
npm run build:host     # esbuild → dist/extension.js
npm run build:webview  # Vite → dist/webview/

License

MIT