@meenainwal/rich-text-editor 1.1.1 → 1.2.0

package/ReadME.md

@@ -5,7 +5,17 @@
 
 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:
@@ -14,8 +24,10 @@ Wanna see it in action? Try the **Interactive React Demo** on StackBlitz:
 ## ✨ Premium Features & Why Choose This Editor?
 
 ### 👍 Key Pros & Capabilities
-- **Microscopic Footprint**: Only **~11kB** (Initial gzipped JS) + **2.3kB** (CSS). Total initial load is **~13kB gzipped**.
-- **Performance Optimized**: Heavy components like the Emoji Picker (~19kB) are **lazy-loaded** only when clicked, ensuring your app stays fast.
+- **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.
@@ -23,6 +35,7 @@ Wanna see it in action? Try the **Interactive React Demo** on StackBlitz:
 - **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.
 
 ---
 
@@ -39,25 +52,31 @@ We are currently building a dedicated official website to provide the best possi
 
 ---
 
-### 📦 Bundle Size Breakdown
-Transparency matters. Here's a breakdown of what your users download:
+## 🛡 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.
 
-| Asset | Minified | Gzipped (Download) |
-| :--- | :--- | :--- |
-| **Core Bundle (JS)** | ~45 kB | **~11 kB** |
-| **Styles (CSS)** | ~9 kB | **~2 kB** |
-| **Total Initial Load** | **~54 kB** | **~13 kB** |
-| Emoji Picker (Lazy-loaded) | +19 kB | +3 kB |
+---
 
 > [!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
@@ -69,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,
@@ -86,16 +105,16 @@ In React **Strict Mode**, components mount twice in development. Always use the
 
 ```tsx
 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 App() {
   const containerRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<TestEditor | null>(null);
+  const editorRef = useRef<InkFlowEditor | null>(null);
 
   useEffect(() => {
     if (containerRef.current && !editorRef.current) {
-      editorRef.current = new TestEditor(containerRef.current, {
+      editorRef.current = new InkFlowEditor(containerRef.current, {
         placeholder: 'Start writing...',
       });
     }
@@ -118,7 +137,7 @@ For Next.js, ensure the editor is only initialized on the client side using `use
 ```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 MyEditor() {
@@ -127,7 +146,7 @@ export default function MyEditor() {
   useEffect(() => {
     if (!containerRef.current) return;
     
-    const editor = new TestEditor(containerRef.current, {
+    const editor = new InkFlowEditor(containerRef.current, {
       onSave: (html) => console.log(html)
     });
 
@@ -151,6 +170,9 @@ export default function MyEditor() {
 | `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
 
@@ -160,25 +182,34 @@ export default function MyEditor() {
 - `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.1.1)
-
-### 🐛 Bug Fixes
-- **Fixed Missing `destroy()` Export**: Resolved TypeScript error where the `destroy()` method was missing from the generated type declarations.
-- **Image Resizer Cleanup**: Fixed a memory leak where window-level event listeners for image resizing were not being removed on editor destruction.
-- **Double Initializing Failsafe**: Added an internal check to clear the container before initialization, preventing duplicate editors in React Strict Mode.
-- **Lazy-Loaded Emojis**: Moved the Emoji List to a separate chunk (~19kB) that only loads when the picker is opened, reducing the initial bundle size.
+---
 
-### ✨ Improvements
-- **Optimized Initial Load**: Critical path JS is now only **~11kB gzipped**.
-- **Robust Documentation**: Added detailed React and Next.js implementation guides with proper lifecycle cleanup examples.
-- **Troubleshooting Guide**: New section for common pitfalls like duplicate editors and SSR issues.
-- **Live Demo**: Added StackBlitz interactive demo for instant preview.
+## 📝 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

@@ -31,7 +31,18 @@ export interface EditorOptions {
     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;
@@ -44,7 +55,10 @@ export declare class CoreEditor {
     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.
@@ -66,13 +80,19 @@ export declare class CoreEditor {
      */
     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.
@@ -82,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.
      */
@@ -108,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.
@@ -122,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.
      */
@@ -139,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/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,6 +1,6 @@
 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;