@ryzeup/richtexteditor 1.0.0

package/README.md

@@ -0,0 +1,249 @@
+# 📝 texteditor — A Modern React Rich Text Editor
+
+![NPM Version](https://img.shields.io/npm/v/texteditor.svg?style=flat&color=blue)
+![License](https://img.shields.io/npm/l/texteditor.svg?style=flat&color=green)
+![Build](https://img.shields.io/badge/build-passing-brightgreen.svg)
+![Vite](https://img.shields.io/badge/bundler-vite-orange.svg)
+![TypeScript](https://img.shields.io/badge/language-typescript-blue.svg)
+
+> ✨ 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 @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.
+```