📝 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

# Using npm
npm install @shaikabdularshad/texteditor

# Or yarn
yarn add @shaikabdularshad/texteditor

# Or pnpm
pnpm add @shaikabdularshad/texteditor

---

## ⚙️ 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,
      }}
      classNames={{
        wrapper: "custom-wrapper",
        editor: "custom-editor",
      }}
      styles={{
        editor: {
          border: "1px solid #ccc",
          padding: "12px",
          minHeight: "200px",
          borderRadius: "8px",
        },
      }}
      handleGetHtml={(html) => console.log("Editor HTML:", html)}
    />
  );
}

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 texteditor/dist/style.css in your app
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

---

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to open a PR or create an issue in the repository.

git clone https://github.com/<your-username>/texteditor.git
cd texteditor
npm install
npm run dev

🧾 License

This project is licensed under the MIT License — free for personal and commercial use.

💬 Author

👨‍💻 Arshad Babblu
🌐 Portfolio

🌟 Support

If you find this project useful, please ⭐ it on GitHub
!
Your support motivates continued updates and improvements.