Kel RTE - Enhanced Rich Text Editor

🎉 Major Update: All GitHub issues have been implemented! This release includes comprehensive feature enhancements with markdown support, file uploads, whiteboard functionality, font switching, and underline formatting.

✨ Features

🎨 Rich Text Formatting

• Bold, Italic, and Underline support
• Font size adjustment with custom size input
• Font family switching (20+ built-in fonts)
• Text color picker
• Undo/Redo functionality

📝 Markdown Support

• Import markdown files directly
• Export content as markdown (copy to clipboard)
• Support for headers, emphasis, code, and more
• Real-time markdown syntax conversion

📁 File Upload System

• Drag & drop file upload
• Click-to-upload button
• Image embedding with preview
• File attachments for documents
• Multi-file support
• 🆕 Server-side upload support with cloud storage integration
• 🆕 Environment variable configuration for easy deployment
• 🆕 Multiple cloud provider support (AWS, GCP, Azure, Cloudinary)
• 🆕 Upload progress tracking and error handling
• 🆕 Automatic fallback to base64 if server upload fails

🎨 Excalidraw Whiteboard Integration

• Professional diagramming and sketching tools
• Complete Excalidraw interface with shapes, text, and arrows
• Vector-based drawings with hand-drawn aesthetic
• SVG export and high-quality PNG embedding
• Perfect for flowcharts, wireframes, and visual diagrams
• Theme-synced (light/dark) with your app
• Responsive, isolated modal to prevent CSS collisions

🌙 Theme Support

• Built-in dark/light mode
• Automatic theme detection
• High contrast accessibility
• Consistent styling across all features
• Editor content and Excalidraw auto-sync with theme

---

🚀 Getting Started

Installation

npm install @kel-app/rte

Requirements

• React 18+ (React 19 recommended)
• Tailwind CSS 4.1+
• Next.js (more frameworks coming soon)

Basic Setup

App Router (Next.js 13+):

"use client";
import { RTE } from "@kel-app/rte";
import "@kel-app/rte/dist/index.css";

export default function MyEditor() {
  return <RTE themeSwitch={true} />;
}

With Server Upload (Recommended for Production):

"use client";
import { RTE, createCloudStorageConfig } from "@kel-app/rte";
import "@kel-app/rte/dist/index.css";

const uploadConfig = createCloudStorageConfig('aws', {
  uploadUrl: process.env.NEXT_PUBLIC_UPLOAD_URL,
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
});

export default function MyEditor() {
  return (
    <RTE 
      themeSwitch={true}
      enableServerUpload={true}
      uploadConfig={uploadConfig}
      onFileUploadSuccess={(url, file) => {
        console.log('File uploaded:', file.name, 'to', url);
      }}
    />
  );
}

Pages Router (Next.js 12):

// _app.tsx
import "@kel-app/rte/dist/index.css";

// YourComponent.tsx
("use client");
import { RTE } from "@kel-app/rte";

export default function MyEditor() {
  return <RTE themeSwitch={true} />;
}

---

🎯 Usage Examples

Standalone Editor with Theme Switch

"use client";
import { RTE } from "@kel-app/rte";

export default function StandaloneEditor() {
  return (
    <div className="h-screen">
      <RTE themeSwitch={true} />
    </div>
  );
}

Integrated Editor (No Theme Switch)

"use client";
import { RTE } from "@kel-app/rte";

export default function IntegratedEditor() {
  return (
    <div className="h-96 border rounded-lg">
      <RTE themeSwitch={false} />
    </div>
  );
}

With Default Content

"use client";
import { RTE } from "@kel-app/rte";

export default function EditorWithContent() {
  const defaultContent = "# Welcome\nStart typing here...";

  return <RTE themeSwitch={true} defaultValue={defaultContent} />;
}

---

🛠️ Features Overview

Feature	Status	Description
Bold/Italic	✅	Classic text formatting
Underline	✅	Underline text support
Font Switching	✅	20+ font families
Font Sizing	✅	Preset + custom sizes
Color Picker	✅	Full color selection
Markdown Import	✅	Load .md files
Markdown Export	✅	Copy as markdown
File Upload	✅	Drag & drop support
Image Embedding	✅	Inline image preview
Whiteboard	✅	Drawing & sketching
Undo/Redo	✅	Full history support
Dark Mode	✅	Automatic theming
Mobile Support	✅	Responsive design

---

🎨 Customization

Font Configuration

Add custom fonts by editing src/components/utils/fonts.ts:

export const availableFonts = [
  { name: "Custom Font", value: "CustomFont, sans-serif" },
  // ... existing fonts
];

Theme Customization

The editor respects your existing theme setup. Use next-themes or any theme provider:

import { ThemeProvider } from "next-themes";

export default function App({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  );
}

---

📚 API Reference

Props

Prop	Type	Default	Description
themeSwitch	boolean	Required	Show theme toggle button
defaultValue	string	""	Initial editor content

Events

The editor handles all interactions internally. For advanced use cases, access the ProseMirror instance directly.

---

🧪 Development & Testing

Running Tests

npm test

Building from Source

npm run build

Development Mode

npm run dev

Important: From v0.1.0-alpha.3.2, the RTE component requires the boolean prop themeSwitch. Set it explicitly (true to show the switcher; false for integrated usage that adopts the parent theme).

---

📖 Documentation

• Features Guide - Comprehensive feature documentation
• Server Upload Guide - Complete server upload configuration
• Changelog - Version history and updates
• Contributing Guide - How to contribute
• API Reference - Complete API documentation

---

🐛 Known Issues & Limitations

Current Limitations

• Files stored as base64 by default (server upload now available for production)
• Some mobile touch interactions could be improved
• Excalidraw advanced options (e.g., libraries, collaboration) are not yet wired into the UI

Roadmap

• Server-side file upload integration ✅ Completed
• Advanced whiteboard tools (shapes, text, layers)
• Extended markdown support (tables, footnotes)
• Plugin system for custom extensions
• Real-time collaboration features

---

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Report Bugs: Open an issue with detailed reproduction steps
2. Suggest Features: Share your ideas in GitHub Discussions
3. Submit PRs: Fork, branch, code, test, and submit pull requests
4. Improve Docs: Help us improve documentation and examples

Development Setup

git clone https://github.com/Kel-app/RTE.git
cd RTE
npm install
npm run dev          # Start development server
npm run build        # Build for production
npm test            # Run tests

Manual Testing Environment

We've created a comprehensive development environment for testing all features:

1. Start Development Server: npm run dev
2. Open Browser: Visit http://localhost:3000
3. Test All Features: Complete testing environment with sample content

The development environment includes:

• ✅ Live Preview: Real-time testing of all RTE features
• ✅ Theme Testing: Switch between light/dark themes
• ✅ Sample Content: Pre-loaded content for feature testing
• ✅ Hot Reloading: Instant updates during development

Unit Testing

Comprehensive test suite covering:

• ✅ Component Rendering: All editor components and functionality
• ✅ Text Formatting: Bold, italic, underline, fonts, colors
• ✅ File Operations: Upload, embed, and file handling
• ✅ Markdown Support: Import/export and conversion testing
• ✅ Theme Integration: Theme switching and consistency

For detailed testing information, see TESTING.md.`

See CONTRIBUTING.md for detailed guidelines.

---

📄 License

This project is licensed under the GPL-3.0 License - see the LICENSE file for details.

---

🆘 Support & Community

• GitHub Issues: Report bugs or request features
• GitHub Discussions: Community support and ideas
• Documentation: Full feature documentation

---

🙏 Acknowledgments

• Built with ProseMirror - Excellent rich text editing toolkit
• UI components from Radix UI and Lucide React
• Styling powered by Tailwind CSS
• Icons by Lucide

---

Made with ❤️ by the Kel-app team

⭐ Star us on GitHub if this project helped you!