smartrte-react 0.1.10 → 0.1.13

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.js

@@ -11,6 +11,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);
@@ -194,6 +195,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;
@@ -400,6 +519,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,6 +874,123 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             applyToggle(fallbackCell);
         }
     };
+    // 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;
+        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 }, children: [_jsxs("div", { style: {
                     display: "flex",
                     flexWrap: "wrap",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "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"
   }
-}
+}