quill-resizable-table 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Abhijeet Satpute
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,229 @@
+# quill-resizable-table
+
+A [Quill.js](https://quilljs.com/) plugin for drag-resizable tables -- resize columns, rows, and the entire table. Add or remove rows and columns with a right-click context menu or floating edge buttons.
+
+**[📺 Live Demo](https://abhijeetsatpute.github.io/quill-resizable-table/)**
+
+<p align="center">
+  <img src="" alt="quill-resizable-table demo" width="700" />
+  <br />
+  <em><!-- Add your demo GIF here --></em>
+</p>
+
+---
+
+## Features
+
+- **Drag to resize** columns, rows, or the entire table
+- **Right-click context menu** to insert/delete rows and columns
+- **Floating buttons** on table edges for quick row/column addition and **table deletion**
+- **Delete table** via context menu or floating delete button
+- **Toolbar button** with a table icon to insert new tables
+- Works with **Quill 1.3+** and **Quill 2.x**
+- Zero dependencies (only Quill as a peer dependency)
+- Ships ESM, CJS, and UMD builds
+- TypeScript types included
+- **Comprehensive test coverage** (80%+ test coverage)
+
+## Installation
+
+```bash
+npm install quill-resizable-table
+```
+
+## Quick Start
+
+```js
+import Quill from 'quill';
+import { ResizableTable } from 'quill-resizable-table';
+import 'quill-resizable-table/dist/quill-resizable-table.css';
+
+Quill.register('modules/resizableTable', ResizableTable);
+
+const quill = new Quill('#editor', {
+  theme: 'snow',
+  modules: {
+    toolbar: [['bold', 'italic'], ['table']],
+    resizableTable: true,
+  },
+});
+```
+
+Tables inside the editor are now resizable by drag, and you get a context menu and edge buttons for free.
+
+## Usage Examples
+
+### Toolbar table button
+
+Register the built-in table icon so the toolbar renders a clickable grid button:
+
+```js
+import Quill from 'quill';
+import { ResizableTable } from 'quill-resizable-table';
+import 'quill-resizable-table/dist/quill-resizable-table.css';
+
+// Register icon BEFORE creating the editor
+const icons = Quill.import('ui/icons');
+icons['table'] = ResizableTable.TABLE_ICON;
+
+Quill.register('modules/resizableTable', ResizableTable);
+
+const quill = new Quill('#editor', {
+  theme: 'snow',
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline'],
+      [{ header: [1, 2, 3, false] }],
+      ['table'],
+      ['clean'],
+    ],
+    resizableTable: true,
+  },
+});
+```
+
+Clicking the table button inserts a 3x3 table at the cursor position.
+
+### Custom options
+
+```js
+const quill = new Quill('#editor', {
+  theme: 'snow',
+  modules: {
+    resizableTable: {
+      handleSize: 8,          // grab-zone width in px (default: 5)
+      minColumnWidth: 50,     // minimum column width in px (default: 30)
+      minRowHeight: 30,       // minimum row height in px (default: 20)
+    },
+  },
+});
+```
+
+### UMD / CDN (no bundler)
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/quill-resizable-table/dist/quill-resizable-table.css" rel="stylesheet" />
+
+<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/quill-resizable-table/dist/quill-resizable-table.umd.js"></script>
+
+<div id="editor"></div>
+
+<script>
+  var ResizableTable = QuillResizableTable.ResizableTable;
+
+  var icons = Quill.import('ui/icons');
+  icons['table'] = ResizableTable.TABLE_ICON;
+
+  Quill.register('modules/resizableTable', ResizableTable);
+
+  var quill = new Quill('#editor', {
+    theme: 'snow',
+    modules: {
+      toolbar: [['bold', 'italic'], ['table']],
+      resizableTable: true,
+    },
+  });
+</script>
+```
+
+### Programmatic table insertion
+
+```js
+const resizableTable = quill.getModule('resizableTable');
+
+// Insert a 4x5 table at the cursor
+resizableTable.insertNewTable(4, 5);
+```
+
+### Programmatic row/column/table manipulation
+
+```js
+const resizableTable = quill.getModule('resizableTable');
+const table = document.querySelector('.ql-editor table');
+
+resizableTable.insertColumn(table, 1, 'after');   // column right of index 1
+resizableTable.insertColumn(table, 0, 'before');   // column left of index 0
+resizableTable.insertRow(table, 0, 'after');        // row below index 0
+resizableTable.insertRow(table, 2, 'before');       // row above index 2
+resizableTable.deleteColumn(table, 2);              // remove column 2
+resizableTable.deleteRow(table, 1);                 // remove row 1
+resizableTable.deleteTable(table);                  // remove entire table
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `handleSize` | `number` | `5` | Width (px) of the invisible grab zone on cell borders |
+| `minColumnWidth` | `number` | `30` | Minimum column width in px during resize |
+| `minRowHeight` | `number` | `20` | Minimum row height in px during resize |
+
+## How It Works
+
+| Action | How |
+|---|---|
+| Resize a column | Drag the right edge of any cell |
+| Resize a row | Drag the bottom edge of any cell |
+| Resize the table | Drag the bottom-right corner of the table |
+| Insert/delete rows & columns | Right-click any cell for the context menu |
+| Quick-add row or column | Hover the right or bottom edge of a table, click **+** |
+| Delete table | Right-click any cell → **Delete Table** or hover table and click red **✕** button |
+| Insert a new table | Click the table icon in the toolbar |
+
+## API
+
+### `ResizableTable`
+
+| Method | Description |
+|---|---|
+| `insertNewTable(rows?, cols?)` | Insert a new table at the cursor (default 3x3) |
+| `insertColumn(table, colIndex, 'before' \| 'after')` | Insert a column |
+| `deleteColumn(table, colIndex)` | Delete a column (min 1 enforced) |
+| `insertRow(table, rowIndex, 'before' \| 'after')` | Insert a row |
+| `deleteRow(table, rowIndex)` | Delete a row (min 1 enforced) |
+| `deleteTable(table)` | Delete the entire table |
+| `destroy()` | Remove all listeners and clean up |
+
+### Static Properties
+
+| Property | Description |
+|---|---|
+| `ResizableTable.TABLE_ICON` | SVG string for the Quill toolbar table icon |
+
+## Development
+
+```bash
+git clone https://github.com/abhijeetsatpute/quill-resizable-table.git
+cd quill-resizable-table
+npm install
+npm run dev       # start demo at localhost
+npm test          # run tests
+npm run build     # build dist/
+```
+
+### Test Coverage
+
+The project maintains comprehensive test coverage:
+
+- **42 tests** covering all core functionality
+- **80%+ code coverage** (Statements: 80.39%, Branches: 52.79%, Functions: 75%, Lines: 83.46%)
+- Tests for table resizing, row/column operations, table deletion, context menus, and edge button interactions
+
+Run tests with coverage:
+```bash
+npm test -- --coverage
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+## Code of Conduct
+
+This project follows the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md).
+
+## License
+
+[MIT](LICENSE) -- Abhijeet Satpute

package/dist/ResizableTable.d.ts

@@ -0,0 +1,109 @@
+/**
+ * quill-resizable-table
+ * Drag-to-resize columns, rows, and entire tables inside a Quill editor.
+ * Right-click context menu & floating edge buttons for adding/removing rows & columns.
+ */
+export interface ResizableTableOptions {
+    /** Pixel width of the invisible grab zone on each border (default 5) */
+    handleSize?: number;
+    /** Minimum column width in px (default 30) */
+    minColumnWidth?: number;
+    /** Minimum row height in px (default 20) */
+    minRowHeight?: number;
+    /** Minimum table width in px (default 50) */
+    minTableWidth?: number;
+    /** Minimum table height in px (default 30) */
+    minTableHeight?: number;
+}
+export declare class ResizableTable {
+    private quill;
+    private options;
+    private drag;
+    private overlay;
+    private doc;
+    private contextMenu;
+    private contextCell;
+    private addColBtn;
+    private addRowBtn;
+    private deleteTableBtn;
+    private hoveredTable;
+    private hideEdgeBtnTimer;
+    private onMouseMoveBound;
+    private onMouseUpBound;
+    private onEditorMouseMoveBound;
+    private onEditorMouseDownBound;
+    private onContextMenuBound;
+    private onDismissMenuBound;
+    private onDismissMenuKeyBound;
+    private onEditorMouseOverBound;
+    private onEditorMouseOutBound;
+    private onScrollBound;
+    constructor(quill: any, options?: ResizableTableOptions | boolean);
+    /** Table icon SVG for the Quill toolbar */
+    static TABLE_ICON: string;
+    /** Hook into Quill's toolbar to handle the "table" button */
+    private registerToolbarHandler;
+    /** Wire up listeners on the editor root */
+    private attach;
+    /** Remove all listeners (call if you ever destroy the module) */
+    destroy(): void;
+    /**
+     * Detect which resize edge (if any) the mouse is near.
+     * Returns null when the cursor isn't on a resize boundary.
+     */
+    private detectEdge;
+    /** Update cursor style as the mouse moves over cells */
+    private onEditorMouseMove;
+    /** Start a drag operation */
+    private onEditorMouseDown;
+    private onDocumentMouseMove;
+    private onDocumentMouseUp;
+    private addOverlay;
+    private removeOverlay;
+    /** Get the visual column index of a cell accounting for previous colSpans */
+    private getCellColIndex;
+    /** Get the row index of a cell */
+    private getCellRowIndex;
+    /** Total number of visual columns in the first row */
+    private getColumnCount;
+    /** Read current column widths from the first row's cells */
+    private getColumnWidths;
+    /** Read current row heights */
+    private getRowHeights;
+    /** Apply column widths via a <colgroup> */
+    private applyColumnWidths;
+    /** Resize a single column independently (only that column changes width) */
+    private resizeColumnDirect;
+    /** Apply row heights directly on <tr> elements */
+    private applyRowHeights;
+    private onContextMenu;
+    private showContextMenu;
+    private dismissContextMenu;
+    private onKeyDown;
+    private cancelHideEdgeButtons;
+    private scheduleHideEdgeButtons;
+    private onEditorMouseOver;
+    private onEditorMouseOut;
+    /** Update button positions on scroll to keep them anchored to the table */
+    private onScroll;
+    private showEdgeButtons;
+    private removeEdgeButtons;
+    /** Insert a new 3×3 table at the current cursor position */
+    insertNewTable(rows?: number, cols?: number): void;
+    /**
+     * Consume pending MutationObserver records so Quill's async handler
+     * never processes our structural DOM changes (which it would corrupt).
+     * Style-only changes (resize) don't need this — only structural ones.
+     */
+    private syncQuill;
+    /** Insert a column before or after colIndex */
+    insertColumn(table: HTMLTableElement, colIndex: number, position: 'before' | 'after'): void;
+    /** Delete column at colIndex (no-op if only 1 column remains) */
+    deleteColumn(table: HTMLTableElement, colIndex: number): void;
+    /** Insert a row before or after rowIndex */
+    insertRow(table: HTMLTableElement, rowIndex: number, position: 'before' | 'after'): void;
+    /** Delete row at rowIndex (no-op if only 1 row remains) */
+    deleteRow(table: HTMLTableElement, rowIndex: number): void;
+    /** Delete the entire table */
+    deleteTable(table: HTMLTableElement): void;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ResizableTable } from './ResizableTable';
+export type { ResizableTableOptions } from './ResizableTable';