PK Editor

A modern, lightweight rich text editor component for React with intuitive design and powerful features.

🚀 Live Demo

Try it now →

✨ Features

• 🎨 Modern UI - Clean, professional interface with intuitive icons
• ⌨️ Keyboard Shortcuts - Standard shortcuts (Ctrl+B, Ctrl+I, Ctrl+U, etc.)
• 🔄 Active States - Visual feedback showing current formatting
• 📊 Word Count - Real-time word and character counting
• 🖥️ Fullscreen Mode - Distraction-free editing experience
• 📱 Responsive - Works seamlessly on desktop, tablet, and mobile
• 🎯 Lightweight - Only 29KB unpacked, zero dependencies
• 🔧 Easy Integration - Simple props, works with any React app

🚀 Quick Start

Installation

npm install pk-editor

Basic Usage

import React, { useState } from 'react';
import { PKEditor } from 'pk-editor';

function App() {
  const [content, setContent] = useState('<p>Start typing...</p>');

  return (
    <div>
      <PKEditor 
        value={content} 
        onChange={setContent} 
      />
    </div>
  );
}

📖 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | undefined | HTML content of the editor | | onChange | function | undefined | Callback fired when content changes |

Example with all props

<PKEditor
  value={htmlContent}
  onChange={(newContent) => setHtmlContent(newContent)}
/>

🛠️ Features Overview

Text Formatting

• Bold (Ctrl+B)
• Italic (Ctrl+I)
• Underline (Ctrl+U)
• Strikethrough
• Subscript (H₂O)
• Superscript (E=mc²)

Block Formatting

• Headings (H1-H6)
• Paragraph
• Blockquote
• Code Block

Lists

• Bullet Lists
• Numbered Lists

Styling

• Font Size (8pt - 36pt)
• Text Color
• Highlight Color
• Text Alignment (Left, Center, Right)
• Indentation

Media & Links

• Insert Links (Ctrl+K)
• Remove Links
• Insert Images
• Insert Tables

Actions

• Undo (Ctrl+Z)
• Redo (Ctrl+Y)
• Clear Formatting
• Fullscreen Mode (Esc to exit)

🎯 Advanced Usage

Controlled Component

import React, { useState, useEffect } from 'react';
import { PKEditor } from 'pk-editor';

function AdvancedEditor() {
  const [content, setContent] = useState('');
  const [wordCount, setWordCount] = useState(0);

  const handleContentChange = (newContent) => {
    setContent(newContent);
    
    // Extract text for word counting
    const text = newContent.replace(/<[^>]*>/g, '');
    setWordCount(text.trim().split(/\s+/).length);
  };

  return (
    <div>
      <PKEditor 
        value={content}
        onChange={handleContentChange}
      />
      <div>Words: {wordCount}</div>
    </div>
  );
}

Form Integration

import React, { useState } from 'react';
import { PKEditor } from 'pk-editor';

function BlogForm() {
  const [formData, setFormData] = useState({
    title: '',
    content: '<p>Write your blog post...</p>'
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Blog post:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Blog title"
        value={formData.title}
        onChange={(e) => setFormData({
          ...formData,
          title: e.target.value
        })}
      />
      
      <PKEditor
        value={formData.content}
        onChange={(content) => setFormData({
          ...formData,
          content
        })}
      />
      
      <button type="submit">Publish</button>
    </form>
  );
}

🎨 Styling

The editor comes with beautiful default styles, but you can customize it:

/* Override editor container */
.rte-container {
  border: 2px solid #your-color;
  border-radius: 12px;
}

/* Customize toolbar */
.rte-toolbar {
  background: #your-background;
}

/* Style editor area */
.rte-editor {
  font-family: 'Your Font', sans-serif;
  font-size: 18px;
}

⌨️ Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+B | Bold | | Ctrl+I | Italic | | Ctrl+U | Underline | | Ctrl+Z | Undo | | Ctrl+Y | Redo | | Ctrl+K | Insert Link | | Esc | Exit Fullscreen |

🌟 Why Choose PK Editor?

vs TinyMCE

• ✅ Lighter - 29KB vs 500KB+
• ✅ No licensing - Completely free
• ✅ Modern React - Built specifically for React

vs Quill

• ✅ Better icons - More intuitive visual design
• ✅ Active states - Clear visual feedback
• ✅ Fullscreen mode - Built-in distraction-free editing

vs Draft.js

• ✅ Simpler API - Just value and onChange
• ✅ HTML output - No complex state management
• ✅ Ready to use - No additional setup required

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Tauqeer Abbas

🔗 Links

• 🚀 Live Demo
• 📦 npm package
• 💻 GitHub repository
• 🐛 Report issues

Made with ❤️ by Tauqeer Abbas