Or yarn

Or pnpm

---

⚙️ 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 (
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 ).
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.

---

$3

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

Start dev server

Build the library (for npm publish)

Lint code

Preview the build

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

---

⚒️ Tech Stack

React 19

TypeScript

Vite 7

ESLint

React Icons

Rollup (via Vite) for library bundling

---

🎨 Styling

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

---

🧾 License

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

💬 Author - Ryzeup team

👨‍💻 Ryzeup