Handling cell value deletion across platforms (Mac & Windows) in SpreadJS

When working with SpreadJS across different platforms like Windows and macOS, detecting cell value deletion via keyboard can behave differently depending on the key pressed:

• Windows supports both Backspace and Delete keys.
• MacOS only supports the Delete key for this purpose.

In SpreadJS:

• The EditEnded event is triggered when we end editing a cell such as by using the Backspace key on Windows to delete content while in edit mode.
• The RangeChanged event is triggered when a cell or range is cleared using the Delete key on either macOS or Windows.

To ensure consistent handling of cell value deletion across platforms, we can use both events to detect when a user has cleared a cell and call a unified handler to centralize our logic.

Below is a sample implementation to achieve this cross-platform compatibility:

// bind EditEnded to handle deletion via backspace (typically on windows)
sheet.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) {
    if (args && typeof args.row === "number" && typeof args.col === "number") {
        const row = args.row;
        const col = args.col;
        const value = sheet.getValue(row, col);

        if (value === null || value === "") {
            // call the unified handler
            handleCellDeletion(row, col);
        }
    }
});

// bind RangeChanged to handle deletion via delete key (on both windows & macOS)
spread.bind(GC.Spread.Sheets.Events.RangeChanged, function (sender, args) {
    if (args.action === GC.Spread.Sheets.RangeChangedAction.clear) {
        const startRow = args.row;
        const startCol = args.col;
        const rowCount = args.rowCount || 1;
        const colCount = args.colCount || 1;

        for (let r = startRow; r < startRow + rowCount; r++) {
            for (let c = startCol; c < startCol + colCount; c++) {
                // call the unified handler
                handleCellDeletion(r, c);
            }
        }
    }
});

// unified handler for deleted cells
function handleCellDeletion(row, col) {
    // logic goes here
    console.log(`Unified handler: Cell deleted at Row: ${row}, Col: ${col}`);
}

By combining EditEnded and RangeChanged events, we can make sure that cell deletions are detected reliably regardless of the operating system, or which key was used. This provides a smoother and more consistent user experience when building spreadsheets with SpreadJS.