@meenainwal/rich-text-editor 1.0.8 → 1.1.0

package/ReadME.md

@@ -1,26 +1,27 @@
-# @meenainwal/rich-text-editor 🚀
+# @meenainwal/rich-text-editor 🚀 | Premium WYSIWYG Editor
 
 [![NPM Downloads](https://img.shields.io/npm/dw/@meenainwal/rich-text-editor.svg)](https://www.npmjs.com/package/@meenainwal/rich-text-editor)
 [![NPM Version](https://img.shields.io/npm/v/@meenainwal/rich-text-editor.svg)](https://www.npmjs.com/package/@meenainwal/rich-text-editor)
 
-A premium, ultra-lightweight, framework-agnostic rich text editor built entirely with Vanilla TypeScript. Featuring a sophisticated **Slate & Indigo** design system, it provides a flawless writing experience out-of-the-box.
+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)
 
-## ✨ Why Choose This Editor? (Pros & Cons)
+## ✨ Premium Features & Why Choose This Editor?
 
-### 👍 Pros
+### 👍 Key Pros & Capabilities
 - **Zero Dependencies**: Pure Vanilla JS/TypeScript. No bloated third-party libraries.
-- **Microscopic Footprint**: Only **~25kB** compressed (Gzipped), meaning zero impact on your site's load time.
-- **Framework Agnostic**: Drop it into React, Vue, Angular, Svelte, or plain HTML projects seamlessly.
-- **Auto-Formatting Magic**: Intelligently parses pasted HTML strings automatically into perfectly formatted rich text.
-- **Beautiful UI**: Modern aesthetics curated with a polished Slate & Indigo color palette, smooth transitions, and dynamic SVG icons.
-- **Local Image Uploads**: Natively integrates with the OS file picker for rapid inline base64 image insertions.
-- **Flexible Styling**: Full control over font families, complex line heights, text colors, and highlighting.
+- **Microscopic Footprint**: Only **~25kB** gzipped, making it one of the most lightweight editors available.
+- **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.
+- **Table Support**: Natively insert and style interactive HTML tables.
+- **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.
 
 ### 👎 Cons (Current Limitations)
 - Base64 image storage can increase the raw output string size for very large images (Backend S3 uploading adapter coming soon).
-- Lacks advanced table grid manipulations in the current version.
 - Markdown shortcut typing (e.g., typing `#` for H1) is not natively supported yet.
 
 ---
@@ -36,82 +37,64 @@ npm install @meenainwal/rich-text-editor
 ### Basic Usage (Vanilla JS)
 
 ```javascript
-import { CoreEditor } from '@meenainwal/rich-text-editor';
-import '@meenainwal/rich-text-editor/dist/rich-text-editor.css'; // Import the CSS!
+import { TestEditor } from '@meenainwal/rich-text-editor';
+import '@meenainwal/rich-text-editor/style'; // Simple style import
 
 const container = document.getElementById('editor');
-const editor = new CoreEditor(container, {
+const editor = new TestEditor(container, {
   placeholder: 'Type something beautiful...',
-  autofocus: true
+  autofocus: true,
+  showStatus: true,
+  toolbarItems: ['bold', 'italic', 'heading', 'table', 'link'] // Customize tools
 });
-
-// To extract the customized HTML:
-const htmlOutput = editor.getHTML();
-```
-
-### Via CDN (Direct Download, No NPM Required)
-
-You can instantly drop the editor into any standard HTML page without installing tools or bundlers. Simply use standard CDN links (like `unpkg.com` or `jsdelivr.net`):
-
-```html
-<!-- Load the beautifully styled CSS -->
-<link rel="stylesheet" href="https://unpkg.com/@meenainwal/rich-text-editor/dist/rich-text-editor.css">
-
-<!-- Load the Logic Script as an ES Module -->
-<script type="module">
-  import { CoreEditor } from 'https://unpkg.com/@meenainwal/rich-text-editor/dist/test-editor.mjs';
-
-  const container = document.getElementById('editor');
-  const editor = new CoreEditor(container);
-</script>
 ```
 
-### In React
+### In React / Next.js (SSR Safe)
 
 ```tsx
+"use client";
 import { useEffect, useRef } from 'react';
-import { CoreEditor } from '@meenainwal/rich-text-editor';
-import '@meenainwal/rich-text-editor/dist/rich-text-editor.css';
+import { TestEditor } from '@meenainwal/rich-text-editor';
+import '@meenainwal/rich-text-editor/style';
 
-export const EditorComponent = () => {
+export default function Editor() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (containerRef.current) {
-        new CoreEditor(containerRef.current);
+      new TestEditor(containerRef.current, {
+        onSave: (html) => console.log("Saved:", html)
+      });
     }
   }, []);
 
   return <div ref={containerRef} />;
-};
+}
 ```
 
 ---
 
-## 🗺️ Future Roadmap & Upcoming Updates
-
-As the project manager, we are aggressively expanding this editor. Next releases will feature:
-
-1. **Phase 2.1 - Markdown Power:** Seamless markdown shortcuts (typing `**bold**`, `## Header`) that auto-convert to rich text instantly.
-2. **Phase 2.2 - Table Support:** An interactive grid UI to insert, resize, and style complex HTML tables.
-3. **Phase 2.3 - Framework Wrappers:** Official, first-party wrapper components for `<ReactEditor />` and `<VueEditor />` for even faster plug-and-play.
-4. **Phase 2.4 - Advanced Image Handlers:** Providing hooks to intercept image uploads and pipe them to external buckets (AWS S3, Cloudinary) to return URLs instead of raw base64.
-
----
-
 ## ⚙️ Configuration Options
 
 | Option | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `placeholder` | `string` | `undefined` | The placeholder text when the editor is empty. |
-| `autofocus` | `boolean` | `false` | Whether to focus the editor automatically on initialization. |
+| `autofocus` | `boolean` | `false` | Focus the editor automatically on initialization. |
+| `dark` | `boolean` | `false` | Enable sophisticated Dark Mode theme. |
+| `showStatus` | `boolean` | `true` | Show/hide the "Saved at..." status in the toolbar. |
+| `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. |
 
 ## 🛠 API Methods
 
 - `getHTML()`: Returns the content as a sanitized HTML string.
 - `setHTML(html)`: Programmatically sets the editor content.
 - `focus()`: Forces focus onto the editor.
-- `execute(command, value)`: Execute standard editor commands internally.
+- `setDarkMode(boolean)`: Dynamically toggle dark mode.
+- `insertTable(rows, cols)`: Programmatically insert a table.
+
+---
 
 ## 📄 License
 

package/dist/core/Editor.d.ts

@@ -0,0 +1,133 @@
+import { SelectionManager } from './SelectionManager';
+import { ImageManager } from './ImageManager';
+export interface ThemeConfig {
+    primaryColor?: string;
+    primaryHover?: string;
+    bgApp?: string;
+    bgEditor?: string;
+    toolbarBg?: string;
+    borderColor?: string;
+    borderFocus?: string;
+    textMain?: string;
+    textMuted?: string;
+    placeholder?: string;
+    btnHover?: string;
+    btnActive?: string;
+    radiusLg?: string;
+    radiusMd?: string;
+    radiusSm?: string;
+    shadowSm?: string;
+    shadowMd?: string;
+    shadowLg?: string;
+}
+export interface EditorOptions {
+    placeholder?: string;
+    autofocus?: boolean;
+    theme?: ThemeConfig;
+    dark?: boolean;
+    onSave?: (html: string) => void;
+    onSaving?: () => void;
+    onChange?: (html: string) => void;
+    autoSaveInterval?: number;
+    showStatus?: boolean;
+    toolbarItems?: string[];
+}
+export declare class CoreEditor {
+    protected container: HTMLElement;
+    protected editableElement: HTMLElement;
+    selection: SelectionManager;
+    protected imageManager: ImageManager;
+    private history;
+    protected options: EditorOptions;
+    private saveTimeout;
+    private historyTimeout;
+    private pendingStyles;
+    constructor(container: HTMLElement, options?: EditorOptions);
+    /**
+     * Applies custom theme variables to the editor container.
+     */
+    private applyTheme;
+    /**
+     * Toggles dark mode on the editor.
+     */
+    setDarkMode(enabled: boolean): void;
+    protected setupImageObserver(): void;
+    /**
+     * Wraps a raw <img> element in the interactive container
+     */
+    private wrapImage;
+    protected setupInputHandlers(): void;
+    private handleInput;
+    private scheduleHistoryRecord;
+    private scheduleAutoSave;
+    save(): void;
+    undo(): void;
+    redo(): void;
+    private triggerChange;
+    protected createEditableElement(): HTMLElement;
+    /**
+     * Focuses the editor.
+     */
+    focus(): void;
+    /**
+     * Executes a command on the current selection.
+     */
+    execute(command: string, value?: string | null): void;
+    /**
+     * Inserts a table at the current selection.
+     */
+    insertTable(rows?: number, cols?: number): void;
+    /**
+     * Adds a row to the currently selected table.
+     */
+    addRow(): void;
+    /**
+     * Deletes the currently selected row.
+     */
+    deleteRow(): void;
+    /**
+     * Adds a column to the currently selected table.
+     */
+    addColumn(): void;
+    /**
+     * Deletes the currently selected column.
+     */
+    deleteColumn(): void;
+    private getSelectedTd;
+    private getSelectedTable;
+    /**
+     * 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.
+     */
+    setStyle(property: string, value: string, range?: Range): Range | null;
+    /**
+     * Creates a link at the current selection.
+     * Ensures the link opens in a new tab with proper security attributes.
+     */
+    createLink(url: string): void;
+    /**
+     * Inserts an image at the current selection.
+     */
+    insertImage(url: string): void;
+    /**
+     * Returns the clean HTML content of the editor.
+     */
+    getHTML(): string;
+    /**
+     * Sets the HTML content of the editor.
+     */
+    setHTML(html: string): void;
+    /**
+     * Internal access to the editable element.
+     */
+    get el(): HTMLElement;
+    /**
+     * Returns the editor options.
+     */
+    getOptions(): EditorOptions;
+}

package/dist/core/HistoryManager.d.ts

@@ -0,0 +1,30 @@
+export interface HistoryState {
+    html: string;
+}
+export declare class HistoryManager {
+    private stack;
+    private index;
+    private maxDepth;
+    constructor(initialState?: string);
+    /**
+     * Records a new state in the history stack.
+     * Clears any "redo" states if we record a new action.
+     */
+    record(html: string): void;
+    /**
+     * Returns the previous state if available.
+     */
+    undo(): string | null;
+    /**
+     * Returns the next state if available.
+     */
+    redo(): string | null;
+    /**
+     * Checks if undo is possible.
+     */
+    canUndo(): boolean;
+    /**
+     * Checks if redo is possible.
+     */
+    canRedo(): boolean;
+}

package/dist/core/ImageManager.d.ts

@@ -0,0 +1,19 @@
+import { CoreEditor } from './Editor';
+export declare class ImageManager {
+    private editor;
+    private activeContainer;
+    private isResizing;
+    private startX;
+    private startY;
+    private startWidth;
+    private startHeight;
+    private currentHandle;
+    private aspectRatio;
+    constructor(editor: CoreEditor);
+    private setupListeners;
+    private selectImage;
+    private deselectImage;
+    private startResize;
+    private handleResize;
+    private stopResize;
+}

package/dist/core/SelectionManager.d.ts

@@ -0,0 +1,31 @@
+/**
+ * SelectionManager handles wrapping the native browser Selection and Range APIs.
+ * This ensures consistent behavior across different environments and simplifies
+ * interaction with the editor's cursor and selected text.
+ */
+export declare class SelectionManager {
+    /**
+     * Returns the current selection object.
+     */
+    getSelection(): Selection | null;
+    /**
+     * Returns the first range of the current selection.
+     */
+    getRange(): Range | null;
+    /**
+     * Saves the current selection range.
+     */
+    saveSelection(): Range | null;
+    /**
+     * Restores a previously saved range.
+     */
+    restoreSelection(range: Range | null): void;
+    /**
+     * Checks if the selection is within a specific element.
+     */
+    isSelectionInElement(element: HTMLElement): boolean;
+    /**
+     * Clears the current selection.
+     */
+    clearSelection(): void;
+}

package/dist/index.d.ts

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

package/dist/rich-text-editor.css

@@ -1 +1 @@
-:root{--te-primary-color: #6366f1;--te-primary-hover: #4f46e5;--te-bg-app: #f8fafc;--te-bg-editor: #ffffff;--te-toolbar-bg: #ffffff;--te-border-color: #e2e8f0;--te-border-focus: #cbd5e1;--te-text-main: #1e293b;--te-text-muted: #64748b;--te-placeholder: #94a3b8;--te-btn-hover: #f1f5f9;--te-btn-active: #e2e8f0;--te-radius-lg: 12px;--te-radius-md: 8px;--te-radius-sm: 6px;--te-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--te-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--te-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--te-transition: all .2s cubic-bezier(.4, 0, .2, 1)}.te-container{display:flex;flex-direction:column;height:500px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-lg);background:var(--te-bg-editor);box-shadow:var(--te-shadow-sm);overflow:hidden;font-family:Inter,-apple-system,system-ui,sans-serif;color:var(--te-text-main);transition:var(--te-transition);max-width:100%}.te-container:focus-within{border-color:var(--te-primary-color);box-shadow:0 0 0 4px #6366f11a,var(--te-shadow-md)}.te-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--te-border-color);background:var(--te-toolbar-bg);align-items:center;-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:10}.te-divider{width:1px;height:20px;background-color:var(--te-border-color);margin:0 6px}.te-button,.te-select,.te-input{display:flex;align-items:center;justify-content:center;height:32px;border:1px solid transparent;background:transparent;border-radius:var(--te-radius-sm);cursor:pointer;color:var(--te-text-muted);font-size:13px;font-weight:500;transition:var(--te-transition);box-sizing:border-box}.te-button{width:32px;padding:0}.te-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}.te-select{padding:0 24px 0 8px;min-width:120px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:12px;border:1px solid var(--te-border-color);background-color:#fff}.te-input{width:56px;padding:0 4px;text-align:center;cursor:text;border:1px solid var(--te-border-color);background-color:#fff}.te-color-picker{width:32px;height:32px;padding:4px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-sm);background:#fff;cursor:pointer;box-sizing:border-box}.te-color-picker:hover{border-color:var(--te-border-focus)}.te-color-picker-wrapper{position:relative;display:inline-flex;width:32px;height:32px;border-radius:var(--te-radius-sm);transition:var(--te-transition)}.te-color-picker-wrapper:hover{background:var(--te-btn-hover)}.te-color-picker-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.te-color-icon{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1}.te-color-indicator{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:2px;box-shadow:0 1px 1px #0000001a}.te-emoji-picker{position:absolute;width:280px;height:320px;background:#fff;border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);box-shadow:var(--te-shadow-lg);display:flex;flex-direction:column;z-index:1000;animation:te-fade-in .2s ease-out}@keyframes te-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.te-emoji-header{padding:12px;border-bottom:1px solid var(--te-border-color)}.te-emoji-search{width:100%;padding:8px 12px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-sm);font-size:13px;outline:none;transition:var(--te-transition)}.te-emoji-search:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 2px #6366f11a}.te-emoji-body{flex:1;overflow-y:auto;padding:8px}.te-emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.te-emoji-category-title{grid-column:span 7;padding:8px 4px 4px;font-size:11px;font-weight:600;color:var(--te-text-muted);text-transform:uppercase;letter-spacing:.05em}.te-emoji-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;border:none;background:transparent;cursor:pointer;border-radius:var(--te-radius-sm);transition:var(--te-transition)}.te-emoji-item:hover{background:var(--te-btn-hover);transform:scale(1.1)}.te-emoji-empty{grid-column:span 7;text-align:center;padding:20px;color:var(--te-text-muted);font-size:13px}.te-button:hover{background:var(--te-btn-hover);color:var(--te-text-main)}.te-select:hover,.te-input:hover{border-color:var(--te-border-focus)}.te-button.active{background:var(--te-btn-active);color:var(--te-primary-color);border-color:#6366f133}.te-select:focus,.te-input:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 2px #6366f11a;outline:none;background:#fff;color:var(--te-text-main)}.te-content{flex:1;overflow-y:auto;min-height:240px;padding:24px;line-height:1.25;outline:none;font-size:16px}.te-content p{margin:0 0 1.25em}.te-content h1,.te-content h2,.te-content h3,.te-content h4,.te-content h5,.te-content h6{color:var(--te-text-main);font-weight:700;margin:1.5em 0 .5em;line-height:1.25}.te-content h1:first-child,.te-content p:first-child{margin-top:0}.te-content h1{font-size:2.25em}.te-content h2{font-size:1.875em}.te-content h3{font-size:1.5em}.te-content h4{font-size:1.25em}.te-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--te-placeholder);pointer-events:none}.te-image-container{position:relative;display:inline-block;margin:1.5rem 0;max-width:100%;border-radius:var(--te-radius-lg);overflow:visible;transition:box-shadow var(--te-transition-fast);line-height:0}.te-image-container:hover{box-shadow:0 0 0 2px var(--te-primary-color)}.te-image-container.active{box-shadow:0 0 0 2px var(--te-primary-color),var(--te-shadow-lg)}.te-image{display:block;max-width:100%;height:auto;-webkit-user-select:none;user-select:none}.te-image-caption{font-size:.875rem;color:var(--te-text-muted);text-align:center;padding:.75rem;background:var(--te-bg-app);line-height:normal;border-bottom-left-radius:var(--te-radius-lg);border-bottom-right-radius:var(--te-radius-lg)}.te-image-caption:empty:before{content:attr(data-placeholder);color:var(--te-placeholder)}.te-image-resizer{position:absolute;width:10px;height:10px;background:var(--te-primary-color);border:1px solid white;z-index:10;display:none}.te-image-container:hover .te-image-resizer,.te-image-container.active .te-image-resizer{display:block}.te-resizer-top-left{top:-5px;left:-5px;cursor:nwse-resize}.te-resizer-top-right{top:-5px;right:-5px;cursor:nesw-resize}.te-resizer-bottom-left{bottom:-5px;left:-5px;cursor:nesw-resize}.te-resizer-bottom-right{bottom:-5px;right:-5px;cursor:nwse-resize}.te-content.dragover{background:#f0f7ff;outline:2px dashed var(--te-primary-color);outline-offset:-4px}
+.te-container,.te-emoji-picker{--te-primary-color: #6366f1;--te-primary-hover: #4f46e5;--te-bg-app: #f8fafc;--te-bg-editor: #ffffff;--te-toolbar-bg: #ffffff;--te-border-color: #e2e8f0;--te-border-focus: #cbd5e1;--te-text-main: #1e293b;--te-text-muted: #64748b;--te-placeholder: #94a3b8;--te-btn-hover: #f1f5f9;--te-btn-active: #e2e8f0;--te-radius-lg: 12px;--te-radius-md: 8px;--te-radius-sm: 6px;--te-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--te-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--te-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--te-transition: all .2s cubic-bezier(.4, 0, .2, 1)}.te-container.te-dark,.te-emoji-picker.te-dark{--te-primary-color: #818cf8 !important;--te-primary-hover: #6366f1 !important;--te-bg-app: #0f172a !important;--te-bg-editor: #1e293b !important;--te-toolbar-bg: #1e293b !important;--te-border-color: #334155 !important;--te-border-focus: #475569 !important;--te-text-main: #f8fafc !important;--te-text-muted: #94a3b8 !important;--te-placeholder: #64748b !important;--te-btn-hover: #334155 !important;--te-btn-active: #475569 !important;--te-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3) !important;--te-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5) !important;--te-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5) !important}.te-container,.te-container *,.te-emoji-picker,.te-emoji-picker *{box-sizing:border-box}.te-container{display:flex;flex-direction:column;height:500px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-lg);background:var(--te-bg-editor);box-shadow:var(--te-shadow-sm);overflow:hidden;font-family:Inter,-apple-system,system-ui,sans-serif;color:var(--te-text-main)!important;transition:var(--te-transition);max-width:100%}.te-container:focus-within{border-color:var(--te-primary-color);box-shadow:0 0 0 4px #6366f11a,var(--te-shadow-md)}.te-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--te-border-color);background:var(--te-toolbar-bg);align-items:center;-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:10}.te-divider{width:1px;height:20px;background-color:var(--te-border-color);margin:0 6px}.te-button,.te-select,.te-input{display:flex;align-items:center;justify-content:center;height:32px;border:1px solid transparent;background:transparent;border-radius:var(--te-radius-sm);cursor:pointer;color:var(--te-text-muted);font-size:13px;font-weight:500;transition:var(--te-transition);box-sizing:border-box}.te-button{width:32px;padding:0}.te-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}.te-select{padding:0 24px 0 8px;min-width:120px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:12px;border:1px solid var(--te-border-color);background-color:var(--te-bg-editor)!important;color:var(--te-text-main)!important}.te-input{width:56px;padding:0 4px;text-align:center;cursor:text;border:1px solid var(--te-border-color);background-color:var(--te-bg-editor)!important;color:var(--te-text-main)!important}.te-color-picker{width:32px;height:32px;padding:4px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-sm);background:var(--te-bg-editor);cursor:pointer;box-sizing:border-box}.te-color-picker:hover{border-color:var(--te-border-focus)}.te-color-picker-wrapper{position:relative;display:inline-flex;width:32px;height:32px;border-radius:var(--te-radius-sm);transition:var(--te-transition)}.te-color-picker-wrapper:hover{background:var(--te-btn-hover)}.te-color-picker-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.te-color-icon{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1}.te-color-indicator{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:2px;box-shadow:0 1px 1px var(--te-shadow-sm)}.te-emoji-picker{position:absolute;width:280px;height:320px;background:var(--te-bg-editor);border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);box-shadow:var(--te-shadow-lg);display:flex;flex-direction:column;z-index:1000;animation:te-fade-in .2s ease-out}@keyframes te-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.te-emoji-header{padding:12px;border-bottom:1px solid var(--te-border-color)}.te-emoji-search{width:100%;padding:8px 12px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-sm);background-color:var(--te-bg-editor)!important;color:var(--te-text-main)!important;font-size:13px;outline:none;transition:var(--te-transition)}.te-emoji-search:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 2px #6366f11a}.te-emoji-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px}.te-emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.te-emoji-category-title{grid-column:span 7;padding:8px 4px 4px;font-size:11px;font-weight:600;color:var(--te-text-muted);text-transform:uppercase;letter-spacing:.05em}.te-emoji-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;border:none;background:transparent;cursor:pointer;border-radius:var(--te-radius-sm);transition:var(--te-transition)}.te-emoji-item:hover{background:var(--te-btn-hover);transform:scale(1.1)}.te-emoji-empty{grid-column:span 7;text-align:center;padding:20px;color:var(--te-text-muted);font-size:13px}.te-button:hover{background:var(--te-btn-hover);color:var(--te-text-main)!important}.te-select:hover,.te-input:hover{border-color:var(--te-border-focus)}.te-button.active{background:var(--te-btn-active);color:var(--te-primary-color);border-color:#6366f133}.te-select:focus,.te-input:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 2px #6366f11a;outline:none;background:var(--te-bg-editor);color:var(--te-text-main)!important}.te-content{flex:1;overflow-y:auto;min-height:240px;padding:24px;line-height:1.25;outline:none;font-size:16px}.te-content p{margin:0 0 1.25em}.te-content h1,.te-content h2,.te-content h3,.te-content h4,.te-content h5,.te-content h6{color:var(--te-text-main)!important;font-weight:700;margin:1.5em 0 .5em;line-height:1.25}.te-content h1:first-child,.te-content p:first-child{margin-top:0}.te-content h1{font-size:2.25em}.te-content h2{font-size:1.875em}.te-content h3{font-size:1.5em}.te-content h4{font-size:1.25em}.te-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--te-placeholder);pointer-events:none}.te-image-container{position:relative;display:inline-block;margin:1.5rem 0;max-width:100%;border-radius:var(--te-radius-lg);overflow:visible;transition:box-shadow var(--te-transition-fast);line-height:0}.te-image-container:hover{box-shadow:0 0 0 2px var(--te-primary-color)}.te-image-container.active{box-shadow:0 0 0 2px var(--te-primary-color),var(--te-shadow-lg)}.te-image{display:block;max-width:100%;height:auto;-webkit-user-select:none;user-select:none}.te-image-caption{font-size:.875rem;color:var(--te-text-muted);text-align:center;padding:.75rem;background:var(--te-bg-app);line-height:normal;border-bottom-left-radius:var(--te-radius-lg);border-bottom-right-radius:var(--te-radius-lg)}.te-image-caption:empty:before{content:attr(data-placeholder);color:var(--te-placeholder)}.te-image-resizer{position:absolute;width:10px;height:10px;background:var(--te-primary-color);border:1px solid var(--te-bg-editor);z-index:10;display:none}.te-image-container:hover .te-image-resizer,.te-image-container.active .te-image-resizer{display:block}.te-resizer-top-left{top:-5px;left:-5px;cursor:nwse-resize}.te-resizer-top-right{top:-5px;right:-5px;cursor:nesw-resize}.te-resizer-bottom-left{bottom:-5px;left:-5px;cursor:nesw-resize}.te-resizer-bottom-right{bottom:-5px;right:-5px;cursor:nwse-resize}.te-content.dragover{background:var(--te-btn-hover);outline:2px dashed var(--te-primary-color);outline-offset:-4px}.te-table{width:100%;border-collapse:collapse;margin:1.5rem 0;border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);table-layout:fixed}.te-table td,.te-table th{border:1px solid var(--te-border-color);padding:12px;min-height:44px;vertical-align:top;position:relative;transition:background-color .2s ease;color:var(--te-text-main)}.te-table tr{border-bottom:1px solid var(--te-border-color)}.te-table tr:last-child{border-bottom:none}.te-table td:hover{background-color:var(--te-btn-hover)}.te-table td:focus-within{background-color:var(--te-btn-active);outline:none}.te-dark .te-table,.te-dark .te-table td,.te-dark .te-table th{border-color:#334155}.te-dark .te-table td:hover{background-color:#1e293b}

package/dist/style.d.ts

@@ -0,0 +1,4 @@
+declare module '@meenainwal/rich-text-editor/style' {
+  const content: any;
+  export default content;
+}