Keetlo Smart Editor

A beautiful, powerful, and customizable TipTap-based Rich Text Editor for React, featuring:

• Spell Check
• Grammar Check
• Templates
• Custom Fonts and Colors
• YouTube Embeds
• Image Uploads
• Smart Toolbar
• Fullscreen Mode
• HTML Source Code Editing
• Auto-Fix Grammar Errors
• ... and more!

✨ Features

• Built with TipTap
• Powered by LanguageTool for grammar and spell checking
• Easy to customize fonts, sizes, colors, and highlights
• Upload images from your local device
• Insert tables, YouTube videos, special characters, and emojis
• Export as HTML or plain text
• Lightweight and responsive

📦 Installation

npm install keetlo-smart-editor --legacy-peer-deps

or

yarn add keetlo-smart-editor --legacy-peer-deps

Important: Please use --legacy-peer-deps because the package relies on multiple versions of Tiptap and Radix UI components that might have peer dependency conflicts.

🛠️ Basic Usage

import KeetloSmartEditor from 'keetlo-smart-editor';

export default function MyEditor() {
  const [content, setContent] = useState("");

  return (
    <KeetloSmartEditor
      defaultValue={content}
      setValue={setContent}
      placeholder="Write something awesome..."
    />
  );
}

📄 Props

| Prop | Type | Description | |:-----|:-----|:------------| | defaultValue | string | Initial HTML content | | setValue | (content: string) => void | Callback to update the content | | placeholder | string | Placeholder text when empty | | className | string | Optional Tailwind CSS classes | | limitRows | number | Optional. Sets editor height based on rows (default 6) |

🖌️ Styling

This package automatically imports necessary styles.
No need to add additional CSS manually.

✅ If you want to customize, you can override the style.css.

🌟 Author

Developed by Sornnacha Buranapongwattana.
Made with ❤️ in Thailand 🇹🇳.

📜 License

This project is licensed under the MIT License.