The biggest release yet. The entire editor has been rebuilt on React 18, images and tables got ground-up redesigns, and new features like block handles, document outline, and save validation make PM Toolkit feel like a proper writing tool.
Added - Block handles — Drag handles appear in the editor gutter on hover. Drag any block to reorder it; click
+ to insert new content between blocks. Right-click a table's grip handle for quick actions (clear contents, duplicate, delete) - Document outline — Collapsible heading sidebar for navigating long documents at a glance
- Save guard — Every save is validated before it touches your file. Blocks corrupted content containing webview URIs, internal data attributes, or excessive HTML from ever reaching disk
- Image system redesign — Complete overhaul of the image experience:
- Drop zone UI for empty images — drag a file, paste a URL, or browse with the VS Code file picker
- Drag-to-resize handles with live preview
- Popover toolbar on click for alignment (left/center/right), replace, and delete
- Image captions that toggle on/off and map to markdown alt text
- Width and alignment persisted as HTML comments in markdown
-
imageAssetsPath setting to control where uploaded images are saved - Table controls redesign — Tables went from basic to best-in-class:
- Grip handles on rows (left edge) and columns (top edge) for drag-to-reorder with drop indicators
- Right-click context menus on grips for insert/delete operations, with header row toggle
- Full-width/height pill bars on last row/column for quick expansion
- Persisted column widths with horizontal scroll for wide tables
- Click between adjacent tables to insert a paragraph (gap-click handler)
- Select all cells + Delete removes the entire table
- Mermaid fit-to-view — Diagrams default to fit-to-view mode so the full diagram is always visible (toggle to scroll/zoom for large diagrams)
- H4 support — Heading 4 added to slash commands and bubble menu
- React 18 architecture — The entire editor UI has been migrated to React:
- All interactive components rewritten: SlashCommand, ImageNode, MermaidNode, BlockHandle, DocumentOutline, BubbleMenu, LinkPicker, TableSizePicker
- New
Editor.tsx entry point with @tiptap/react integration
- esbuild configured for JSX compilation
- All icons now use proper lucide imports via shared LucideIcon component (eliminated ~200 lines of inline SVG strings) - 285 E2E tests — Up from 192. New coverage for images, tables, serialization, VS Code message handlers, settings, and save validation
Changed - Theme-adaptive accent color — Unified selection highlights, focus rings, and interactive elements under
--pmtoolkit-accent CSS variable that adapts to light/dark themes - Consistent floating menus — All floating menus (slash command, bubble menu, image popover, table context menu) now share consistent sizing: 12px font, 4px 8px padding, 6px border-radius
- Cleaner add bars — Table add-row/column bars only appear when hovering the last row/column (less visual noise)
- Settings polish — Toggle switches use theme variables instead of hardcoded colors
- Branding cleanup — Removed "Obsidian" and "Notion" references from descriptions and UI
Fixed - Block handle drag-and-drop works correctly with ProseMirror's native drag system
- Image serialization preserves width and alignment through markdown round-trips
- Caption toggle preserves alt text instead of deleting it
- External content updates no longer pollute the undo history
- Mermaid diagrams no longer enter edit mode on initial click
- Mermaid placeholder content resolved in directly-parsed nodes
- Template loading ported to React editor entry point
- Slash command menu positioning near editor edges
