Skip to content

ROADMAP.md

Latest commit

 

History

History
537 lines (437 loc) · 16.1 KB

ROADMAP.md

File metadata and controls

537 lines (437 loc) · 16.1 KB

Likha Development Roadmap

This document outlines the complete development plan for Likha, divided into manageable phases.

Development Strategy

Recommended Approach: Monorepo with Incremental Development

Why this approach:

  • Build core functionality first, then expand
  • Each phase delivers working features
  • Easy to test and validate as you go
  • Community can start using basic version early
  • Plugins can be developed independently

Tech Stack Decisions:

  • Build Tool: Vite (fast, modern, great DX)
  • Package Manager: pnpm (efficient, monorepo support)
  • Testing: Vitest (fast, Vite-native)
  • Docs: VitePress or Docusaurus
  • CI/CD: GitHub Actions
  • Hosting: GitHub Pages for docs, npm for packages

Phase 0: Project Foundation (Week 1-2)

Goal: Set up development environment and tooling

Tasks

  • Initialize monorepo structure with pnpm workspaces
  • Configure TypeScript with strict mode
  • Set up Vite for building packages
  • Configure ESLint and Prettier
  • Set up Vitest for testing
  • Create GitHub repository with proper .gitignore
  • Create basic project documentation structure
  • Set up GitHub Actions for CI/CD (deferred)
  • Set up commit hooks with Husky (deferred)
  • Configure changesets for version management (deferred)

Deliverables

  • ✅ Working monorepo structure
  • ✅ Build and test scripts
  • ✅ Development environment documentation
  • CI/CD pipeline (deferred)

Phase 1: Core Editor Engine (Week 3-6) ✅ COMPLETE

Goal: Build the fundamental editor using ProseMirror

Tasks

  • Study ProseMirror architecture and examples
  • Create @likhaeditor/core package structure
  • Implement basic document schema (paragraph, heading, text)
  • Set up editor view and state management
  • Implement basic marks (bold, italic, code)
  • Add undo/redo functionality
  • Create keyboard shortcut system
  • Add basic HTML serialization/deserialization
  • Write unit tests for core functionality (5 tests passing)
  • Create simple demo HTML page
  • Add link support (deferred to Phase 4)
  • Implement lists (deferred to Phase 4)
  • Implement copy/paste handling (deferred to Phase 6)

Deliverables

  • ✅ @likhaeditor/core package (4.55 KB gzipped)
  • ✅ Working demo in plain HTML
  • ✅ Test coverage 100% for core

Phase 2: Plugin System Architecture (Week 7-8) ✅ COMPLETE

Goal: Create extensible plugin system

Tasks

  • Design plugin API interface
  • Implement plugin registration system
  • Create plugin lifecycle hooks (init, commands, keymap)
  • Build plugin configuration system
  • Create base plugin class/interface
  • Add plugin error handling
  • Build 2 example plugins (CharacterCount, Placeholder)
  • Write plugin API tests (10 tests passing)
  • Implement plugin dependency management (deferred)
  • Create plugin development guide (deferred to Phase 7)
  • Write plugin API documentation (deferred to Phase 7)

Deliverables

  • ✅ Working plugin system
  • ✅ Example plugins (@likhaeditor/plugins - 1.77 KB gzipped)
  • Plugin development documentation (deferred)

Phase 3: UI Components (Week 9-11) ✅ COMPLETE (100%)

Goal: Build toolbar, menus, and UI elements

Tasks

  • Create @likhaeditor/ui package
  • Design UI component architecture
  • Build toolbar component
  • Create button components
  • Implement dropdown menus
  • Add icon system (Lucide integration)
  • Create table grid selector (10×10 visual selector)
  • Create default theme (CSS)
  • Add dark mode support
  • Write UI component tests (30+ tests passing)
  • Add modal/dialog system (deferred to Phase 6)
  • Create tooltip component (deferred to Phase 6)
  • Build bubble menu (deferred to Phase 6)
  • Implement floating menu (deferred to Phase 6)
  • Make UI components accessible (ARIA) (ongoing)

Deliverables

  • ✅ @likhaeditor/ui package (11.98 KB, 2.96 KB gzipped)
  • ✅ Default and dark themes with CSS
  • ✅ Toolbar, Button, Dropdown, and TableGrid components
  • ✅ 30+ UI component tests passing
  • 🚧 Full ARIA accessibility (ongoing)

Phase 4: Official Plugins (Week 12-16) ✅ COMPLETE (100%)

Goal: Build essential editing plugins

Plugin Development Priority

High Priority Plugins (Week 12-13)

  • Heading plugin (H1-H6 with Ctrl+Alt+1-6) ✅
  • Bold/Italic/Code marks (core functionality) ✅
  • Link plugin with URL input ✅
  • Bullet list plugin (Ctrl+Shift+8) ✅
  • Ordered list plugin (Ctrl+Shift+9) ✅
  • Blockquote plugin (Ctrl+Shift+B) ✅
  • Horizontal rule plugin (Mod+_) ✅

Medium Priority Plugins (Week 14-15)

  • Code block plugin with language support ✅
  • Text alignment plugin ✅
  • Table plugin (basic insert) ✅
  • Image plugin (insert, resize, alt text) ✅
  • Text color plugin ✅
  • Highlight plugin ✅

Advanced Plugins (Week 16)

  • Strikethrough mark plugin (like Medium editor) ✅
  • Subscript/Superscript mark plugins (for scientific notation) ✅
  • Clear Formatting plugin ✅
  • Slash command plugin
  • Emoji picker plugin
  • Mention plugin (@user)
  • Character count plugin (already exists, needs toolbar integration)

Deliverables

  • ✅ @likhaeditor/plugins package (114.07 KB, 23.73 KB gzipped)
  • ✅ 20/20 core plugins COMPLETE!
    • ✅ PlaceholderPlugin (4 tests)
    • ✅ CharacterCountPlugin (4 tests)
    • ✅ HeadingPlugin (25 tests)
    • ✅ BulletListPlugin (19 tests)
    • ✅ OrderedListPlugin (19 tests)
    • ✅ HorizontalRulePlugin (9 tests)
    • ✅ BlockquotePlugin (18 tests)
    • ✅ CodeBlockPlugin (27 tests)
    • ✅ LinkPlugin (22 tests)
    • ✅ TextAlignmentPlugin (27 tests)
    • ✅ TablePlugin (17 tests)
    • ✅ ImagePlugin (24 tests)
    • ✅ TextColorPlugin (20 tests)
    • ✅ HighlightPlugin (25 tests)
    • ✅ UnderlinePlugin (implemented)
    • ✅ StrikethroughPlugin (implemented)
    • ✅ SubscriptPlugin (implemented)
    • ✅ SuperscriptPlugin (implemented)
    • ✅ ClearFormattingPlugin (implemented)
    • ✅ HTMLSourceViewPlugin (implemented)
  • ✅ 274+ total tests passing (240+ plugin tests + 5 core + 30 UI - 1 skipped)
  • ✅ Test coverage: >85% for plugins, >90% for core
  • ⏳ Plugin documentation (pending)
  • ✅ List Enter key bug FIXED (v0.0.2)

Phase 5: Framework Adapters (Week 17-20) - 80% COMPLETE

Goal: Create integrations for popular frameworks

Plain HTML Adapter (Week 17) ✅ COMPLETE

  • Create @likhaeditor/likhaeditor package
  • Build vanilla JS wrapper (createEditor helper)
  • Add CDN build configuration (UMD 85 KB gzipped)
  • Create initialization helpers (plugin loading, toolbar)
  • Write usage examples (cdn-demo.html)
  • Add comprehensive default toolbar (27+ controls)
  • Add Undo/Redo toolbar buttons
  • Add Clear Formatting toolbar button
  • Add HTML Source View toggle button
  • Add color picker for text color and highlight
  • Add Strikethrough, Subscript, Superscript toolbar buttons
  • Add visual table grid selector (10×10)
  • Test in different browsers (Chrome tested)
  • Documentation with VitePress ✅ COMPLETE
    • Install VitePress: pnpm add -D vitepress
    • Initialize VitePress: pnpm vitepress init
    • Configure docs/.vitepress/config.mts
    • Create documentation site with existing markdown files
    • Add search functionality (local search provider)
    • Deploy configuration (Netlify - netlify.toml)
    • Navigation structure (Guide, API, Examples, Changelog)
    • Live at: https://likhaeditor.netlify.app

React Adapter (Week 18)

  • Create @likhaeditor/likhaeditor-react package
  • Build React component wrapper
  • Implement hooks (useEditor, useEditorContent)
  • Add TypeScript definitions
  • Create React examples
  • Test with Next.js

Laravel Package (Week 19)

  • Create @likhaeditor/likhaeditor-laravel package
  • Build Blade component
  • Add service provider
  • Create configuration file
  • Implement asset publishing
  • Add validation rules
  • Write Laravel documentation

Livewire Integration (Week 20)

  • Create @likhaeditor/likhaeditor-livewire package
  • Build Livewire component
  • Implement wire:model support
  • Handle real-time updates
  • Create Livewire examples
  • Write integration guide

Deliverables

  • 4 framework adapter packages
  • Working examples for each
  • Integration documentation

Phase 6: Advanced Features (Week 21-24)

Goal: Implement professional-grade features

Content Management (Week 21)

  • Implement drag-and-drop uploads
  • Add paste from Word/Google Docs
  • Create image upload handler interface
  • Build media library interface
  • Add embed support (YouTube, Twitter, etc.)

Productivity Features (Week 22)

  • Implement autocomplete system
  • Add auto-save functionality
  • Create collaboration indicators
  • Build version history interface
  • Implement find & replace (toolbar button + modal dialog)
  • Add Font Family dropdown (common fonts: Arial, Times, Courier, etc.)
  • Add Font Size dropdown (8pt to 72pt)
  • Add Indent/Outdent toolbar buttons (for nested lists and paragraphs)
  • Create focus mode
  • Build read-only mode
  • Add content templates

Export/Import (Week 23)

  • Implement Markdown export
  • Add Markdown import
  • Create JSON serialization
  • Build HTML sanitization
  • Add print-friendly mode

Collaboration Foundation (Week 24)

  • Research Y.js vs Automerge
  • Design collaborative architecture
  • Create basic collaboration plugin
  • Build WebSocket server example
  • Document self-hosting setup

Deliverables

  • Advanced feature plugins
  • Import/export utilities
  • Collaboration foundation

Phase 7: Documentation and Polish (Week 25-28)

Goal: Complete documentation and examples

Documentation Site (Week 25-26) 🚧 IN PROGRESS

  • Set up VitePress ✅
  • Write getting started guide ✅
  • Create API reference structure ✅
  • Document all plugins (in progress)
  • Add migration guides
  • Create video tutorials
  • Build interactive playground
  • Deploy to Netlify ✅

Examples and Templates (Week 27)

  • Create plain HTML example
  • Build Laravel blog example
  • Create Next.js example
  • Build Livewire CRUD example
  • Add CodeSandbox templates
  • Create starter templates

Testing and Quality (Week 28)

  • Increase test coverage to 90%+
  • Add E2E tests with Playwright
  • Run accessibility audit
  • Test across browsers
  • Performance optimization
  • Bundle size optimization
  • Fix all bugs from backlog

Deliverables

  • Complete documentation site
  • Working examples
  • High test coverage
  • Optimized builds

Phase 8: Community and Release (Week 29-30)

Goal: Launch v1.0 and build community

Pre-launch (Week 29)

  • Create CONTRIBUTING.md
  • Set up issue templates
  • Create PR template
  • Write CODE_OF_CONDUCT.md
  • Set up GitHub Discussions
  • Create release checklist
  • Plan launch announcement

v1.0 Release (Week 30)

  • Final testing and bug fixes
  • Publish all packages to npm
  • Deploy documentation site
  • Create release notes
  • Announce on Twitter, Reddit, HN
  • Submit to product directories
  • Create demo videos
  • Write launch blog post

Post-launch

  • Monitor issues and feedback
  • Create roadmap for v1.1
  • Start community plugin showcase
  • Plan video tutorial series

Deliverables

  • v1.0 release on npm
  • Live documentation
  • Community engagement

Development Priorities

Must Have for v1.0

  • Core editing functionality
  • 10+ essential plugins
  • Plain HTML adapter
  • React adapter
  • Laravel Blade component
  • Basic documentation
  • MIT license

Nice to Have for v1.0

  • Livewire integration
  • Table plugin
  • Image plugin
  • Dark mode
  • Advanced examples

Post v1.0 (v1.1+)

  • Collaborative editing
  • Mobile touch optimization
  • Additional framework adapters (Vue, Svelte)
  • AI writing assistance integration
  • Advanced track changes
  • Comment system

Success Metrics

Technical

  • Test coverage > 90%
  • Bundle size < 100KB (core)
  • Load time < 100ms
  • Works in all modern browsers
  • WCAG 2.1 AA compliant

Community

  • 1,000+ GitHub stars
  • 50+ contributors
  • 10+ community plugins
  • 100+ projects using Likha

Quality

  • Clear documentation
  • Fast issue response time
  • Regular releases
  • Active community discussions

Resource Recommendations

Learning Resources

Tools

  • ProseMirror DevTools: Browser extension for debugging
  • Vitest UI: Visual test runner
  • Storybook: Component development (optional)

Timeline

  • Minimum Viable Product (MVP): 12 weeks
  • Feature Complete v1.0: 24 weeks
  • Polished v1.0 Release: 30 weeks

Risk Mitigation

Technical Risks

  • Risk: ProseMirror learning curve

    • Mitigation: Study examples, start simple, iterate

  • Risk: Browser compatibility issues

    • Mitigation: Test early, use polyfills, set clear browser support policy

  • Risk: Performance with large documents

    • Mitigation: Implement virtual scrolling, lazy loading

Project Risks

  • Risk: Scope creep

    • Mitigation: Stick to phases, defer nice-to-haves

  • Risk: Burnout

    • Mitigation: Take breaks, get community help, celebrate milestones

  • Risk: Competition from established editors

    • Mitigation: Focus on unique value (free, self-hosted, Laravel-friendly)

Next Steps

  1. This Week:

    • ✅ Set up VitePress documentation site COMPLETE!
    • ✅ Deploy docs to Netlify/GitHub Pages LIVE!
    • Create interactive examples in docs
    • Build React adapter (@likhaeditor/likhaeditor-react)

  2. This Month:

    • Complete React adapter with hooks (useEditor)
    • Create Next.js example
    • Laravel Blade component
    • Complete Phase 5 (Framework Adapters)

  3. This Quarter:

    • Complete Phase 6 (Advanced Features)
    • Improve documentation and examples
    • Prepare for v1.0 launch

Remember: Start small, ship often, gather feedback, iterate. The goal is not perfection but progress.

Progress Summary

Current Status (December 19, 2025)

  • Current Phase: Phase 5 (Framework Adapters) - 90% Complete
  • Overall Progress: ~80% toward MVP
  • Latest Version: v0.0.2 (published to npm)
  • Documentation: Live at https://likhaeditor.netlify.app
  • Plugins: 20 production-ready plugins
  • Tests: 260+ tests passing

Completed Phases

  • ✅ Phase 0: Project Foundation (100%)
  • ✅ Phase 1: Core Editor Engine (100%)
  • ✅ Phase 2: Plugin System (100%)
  • ✅ Phase 3: UI Components (100%)
  • ✅ Phase 4: Official Plugins (100% - 20 plugins)

In Progress

  • 🚧 Phase 5: Framework Adapters (90%)
    • ✅ Plain HTML/CDN (complete)
    • ✅ VitePress documentation (complete & deployed)
    • ⏳ React adapter (next priority)
    • ⏳ Laravel/Livewire (planned)
  • 🚧 Phase 7: Documentation (50%)
    • ✅ VitePress setup and deployment
    • ✅ API documentation for all packages
    • ✅ Usage examples and guides
    • ⏳ Interactive playground (pending)
    • ⏳ Video tutorials (pending)

Key Achievements

  • 20 production-ready plugins (all core features)
  • 4 npm packages published (@likhaeditor/core, ui, plugins, likhaeditor)
  • CDN build available (85 KB gzipped)
  • 260+ tests passing across all packages
  • Bug-free list functionality
  • Color formatting working perfectly
  • VitePress documentation live at likhaeditor.netlify.app
  • Comprehensive API documentation
  • Working demos and examples

Immediate Priorities

  1. ✅ Documentation: Set up VitePress COMPLETE!
  2. React Adapter: Build @likhaeditor/likhaeditor-react (HIGH PRIORITY)
  3. Browser Testing: Test in Firefox, Safari, Edge
  4. Laravel Integration: Create Blade component
  5. Documentation Enhancement: Add interactive examples and plugin guides

Last Updated: December 19, 2025