Introduction

ts-medium-editor is a modern, type-safe WYSIWYG (What You See Is What You Get) rich text editor inspired by Medium.com's clean and intuitive editing experience. Built from the ground up with TypeScript, it provides developers with a robust, extensible, and lightweight solution for rich text editing in web applications.

Why ts-medium-editor?

🎯 Type Safety First

Unlike many JavaScript-based editors, ts-medium-editor is built with TypeScript from day one. This means:

• Complete type definitions for all APIs
• Enhanced IDE support with autocomplete and error detection
• Reduced runtime errors through compile-time checking
• Better refactoring capabilities

🚀 Modern Architecture

• ES Modules: Native support for modern module systems
• Zero Dependencies: No jQuery or other heavy frameworks required
• Tree Shakable: Import only what you need for optimal bundle size
• Framework Agnostic: Works with React, Vue, Angular, or vanilla JavaScript

🔧 Extensible Design

The editor follows a plugin-based architecture that allows you to:

• Create custom toolbar buttons
• Add new formatting options
• Implement custom extensions
• Override default behaviors

⚡ Performance Focused

• Lightweight core (~76KB minified)
• Efficient DOM manipulation
• Optimized for mobile devices
• Minimal memory footprint

Key Features

Rich Text Editing

• Bold, Italic, Underline: Standard text formatting options
• Headers: H1, H2, H3 support for document structure
• Links: Easy link creation and editing
• Quotes: Blockquote formatting for citations
• Lists: Ordered and unordered list support

Toolbar System

• Contextual Toolbar: Appears when text is selected
• Customizable Buttons: Add, remove, or modify toolbar buttons
• Keyboard Shortcuts: Standard shortcuts (Ctrl/Cmd + B, I, U)
• Mobile Optimized: Touch-friendly interface

Developer Experience

• TypeScript Support: Full type definitions included
• Comprehensive API: Programmatic control over editor content
• Event System: Subscribe to editor events for custom behavior
• Extensible: Plugin system for custom functionality

Accessibility

• ARIA Support: Proper accessibility attributes
• Keyboard Navigation: Full keyboard support
• Screen Reader Friendly: Semantic HTML structure
• Focus Management: Proper focus handling

Browser Support

ts-medium-editor supports all modern browsers:

• Chrome: 60+
• Firefox: 55+
• Safari: 12+
• Edge: 79+

Getting Started

Ready to start using ts-medium-editor? Head over to the Installation Guide to get up and running in minutes.

Community & Support

• GitHub: Report issues and contribute
• Documentation: Comprehensive guides and API reference
• Examples: Live demos and code samples
• TypeScript: Full type definitions included

License

ts-medium-editor is released under the MIT License, making it free for both personal and commercial use.

Next Steps

Now that you understand what ts-medium-editor offers, you're ready to dive in:

1. Installation - Get the editor installed in your project
2. Quick Start - Create your first editor instance
3. Configuration - Customize the editor to your needs
4. Toolbar Features - Learn about toolbar customization
5. Events - Handle editor events and interactions
6. Extensions - Extend functionality with custom plugins
7. Multiple Editors - Manage multiple editor instances

Examples and Demos

Explore our comprehensive demo collection to see the editor in action:

• Basic Editor - Simple setup with essential toolbar
• Custom Toolbars - Multiple toolbar configurations
• Extension Examples - Custom extensions and plugins
• Multi-Editor Setup - Multiple editor instances

Need Help?

• API Reference - Complete API documentation
• GitHub Issues - Report bugs or request features
• Discussions - Ask questions and share ideas
• Discord - Chat with the community