@meenainwal/rich-text-editor 1.1.0 → 1.2.0

package/ReadME.md

@@ -5,13 +5,29 @@
 
 A premium, ultra-lightweight, and framework-agnostic **WYSIWYG rich text editor** built entirely with Vanilla TypeScript. Featuring a sophisticated **Slate & Indigo** design system, it provides a flawless writing experience for React, Next.js, and modern web applications.
 
-![Editor Preview](./images/editor-preview.png)
+### 💡 What is WYSIWYG?
+**WYSIWYG** stands for **"What You See Is What You Get"**. 
+Unlike markdown or code editors, what you see while typing in InkFlow—the bold text, centered headings, and interactive tables—is exactly how it will appear when published. It bridges the gap between editing and the final result, making rich-text creation accessible and predictable.
+
+## 🚀 Recent Performance & Security Breakthrough (v1.1.2)
+We recently completed an aggressive optimization and security hardening pass:
+- **79% Size Reduction:** Packed weight dropped from **132kB to 28kB**.
+- **9.8/10 Security Score:** Internal audit confirmed world-class XSS protection.
+- **Pure ESM Architecture:** Zero legacy CommonJS bloat for modern bundlers.
+
+---
+
+## 🎮 Live React Preview
+Wanna see it in action? Try the **Interactive React Demo** on StackBlitz:
+[**Run Demo on StackBlitz**](https://stackblitz.com/edit/vitejs-vite-e8u5yntq?embed=1&view=preview)
 
 ## ✨ Premium Features & Why Choose This Editor?
 
 ### 👍 Key Pros & Capabilities
-- **Zero Dependencies**: Pure Vanilla JS/TypeScript. No bloated third-party libraries.
-- **Microscopic Footprint**: Only **~25kB** gzipped, making it one of the most lightweight editors available.
+- **Microscopic Footprint**: Only **~28kB** packed weight. Total initial load is incredibly light.
+- **Secure By Design**: Rated **9.8/10** in security audits with forced XSS sanitization.
+- **Pure ESM Build**: Optimized for modern bundlers (Vite, Webpack 5, etc.) with zero CJS bloat.
+- **Performance Optimized**: Heavy components like the Emoji Picker are **dynamic-imported** only when clicked.
 - **Framework Agnostic**: Native support for **React**, **Next.js**, **Vue**, **Angular**, and **Svelte**.
 - **Auto-Formatting Magic**: Intelligently parses pasted HTML strings into clean, formatted rich text.
 - **Professional UI/UX**: Modern aesthetics curated with a polished Slate & Indigo color palette.
@@ -19,13 +35,48 @@ A premium, ultra-lightweight, and framework-agnostic **WYSIWYG rich text editor*
 - **Emoji Picker**: Integrated searchable emoji library for expressive content.
 - **Dark Mode**: Sophisticated dark theme for premium developer experiences.
 - **Customizable Toolbar**: Granular control over tool visibility and layout.
+- **Smart Image Management**: Built-in client-side compression (WebP), loading states, custom upload adapters, live resizing, and native captions.
+
+---
+
+## 🌐 Documentation Website (Coming Soon!)
+We are currently building a dedicated official website to provide the best possible developer experience.
+
+**What to expect:**
+- **Interactive Playground**: Test all features live in your browser.
+- **Deep-Dive Guides**: Detailed integration steps for React, Next.js, Vue, and more.
+- **Full API Reference**: Comprehensive documentation for every method and option.
+- **Custom Theme Builder**: Visually design your editor's look and feel.
+
+🚀 **Stay tuned for the official launch!**
+
+---
+
+## 🛡 Security & XSS Protection
+InkFlow takes security seriously. It features a hard-coded strict whitelist in `DOMPurify` to ensure:
+- **Malicious Scripts:** Automatically stripped from pastes and API inputs.
+- **URI Blocking:** Blocks `javascript:`, `data:`, and `vbscript:` schemes.
+- **Link Hardening:** Every link is forced to have `rel="noopener noreferrer"`.
+- **Normalization:** Every structural cleanup is followed by a final sanitization pass.
+
+---
+
+> [!TIP]
+> The editor is optimized for performance. Features like the **Emoji Picker** are only loaded when needed, keeping your initial page load lightning fast.
 
 ### 👎 Cons (Current Limitations)
-- Base64 image storage can increase the raw output string size for very large images (Backend S3 uploading adapter coming soon).
 - Markdown shortcut typing (e.g., typing `#` for H1) is not natively supported yet.
 
 ---
 
+## 📚 Technical Guides
+For deep-dive documentation, check out our local guides:
+- [**Usage Guide**](./USAGE_GUIDE.md): Configuration, API methods, and feature customization.
+- [**Technical Integration Guide**](./INTEGRATION_GUIDE.md): Step-by-step setup and advanced patterns.
+- [**Security Report**](./SECURITY_REPORT.md): Full breakdown of our XSS protection and hardening.
+
+---
+
 ## 📦 Installation
 
 ```bash
@@ -37,11 +88,11 @@ npm install @meenainwal/rich-text-editor
 ### Basic Usage (Vanilla JS)
 
 ```javascript
-import { TestEditor } from '@meenainwal/rich-text-editor';
+import { InkFlowEditor } from '@meenainwal/rich-text-editor';
 import '@meenainwal/rich-text-editor/style'; // Simple style import
 
 const container = document.getElementById('editor');
-const editor = new TestEditor(container, {
+const editor = new InkFlowEditor(container, {
   placeholder: 'Type something beautiful...',
   autofocus: true,
   showStatus: true,
@@ -49,29 +100,63 @@ const editor = new TestEditor(container, {
 });
 ```
 
-### In React / Next.js (SSR Safe)
+### In React (Preventing Duplicates)
+In React **Strict Mode**, components mount twice in development. Always use the cleanup function to destroy the editor instance.
 
 ```tsx
-"use client";
 import { useEffect, useRef } from 'react';
-import { TestEditor } from '@meenainwal/rich-text-editor';
+import { InkFlowEditor } from '@meenainwal/rich-text-editor';
 import '@meenainwal/rich-text-editor/style';
 
-export default function Editor() {
+export default function App() {
   const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<InkFlowEditor | null>(null);
 
   useEffect(() => {
-    if (containerRef.current) {
-      new TestEditor(containerRef.current, {
-        onSave: (html) => console.log("Saved:", html)
+    if (containerRef.current && !editorRef.current) {
+      editorRef.current = new InkFlowEditor(containerRef.current, {
+        placeholder: 'Start writing...',
       });
     }
+
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.destroy();
+        editorRef.current = null;
+      }
+    };
   }, []);
 
   return <div ref={containerRef} />;
 }
 ```
 
+### In Next.js (Safe Implementation)
+For Next.js, ensure the editor is only initialized on the client side using `useEffect`.
+
+```tsx
+"use client";
+import { useEffect, useRef } from 'react';
+import { InkFlowEditor } from '@meenainwal/rich-text-editor';
+import '@meenainwal/rich-text-editor/style';
+
+export default function MyEditor() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    const editor = new InkFlowEditor(containerRef.current, {
+      onSave: (html) => console.log(html)
+    });
+
+    return () => editor.destroy(); // Crucial for HMR and Strict Mode
+  }, []);
+
+  return <div ref={containerRef} className="editor-shell" />;
+}
+```
+
 ---
 
 ## ⚙️ Configuration Options
@@ -85,14 +170,46 @@ export default function Editor() {
 | `toolbarItems` | `string[]` | `all` | Array of tool IDs to display (e.g., `['bold', 'table']`). |
 | `onSave` | `function` | `undefined` | Callback triggered when content is saved. |
 | `autoSaveInterval` | `number` | `1000` | Delay in ms before auto-save triggers after typing. |
+| `imageEndpoints` | `object` | `undefined` | Custom upload endpoint configuration: `{ upload: string }`. |
+| `cloudinaryFallback` | `object` | `undefined` | Cloudinary settings: `{ cloudName: string, uploadPreset: string }`. |
+| `maxImageSizeMB` | `number` | `5` | Maximum image size in MB (enforced pre and post compression). |
 
 ## 🛠 API Methods
 
+- `destroy()`: **Crucial** - Cleans up DOM, event listeners, and memory leaks.
 - `getHTML()`: Returns the content as a sanitized HTML string.
 - `setHTML(html)`: Programmatically sets the editor content.
 - `focus()`: Forces focus onto the editor.
 - `setDarkMode(boolean)`: Dynamically toggle dark mode.
 - `insertTable(rows, cols)`: Programmatically insert a table.
+- `insertImage(url, id, isLoading)`: Programmatically insert an image with optional loading state.
+
+## 💡 Troubleshooting: Duplicate Editors?
+If you see multiple toolbars or editors, it's likely because:
+1. **React Strict Mode**: Ensure you call `editor.destroy()` in the `useEffect` cleanup.
+2. **Missing Cleanup**: The editor injects elements into the DOM; if you don't destroy it when the component unmounts, those elements remain.
+
+---
+
+## 📝 Patch Notes
+
+### v1.2.0 (Premium UI & Image Power-Up)
+- **Lucide Icon Upgrade**: Replaced all 27 toolbar icons with high-quality, professional Lucide-styled SVGs.
+- **Initialization Loader**: Added a sophisticated shimmering glassmorphism loader for a smoother startup experience.
+- **Advanced Image Pipeline**: Added drag-and-drop support with automatic client-side **WebP compression**.
+- **Interactive UX**: Added loading state previews, 4-corner resizing handles, and native `<figcaption>` support.
+- **Glassmorphism Design**: Enhanced modals and loaders with modern backdrop-blur effects.
+
+### v1.1.2 (Security & Performance)
+- **Aggressive Size Optimization**: Reduced packed size to **28kB** by moving to ESM-only and pruning datasets.
+- **Hardened Sanitization**: Centralized all HTML processing through a unified security layer (Rating 9.8/10).
+- **Safe UI Rendering**: Eliminated `innerHTML` usage in all UI components for zero-trust text rendering.
+- **CJS Build Deprecation**: Removed CommonJS versions to optimize for modern ESM-based environments.
+
+### v1.1.1 (Quick Fixes)
+- Fixed missing `destroy()` export.
+- Resolved memory leaks in image resizer.
+- Prevented duplicate editors in React Strict Mode.
 
 ---
 

package/dist/EmojiList-B-C3-zN2.js

@@ -0,0 +1,25 @@
+const e = [
+  { emoji: "😀", name: "grinning", category: "Smileys" },
+  { emoji: "😃", name: "smiley", category: "Smileys" },
+  { emoji: "😄", name: "smile", category: "Smileys" },
+  { emoji: "😁", name: "grin", category: "Smileys" },
+  { emoji: "😆", name: "laughing", category: "Smileys" },
+  { emoji: "😅", name: "sweat smile", category: "Smileys" },
+  { emoji: "😂", name: "joy", category: "Smileys" },
+  { emoji: "🙂", name: "slight smile", category: "Smileys" },
+  { emoji: "😉", name: "wink", category: "Smileys" },
+  { emoji: "😊", name: "blush", category: "Smileys" },
+  { emoji: "😍", name: "heart eyes", category: "Smileys" },
+  { emoji: "😘", name: "kissing heart", category: "Smileys" },
+  { emoji: "👍", name: "thumbs up", category: "Hands" },
+  { emoji: "👎", name: "thumbs down", category: "Hands" },
+  { emoji: "❤️", name: "heart", category: "Symbols" },
+  { emoji: "✨", name: "sparkles", category: "Symbols" },
+  { emoji: "🔥", name: "fire", category: "Symbols" },
+  { emoji: "✅", name: "check", category: "Symbols" },
+  { emoji: "🎉", name: "party", category: "Activities" },
+  { emoji: "🚀", name: "rocket", category: "Travel" }
+];
+export {
+  e as EMOJI_LIST
+};

package/dist/core/Editor.d.ts

@@ -29,8 +29,20 @@ export interface EditorOptions {
     onSaving?: () => void;
     onChange?: (html: string) => void;
     autoSaveInterval?: number;
+    autoSave?: boolean;
     showStatus?: boolean;
+    showLoader?: boolean;
     toolbarItems?: string[];
+    imageEndpoints?: {
+        upload: string;
+        delete: string;
+    };
+    cloudinaryFallback?: {
+        cloudName: string;
+        uploadPreset: string;
+    };
+    maxImageSizeMB?: number;
+    onImageDelete?: (imageId?: string, imageUrl?: string) => void;
 }
 export declare class CoreEditor {
     protected container: HTMLElement;
@@ -42,6 +54,11 @@ export declare class CoreEditor {
     private saveTimeout;
     private historyTimeout;
     private pendingStyles;
+    private observer;
+    private floatingToolbar;
+    private eventListeners;
+    private loaderElement;
+    private isUndoingRedoing;
     constructor(container: HTMLElement, options?: EditorOptions);
     /**
      * Applies custom theme variables to the editor container.
@@ -51,19 +68,31 @@ export declare class CoreEditor {
      * Toggles dark mode on the editor.
      */
     setDarkMode(enabled: boolean): void;
+    /**
+     * Destroys the editor instance and cleans up.
+     */
+    destroy(): void;
+    protected checkPlaceholder(): void;
+    private addEventListener;
     protected setupImageObserver(): void;
     /**
      * Wraps a raw <img> element in the interactive container
      */
     private wrapImage;
     protected setupInputHandlers(): void;
+    /**
+     * Immediately records a history state if one is pending.
+     */
+    private flushHistoryRecord;
     private handleInput;
     private scheduleHistoryRecord;
     private scheduleAutoSave;
     save(): void;
     undo(): void;
     redo(): void;
-    private triggerChange;
+    protected triggerChange(): void;
+    private createLoader;
+    private hideLoader;
     protected createEditableElement(): HTMLElement;
     /**
      * Focuses the editor.
@@ -73,6 +102,10 @@ export declare class CoreEditor {
      * Executes a command on the current selection.
      */
     execute(command: string, value?: string | null): void;
+    /**
+     * Special handler for links to open them in a new tab when clicked.
+     */
+    private setupLinkClickHandlers;
     /**
      * Inserts a table at the current selection.
      */
@@ -99,12 +132,21 @@ export declare class CoreEditor {
      * Recursively removes a style property from all elements in a fragment.
      */
     private clearStyleRecursive;
+    /**
+     * Applies an inline style to the selection.
+     * This is used for properties like font-size (px) and font-family
+     * where execCommand is outdated or limited.
+     */
     /**
      * Applies an inline style to the selection.
      * This is used for properties like font-size (px) and font-family
      * where execCommand is outdated or limited.
      */
     setStyle(property: string, value: string, range?: Range): Range | null;
+    /**
+     * Applies a style to the block-level containers within the range.
+     */
+    private setBlockStyle;
     /**
      * Creates a link at the current selection.
      * Ensures the link opens in a new tab with proper security attributes.
@@ -113,11 +155,25 @@ export declare class CoreEditor {
     /**
      * Inserts an image at the current selection.
      */
-    insertImage(url: string): void;
+    insertImage(url: string, id?: string, isLoading?: boolean): HTMLElement | null;
     /**
-     * Returns the clean HTML content of the editor.
+     * Returns the clean and optimized HTML content of the editor.
      */
     getHTML(): string;
+    /**
+     * Normalizes the editor's content in-place.
+     */
+    normalize(): void;
+    private normalizationContainer;
+    /**
+     * Internal helper to strictly sanitize HTML strings.
+     */
+    private sanitize;
+    /**
+     * Optimizes HTML by fixing invalid nesting and removing redundant tags.
+     */
+    private normalizeHTML;
+    private handlePaste;
     /**
      * Sets the HTML content of the editor.
      */
@@ -130,4 +186,8 @@ export declare class CoreEditor {
      * Returns the editor options.
      */
     getOptions(): EditorOptions;
+    /**
+     * Internal helper to handle multiple files.
+     */
+    handleFiles(files: File[]): Promise<void>;
 }

package/dist/core/HistoryManager.d.ts

@@ -1,5 +1,11 @@
 export interface HistoryState {
     html: string;
+    selection: {
+        startPath: number[];
+        startOffset: number;
+        endPath: number[];
+        endOffset: number;
+    } | null;
 }
 export declare class HistoryManager {
     private stack;
@@ -10,15 +16,15 @@ export declare class HistoryManager {
      * Records a new state in the history stack.
      * Clears any "redo" states if we record a new action.
      */
-    record(html: string): void;
+    record(html: string, selection: HistoryState['selection'] | null): void;
     /**
      * Returns the previous state if available.
      */
-    undo(): string | null;
+    undo(): HistoryState | null;
     /**
      * Returns the next state if available.
      */
-    redo(): string | null;
+    redo(): HistoryState | null;
     /**
      * Checks if undo is possible.
      */

package/dist/core/ImageManager.d.ts

@@ -9,8 +9,17 @@ export declare class ImageManager {
     private startHeight;
     private currentHandle;
     private aspectRatio;
+    private boundMouseDown;
+    private boundMouseMove;
+    private boundMouseUp;
+    private boundKeyDown;
     constructor(editor: CoreEditor);
     private setupListeners;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleKeyDown;
+    destroy(): void;
     private selectImage;
     private deselectImage;
     private startResize;

package/dist/core/SelectionManager.d.ts

@@ -12,6 +12,27 @@ export declare class SelectionManager {
      * Returns the first range of the current selection.
      */
     getRange(): Range | null;
+    /**
+     * Serializes the current selection into a path-based format relative to a root element.
+     * This allows restoring selection even if the DOM nodes are replaced but the structure is similar.
+     */
+    getSelectionPath(root: HTMLElement): {
+        startPath: number[];
+        startOffset: number;
+        endPath: number[];
+        endOffset: number;
+    } | null;
+    /**
+     * Restores selection from a path-based serialization.
+     */
+    restoreSelectionPath(root: HTMLElement, path: {
+        startPath: number[];
+        startOffset: number;
+        endPath: number[];
+        endOffset: number;
+    } | null): void;
+    private getNodePath;
+    private getNodeByPath;
     /**
      * Saves the current selection range.
      */

package/dist/core/plugins/ImageUploader.d.ts

@@ -0,0 +1,15 @@
+import { EditorOptions } from '../Editor';
+export interface UploadResult {
+    imageUrl: string;
+    imageId?: string;
+}
+export declare class ImageUploader {
+    /**
+     * Compresses an image file using HTML5 Canvas.
+     */
+    static compressImage(file: File, maxSizeMB: number): Promise<File | Blob>;
+    /**
+     * Uploads a file based on editor configuration.
+     */
+    static uploadFile(file: File | Blob, options: EditorOptions): Promise<UploadResult | null>;
+}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { CoreEditor, EditorOptions } from './core/Editor';
 import { Toolbar } from './ui/Toolbar';
-export declare class TestEditor extends CoreEditor {
+export declare class InkFlowEditor extends CoreEditor {
     private toolbar;
     constructor(container: HTMLElement, options?: EditorOptions);
     getToolbar(): Toolbar;
+    destroy(): void;
 }
 export { CoreEditor, type EditorOptions } from './core/Editor';
 export { SelectionManager } from './core/SelectionManager';