Select Cells Plugin
Enables click-and-drag selection of table cells. This plugin allows users to select multiple table cells by clicking on a cell and dragging to adjacent cells, similar to spreadsheet applications.
Features
- Click and drag to select multiple cells
- Visual selection highlighting
- Popup toolbar for selected cells
- Keyboard navigation (Tab to deselect)
- Table commands work on selected cells
- Touch event support
- Nested table handling
- Read-only mode support
- Locks editor during selection
- Firefox redraw hack for proper display
tableAllowCellSelection
Type: boolean
Default: true
Enables or disables the ability to select multiple table cells by click-and-drag.
Example:
const editor = Jodit.make('#editor', {
    tableAllowCellSelection: true
});
Basic Usage
const editor = Jodit.make('#editor', {
    tableAllowCellSelection: true
});
// Insert a table
// Click on a cell and drag to select multiple cells
// Use table commands on selected cells
Disable Cell Selection
const editor = Jodit.make('#editor', {
    tableAllowCellSelection: false
});
// Click-and-drag selection disabled
Listen to Selection Events
const editor = Jodit.make('#editor');
// Listen for popup show (when cells selected)
editor.e.on('showPopup', (table, getPosition, type) => {
    if (type === 'cells') {
        console.log('Cells selected, popup shown');
    }
});
Selection Process
- Click Start: User clicks on a table cell (mousedown/touchstart)
- Store Cell: Plugin saves first selected cell
- Enable Mode: Sets selection mode flag
- Add Selection: Marks cell as selected via Table module
- Drag: User moves mouse over other cells
- Calculate Bounds: Determines rectangular selection area
- Select Range: Selects all cells within bounds
- Release: User releases mouse (mouseup/touchend)
- Show Popup: Displays toolbar for selected cells
Selection Bounds
Uses formal matrix to calculate rectangular selection:
- Gets coordinates of first and current cell
- Calculates min/max bounds
- Selects all cells in rectangular area
- Handles colspan/rowspan via formal matrix
Popup Display
When selection completes:
- Calculates combined position of all selected cells
- Fires showPopupevent with table and position
- Popup type is 'cells'for identification
- Position includes left, top, width, height
Table Commands
Plugin intercepts table commands when cells selected:
- tablesplitv- Split cells vertically
- tablesplitg- Split cells horizontally (горизонтально)
- tablemerge- Merge selected cells
- tableempty- Empty selected cells
- tablebin- Delete table
- tablebinrow- Delete rows containing selected cells
- tablebincolumn- Delete columns containing selected cells
- tableaddcolumnafter/before- Add column
- tableaddrowafter/before- Add row
Justify Commands
Handles justify commands for selected cells:
- justifyLeft,- justifyRight,- justifyCenter,- justifyFull
- Applies alignment to all selected cells
showPopup
Fired when cell selection is completed and popup should be shown.
Parameters:
- table(HTMLTableElement): The table
- getPosition(Function): Returns position bounds
- type(string): Always- 'cells'
Example:
editor.e.on('showPopup', (table, getPosition, type) => {
    if (type === 'cells') {
        const bounds = getPosition();
        console.log(bounds); // { left, top, width, height }
    }
});
hidePopup
Fired when selection should be removed or cleared.
Example:
editor.e.on('hidePopup', (type) => {
    if (type === 'cells') {
        console.log('Cell popup hidden');
    }
});
Commands
Plugin intercepts these commands when cells are selected:
- tablesplitv- Split vertically
- tablesplitg- Split horizontally
- tablemerge- Merge cells
- tableempty- Clear content
- tablebin- Delete table
- tablebinrow- Delete rows
- tablebincolumn- Delete columns
- tableaddcolumnafter- Add column after
- tableaddcolumnbefore- Add column before
- tableaddrowafter- Add row after
- tableaddrowbefore- Add row before
- justifyLeft/Right/Center/Full- Align cells
Edge Cases
- Tab Key: Pressing Tab deselects all cells
- Outside Click: Clicking outside deselects cells
- Nested Tables: Only selects cells from same table level
- Empty Cells: Adds <br>to empty cells on selection start
- Read-Only: Selection disabled in read-only mode
- Editor Lock: Locks editor during drag to prevent editing
- Multiple Clicks: Clicking new cell deselects previous
- Touch Events: Full touch support alongside mouse
- Firefox Hack: Temporary node added for proper redraw
- Range Removal: Removes text selection when multiple cells selected
Notes
- Plugin is class-based, extends Pluginbase class
- Requires selectplugin
- Uses @autobindand@watchdecorators
- Event namespacing .select-cellsfor clean removal
- Lock key is 'table_processor_observer'
- Mouse move throttled to defaultTimeout / 2
- Uses Tablemodule for cell operations
- Selection stored via addSelection()andremoveSelection()
- Formal matrix handles colspan/rowspan calculations
- Popup position calculated from cell positions
- Firefox hack adds/removes temporary transparent div
- The getAllSelectedCells()returns currently selected cells
- Selection bounds use getSelectedBound()from Table module
- Nested table check prevents selecting across table boundaries
- The plugin properly cleans up event listeners on destruction
- Mouse move uses async throttle with custom label
- Listens to clickEditor,mousedownTd/Th,touchstartTd/Thevents
- Special handling for clickTrandclickTbodyto prevent default
- The unselectCells()method removes selection from all cells
- Command regex: /table(splitv|splitg|merge|empty|bin|binrow|bincolumn|addcolumn|addrow)/
- Justify regex: /^justify/
- Cell emptying uses Dom.detach()to remove children
- Row deletion collects unique rows via Set
- Column deletion uses Set to track unique column indices
Typical Use Case
Users need to apply operations to multiple table cells simultaneously, like in spreadsheet applications. The select-cells plugin provides this by:
- Enabling click-and-drag selection
- Visual highlighting of selected cells
- Showing context toolbar for operations
- Supporting table commands on selection
- Handling keyboard deselection
This improves user experience by:
- Providing familiar spreadsheet-like interaction
- Reducing repetitive operations
- Visual feedback during selection
- Efficient bulk cell operations
- Touch-friendly interface