@malaya_jeeva/rich-text-editor 1.0.2 → 1.0.4

package/README.md

@@ -0,0 +1,117 @@
+# 📝 @malaya_jeeva/rich-text-editor
+
+A lightweight, customizable **Rich Text Editor (WYSIWYG)** built with React. Supports formatting, lists, alignment, links, code view, and more.
+
+---
+
+## 🚀 Installation
+
+```bash
+npm install @malaya_jeeva/rich-text-editor
+```
+
+---
+
+## 📦 Usage
+
+### Basic Example
+
+```jsx
+'use client' // required for Next.js (App Router)
+
+import React, { useState } from 'react'
+import { RichTextEditor } from '@malaya_jeeva/rich-text-editor'
+
+export default function Page() {
+  const [value, setValue] = useState('')
+
+  return (
+    <div>
+      <RichTextEditor value={value} onChange={setValue} />
+    </div>
+  )
+}
+```
+
+---
+
+## ⚙️ Props
+
+| Prop       | Type                      | Description                   |
+| ---------- | ------------------------- | ----------------------------- |
+| `value`    | `string`                  | HTML content of the editor    |
+| `onChange` | `(value: string) => void` | Callback when content changes |
+
+---
+
+## ✨ Features
+
+* ✅ Bold, Italic, Underline
+* 🎨 Text Color Picker
+* 🔠 Headings (H1, H2, H3)
+* 📌 Bullet & Numbered Lists
+* ↔️ Text Alignment (Left, Center, Right, Justify)
+* 🔗 Insert Links
+* 💻 Code Block Support
+* 🔄 Toggle HTML / Visual Mode
+* 📋 Copy HTML Content
+* ⌨️ Keyboard Shortcuts (Ctrl+B, Ctrl+I, Ctrl+U)
+* 📊 Word Count
+
+---
+
+## 🧠 Keyboard Shortcuts
+
+| Shortcut      | Action                |
+| ------------- | --------------------- |
+| `Ctrl + B`    | Bold                  |
+| `Ctrl + I`    | Italic                |
+| `Ctrl + U`    | Underline             |
+| `Tab`         | Indent (inside lists) |
+| `Shift + Tab` | Outdent               |
+
+---
+
+## 🎯 Notes
+
+* This is a **controlled component** → always pass `value` and `onChange`
+* Works with **React 18+ and 19+**
+* Compatible with **Next.js** (use `'use client'`)
+
+---
+
+## 🔄 Development Workflow
+
+### Local Development
+
+```bash
+npm link
+```
+
+In your app:
+
+```bash
+npm link @malaya_jeeva/rich-text-editor
+```
+
+---
+
+## 📌 Future Improvements
+
+* Toolbar customization
+* Plugin system
+* Image upload support
+* Markdown support
+* Theme customization
+
+---
+
+## 👨‍💻 Author
+
+**Malaya Ranjan Jena**
+
+---
+
+## 📄 License
+
+ISC

package/dist/index.js

@@ -407,12 +407,23 @@ function RichTextEditor({ value, onChange }) {
     setSelCells([]);
     dragStartCell.current = null;
   }, []);
+  const fixListNesting = (0, import_react.useCallback)(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.querySelectorAll("ol > ol, ol > ul, ul > ol, ul > ul").forEach((orphan) => {
+      const prev = orphan.previousElementSibling;
+      if (prev && prev.tagName === "LI") {
+        prev.appendChild(orphan);
+      }
+    });
+  }, []);
   const exec = (0, import_react.useCallback)((cmd, val = null) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
     document.execCommand(cmd, false, val != null ? val : void 0);
+    fixListNesting();
     refresh();
-  }, []);
+  }, [fixListNesting]);
   const refresh = (0, import_react.useCallback)(() => {
     var _a2, _b, _c, _d;
     const raw = document.queryCommandValue("formatBlock").toLowerCase().replace(/[<>]/g, "");

package/dist/index.mjs

@@ -386,12 +386,23 @@ function RichTextEditor({ value, onChange }) {
     setSelCells([]);
     dragStartCell.current = null;
   }, []);
+  const fixListNesting = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.querySelectorAll("ol > ol, ol > ul, ul > ol, ul > ul").forEach((orphan) => {
+      const prev = orphan.previousElementSibling;
+      if (prev && prev.tagName === "LI") {
+        prev.appendChild(orphan);
+      }
+    });
+  }, []);
   const exec = useCallback((cmd, val = null) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
     document.execCommand(cmd, false, val != null ? val : void 0);
+    fixListNesting();
     refresh();
-  }, []);
+  }, [fixListNesting]);
   const refresh = useCallback(() => {
     var _a2, _b, _c, _d;
     const raw = document.queryCommandValue("formatBlock").toLowerCase().replace(/[<>]/g, "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malaya_jeeva/rich-text-editor",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Custom React Rich Text Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",