@we-text/editor

A production-ready, feature-rich WYSIWYG text editor for React applications.

Features

• Rich Text Formatting - Bold, italic, underline, strikethrough, highlight, code, sub/superscript
• Headings - H1-H6 support
• Lists - Ordered, unordered, blockquote
• Tables - Insertable, resizable tables with themes and border controls
• Media Embedding - YouTube, Vimeo, SoundCloud, Spotify, and custom video/audio
• URL Embeds - Embed 3rd-party links (CodePen, Figma, Google Docs, Loom, StackBlitz, etc.) as card previews or live iframes
• Image Gallery - Multi-image layouts (grid, stacked, collage) with editing
• Image Editing - Resize, rotate, text wrapping, alignment, margin controls
• Button Creator - Styled buttons with customizable properties and editing
• Column Layouts - 2-6 column grid sections for complex layouts
• Drag & Drop - Block reordering and file drops
• Dark Mode - System preference detection with manual toggle
• Links & Images - Easy insertion with file upload or URL
• Text Alignment - Left, center, right, justify
• Colors - Text color and background highlight
• HTML Mode - Edit raw HTML with live preview
• Markdown - Import/export markdown files
• i18n - 10 languages (EN, ES, FR, DE, IT, PT, ZH, JA, KO, AR)
• Security - XSS protection, content sanitization, domain whitelisting
• Collaborative Editing - Real-time collaboration via Yjs
• Keyboard Shortcuts - Full keyboard navigation

Installation

```bash npm install @we-text/editor ```

Quick Start

```tsx import { UniversalEditor } from '@we-text/editor'; import '@we-text/editor/styles.css'; import { useRef } from 'react';

function App() { const editorRef = useRef(null);

return ( <UniversalEditor ref={editorRef} placeholder="Start writing..." theme="auto" events={{ onChange: (content) => { console.log('HTML:', content.html); }, }} /> ); } ```

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | `initialContent` | `string | object` | `''` | Initial editor content | | `placeholder` | `string` | `'Write something...'` | Placeholder text | | `readOnly` | `boolean` | `false` | Make editor read-only | | `theme` | `'light' | 'dark' | 'auto'` | `'auto'` | Color theme | | `toolbar` | `object | false` | `{}` | Toolbar configuration | | `locale` | `string` | `'en'` | Language code | | `events` | `object` | `{}` | Event handlers |

License

MIT