{"_id":"@avinash001/rich-editor","name":"@avinash001/rich-editor","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@avinash001/rich-editor","version":"1.0.0","description":"A lightweight, zero-dependency modern WYSIWYG Rich Text Editor for React, Blade, Django, Flask, PHP, and Plain HTML.","main":"vanilla/rich-editor.js","module":"react/RichTextEditor.jsx","types":"react/RichTextEditor.tsx","style":"vanilla/rich-editor.css","keywords":["rich-text-editor","wysiwyg","editor","react-editor","blade-editor","vanilla-editor","html-editor"],"author":{"name":"Avinash"},"license":"MIT","gitHead":"43b996ed5692d94bf5c496a110e3ef063af37a0b","_id":"@avinash001/rich-editor@1.0.0","_nodeVersion":"24.18.1","_npmVersion":"11.16.0","dist":{"integrity":"sha512-zW/3+aSSQE5aOQ4/QaGlAc76s8FcV4OwFVWNT1u0mBq/h6aJHHfn7Lk8iMg7fw4CGj5akLivTN6ZUITFaZ81gQ==","shasum":"bab8b7b1b7279acbb9e483ba6215c70f6a181c86","tarball":"https://registry.npmjs.org/@avinash001/rich-editor/-/rich-editor-1.0.0.tgz","fileCount":7,"unpackedSize":114131,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGFXyWnUYJ97f5YWYCEntlGyDo5Izq+cXfxJja42zq1DAiB2C94NiE2prxL4R/Z9js38H81LVurWvHPRMJrVGtop5g=="}]},"_npmUser":{"name":"avinash001","email":"worldofavinash31@gmail.com"},"directories":{},"maintainers":[{"name":"avinash001","email":"worldofavinash31@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rich-editor_1.0.0_1788938507639_0.9911761913520483"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-09T07:21:47.472Z","1.0.0":"2026-09-09T07:21:47.762Z","modified":"2026-09-09T07:21:47.995Z"},"maintainers":[{"name":"avinash001","email":"worldofavinash31@gmail.com"}],"description":"A lightweight, zero-dependency modern WYSIWYG Rich Text Editor for React, Blade, Django, Flask, PHP, and Plain HTML.","keywords":["rich-text-editor","wysiwyg","editor","react-editor","blade-editor","vanilla-editor","html-editor"],"author":{"name":"Avinash"},"license":"MIT","readme":"# 📝 Modern Standalone Rich Text Editor (Zero Dependencies)\n\nA fast, lightweight, and versatile WYSIWYG Rich Text Editor built with zero external third-party dependencies. It includes working **Undo/Redo (Ctrl+Z / Ctrl+Y)** history management, text selection preservation, headings, tables, links, images, colors, keyboard shortcuts, fullscreen mode, and raw HTML source view.\n\n---\n\n## 📁 Directory Structure\n\n```\nstandalone-rich-editor/\n├── react/\n│   ├── RichTextEditor.tsx   # React (TypeScript) Component\n│   └── RichTextEditor.jsx   # React (JavaScript) Component\n├── vanilla/\n│   ├── rich-editor.js       # Pure Vanilla JS Class (No React needed)\n│   ├── rich-editor.css      # Modern Stylesheet (Light & Dark theme)\n│   └── demo.html            # Ready-to-run interactive demo\n├── package.json             # NPM package configuration\n└── README.md                # Documentation & Setup Guide\n```\n\n---\n\n## 🚀 How to Use in Different Tech Stacks\n\n### 1. ⚛️ In React / Next.js / Vite\n\nCopy `react/RichTextEditor.tsx` (or `RichTextEditor.jsx`) into your components folder (e.g. `src/components/RichTextEditor.tsx`).\n\n```tsx\nimport React, { useState } from 'react';\nimport RichTextEditor from './components/RichTextEditor';\n\nexport default function MyPage() {\n  const [content, setContent] = useState('<h1>Hello World</h1>');\n\n  return (\n    <div style={{ maxWidth: 800, margin: '2rem auto' }}>\n      <h2>Article Content</h2>\n      <RichTextEditor\n        value={content}\n        onChange={(val) => setContent(val)}\n        placeholder=\"Write your article...\"\n        minHeight=\"300px\"\n      />\n    </div>\n  );\n}\n```\n\n---\n\n### 2. 🐘 In Laravel Blade (`.blade.php`)\n\n1. Copy `rich-editor.js` and `rich-editor.css` to your `public/assets/` folder (or via Vite `resources/js/` and `resources/css/`).\n2. Include the CSS and JS in your Blade template and add `data-rich-editor` to any `<textarea>`:\n\n```html\n<!-- Inside your .blade.php file -->\n<head>\n  <link rel=\"stylesheet\" href=\"{{ asset('assets/rich-editor.css') }}\">\n</head>\n<body>\n  <form action=\"{{ route('articles.store') }}\" method=\"POST\">\n    @csrf\n    \n    <label for=\"content\">Article Body:</label>\n    <!-- Just add data-rich-editor! -->\n    <textarea name=\"content\" id=\"content\" data-rich-editor placeholder=\"Write here...\">{{ old('content', $article->content ?? '') }}</textarea>\n\n    <button type=\"submit\">Save Article</button>\n  </form>\n\n  <script src=\"{{ asset('assets/rich-editor.js') }}\"></script>\n</body>\n```\n*The editor automatically synchronizes HTML content back into the `<textarea>` when typing or submitting the form!*\n\n---\n\n### 3. 🐍 In Python (Django / Flask)\n\n1. Put `rich-editor.js` and `rich-editor.css` in your static folder (e.g. `static/css/rich-editor.css` and `static/js/rich-editor.js`).\n2. In your Django or Flask HTML template:\n\n```html\n{% load static %}\n<!DOCTYPE html>\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"{% static 'css/rich-editor.css' %}\">\n</head>\n<body>\n  <form method=\"POST\">\n    {% csrf_token %}\n    <textarea name=\"body\" data-rich-editor>{{ form.body.value|default:'' }}</textarea>\n    <button type=\"submit\">Publish</button>\n  </form>\n\n  <script src=\"{% static 'js/rich-editor.js' %}\"></script>\n</body>\n</html>\n```\n\n---\n\n### 4. 🌐 In Pure HTML & PHP\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"rich-editor.css\">\n</head>\n<body>\n  <form action=\"save.php\" method=\"POST\">\n    <textarea name=\"description\" data-rich-editor placeholder=\"Type something...\"></textarea>\n    <button type=\"submit\">Submit</button>\n  </form>\n\n  <script src=\"rich-editor.js\"></script>\n</body>\n</html>\n```\n\n---\n\n## 📦 How to Publish to NPM (Command Line Install)\n\nIf you want to install this editor in any project using `npm install <your-package-name>`:\n\n### Step 1: Create a free NPM account\nGo to [https://www.npmjs.com/signup](https://www.npmjs.com/signup) and create an account.\n\n### Step 2: Login via Terminal\nOpen your terminal in the `standalone-rich-editor` folder:\n```bash\nnpm login\n```\n*(Enter your username, password, and email OTP)*\n\n### Step 3: Update `package.json` Name\nChange the `name` in `package.json` to something unique (e.g. `@your-username/rich-editor` or `my-custom-rich-editor`):\n```json\n{\n  \"name\": \"@your-username/rich-editor\",\n  \"version\": \"1.0.0\"\n}\n```\n\n### Step 4: Publish\n```bash\nnpm publish --access public\n```\n\n### Step 5: Install anywhere!\nNow you or anyone else can install it in any React or frontend project using:\n```bash\nnpm install @your-username/rich-editor\n# or\nyarn add @your-username/rich-editor\n# or\npnpm add @your-username/rich-editor\n```\n\n---\n\n## 🌍 Free CDN (Zero Installation Script Tag)\n\nOnce published to NPM, jsDelivr and unpkg provide instant free CDN links automatically:\n\n```html\n<!-- Include directly from CDN without installing anything! -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@your-username/rich-editor@latest/vanilla/rich-editor.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/@your-username/rich-editor@latest/vanilla/rich-editor.js\"></script>\n\n<textarea name=\"content\" data-rich-editor></textarea>\n```\n\n---\n\n## ✨ Features Checklist\n\n- [x] **Custom Undo / Redo**: `Ctrl+Z`, `Ctrl+Y`, `Ctrl+Shift+Z` with 60-step history stack.\n- [x] **Selection Preservation**: Toolbar clicks do not steal focus or collapse selection.\n- [x] **Heading Formats**: Paragraph, H1, H2, H3, H4, Quote Block, Code Block.\n- [x] **Inline Formats**: Bold (`Ctrl+B`), Italic (`Ctrl+I`), Underline (`Ctrl+U`), Strikethrough, Subscript, Superscript.\n- [x] **Color Pickers**: Text color and Background highlight.\n- [x] **Alignment**: Left, Center, Right, Justify.\n- [x] **Lists & Indentation**: Bulleted list, Numbered list, Indent (`Tab`), Outdent (`Shift+Tab`).\n- [x] **Inserts**: Hyperlinks, Images, Custom Grid Tables, Horizontal Dividers.\n- [x] **Tools**: Fullscreen Mode, Raw HTML Code View, Clear Formatting.\n- [x] **Realtime Counters**: Live Word Count and Character Count.\n- [x] **Zero Dependencies**: Lightweight, ultra-fast, no bloat.\n","readmeFilename":"README.md","_rev":"1-7190d79deffa8f94fa59a39e409e8ff5"}