@malaya_jeeva/rich-text-editor 1.0.5 → 1.0.7

package/README.md

@@ -1,6 +1,6 @@
 # 📝 @malaya_jeeva/rich-text-editor
 
-A lightweight, customizable **Rich Text Editor (WYSIWYG)** built with React. Supports formatting, lists, alignment, links, code view, and more.
+A lightweight, fully-featured **Rich Text Editor (WYSIWYG)** built from scratch with React + TypeScript. No heavy dependencies — just React.
 
 ---
 
@@ -20,89 +20,269 @@ npm install @malaya_jeeva/rich-text-editor
 'use client' // required for Next.js (App Router)
 
 import React, { useState } from 'react'
-import { RichTextEditor } from '@malaya_jeeva/rich-text-editor'
+import RichTextEditor from '@malaya_jeeva/rich-text-editor'
 
 export default function Page() {
   const [value, setValue] = useState('')
 
   return (
-    <div>
-      <RichTextEditor value={value} onChange={setValue} />
-    </div>
+    <RichTextEditor value={value} onChange={setValue} />
   )
 }
 ```
 
+### Uncontrolled (no props needed)
+
+```jsx
+import RichTextEditor from '@malaya_jeeva/rich-text-editor'
+
+export default function Page() {
+  return <RichTextEditor />
+}
+```
+
 ---
 
 ## ⚙️ Props
 
-| Prop       | Type                      | Description                   |
-| ---------- | ------------------------- | ----------------------------- |
-| `value`    | `string`                  | HTML content of the editor    |
-| `onChange` | `(value: string) => void` | Callback when content changes |
+| Prop       | Type                      | Required | Description                              |
+| ---------- | ------------------------- | -------- | ---------------------------------------- |
+| `value`    | `string`                  | No       | Initial HTML content (read on first mount only) |
+| `onChange` | `(value: string) => void` | No       | Fires with full `innerHTML` on every change |
+| `toolbar`  | `ToolbarItem[]`           | No       | Controls which toolbar buttons are shown. If omitted, all buttons are shown |
+
+### Type export
+
+```ts
+import type { RichTextEditorProps, ToolbarItem } from '@malaya_jeeva/rich-text-editor'
+```
+
+---
+
+## 🛠️ Toolbar Customization
+
+Pass a `toolbar` array to control exactly which buttons appear. If the prop is omitted, **all buttons are shown** — fully backward compatible.
+
+### All available `ToolbarItem` keys
+
+| Key | Button | Description |
+| --- | ------ | ----------- |
+| `bold` | **B** | Bold text |
+| `italic` | *I* | Italic text |
+| `underline` | <u>U</u> | Underline text |
+| `color` | A&#818; | Text color picker (palette + HSV wheel + remove) |
+| `blockFormat` | Paragraph ▾ | Block format dropdown (Paragraph, H1, H2, H3) |
+| `alignLeft` | ≡ | Align text left |
+| `alignCenter` | ≡ | Align text center |
+| `alignRight` | ≡ | Align text right |
+| `alignJustify` | ≡ | Justify text |
+| `bulletList` | • | Unordered / bullet list |
+| `numberedList` | 1. | Ordered / numbered list |
+| `indent` | → | Increase indent (or go deeper in list) |
+| `outdent` | ← | Decrease indent (or go back up in list) |
+| `link` | 🔗 | Insert / edit hyperlink |
+| `codeBlock` | `</>` | Wrap selection in `<pre><code>` |
+| `image` | 🖼 | Insert image (upload, URL, or drop) |
+| `table` | ⊞ | Insert table (grid picker up to 8×8) |
+| `html` | HTML | Toggle between Visual and HTML source view |
+| `copyHtml` | ⎘ | Copy current HTML to clipboard |
+
+> **Note:** Separators between groups are rendered automatically — they appear only when buttons exist on both sides, so you never get a leading, trailing, or double separator regardless of your selection.
 
 ---
 
 ## ✨ 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
+### Text Formatting
+- ✅ **Bold**, *Italic*, <u>Underline</u>
+- 🎨 **Text color picker** — palette + custom HSV color wheel + remove color
+- 🔠 **Block formats** — Paragraph, Heading 1 / 2 / 3 (dropdown)
+- ↔️ **Text alignment** — Left, Center, Right, Justify
+
+### Lists
+- 📌 **Bullet & Numbered lists** with full multilevel nesting
+- Indent/outdent via toolbar or `Tab` / `Shift+Tab`
+- Nesting style: `1. → a. → i.` for ordered, `• → ◦ → ▪` for unordered
+
+### Links
+- 🔗 **Insert link** — floating inline bar appears near the selection
+- **Edit link** — click inside any link to see URL with Edit / Unlink buttons
+- **Unlink** — removes `<a>` tag while keeping the text
+
+### Images
+- 🖼️ **Insert via upload** — drag & drop onto the zone or click to browse
+- 🌐 **Insert via URL** — paste any image URL with live preview
+- 📥 **Drop into editor** — drag an image file directly onto the content
+- **Click to edit** — selecting an image opens a full control panel:
+  - **Style tab** — Display (Block / Inline), Alignment (Left / Center / Right), Width presets (25% / 50% / 75% / 100% / Original), manual width input, Alt text
+  - **Caption tab** — wraps image in `<figure>/<figcaption>`, editable caption text
+  - **Link tab** — wrap image in `<a>` with Apply / Remove
+- 🔲 **Drag-to-resize** — 8 handles (corners preserve aspect ratio, edges resize freely)
+
+### Tables
+- 📊 **Insert table** — grid picker up to 8×8, first row auto-set as `<th>`
+- **Floating context toolbar** — appears near the active cell:
+  - Add row above / below, Delete row
+  - Add column left / right, Delete column
+  - Delete entire table
+- **Cell merge** — drag or `Shift+click` to select a range → Merge button
+- **Cell split** — splits merged cells back to individual cells
+- **Tab navigation** — `Tab` / `Shift+Tab` to move between cells
+
+### Code
+- 💻 **Code block** — wraps selection in `<pre><code>`
+- 🔄 **HTML / Visual toggle** — switch between WYSIWYG and raw HTML source
+- ✨ **Auto-prettify** — HTML view auto-indents on switch
+- 📋 **Copy HTML** — copies current HTML to clipboard
+
+### General
+- ⌨️ **Keyboard shortcuts** — Ctrl+B, Ctrl+I, Ctrl+U
+- 📊 **Live word count**
+- 🌙 **Dark mode support** — automatic via `prefers-color-scheme`
+- 🏗️ **Library-safe TSX** — uses `ReactElement` returns, no global JSX namespace
 
 ---
 
 ## 🧠 Keyboard Shortcuts
 
-| Shortcut      | Action                |
-| ------------- | --------------------- |
-| `Ctrl + B`    | Bold                  |
-| `Ctrl + I`    | Italic                |
-| `Ctrl + U`    | Underline             |
-| `Tab`         | Indent (inside lists) |
-| `Shift + Tab` | Outdent               |
+| Shortcut | Action |
+| -------- | ------ |
+| `Ctrl + B` | Bold |
+| `Ctrl + I` | Italic |
+| `Ctrl + U` | Underline |
+| `Tab` | Indent list item / move to next table cell |
+| `Shift + Tab` | Outdent list item / move to previous table cell |
+| `Enter` (link bar) | Apply link |
+| `Escape` (link bar) | Dismiss link bar |
 
 ---
 
-## 🎯 Notes
+## 🖼️ Image Editor — Detail
+
+Click any inserted image to open the image control panel.
+
+### Style tab
+| Control | Options |
+| ------- | ------- |
+| Display | Block (full row) · Inline (flows with text) |
+| Alignment | Left · Center · Right |
+| Width | 25% · 50% · 75% · 100% · Original size · Custom (e.g. `300px`) |
+| Alt text | Free text input |
+| Delete | Removes the image from the editor |
+
+### Caption tab
+Wraps the image in `<figure>` + `<figcaption>`. The caption always renders below the image regardless of float alignment.
+
+### Link tab
+Wraps the image in an `<a>` tag. Existing link can be edited or removed.
 
-* This is a **controlled component** → always pass `value` and `onChange`
-* Works with **React 18+ and 19+**
-* Compatible with **Next.js** (use `'use client'`)
+### Drag resize
+Drag any of the 8 blue handles around the selected image:
+- **Corner handles** — resize while preserving aspect ratio
+- **Edge handles** — resize width or height freely
 
 ---
 
-## 🔄 Development Workflow
+## 📊 Table Guide
 
-### Local Development
+### Inserting
+1. Click the table grid icon in the toolbar
+2. Hover to select rows × columns (up to 8×8)
+3. Click to insert — first row is automatically `<th>`
 
-```bash
-npm link
+### Cell merge
+- **Drag** across cells, or **Shift+click** a second cell to select a rectangle
+- Selected cells highlight in blue → click **Merge** in the floating toolbar
+
+### Cell split
+Click inside a merged cell → **Split** button appears in the floating toolbar.
+
+---
+
+## 🎨 Color Picker
+
+- **Palette** — 34 preset colors in a compact grid
+- **Black** — one-click reset to automatic color
+- **Remove** — strips color from the selection
+- **Custom** — opens a full HSV color wheel with:
+  - Saturation/brightness canvas (drag to pick exact shade)
+  - Hue slider (full 360° spectrum)
+  - Hex input field
+  - Live preview swatch
+  - Apply button
+
+---
+
+## 💡 Output Format
+
+`onChange` returns standard HTML. Example:
+
+```html
+<h2>Getting started</h2>
+<p>This is a <strong>rich text</strong> editor.</p>
+<ul>
+  <li>Item one</li>
+  <li>Item two
+    <ul><li>Nested item</li></ul>
+  </li>
+</ul>
+<figure style="margin:0.8em 0;display:block;overflow:hidden;">
+  <img src="..." alt="diagram" style="max-width:100%;width:50%;" />
+  <figcaption style="text-align:center;clear:both;">Figure 1</figcaption>
+</figure>
+<table>
+  <tr><th>Name</th><th>Role</th></tr>
+  <tr><td>Alice</td><td>Engineer</td></tr>
+</table>
 ```
 
-In your app:
+### ⚠️ Sanitization
+
+The editor does **not** sanitize output. Before persisting to a database or rendering via `dangerouslySetInnerHTML`, run through a sanitizer:
 
 ```bash
-npm link @malaya_jeeva/rich-text-editor
+npm install dompurify
+npm install -D @types/dompurify
+```
+
+```ts
+import DOMPurify from 'dompurify'
+
+const clean = DOMPurify.sanitize(html)
 ```
 
 ---
 
-## 📌 Future Improvements
+## 🌐 Browser Support
+
+| Browser | Support |
+| ------- | ------- |
+| Chrome 90+ | ✅ |
+| Firefox 90+ | ✅ |
+| Safari 15+ | ✅ |
+| Edge 90+ | ✅ |
+
+---
 
-* Toolbar customization
-* Plugin system
-* Image upload support
-* Markdown support
-* Theme customization
+## 🎯 Notes
+
+- **Controlled component** → always pass `value` and `onChange` together (or omit both)
+- Works with **React 18+ and 19+**
+- Compatible with **Next.js** (use `'use client'`)
+- Written in **TypeScript** — all props and internal types are exported
+
+---
+
+## 🔄 Local Development
+
+```bash
+# In the library folder
+npm run build
+npm link
+
+# In your app
+npm link @malaya_jeeva/rich-text-editor
+```
 
 ---
 
@@ -114,4 +294,4 @@ npm link @malaya_jeeva/rich-text-editor
 
 ## 📄 License
 
-ISC
+ISC

package/dist/index.d.mts

@@ -1,9 +1,12 @@
 import { ReactElement } from 'react';
 
+type ToolbarItem = "bold" | "italic" | "underline" | "color" | "blockFormat" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "bulletList" | "numberedList" | "indent" | "outdent" | "link" | "codeBlock" | "image" | "table" | "html" | "copyHtml";
 type RichTextEditorProps = {
     value?: string;
     onChange?: (value: string) => void;
+    toolbar?: ToolbarItem[];
 };
-declare function RichTextEditor({ value, onChange }: RichTextEditorProps): ReactElement;
 
-export { RichTextEditor, type RichTextEditorProps };
+declare function RichTextEditor({ value, onChange, toolbar }: RichTextEditorProps): ReactElement;
+
+export { type RichTextEditorProps, RichTextEditor as default };

package/dist/index.d.ts

@@ -1,9 +1,12 @@
 import { ReactElement } from 'react';
 
+type ToolbarItem = "bold" | "italic" | "underline" | "color" | "blockFormat" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "bulletList" | "numberedList" | "indent" | "outdent" | "link" | "codeBlock" | "image" | "table" | "html" | "copyHtml";
 type RichTextEditorProps = {
     value?: string;
     onChange?: (value: string) => void;
+    toolbar?: ToolbarItem[];
 };
-declare function RichTextEditor({ value, onChange }: RichTextEditorProps): ReactElement;
 
-export { RichTextEditor, type RichTextEditorProps };
+declare function RichTextEditor({ value, onChange, toolbar }: RichTextEditorProps): ReactElement;
+
+export { type RichTextEditorProps, RichTextEditor as default };