🌙 Moon Editor

Where content creation meets elegance

A beautiful and powerful WYSIWYG editor for React with Microsoft Office Power Paste support.

Demo · Documentation · Report Bug · Request Feature

✨ Highlights

🌙 Beautiful Design - Clean, modern interface that feels natural 🚀 Power Paste - Copy from Word/Excel with full styling preservation
🎨 Rich Formatting - Everything you need for beautiful content 🪶 Lightweight - Only ~10KB gzipped 🔒 Secure - Built-in XSS protection ⚡ Fast - Optimized for performance 🎯 TypeScript - Full type definitions included 💎 Zero Dependencies - Only requires React

📦 Quick Install

npm install @deri/moon-editor

🚀 Quick Start

import { MoonEditor } from '@deri/moon-editor';
import '@deri/moon-editor/dist/style.css';

function App() {
  const [content, setContent] = useState('');
  
  return (
    <MoonEditor
      initialContent={content}
      onChange={setContent}
      placeholder="Start creating beautiful content..."
    />
  );
}

That's it! You now have a fully-featured rich text editor. 🎉

💫 Features

Text Formatting

• Styles: Bold, Italic, Underline, Strikethrough
• Fonts: 8 beautiful font families
• Sizes: 7 font sizes
• Colors: Text and background color pickers with presets
• Alignment: Left, Center, Right, Justify

Content Structure

• Headings: H1 through H6
• Lists: Ordered and unordered with nesting
• Indentation: Precise control
• Links: Easy hyperlink management

Media

• Images: Drag & drop or upload
• Videos: Embed videos easily
• Auto-resize: Responsive media handling

Advanced Features

• 🌟 Power Paste: Copy from Microsoft Office with style preservation
• ⌨️ Shortcuts: Familiar keyboard shortcuts (Ctrl+B, I, U)
• ↩️ History: Full undo/redo support
• 🧹 Clean: Remove formatting with one click
• 👁️ Source: View and edit HTML directly

🌟 Power Paste Feature

The standout feature of Moon Editor is Power Paste - the ability to copy content from Microsoft Office applications and paste it with full styling preservation.

What Gets Preserved?

✅ Text colors
✅ Background colors
✅ Font families
✅ Font sizes
✅ Bold, italic, underline
✅ Headings (H1-H6)
✅ Lists (ordered & unordered)
✅ Tables
✅ Links

What Gets Cleaned?

❌ MSO-specific properties
❌ Excessive spacing
❌ Office namespace tags
❌ Scripts & dangerous HTML

How to Use

1. Format your content in Microsoft Word
2. Copy (Ctrl+C)
3. Paste in Moon Editor (Ctrl+V)
4. ✨ Magic! All styling preserved!

📖 Props API

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialContent | string | "" | Initial HTML content | | onChange | (content: string) => void | - | Called when content changes | | placeholder | string | "Start typing here..." | Placeholder text | | className | string | "" | Additional CSS class | | minHeight | string | "500px" | Minimum editor height | | showToolbar | boolean | true | Show/hide toolbar | | toolbarConfig | ToolbarConfig | {} | Customize toolbar |

🎨 Customization

Custom Toolbar

<MoonEditor
  toolbarConfig={{
    showFontFamily: true,
    showColors: true,
    showMedia: false,    // Hide media upload
    showSourceView: false, // Hide HTML source
  }}
/>

Custom Styling

.moon-editor-container {
  border: 2px solid #6366f1;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.15);
}

📝 Examples

Blog Editor

<MoonEditor
  initialContent={post.content}
  onChange={(content) => savePost({ ...post, content })}
  minHeight="600px"
/>

Comment System

<MoonEditor
  placeholder="Write your comment..."
  minHeight="150px"
  toolbarConfig={{
    showFontFamily: false,
    showMedia: false,
  }}
/>

Email Composer

<MoonEditor
  initialContent={draft}
  onChange={setDraft}
  placeholder="Compose your email..."
/>

🔧 Development

# Clone repository
git clone https://github.com/deri/moon-editor.git

# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build:lib

📚 Documentation

• API Reference
• Power Paste Guide
• Features Documentation
• Quick Start
• Publishing Guide

🌐 Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide.

📄 License

MIT © Deri

🙏 Acknowledgments

Built with:

• React
• Vite
• Tailwind CSS

📧 Contact

Deri - GitHub

Project Link: https://github.com/deri/moon-editor

🌙 Made with love by Deri

If you find Moon Editor helpful, please consider giving it a ⭐ on GitHub!