Workflowy-Style Outline

Obsidian Workflowy Plugin

A powerful Obsidian plugin that transforms your Markdown notes into a Workflowy-style outline editor with seamless block-level editing capabilities.

中文文档

✨ Features

🎯 Core Features

• Dual-Mode Editing: Seamlessly switch between traditional Markdown editing and Workflowy-style outline editing
• Block-Level Operations: Hierarchical structure with intuitive block manipulation and atomic undo/redo
• Anti-Race Condition Sync: Bulletproof save queue enforces stable real-time synchronization under high-frequency typing
• Zero Interference: 5-layer isolation architecture ensures no impact on native Obsidian Markdown experience

⌨️ Keyboard Shortcuts

🎨 UI Features

• Workflowy-Style Interface: Clean bullet points with hierarchical indentation lines
• Collapse/Expand: Hide/show child blocks (click triangle, vertical line, or press Alt+Enter)
• Zoom Focus: Click bullet to zoom into a specific block for focused editing
• Real-Time Search: Quick search with highlighting (highlight or filter mode)
• Drag & Drop: Intuitive block reordering via drag and drop
• Multi-Selection: Select multiple blocks for batch operations (via left-click drag or Ctrl+click)
• Theme Support: Multiple built-in themes with light/dark mode support
• Responsive Design: Works perfectly on desktop and mobile devices

📱 Mobile Features

• Dual-Mode Toolbar: Edit toolbar (keyboard up) with undo/redo, formatting, insert links/tags/attachments; Function toolbar (keyboard down) with render mode toggle, expand/collapse all, level-based expand
• IME Flicker Prevention: Local DOM patching avoids full re-render, keeping the soft keyboard stable
• Touch Optimized: Swipe-to-scroll toolbar, 8px swipe threshold prevents accidental taps, pointerdown focus protection
• Insert Attachment: Opens system file picker (photos/files), saves to vault and inserts Markdown link

📝 Editing Modes

• Source Mode: Direct text editing with Markdown syntax
• Live Preview Mode: Real-time Markdown rendering with WYSIWYG editing
  • Full Markdown formatting support (bold, italic, links, headings, etc.)
  • Internal link preview and navigation
  • Embed support (images, notes, blocks)
  • Code syntax highlighting

⚡ Slash Command Menu (New)

Type / to trigger the slash command menu for quick insertion:

🏷️ Tag Suggestions (New)

Type # to trigger the tag suggestion menu:

• Automatically reads all tags from your Vault
• Real-time filtering of matching tags
• Keyboard navigation for selection
• Quick tag insertion

✅ Multi-Status Todo Support (New)

Supports four todo states, compatible with obsidian-tasks plugin:

• [ ] Todo
• [/] In Progress
• [x] Done
• [-] Cancelled

🔗 Link Support

• Internal links ([[note]]) with click navigation
• Heading links ([[note#heading]]) with scroll and highlight
• Block references ([[note#^blockid]]) with precise navigation
• Embed links (![[note]]) with click-to-navigate
• Ctrl+hover for preview popup
• Ctrl+Alt+click or Shift+click for split view

📎 Link Suggestions

Type [[ or ![[ to trigger link suggestions:

• Auto-search files in your Vault
• Type # to select headings
• Type ^ to select block references
• Fuzzy search and keyboard navigation support

🔀 Cross-Document Drag & Drop

• Normal drag: Move blocks between documents
• Alt+drag: Create block references (![[file#^blockid]])
• Auto-generates Obsidian-compliant block IDs
• Supports multi-select batch dragging

📝 Thino Compatibility (New)

Compatible with Thino/Memos plugin format:

• Tab Indentation Support: First-level list items support Tab-indented continuation lines
• Auto Timestamp: Automatically add timestamps when creating new blocks
• Timestamp Format: Choose between HH:mm or HH:mm:ss format
• Seamless Switching: Preserves Tab indentation when switching between Markdown and Outline views

✍️ Live Preview Editor Enhancements

Markdown shortcuts in Live Preview mode:

📱 Mobile Toolbar

Fixed bottom toolbar on mobile with quick actions:

📁 File Drag & Paste

• Drag files: Drag files into editor to auto-insert links
• Paste images: Paste clipboard images, auto-save and insert
• Drag images: Drag image files to auto-upload and insert links
• Supports custom attachment save path

📖 Usage

Switching Views

Switch to Workflowy View:

1. Open any Markdown file
2. Use Command Palette (Ctrl/Cmd+P) and search "Toggle Outline/Markdown View"
3. Or right-click the file and select "Open as Outline Note"

Switch back to Markdown View:

1. In Workflowy view, use Command Palette and search "Toggle Outline/Markdown View"
2. Or right-click and select "Open as Markdown"

Basic Operations

• Create Block: Press Enter to create a new block after current one
• Indent Management: Use Tab and Shift+Tab to adjust hierarchy
• Move Blocks: Use Ctrl+Shift+↑/↓ or drag and drop
• Collapse/Expand: Click the triangle icon, the vertical indentation line, or press Alt+Enter
• Zoom Focus: Click the bullet point to zoom into that block
• Multi-Select: Drag up/down with left mouse button, or hold Ctrl and click multiple blocks for batch operations

Search

• Click the search icon or use the search bar at the top
• Highlight Mode: Highlights matching content while showing all blocks
• Filter Mode: Shows only blocks containing the search term
• Case-sensitive search option available

📦 Installation

Manual Installation

1. Download the latest release from Releases
2. Extract to your Obsidian plugins folder: {vault}/.obsidian/plugins/obsidian-workflowy-plugin/
3. Enable the plugin in Obsidian settings

Using BRAT

BRAT (Beta Reviewers Auto-update Tester) allows you to install and automatically update plugins directly from GitHub.

1. Install the BRAT plugin from Obsidian Community Plugins
2. Enable BRAT in Settings → Community plugins
3. Open BRAT settings and click "Add Beta plugin"
4. Enter the repository URL: https://github.com/springrain1/obsidian-workflowy-plugin
5. Click "Add Plugin" and BRAT will install obsidian-workflowy-plugin automatically
6. Enable obsidian-workflowy-plugin in Settings → Community plugins

Tip: BRAT will automatically check for updates and notify you when a new version is available.

⚙️ Settings

UI Settings

• Indent Size: Customize indentation distance (default: 30px)
• Theme: Choose from multiple built-in themes
• Show Bullets: Toggle bullet point visibility
• Show Collapse Indicators: Toggle collapse arrow visibility
• Show Vertical Lines: Toggle vertical indentation lines
• Animations: Enable/disable UI animations
• Font Size: Customize editor font size (or use Ctrl+Scroll)
• Line Height: Customize line height multiplier
• Bullet Alignment: Choose bullet alignment (top/center/bottom)
• Font Family: Choose font source (theme/system/custom)

Editor Settings

• Render Mode: Choose between Source mode and Live Preview mode
• Auto Save: Enable automatic saving with configurable delay
• Placeholder Text: Customize empty block placeholder
• Attachment Path: Configure where file attachments are saved

Feature Toggles

• Slash Command: Enable/disable slash command menu (/)
• Tag Suggestions: Enable/disable tag suggestions (#)
• Link Suggestions: Enable/disable link suggestions ([[)
• Cross-Document Drag: Enable/disable dragging blocks between documents
• Auto Block ID: Auto-generate block IDs when Alt+dragging
• Mobile Toolbar: Enable/disable bottom toolbar on mobile

Search Settings

• Search Mode: Highlight or Filter mode
• Case Sensitive: Toggle case-sensitive search
• Auto Expand Matches: Automatically expand collapsed blocks containing matches

Drag & Drop Settings

• Enable Drag & Drop: Toggle drag and drop functionality
• Show Drop Indicators: Visual feedback during drag operations
• Allow Nested Drop: Allow dropping blocks as children

Collapse State Memory

• Enable: Remember collapse states in the document
• Marker: Custom marker for collapse state (stored as HTML comments)

Thino Compatibility

• Enable Thino Mode: Support Tab-indented continuation lines for first-level list items
• Auto Timestamp: Automatically add timestamps when creating new blocks
• Timestamp Format: Choose between HH:mm or HH:mm:ss format

🏗️ Architecture

Core Components

• BlockEditor: Block-level editing logic and state management
• UndoManager: Transaction-based granular history state and undo/redo system
• MobileDOMPatcher: Mobile-specific incremental DOM renderer and 3-tier fallback strategy
• OutlineParser: Bidirectional conversion between Markdown and outline structure
• WorkflowyView: Custom view component
• IsolationLayer: Functional isolation system ensuring no interference with native Obsidian

Data Flow

Markdown File ↔ OutlineParser ↔ BlockEditor ↔ WorkflowyView ↔ User Interface

Isolation Architecture

The plugin employs a 5-layer isolation architecture:

1. ViewStateManager: Centralized view state tracking
2. IsolationLayer: Boundary enforcement and validation
3. CommandProxy: Command interception and context validation
4. EventDelegator: Event isolation and delegation
5. RuntimeValidator: Runtime assertions and health checks

This ensures complete separation between Workflowy functionality and native Obsidian experience.

🔧 Compatibility

• Obsidian Version: 0.15.0+
• Platform Support:
  • ✅ Windows / macOS / Linux Desktop
  • ✅ iOS / Android Mobile
  • ✅ Tablets (iPad / Android Tablet)
• Theme Compatibility: Works with all Obsidian themes, auto-adapts to light/dark mode

📱 Mobile Optimization

• Touch Interaction: All interactive elements meet 44px minimum touch target
• Responsive Layout: Automatically adapts to different screen sizes
• Optimized Font Size: 16px font on mobile to prevent auto-zoom
• Reduced Indentation: Smaller indent spacing on mobile to save screen space
• Touch Drag & Drop: Full support for touch-based reordering
• Platform Detection: Automatic device detection with appropriate optimizations

🙏 Acknowledgments

• Thanks to Obsidian for the powerful plugin API
• Inspired by Workflowy's excellent design
• Referenced Obsidian Outliner for some implementations
• Thanks to the community for feedback and contributions

💬 Feedback & Support

• Bug Reports: GitHub Issues
• Feature Requests: GitHub Discussions
• Author: SpringRain | 公众号: 及时春雨