mio/docs/taolun.md

Project Discussion

Requirements

1. Two-column layout: Note list on the left, editor/preview on the right
2. SQLite storage: Using libsql client
3. Markdown support: Render Markdown content
4. Glow-like effect: Terminal Markdown rendering

Technical Issues and Solutions

OpenTUI Markdown Component Issue

Problem: OpenTUI's <markdown> component could not render styles correctly (tried multiple methods, all failed)

Solution: Implement a custom Markdown parser using OpenTUI's <text> components for manual rendering

Textarea Wrap Issue

Problem: Default wrapMode in textarea React types is missing

Solution: Make textarea usable by setting focused attribute, access EditBufferRenderable's wrapMode option through underlying access

Preview Mode Line Break Issue

Problem: Line breaks from edit mode not showing in preview

Solution: Handle empty lines in renderMarkdown function, add <text>{" "}</text>

Code Block Rendering

Problem: Indentation rendering issues inside ``` code blocks

Solution: Implement code block detection and rendering logic, render each code line separately

Multi-select Feature

Problem: OpenTUI's onMouseDown event doesn't include ctrlKey/shiftKey modifier info, and useKeyboard couldn't capture modifier keys

Solution:

• Tried using useKeyboard to listen for modifier keys but failed (terminal may not send separate modifier key events)
• Switched to double-click "selection mode" approach: double-click any note to toggle selection mode, click to multi-select in selection mode

Cross-platform Database Path

Problem: Hardcoded database path not compatible across platforms

Solution: Implement getDbPath() function to use ~/.config/mio/cache.db for all platforms

Unresolved Issues

1. Multi-select feature: Double-click selection mode experience is not ideal, keyboard modifier key approach couldn't be implemented
2. TypeScript type errors: Some type errors in NoteEditor (bold attribute doesn't exist, etc.)

Build Instructions

npm run dev    # Development mode
npm run build  # Build to mio.exe

Database location: ~/.config/mio/cache.db