smartrte-react 0.1.10 → 0.1.14

package/README.md

@@ -330,15 +330,13 @@ The editor comes with built-in styles. You can customize the appearance by wrapp
 
 - Node.js 18+ 
 - pnpm 9.10.0+
-- Rust (for WASM compilation)
-- wasm-pack
 
 ### Setting Up Development Environment
 
 1. **Clone the repository**
 
 ```bash
-git clone https://github.com/yourusername/smart-rte.git
+git clone https://github.com/ayush1852017/smart-rte.git
 cd smart-rte
 ```
 
@@ -351,13 +349,7 @@ pnpm install
 3. **Build the project**
 
 ```bash
-# Build WASM core
-pnpm build:wasm
-
 # Build TypeScript packages
-pnpm build:ts
-
-# Or build everything
 pnpm build
 ```
 
@@ -376,19 +368,17 @@ The playground will be available at `http://localhost:5173`
 ```
 smart-rte/
 ├── packages/
-│   ├── react/              # Main React package (smartrte-react)
-│   │   ├── src/
-│   │   │   ├── components/
-│   │   │   │   ├── ClassicEditor.tsx   # Main editor component
-│   │   │   │   └── MediaManager.tsx    # Media management component
-│   │   │   └── index.ts
-│   │   ├── playground/     # Development playground
-│   │   └── package.json
-│   ├── core-wasm/          # WASM bindings
-│   └── classic-embed/      # Standalone bundle
-├── rust/                   # Rust core
-│   └── smart_rte_core/
-├── apps/                   # Example applications
+│   └── react/              # Main React package (smartrte-react)
+│       ├── src/
+│       │   ├── components/
+│       │   │   ├── ClassicEditor.tsx   # Main editor component
+│       │   │   └── MediaManager.tsx    # Media management component
+│       │   └── index.ts
+│       ├── playground/     # Development playground
+│       └── package.json
+├── dart/                   # Flutter/Dart packages
+│   ├── smartrte_flutter/   # Flutter WebView integration
+│   └── example_app/        # Flutter example
 └── package.json
 ```
 
@@ -455,7 +445,7 @@ We welcome contributions! Here's how you can help:
 
 ### Reporting Bugs
 
-1. Check if the bug has already been reported in [Issues](https://github.com/yourusername/smart-rte/issues)
+1. Check if the bug has already been reported in [Issues](https://github.com/ayush1852017/smart-rte/issues)
 2. If not, create a new issue with:
    - Clear title and description
    - Steps to reproduce
@@ -465,7 +455,7 @@ We welcome contributions! Here's how you can help:
 
 ### Suggesting Features
 
-1. Check [existing feature requests](https://github.com/yourusername/smart-rte/issues?q=is%3Aissue+label%3Aenhancement)
+1. Check [existing feature requests](https://github.com/ayush1852017/smart-rte/issues?q=is%3Aissue+label%3Aenhancement)
 2. Create a new issue with:
    - Clear description of the feature
    - Use cases
@@ -611,20 +601,20 @@ SOFTWARE.
 
 - **Smart RTE Team** - Initial work and maintenance
 
-See the list of [contributors](https://github.com/yourusername/smart-rte/contributors) who participated in this project.
+See the list of [contributors](https://github.com/ayush1852017/smart-rte/contributors) who participated in this project.
 
 ## 🙏 Acknowledgments
 
 - [KaTeX](https://katex.org/) - For mathematical formula rendering
 - [React](https://reactjs.org/) - The UI library
 - [Vite](https://vitejs.dev/) - Build tool
-- All our amazing [contributors](https://github.com/yourusername/smart-rte/contributors)
+- All our amazing [contributors](https://github.com/ayush1852017/smart-rte/contributors)
 
 ## 📞 Support
 
 - **Documentation:** You're reading it! 📖
-- **Issues:** [GitHub Issues](https://github.com/yourusername/smart-rte/issues)
-- **Discussions:** [GitHub Discussions](https://github.com/yourusername/smart-rte/discussions)
+- **Issues:** [GitHub Issues](https://github.com/ayush1852017/smart-rte/issues)
+- **Discussions:** [GitHub Discussions](https://github.com/ayush1852017/smart-rte/discussions)
 - **Twitter:** [@smartrte](https://twitter.com/smartrte) (if applicable)
 
 ## 🗺️ Roadmap
@@ -658,9 +648,7 @@ See the list of [contributors](https://github.com/yourusername/smart-rte/contrib
 
 ## 🔗 Related Packages
 
-- **@smartrte/classic-embed** - Standalone script-tag bundle
-- **smartrte-flutter** - Flutter/Dart implementation
-- **smart-rte-core** - Rust core library
+- **smartrte-flutter** - Flutter/Dart WebView implementation
 
 ## 💡 Tips & Best Practices
 
@@ -696,4 +684,4 @@ See the list of [contributors](https://github.com/yourusername/smart-rte/contrib
 
 **Happy Editing! 🎉**
 
-If you find this package useful, please consider giving it a ⭐ on [GitHub](https://github.com/yourusername/smart-rte)!
+If you find this package useful, please consider giving it a ⭐ on [GitHub](https://github.com/ayush1852017/smart-rte)!

package/dist/components/ClassicEditor.d.ts

@@ -10,6 +10,21 @@ type ClassicEditorProps = {
     media?: boolean;
     formula?: boolean;
     mediaManager?: MediaManagerAdapter;
+    /**
+     * Optional custom list of fonts to display in the toolbar.
+     * If not provided, a default set of web-safe fonts will be used.
+     * Example: [{ name: 'Robto', value: 'Roboto, sans-serif' }]
+     */
+    fonts?: {
+        name: string;
+        value: string;
+    }[];
+    /**
+     * The default font family to apply to the editor content.
+     * This sets the font-family style of the editable area.
+     * Example: "Arial, sans-serif"
+     */
+    defaultFont?: string;
 };
-export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, table, media, formula, mediaManager, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, table, media, formula, mediaManager, fonts, defaultFont, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ClassicEditor.js

@@ -1,7 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { MediaManager } from "./MediaManager";
-export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table = true, media = true, formula = true, mediaManager, }) {
+export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table = true, media = true, formula = true, mediaManager, fonts = [
+    { name: "Arial", value: "Arial, Helvetica, sans-serif" },
+    { name: "Georgia", value: "Georgia, serif" },
+    { name: "Impact", value: "Impact, Charcoal, sans-serif" },
+    { name: "Tahoma", value: "Tahoma, Geneva, sans-serif" },
+    { name: "Times New Roman", value: "'Times New Roman', Times, serif" },
+    { name: "Verdana", value: "Verdana, Geneva, sans-serif" },
+    { name: "Courier New", value: "'Courier New', Courier, monospace" },
+], defaultFont, }) {
     const editableRef = useRef(null);
     const lastEmittedRef = useRef("");
     const isComposingRef = useRef(false);
@@ -11,6 +19,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [imageOverlay, setImageOverlay] = useState(null);
     const resizingRef = useRef(null);
     const draggedImageRef = useRef(null);
+    const tableResizeRef = useRef(null);
     const [showTableDialog, setShowTableDialog] = useState(false);
     const [tableRows, setTableRows] = useState(3);
     const [tableCols, setTableCols] = useState(3);
@@ -24,7 +33,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [showColorPicker, setShowColorPicker] = useState(false);
     const [colorPickerType, setColorPickerType] = useState('text');
     const savedRangeRef = useRef(null);
-    const [currentFontSize, setCurrentFontSize] = useState("11");
+    const [currentFontSize, setCurrentFontSize] = useState("");
+    const [currentFont, setCurrentFont] = useState("");
     useEffect(() => {
         const el = editableRef.current;
         if (!el)
@@ -32,6 +42,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         // Initialize with provided HTML only when externally controlled value changes
         if (typeof value === "string" && value !== el.innerHTML) {
             el.innerHTML = value || "";
+            fixNegativeMargins(el);
+            ensureTableWrappers(el);
         }
         // Suppress native context menu inside table cells at capture phase
         const onCtx = (evt) => {
@@ -151,6 +163,57 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             console.error('Error applying font size:', error);
         }
     };
+    const applyFontFamily = (font) => {
+        try {
+            setCurrentFont(font);
+            const editor = editableRef.current;
+            if (!editor)
+                return;
+            editor.focus();
+            let range = null;
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0) {
+                const currentRange = sel.getRangeAt(0);
+                if (editor.contains(currentRange.commonAncestorContainer)) {
+                    range = currentRange;
+                }
+            }
+            if (!range && savedRangeRef.current) {
+                range = savedRangeRef.current.cloneRange();
+            }
+            if (!range)
+                return;
+            if (range.collapsed) {
+                const span = document.createElement('span');
+                span.style.fontFamily = font;
+                span.textContent = '\u200B';
+                range.insertNode(span);
+                const newRange = document.createRange();
+                newRange.setStart(span.firstChild, 1);
+                newRange.collapse(true);
+                if (sel) {
+                    sel.removeAllRanges();
+                    sel.addRange(newRange);
+                }
+                handleInput();
+                return;
+            }
+            const span = document.createElement('span');
+            span.style.fontFamily = font;
+            const fragment = range.extractContents();
+            span.appendChild(fragment);
+            range.insertNode(span);
+            if (sel) {
+                range.selectNodeContents(span);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            handleInput();
+        }
+        catch (error) {
+            console.error('Error applying font family:', error);
+        }
+    };
     const applyTextColor = (color) => {
         exec("foreColor", color);
     };
@@ -194,6 +257,124 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             window.removeEventListener("resize", onResize);
         };
     }, []);
+    // Table resize event listeners
+    useEffect(() => {
+        const el = editableRef.current;
+        if (!el)
+            return;
+        addTableResizeHandles();
+        const onMouseDown = (e) => {
+            if (!table)
+                return;
+            const target = e.target;
+            if (target.tagName === 'TD' || target.tagName === 'TH') {
+                const rect = target.getBoundingClientRect();
+                const rightEdge = rect.right;
+                const clickX = e.clientX;
+                if (Math.abs(clickX - rightEdge) < 5) {
+                    e.preventDefault();
+                    const tableElem = target.closest('table');
+                    const colIndex = parseInt(target.getAttribute('data-col-index') || '0', 10);
+                    if (tableElem) {
+                        startColumnResize(tableElem, colIndex, e.clientX);
+                    }
+                    return;
+                }
+                const bottomEdge = rect.bottom;
+                const clickY = e.clientY;
+                if (Math.abs(clickY - bottomEdge) < 5) {
+                    e.preventDefault();
+                    const tableElem = target.closest('table');
+                    const row = target.closest('tr');
+                    if (tableElem && row) {
+                        const rowIndex = parseInt(row.getAttribute('data-row-index') || '0', 10);
+                        startRowResize(tableElem, rowIndex, e.clientY);
+                    }
+                    return;
+                }
+            }
+        };
+        const onMouseMove = (e) => {
+            if (tableResizeRef.current) {
+                handleTableResizeMove(e);
+                return;
+            }
+            if (!table)
+                return;
+            const target = e.target;
+            if (target.tagName === 'TD' || target.tagName === 'TH') {
+                const rect = target.getBoundingClientRect();
+                const clickX = e.clientX;
+                const clickY = e.clientY;
+                if (Math.abs(clickX - rect.right) < 5) {
+                    el.style.cursor = 'col-resize';
+                    return;
+                }
+                if (Math.abs(clickY - rect.bottom) < 5) {
+                    el.style.cursor = 'row-resize';
+                    return;
+                }
+                if (el.style.cursor === 'col-resize' || el.style.cursor === 'row-resize') {
+                    el.style.cursor = '';
+                }
+            }
+        };
+        const onMouseUp = () => {
+            handleTableResizeEnd();
+        };
+        const onTouchStart = (e) => {
+            if (!table)
+                return;
+            const target = e.target;
+            if (target.tagName === 'TD' || target.tagName === 'TH') {
+                const rect = target.getBoundingClientRect();
+                const touch = e.touches[0];
+                const clickX = touch.clientX;
+                const clickY = touch.clientY;
+                if (Math.abs(clickX - rect.right) < 15) {
+                    e.preventDefault();
+                    const tableElem = target.closest('table');
+                    const colIndex = parseInt(target.getAttribute('data-col-index') || '0', 10);
+                    if (tableElem) {
+                        startColumnResize(tableElem, colIndex, clickX);
+                    }
+                    return;
+                }
+                if (Math.abs(clickY - rect.bottom) < 15) {
+                    e.preventDefault();
+                    const tableElem = target.closest('table');
+                    const row = target.closest('tr');
+                    if (tableElem && row) {
+                        const rowIndex = parseInt(row.getAttribute('data-row-index') || '0', 10);
+                        startRowResize(tableElem, rowIndex, clickY);
+                    }
+                    return;
+                }
+            }
+        };
+        const onTouchMove = (e) => {
+            if (tableResizeRef.current) {
+                handleTableResizeMove(e);
+            }
+        };
+        const onTouchEnd = () => {
+            handleTableResizeEnd();
+        };
+        el.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        el.addEventListener('touchstart', onTouchStart, { passive: false });
+        window.addEventListener('touchmove', onTouchMove, { passive: false });
+        window.addEventListener('touchend', onTouchEnd);
+        return () => {
+            el.removeEventListener('mousedown', onMouseDown);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+            el.removeEventListener('touchstart', onTouchStart);
+            window.removeEventListener('touchmove', onTouchMove);
+            window.removeEventListener('touchend', onTouchEnd);
+        };
+    }, [table]);
     const insertImageAtSelection = (src) => {
         try {
             const host = editableRef.current;
@@ -347,11 +528,61 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             });
         }
     };
+    const fixNegativeMargins = (root) => {
+        try {
+            const nodes = root.querySelectorAll('*');
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (node.style && node.style.marginLeft && node.style.marginLeft.trim().startsWith('-')) {
+                    node.style.marginLeft = '0px';
+                }
+            }
+        }
+        catch { }
+    };
+    const ensureTableWrappers = (root) => {
+        try {
+            const tables = root.querySelectorAll('table');
+            tables.forEach((table) => {
+                const parent = table.parentElement;
+                if (parent && parent.getAttribute('data-table-wrapper') !== 'true') {
+                    const wrapper = document.createElement('div');
+                    wrapper.setAttribute('data-table-wrapper', 'true');
+                    wrapper.style.overflowX = 'auto';
+                    wrapper.style.webkitOverflowScrolling = 'touch';
+                    wrapper.style.width = '100%';
+                    wrapper.style.maxWidth = '100%';
+                    wrapper.style.display = 'block';
+                    // Use insertBefore + appendChild to move element without losing too much state
+                    // simpler than replaceChild for wrapping
+                    parent.insertBefore(wrapper, table);
+                    wrapper.appendChild(table);
+                }
+                // Always ensure table takes full width
+                if (table.style.width !== '100%') {
+                    table.style.width = '100%';
+                }
+                // Ensure min-width is set
+                if (!table.style.minWidth || table.style.minWidth === '0px') {
+                    table.style.minWidth = '100%';
+                }
+            });
+        }
+        catch (e) {
+            console.error("Error wrapping tables", e);
+        }
+    };
     const handleInput = () => {
         if (isComposingRef.current)
             return;
         const el = editableRef.current;
-        if (!el || !onChange)
+        if (!el)
+            return;
+        // Auto-fix negative margins that might cause visibility issues
+        fixNegativeMargins(el);
+        // Ensure tables are wrapped for horizontal scrolling
+        ensureTableWrappers(el);
+        if (!onChange)
             return;
         const html = el.innerHTML;
         if (html !== lastEmittedRef.current) {
@@ -362,7 +593,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const buildTableHTML = (rows, cols) => {
         const safeRows = Math.max(1, Math.min(50, Math.floor(rows) || 1));
         const safeCols = Math.max(1, Math.min(20, Math.floor(cols) || 1));
-        let html = '<table style="border-collapse:collapse;width:100%;"><tbody>';
+        let html = '<div data-table-wrapper="true" style="overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;display:block;"><table style="border-collapse:collapse;min-width:100%;"><tbody>';
         for (let r = 0; r < safeRows; r++) {
             html += "<tr>";
             for (let c = 0; c < safeCols; c++) {
@@ -371,7 +602,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             }
             html += "</tr>";
         }
-        html += "</tbody></table>";
+        html += "</tbody></table></div>";
         return html;
     };
     const insertTable = () => {
@@ -400,6 +631,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (!node || !range)
                 return;
             range.insertNode(node);
+            // Add resize handles to the new table
+            if (node instanceof HTMLTableElement) {
+                const tbody = node.querySelector('tbody');
+                if (tbody) {
+                    const rows = Array.from(tbody.querySelectorAll('tr'));
+                    rows.forEach((row, index) => {
+                        row.setAttribute('data-row-index', String(index));
+                        const cells = cellsOfRow(row);
+                        cells.forEach((cell, cellIndex) => {
+                            cell.setAttribute('data-col-index', String(cellIndex));
+                        });
+                    });
+                }
+            }
             // Move caret into first cell
             const firstCell = node.querySelector("td,th");
             if (firstCell)
@@ -741,14 +986,143 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             applyToggle(fallbackCell);
         }
     };
-    return (_jsxs("div", { style: { border: "1px solid #ddd", borderRadius: 6 }, children: [_jsxs("div", { style: {
+    // Table column and row resizing functions
+    const getColumnCells = (table, colIndex) => {
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return [];
+        const cells = [];
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+        rows.forEach(row => {
+            const rowCells = cellsOfRow(row);
+            if (rowCells[colIndex]) {
+                cells.push(rowCells[colIndex]);
+            }
+        });
+        return cells;
+    };
+    const startColumnResize = (table, colIndex, clientX) => {
+        const cells = getColumnCells(table, colIndex);
+        if (cells.length === 0)
+            return;
+        const firstCell = cells[0];
+        const currentWidth = firstCell.offsetWidth;
+        // Unlock table width so it can grow
+        table.style.width = "max-content";
+        table.style.minWidth = "100%";
+        tableResizeRef.current = {
+            type: 'column',
+            table,
+            index: colIndex,
+            startPos: clientX,
+            startSize: currentWidth,
+            cells,
+        };
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    };
+    const startRowResize = (table, rowIndex, clientY) => {
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return;
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+        const row = rows[rowIndex];
+        if (!row)
+            return;
+        const cells = cellsOfRow(row);
+        const currentHeight = row.offsetHeight;
+        tableResizeRef.current = {
+            type: 'row',
+            table,
+            index: rowIndex,
+            startPos: clientY,
+            startSize: currentHeight,
+            cells,
+        };
+        document.body.style.cursor = 'row-resize';
+        document.body.style.userSelect = 'none';
+    };
+    const handleTableResizeMove = (e) => {
+        const resize = tableResizeRef.current;
+        if (!resize)
+            return;
+        e.preventDefault();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        if (resize.type === 'column') {
+            const delta = clientX - resize.startPos;
+            const newWidth = Math.max(60, resize.startSize + delta);
+            resize.cells.forEach(cell => {
+                cell.style.width = `${newWidth}px`;
+                cell.style.minWidth = `${newWidth}px`;
+                cell.style.maxWidth = `${newWidth}px`;
+            });
+        }
+        else if (resize.type === 'row') {
+            const delta = clientY - resize.startPos;
+            const newHeight = Math.max(30, resize.startSize + delta);
+            const tbody = resize.table.querySelector('tbody');
+            if (tbody) {
+                const rows = Array.from(tbody.querySelectorAll('tr'));
+                const row = rows[resize.index];
+                if (row) {
+                    row.style.height = `${newHeight}px`;
+                    resize.cells.forEach(cell => {
+                        cell.style.height = `${newHeight}px`;
+                    });
+                }
+            }
+        }
+    };
+    const handleTableResizeEnd = () => {
+        if (tableResizeRef.current) {
+            tableResizeRef.current = null;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            handleInput();
+        }
+    };
+    const addTableResizeHandles = () => {
+        if (!table)
+            return;
+        const el = editableRef.current;
+        if (!el)
+            return;
+        const tables = el.querySelectorAll('table');
+        tables.forEach(tableElem => {
+            const tbody = tableElem.querySelector('tbody');
+            if (!tbody)
+                return;
+            const firstRow = tbody.querySelector('tr');
+            if (firstRow) {
+                const cells = cellsOfRow(firstRow);
+                cells.forEach((cell, index) => {
+                    cell.setAttribute('data-col-index', String(index));
+                });
+            }
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            rows.forEach((row, index) => {
+                row.setAttribute('data-row-index', String(index));
+            });
+        });
+    };
+    return (_jsxs("div", { style: {
+            border: "1px solid #ddd",
+            borderRadius: 6,
+            width: "100%",
+            maxWidth: "100vw",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            background: "#fff",
+            boxSizing: "border-box"
+        }, children: [_jsxs("div", { style: {
                     display: "flex",
                     flexWrap: "wrap",
+                    maxWidth: "100%",
                     gap: 8,
                     padding: 8,
                     borderBottom: "1px solid #eee",
-                    background: "#fff",
-                    color: "#111",
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
@@ -847,7 +1221,24 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "#fff",
                             color: "#111",
-                        }, children: [_jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] }), _jsxs("button", { title: "Text Color", onClick: () => {
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Size" }), _jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] }), _jsxs("select", { value: currentFont, onMouseDown: () => {
+                            const sel = window.getSelection();
+                            if (sel && sel.rangeCount > 0) {
+                                const range = sel.getRangeAt(0);
+                                const editor = editableRef.current;
+                                if (editor && editor.contains(range.commonAncestorContainer) && !range.collapsed) {
+                                    savedRangeRef.current = range.cloneRange();
+                                }
+                            }
+                        }, onChange: (e) => applyFontFamily(e.target.value), title: "Font Family", style: {
+                            height: 32,
+                            padding: "0 8px",
+                            border: "1px solid #e5e7eb",
+                            borderRadius: 6,
+                            background: "#fff",
+                            color: "#111",
+                            maxWidth: 100,
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] }), _jsx("button", { title: "Text Color", onClick: () => {
                             setColorPickerType('text');
                             setShowColorPicker(true);
                         }, style: {
@@ -859,16 +1250,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "#fff",
                             color: "#111",
                             position: "relative",
-                        }, children: [_jsx("span", { style: { fontWeight: 700 }, children: "A" }), _jsx("div", { style: {
-                                    position: "absolute",
-                                    bottom: 4,
-                                    left: "50%",
-                                    transform: "translateX(-50%)",
-                                    width: 16,
-                                    height: 3,
-                                    background: "#000",
-                                    borderRadius: 1,
-                                } })] }), _jsx("button", { title: "Background Color", onClick: () => {
+                        }, children: _jsx("span", { style: { fontWeight: 700 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
                             setColorPickerType('background');
                             setShowColorPicker(true);
                         }, style: {
@@ -879,7 +1261,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "#fff",
                             color: "#111",
-                        }, children: _jsx("span", { style: { fontWeight: 700, background: "#ffeb3b", padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
                             height: 32,
                             padding: "0 10px",
                             border: "1px solid #e5e7eb",
@@ -1082,6 +1464,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         padding: 16,
                         borderRadius: 8,
                         minWidth: 320,
+                        maxWidth: "90vw",
                         color: "#000",
                     }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 12 }, children: colorPickerType === 'text' ? 'Select Text Color' : 'Select Background Color' }), _jsx("div", { style: {
                                 display: "grid",
@@ -1235,273 +1618,285 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         borderRadius: 4,
                                         background: "#fff",
                                         color: "#000",
-                                    }, title: sym, children: sym }, i)))] })] }) })), _jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
-                    isComposingRef.current = false;
-                    handleInput();
-                }, onPaste: (e) => {
-                    const items = e.clipboardData?.files;
-                    if (media && items && items.length) {
-                        const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
-                        if (hasImage) {
+                                    }, title: sym, children: sym }, i)))] })] }) })), _jsx("div", { style: {
+                    width: "100%",
+                    maxWidth: "100%",
+                    flex: "1 1 auto",
+                    minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
+                    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    boxSizing: "border-box",
+                    position: "relative",
+                }, children: _jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
+                        isComposingRef.current = false;
+                        handleInput();
+                    }, onPaste: (e) => {
+                        const items = e.clipboardData?.files;
+                        if (media && items && items.length) {
+                            const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
+                            if (hasImage) {
+                                e.preventDefault();
+                                handleLocalImageFiles(items);
+                            }
+                        }
+                    }, onDragOver: (e) => {
+                        // Allow dragging images within editor and file drops
+                        if (draggedImageRef.current ||
+                            e.dataTransfer?.types?.includes("Files")) {
                             e.preventDefault();
-                            handleLocalImageFiles(items);
                         }
-                    }
-                }, onDragOver: (e) => {
-                    // Allow dragging images within editor and file drops
-                    if (draggedImageRef.current ||
-                        e.dataTransfer?.types?.includes("Files")) {
-                        e.preventDefault();
-                    }
-                }, onDrop: (e) => {
-                    // Move existing dragged image inside editor
-                    if (draggedImageRef.current) {
-                        e.preventDefault();
-                        const x = e.clientX;
-                        const y = e.clientY;
-                        let range = null;
-                        // @ts-ignore
-                        if (document.caretRangeFromPoint) {
+                    }, onDrop: (e) => {
+                        // Move existing dragged image inside editor
+                        if (draggedImageRef.current) {
+                            e.preventDefault();
+                            const x = e.clientX;
+                            const y = e.clientY;
+                            let range = null;
                             // @ts-ignore
-                            range = document.caretRangeFromPoint(x, y);
-                        }
-                        else if (document.caretPositionFromPoint) {
-                            const pos = document.caretPositionFromPoint(x, y);
-                            if (pos) {
-                                range = document.createRange();
-                                range.setStart(pos.offsetNode, pos.offset);
+                            if (document.caretRangeFromPoint) {
+                                // @ts-ignore
+                                range = document.caretRangeFromPoint(x, y);
                             }
-                        }
-                        const img = draggedImageRef.current;
-                        draggedImageRef.current = null;
-                        if (range &&
-                            img &&
-                            editableRef.current?.contains(range.commonAncestorContainer)) {
-                            // Avoid inserting inside the image itself
-                            if (range.startContainer === img || range.endContainer === img)
-                                return;
-                            // If dropping inside a link, insert right after the link element
-                            let container = range.commonAncestorContainer;
-                            let linkAncestor = null;
-                            let el = container;
-                            while (el && el !== editableRef.current) {
-                                if (el.tagName === "A") {
-                                    linkAncestor = el;
-                                    break;
+                            else if (document.caretPositionFromPoint) {
+                                const pos = document.caretPositionFromPoint(x, y);
+                                if (pos) {
+                                    range = document.createRange();
+                                    range.setStart(pos.offsetNode, pos.offset);
                                 }
-                                el = el.parentElement;
-                            }
-                            if (linkAncestor) {
-                                linkAncestor.parentElement?.insertBefore(img, linkAncestor.nextSibling);
                             }
-                            else {
-                                range.insertNode(img);
+                            const img = draggedImageRef.current;
+                            draggedImageRef.current = null;
+                            if (range &&
+                                img &&
+                                editableRef.current?.contains(range.commonAncestorContainer)) {
+                                // Avoid inserting inside the image itself
+                                if (range.startContainer === img || range.endContainer === img)
+                                    return;
+                                // If dropping inside a link, insert right after the link element
+                                let container = range.commonAncestorContainer;
+                                let linkAncestor = null;
+                                let el = container;
+                                while (el && el !== editableRef.current) {
+                                    if (el.tagName === "A") {
+                                        linkAncestor = el;
+                                        break;
+                                    }
+                                    el = el.parentElement;
+                                }
+                                if (linkAncestor) {
+                                    linkAncestor.parentElement?.insertBefore(img, linkAncestor.nextSibling);
+                                }
+                                else {
+                                    range.insertNode(img);
+                                }
+                                const r = document.createRange();
+                                r.setStartAfter(img);
+                                r.collapse(true);
+                                safeSelectRange(r);
+                                setSelectedImage(img);
+                                scheduleImageOverlay();
+                                handleInput();
                             }
-                            const r = document.createRange();
-                            r.setStartAfter(img);
-                            r.collapse(true);
-                            safeSelectRange(r);
-                            setSelectedImage(img);
-                            scheduleImageOverlay();
-                            handleInput();
+                            return;
                         }
-                        return;
-                    }
-                    if (media && e.dataTransfer?.files?.length) {
-                        e.preventDefault();
-                        // Try to move caret to drop point
-                        const x = e.clientX;
-                        const y = e.clientY;
-                        let range = null;
-                        // @ts-ignore
-                        if (document.caretRangeFromPoint) {
+                        if (media && e.dataTransfer?.files?.length) {
+                            e.preventDefault();
+                            // Try to move caret to drop point
+                            const x = e.clientX;
+                            const y = e.clientY;
+                            let range = null;
                             // @ts-ignore
-                            range = document.caretRangeFromPoint(x, y);
-                        }
-                        else if (document.caretPositionFromPoint) {
-                            const pos = document.caretPositionFromPoint(x, y);
-                            if (pos) {
-                                range = document.createRange();
-                                range.setStart(pos.offsetNode, pos.offset);
+                            if (document.caretRangeFromPoint) {
+                                // @ts-ignore
+                                range = document.caretRangeFromPoint(x, y);
                             }
+                            else if (document.caretPositionFromPoint) {
+                                const pos = document.caretPositionFromPoint(x, y);
+                                if (pos) {
+                                    range = document.createRange();
+                                    range.setStart(pos.offsetNode, pos.offset);
+                                }
+                            }
+                            if (range) {
+                                const sel = window.getSelection();
+                                sel?.removeAllRanges();
+                                sel?.addRange(range);
+                            }
+                            handleLocalImageFiles(e.dataTransfer.files);
                         }
-                        if (range) {
-                            const sel = window.getSelection();
-                            sel?.removeAllRanges();
-                            sel?.addRange(range);
+                    }, onClick: (e) => {
+                        const t = e.target;
+                        if (t && t.tagName === "IMG") {
+                            setSelectedImage(t);
+                            scheduleImageOverlay();
                         }
-                        handleLocalImageFiles(e.dataTransfer.files);
-                    }
-                }, onClick: (e) => {
-                    const t = e.target;
-                    if (t && t.tagName === "IMG") {
-                        setSelectedImage(t);
-                        scheduleImageOverlay();
-                    }
-                    else {
-                        setSelectedImage(null);
-                        setImageOverlay(null);
-                    }
-                }, onDragStart: (e) => {
-                    const t = e.target;
-                    if (t && t.tagName === "IMG") {
-                        draggedImageRef.current = t;
-                        try {
-                            e.dataTransfer?.setData("text/plain", "moving-image");
-                            e.dataTransfer.effectAllowed = "move";
-                            // Provide a subtle drag image
-                            const dt = e.dataTransfer;
-                            if (dt && typeof dt.setDragImage === "function") {
-                                const ghost = new Image();
-                                ghost.src = t.src;
-                                ghost.width = Math.min(120, t.width);
-                                ghost.height = Math.min(120, t.height);
-                                dt.setDragImage(ghost, 10, 10);
+                        else {
+                            setSelectedImage(null);
+                            setImageOverlay(null);
+                        }
+                    }, onDragStart: (e) => {
+                        const t = e.target;
+                        if (t && t.tagName === "IMG") {
+                            draggedImageRef.current = t;
+                            try {
+                                e.dataTransfer?.setData("text/plain", "moving-image");
+                                e.dataTransfer.effectAllowed = "move";
+                                // Provide a subtle drag image
+                                const dt = e.dataTransfer;
+                                if (dt && typeof dt.setDragImage === "function") {
+                                    const ghost = new Image();
+                                    ghost.src = t.src;
+                                    ghost.width = Math.min(120, t.width);
+                                    ghost.height = Math.min(120, t.height);
+                                    dt.setDragImage(ghost, 10, 10);
+                                }
                             }
+                            catch { }
                         }
-                        catch { }
-                    }
-                    else {
+                        else {
+                            draggedImageRef.current = null;
+                        }
+                    }, onDragEnd: () => {
                         draggedImageRef.current = null;
-                    }
-                }, onDragEnd: () => {
-                    draggedImageRef.current = null;
-                }, style: {
-                    padding: 12,
-                    minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
-                    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-                    overflowY: "auto",
-                    outline: "none",
-                    lineHeight: 1.6,
-                }, "data-placeholder": placeholder, onFocus: (e) => {
-                    // Ensure the editor has at least one paragraph to type into
-                    const el = e.currentTarget;
-                    if (!el.innerHTML || el.innerHTML === "<br>") {
-                        el.innerHTML = "<p><br></p>";
-                    }
-                }, onKeyDown: (e) => {
-                    if (formula &&
-                        (e.metaKey || e.ctrlKey) &&
-                        String(e.key).toLowerCase() === "m") {
-                        e.preventDefault();
-                        setShowFormulaDialog(true);
-                        return;
-                    }
-                    // Keep Tab for indentation in lists; otherwise insert 2 spaces
-                    if (e.key === "Tab") {
-                        e.preventDefault();
-                        if (document.queryCommandState("insertUnorderedList") ||
-                            document.queryCommandState("insertOrderedList")) {
-                            exec(e.shiftKey ? "outdent" : "indent");
+                    }, style: {
+                        minHeight: "100%",
+                        maxWidth: "100%",
+                        overflowX: "hidden",
+                        padding: "16px",
+                        outline: "none",
+                        lineHeight: 1.6,
+                        boxSizing: "border-box",
+                        fontFamily: defaultFont || "inherit",
+                    }, "data-placeholder": placeholder, onFocus: (e) => {
+                        // Ensure the editor has at least one paragraph to type into
+                        const el = e.currentTarget;
+                        if (!el.innerHTML || el.innerHTML === "<br>") {
+                            el.innerHTML = "<p><br></p>";
                         }
-                        else {
-                            document.execCommand("insertText", false, "  ");
+                    }, onKeyDown: (e) => {
+                        if (formula &&
+                            (e.metaKey || e.ctrlKey) &&
+                            String(e.key).toLowerCase() === "m") {
+                            e.preventDefault();
+                            setShowFormulaDialog(true);
+                            return;
                         }
-                    }
-                    // Table navigation with arrows inside cells
-                    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-                        const sel = window.getSelection();
-                        const cell = getClosestCell(sel?.anchorNode || null);
-                        if (table &&
-                            cell &&
-                            cell.parentElement &&
-                            cell.parentElement.parentElement) {
-                            const row = cell.parentElement;
-                            const tbody = row.parentElement;
-                            const cells = Array.from(row.children).filter((c) => c.tagName === "TD" ||
-                                c.tagName === "TH");
-                            const rows = Array.from(tbody.children);
-                            const rIdx = rows.indexOf(row);
-                            const cIdx = cells.indexOf(cell);
-                            const atStart = (sel?.anchorOffset || 0) === 0;
-                            const cellTextLen = (cell.textContent || "").length;
-                            const atEnd = (sel?.anchorOffset || 0) >= cellTextLen;
-                            let target = null;
-                            if (e.key === "ArrowLeft" && atStart && cIdx > 0) {
-                                target = row.children[cIdx - 1];
-                            }
-                            else if (e.key === "ArrowRight" &&
-                                atEnd &&
-                                cIdx < row.children.length - 1) {
-                                target = row.children[cIdx + 1];
-                            }
-                            else if (e.key === "ArrowUp" && rIdx > 0 && atStart) {
-                                target = rows[rIdx - 1].children[cIdx];
+                        // Keep Tab for indentation in lists; otherwise insert 2 spaces
+                        if (e.key === "Tab") {
+                            e.preventDefault();
+                            if (document.queryCommandState("insertUnorderedList") ||
+                                document.queryCommandState("insertOrderedList")) {
+                                exec(e.shiftKey ? "outdent" : "indent");
                             }
-                            else if (e.key === "ArrowDown" &&
-                                rIdx < rows.length - 1 &&
-                                atEnd) {
-                                target = rows[rIdx + 1].children[cIdx];
+                            else {
+                                document.execCommand("insertText", false, "  ");
                             }
-                            if (target) {
-                                e.preventDefault();
-                                moveCaretToCell(target, e.key === "ArrowRight" || e.key === "ArrowDown");
+                        }
+                        // Table navigation with arrows inside cells
+                        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+                            const sel = window.getSelection();
+                            const cell = getClosestCell(sel?.anchorNode || null);
+                            if (table &&
+                                cell &&
+                                cell.parentElement &&
+                                cell.parentElement.parentElement) {
+                                const row = cell.parentElement;
+                                const tbody = row.parentElement;
+                                const cells = Array.from(row.children).filter((c) => c.tagName === "TD" ||
+                                    c.tagName === "TH");
+                                const rows = Array.from(tbody.children);
+                                const rIdx = rows.indexOf(row);
+                                const cIdx = cells.indexOf(cell);
+                                const atStart = (sel?.anchorOffset || 0) === 0;
+                                const cellTextLen = (cell.textContent || "").length;
+                                const atEnd = (sel?.anchorOffset || 0) >= cellTextLen;
+                                let target = null;
+                                if (e.key === "ArrowLeft" && atStart && cIdx > 0) {
+                                    target = row.children[cIdx - 1];
+                                }
+                                else if (e.key === "ArrowRight" &&
+                                    atEnd &&
+                                    cIdx < row.children.length - 1) {
+                                    target = row.children[cIdx + 1];
+                                }
+                                else if (e.key === "ArrowUp" && rIdx > 0 && atStart) {
+                                    target = rows[rIdx - 1].children[cIdx];
+                                }
+                                else if (e.key === "ArrowDown" &&
+                                    rIdx < rows.length - 1 &&
+                                    atEnd) {
+                                    target = rows[rIdx + 1].children[cIdx];
+                                }
+                                if (target) {
+                                    e.preventDefault();
+                                    moveCaretToCell(target, e.key === "ArrowRight" || e.key === "ArrowDown");
+                                }
                             }
                         }
-                    }
-                }, onMouseDown: (e) => {
-                    const cell = getClosestCell(e.target);
-                    if (!cell) {
-                        clearSelectionDecor();
-                        return;
-                    }
-                    const pos = getCellPosition(cell);
-                    if (!pos)
-                        return;
-                    selectingRef.current = { tbody: pos.tbody, start: cell };
-                    const onMove = (ev) => {
-                        const under = document.elementFromPoint(ev.clientX, ev.clientY);
-                        const overCell = getClosestCell(under);
-                        const startInfo = selectingRef.current;
-                        if (!overCell || !startInfo)
+                    }, onMouseDown: (e) => {
+                        const cell = getClosestCell(e.target);
+                        if (!cell) {
+                            clearSelectionDecor();
                             return;
-                        const a = getCellPosition(startInfo.start);
-                        const b = getCellPosition(overCell);
-                        if (!a || !b || a.tbody !== b.tbody)
+                        }
+                        const pos = getCellPosition(cell);
+                        if (!pos)
                             return;
-                        const sr = Math.min(a.rIdx, b.rIdx);
-                        const sc = Math.min(a.cIdx, b.cIdx);
-                        const er = Math.max(a.rIdx, b.rIdx);
-                        const ec = Math.max(a.cIdx, b.cIdx);
-                        updateSelectionDecor(a.tbody, sr, sc, er, ec);
-                    };
-                    const onUp = () => {
-                        window.removeEventListener("mousemove", onMove);
-                        window.removeEventListener("mouseup", onUp);
-                        selectingRef.current = null;
-                    };
-                    window.addEventListener("mousemove", onMove);
-                    window.addEventListener("mouseup", onUp);
-                }, onContextMenu: (e) => {
-                    const target = e.target;
-                    if (target && target.tagName === "IMG") {
-                        e.preventDefault();
-                        const vw = window.innerWidth;
-                        const vh = window.innerHeight;
-                        const menuW = 220;
-                        const menuH = 200;
-                        const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
-                        const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
-                        setImageMenu({ x, y, img: target });
-                        setTableMenu(null);
-                        return;
-                    }
-                    const cell = getClosestCell(e.target);
-                    if (cell) {
-                        e.preventDefault();
-                        const vw = window.innerWidth;
-                        const vh = window.innerHeight;
-                        const menuW = 220;
-                        const menuH = 300;
-                        const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
-                        const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
-                        setTableMenu({ x, y, cell });
-                    }
-                    else {
-                        setTableMenu(null);
-                        setImageMenu(null);
-                    }
-                } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
+                        selectingRef.current = { tbody: pos.tbody, start: cell };
+                        const onMove = (ev) => {
+                            const under = document.elementFromPoint(ev.clientX, ev.clientY);
+                            const overCell = getClosestCell(under);
+                            const startInfo = selectingRef.current;
+                            if (!overCell || !startInfo)
+                                return;
+                            const a = getCellPosition(startInfo.start);
+                            const b = getCellPosition(overCell);
+                            if (!a || !b || a.tbody !== b.tbody)
+                                return;
+                            const sr = Math.min(a.rIdx, b.rIdx);
+                            const sc = Math.min(a.cIdx, b.cIdx);
+                            const er = Math.max(a.rIdx, b.rIdx);
+                            const ec = Math.max(a.cIdx, b.cIdx);
+                            updateSelectionDecor(a.tbody, sr, sc, er, ec);
+                        };
+                        const onUp = () => {
+                            window.removeEventListener("mousemove", onMove);
+                            window.removeEventListener("mouseup", onUp);
+                            selectingRef.current = null;
+                        };
+                        window.addEventListener("mousemove", onMove);
+                        window.addEventListener("mouseup", onUp);
+                    }, onContextMenu: (e) => {
+                        const target = e.target;
+                        if (target && target.tagName === "IMG") {
+                            e.preventDefault();
+                            const vw = window.innerWidth;
+                            const vh = window.innerHeight;
+                            const menuW = 220;
+                            const menuH = 200;
+                            const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
+                            const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
+                            setImageMenu({ x, y, img: target });
+                            setTableMenu(null);
+                            return;
+                        }
+                        const cell = getClosestCell(e.target);
+                        if (cell) {
+                            e.preventDefault();
+                            const vw = window.innerWidth;
+                            const vh = window.innerHeight;
+                            const menuW = 220;
+                            const menuH = 300;
+                            const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
+                            const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
+                            setTableMenu({ x, y, cell });
+                        }
+                        else {
+                            setTableMenu(null);
+                            setImageMenu(null);
+                        }
+                    } }) }), selectedImage && imageOverlay && (_jsxs("div", { style: {
                     position: "fixed",
                     left: imageOverlay.left,
                     top: imageOverlay.top,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.1.10",
+  "version": "0.1.14",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",
@@ -38,6 +38,16 @@
   },
   "author": "Smart RTE Contributors",
   "license": "MIT",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "pnpm run build",
+    "dev": "pnpm build",
+    "lint": "eslint . || true",
+    "test": "vitest run || true",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "e2e": "playwright test || true"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -59,16 +69,5 @@
     "@playwright/test": "^1.48.2",
     "react": "18.3.1",
     "react-dom": "18.3.1"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "build:embed": "vite build",
-    "build:all": "pnpm run build && pnpm run build:embed",
-    "dev": "pnpm build",
-    "lint": "eslint . || true",
-    "test": "vitest run || true",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "e2e": "playwright test || true"
   }
-}
+}