@ryzeup/richtexteditor
Version:
A React Rich Text Editor component
221 lines (151 loc) • 5.68 kB
Markdown
# 📝 texteditor — A Modern React Rich Text Editor
> ✨ A lightweight, fully customizable **Rich Text Editor for React** — built with **TypeScript**, **Vite**, and **React 19**.
> Create visually appealing messages with custom fonts, colors, media, and more — in just a few lines of code.
## 🚀 Features
✅ Built with **React + TypeScript**
✅ Bundled using **Vite** (super fast builds)
✅ Customizable toolbar — bold, italic, underline, color, alignment, etc.
✅ Supports **images**, **links**, **videos**, and **emojis**
✅ Includes **TypeScript types**
✅ CSS bundled or importable separately
✅ Lightweight & dependency-minimal
✅ Plug-and-play usage
## 📦 Installation
```bash
# Using npm
npm install @ryzeup/richtexteditor
# Or yarn
yarn add @ryzeup/richtexteditor
# Or pnpm
pnpm add @ryzeup/richtexteditor
## ⚙️ Peer Dependencies
Make sure your project includes React:
npm install react react-dom
## 🧩 Usage
1️⃣ Import the component
import React from 'react';
import { RichTextEditor } from 'texteditor';
import 'texteditor/dist/style.css'; // import styles if not auto-bundled
2️⃣ Use it in your app
function App() {
return (
<RichTextEditor
atSuggestions={["@Arshad", "@Irfan", "@Meera"]}
showOutput={true}
showPreview={true}
toolbarConfig={{
link: true,
image: true,
emoji: true,
table: true,
color: true,
fontFamily: true,
fontSize: true,
}}
/>
);
}
export default App;
## 🧠 Props Reference
The RichTextEditor component is fully customizable via the following props:
Prop Type Default Description
atSuggestions string[] [] List of mention suggestions (e.g., ["@Arshad", "@Irfan", "@Meera""]). When the user types “@”, a popup appears showing these names.
showOutput boolean false Displays a live HTML preview of the editor’s content below the editor box. Useful for debugging or data preview.
showPreview boolean false Displays a rendered HTML preview beside the editor (using <RtePreview />).
toolbarConfig ToolbarConfig All false Controls which toolbar actions are visible. Example: { link: true, image: true, emoji: true }.
classNames { wrapper?: string; toolbar?: string; editor?: string; preview?: string; output?: string } {} Custom class names for different sections of the editor (useful for applying your own CSS).
styles { wrapper?: React.CSSProperties; toolbar?: React.CSSProperties; editor?: React.CSSProperties; preview?: React.CSSProperties; output?: React.CSSProperties } {} Inline styles for each section (wrapper, toolbar, editor, etc.).
handleGetHtml (html: string) => void () => {} Callback triggered whenever the editor’s HTML content changes. Returns sanitized HTML.
---
### 🧰 ToolbarConfig Type
You can control toolbar buttons selectively via this object:
Key Type Default Description
link boolean false Enables inserting hyperlinks.
image boolean false Enables inserting images (from local files).
emoji boolean false Enables emoji picker.
table boolean false Enables inserting and resizing tables.
color boolean false Enables text color picker.
fontFamily boolean false Enables font family dropdown.
fontSize boolean false Enables font size dropdown.
---
## 🧰 Build & Development
If you cloned or downloaded this repository, use the following scripts:
# Install dependencies
npm install
# Start dev server
npm run dev
# Build the library (for npm publish)
npm run build
# Lint code
npm run lint
# Preview the build
npm run preview
The build will output into the dist/ folder:
dist/
├── index.js (CommonJS build)
├── index.esm.js (ES Module build)
├── index.d.ts (TypeScript types)
└── style.css (Editor styles)
---
## 🗂 Folder Structure
texteditor/
├── src/
│ ├── components/
│ │ ├── RteToolbar.tsx
│ │ ├── RtePreview.tsx
│ │ ├── ...
│ ├── data/
│ │ └── emojis.json
│ ├── RichTextEditor.tsx
│ ├── index.ts
│ └── style.css
├── dist/
│ ├── index.js
│ ├── index.esm.js
│ └── style.css
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
---
## ⚒️ Tech Stack
React 19
TypeScript
Vite 7
ESLint
React Icons
Rollup (via Vite) for library bundling
---
## 🎨 Styling
Option 1 – Manual Import
If your build does not automatically include styles:
import 'texteditor/dist/style.css';
Option 2 – Automatic Bundling
If you import your CSS in src/index.ts:
import './style.css';
Vite will automatically bundle your styles in the JS build.
---
## 🧪 Example Output
---
## 🛠 Troubleshooting
Issue Solution
CSS not applied import "../node_modules/@ryzeup/richtexteditor/dist/richtexteditor.css"
Cannot find module '../data/emojis.json' Add "resolveJsonModule": true to tsconfig.json
TypeScript import error (.tsx) Remove .tsx from imports (use import App from './App')
Toolbar icons missing Ensure react-icons is installed
🧾 License
This project is licensed under the MIT License — free for personal and commercial use.
💬 Author - Ryzeup team
👨💻 Ryzeup
```