handsontable 0.0.0-next-0bd37c1-20240513 → 0.0.0-next-c2f1254-20240515

package/selection/selection.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.push.js");
 require("core-js/modules/esnext.set.difference.v2.js");
 require("core-js/modules/esnext.set.intersection.v2.js");
 require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
@@ -427,7 +428,23 @@ class Selection {
     }
     this.runLocalHooks('beforeHighlightSet');
     this.setRangeFocus(this.selectedRange.current().highlight);
-    const layerLevel = this.getLayerLevel();
+    this.applyAndCommit();
+    const isLastLayer = _classPrivateFieldGet(_expectedLayersCount, this) === -1 || this.selectedRange.size() === _classPrivateFieldGet(_expectedLayersCount, this);
+    this.runLocalHooks('afterSetRangeEnd', coords, isLastLayer);
+  }
+
+  /**
+   * Applies and commits the selection to all layers (using the Walkontable Selection API) based on the selection (CellRanges)
+   * collected in the `selectedRange` module.
+   *
+   * @param {CellRange} [cellRange] The cell range to apply. If not provided, the current selection is used.
+   * @param {number} [layerLevel] The layer level to apply. If not provided, the current layer level is used.
+   */
+  applyAndCommit() {
+    let cellRange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectedRange.current();
+    let layerLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getLayerLevel();
+    const countRows = this.tableProps.countRows();
+    const countCols = this.tableProps.countCols();
 
     // If the next layer level is lower than previous then clear all area and header highlights. This is the
     // indication that the new selection is performing.
@@ -509,8 +526,6 @@ class Selection {
         activeCornerHeaderHighlight.add(this.tableProps.createCellCoords(-this.tableProps.countColHeaders(), -this.tableProps.countRowHeaders())).add(this.tableProps.createCellCoords(-1, -1)).commit();
       }
     }
-    const isLastLayer = _classPrivateFieldGet(_expectedLayersCount, this) === -1 || this.selectedRange.size() === _classPrivateFieldGet(_expectedLayersCount, this);
-    this.runLocalHooks('afterSetRangeEnd', coords, isLastLayer);
   }
 
   /**
@@ -607,6 +622,104 @@ class Selection {
     this.setRangeFocus(focusCoords.normalize());
   }
 
+  /**
+   * Transforms the last selection layer down or up by the index count.
+   *
+   * @param {number} visualRowIndex Visual row index from which the selection will be shifted.
+   * @param {number} amount The number of rows to shift the selection.
+   */
+  shiftRows(visualRowIndex, amount) {
+    if (!this.isSelected()) {
+      return;
+    }
+    const range = this.selectedRange.current();
+    if (this.isSelectedByCorner()) {
+      this.selectAll(true, true, {
+        disableHeadersHighlight: true
+      });
+    } else if (this.isSelectedByColumnHeader() || range.getOuterTopStartCorner().row >= visualRowIndex) {
+      const {
+        from,
+        to,
+        highlight
+      } = range;
+      const countRows = this.tableProps.countRows();
+      const isSelectedByRowHeader = this.isSelectedByRowHeader();
+      const isSelectedByColumnHeader = this.isSelectedByColumnHeader();
+      const minRow = isSelectedByColumnHeader ? -1 : 0;
+      const coordsStartAmount = isSelectedByColumnHeader ? 0 : amount;
+
+      // Remove from the stack the last added selection as that selection below will be
+      // replaced by new transformed selection.
+      this.getSelectedRange().pop();
+      const coordsStart = this.tableProps.createCellCoords((0, _number.clamp)(from.row + coordsStartAmount, minRow, countRows - 1), from.col);
+      const coordsEnd = this.tableProps.createCellCoords((0, _number.clamp)(to.row + amount, minRow, countRows - 1), to.col);
+      this.markSource('shift');
+      if (highlight.row >= visualRowIndex) {
+        this.setRangeStartOnly(coordsStart, true, this.tableProps.createCellCoords((0, _number.clamp)(highlight.row + amount, 0, countRows - 1), highlight.col));
+      } else {
+        this.setRangeStartOnly(coordsStart, true);
+      }
+      if (isSelectedByRowHeader) {
+        this.selectedByRowHeader.add(this.getLayerLevel());
+      }
+      if (isSelectedByColumnHeader) {
+        this.selectedByColumnHeader.add(this.getLayerLevel());
+      }
+      this.setRangeEnd(coordsEnd);
+      this.markEndSource();
+    }
+  }
+
+  /**
+   * Transforms the last selection layer left or right by the index count.
+   *
+   * @param {number} visualColumnIndex Visual column index from which the selection will be shifted.
+   * @param {number} amount The number of columns to shift the selection.
+   */
+  shiftColumns(visualColumnIndex, amount) {
+    if (!this.isSelected()) {
+      return;
+    }
+    const range = this.selectedRange.current();
+    if (this.isSelectedByCorner()) {
+      this.selectAll(true, true, {
+        disableHeadersHighlight: true
+      });
+    } else if (this.isSelectedByRowHeader() || range.getOuterTopStartCorner().col >= visualColumnIndex) {
+      const {
+        from,
+        to,
+        highlight
+      } = range;
+      const countCols = this.tableProps.countCols();
+      const isSelectedByRowHeader = this.isSelectedByRowHeader();
+      const isSelectedByColumnHeader = this.isSelectedByColumnHeader();
+      const minColumn = isSelectedByRowHeader ? -1 : 0;
+      const coordsStartAmount = isSelectedByRowHeader ? 0 : amount;
+
+      // Remove from the stack the last added selection as that selection below will be
+      // replaced by new transformed selection.
+      this.getSelectedRange().pop();
+      const coordsStart = this.tableProps.createCellCoords(from.row, (0, _number.clamp)(from.col + coordsStartAmount, minColumn, countCols - 1));
+      const coordsEnd = this.tableProps.createCellCoords(to.row, (0, _number.clamp)(to.col + amount, minColumn, countCols - 1));
+      this.markSource('shift');
+      if (highlight.col >= visualColumnIndex) {
+        this.setRangeStartOnly(coordsStart, true, this.tableProps.createCellCoords(highlight.row, (0, _number.clamp)(highlight.col + amount, 0, countCols - 1)));
+      } else {
+        this.setRangeStartOnly(coordsStart, true);
+      }
+      if (isSelectedByRowHeader) {
+        this.selectedByRowHeader.add(this.getLayerLevel());
+      }
+      if (isSelectedByColumnHeader) {
+        this.selectedByColumnHeader.add(this.getLayerLevel());
+      }
+      this.setRangeEnd(coordsEnd);
+      this.markEndSource();
+    }
+  }
+
   /**
    * Returns currently used layer level.
    *
@@ -1039,9 +1152,48 @@ class Selection {
   }
 
   /**
-   * Rewrite the rendered state of the selection as visual selection may have a new representation in the DOM.
+   * Refreshes the whole selection by clearing, reapplying and committing the renderable selection (Walkontable Selection API)
+   * by using already added visual ranges.
    */
   refresh() {
+    if (!this.isSelected()) {
+      return;
+    }
+    const countRows = this.tableProps.countRows();
+    const countColumns = this.tableProps.countCols();
+    if (countRows === 0 || countColumns === 0) {
+      this.deselect();
+      return;
+    }
+    const range = this.selectedRange.peekByIndex(this.selectedRange.size() - 1);
+    const {
+      from,
+      to,
+      highlight
+    } = range;
+    this.clear();
+    highlight.assign({
+      row: (0, _number.clamp)(highlight.row, -Infinity, countRows - 1),
+      col: (0, _number.clamp)(highlight.col, -Infinity, countColumns - 1)
+    });
+    from.assign({
+      row: (0, _number.clamp)(from.row, -Infinity, countRows - 1),
+      col: (0, _number.clamp)(from.col, -Infinity, countColumns - 1)
+    });
+    to.assign({
+      row: (0, _number.clamp)(to.row, 0, countRows - 1),
+      col: (0, _number.clamp)(to.col, 0, countColumns - 1)
+    });
+    this.selectedRange.ranges.push(range);
+    this.highlight.getFocus().add(highlight).commit().syncWith(range);
+    this.applyAndCommit(range);
+  }
+
+  /**
+   * Refreshes the whole selection by recommitting (recalculating visual indexes to renderable ones) the renderable selection
+   * that was already added.
+   */
+  commit() {
     const customSelections = this.highlight.getCustomSelections();
     customSelections.forEach(customSelection => {
       customSelection.commit();

package/selection/selection.mjs

@@ -1,4 +1,5 @@
 import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.array.push.js";
 import "core-js/modules/esnext.set.difference.v2.js";
 import "core-js/modules/esnext.set.intersection.v2.js";
 import "core-js/modules/esnext.set.is-disjoint-from.v2.js";
@@ -421,7 +422,23 @@ class Selection {
     }
     this.runLocalHooks('beforeHighlightSet');
     this.setRangeFocus(this.selectedRange.current().highlight);
-    const layerLevel = this.getLayerLevel();
+    this.applyAndCommit();
+    const isLastLayer = _classPrivateFieldGet(_expectedLayersCount, this) === -1 || this.selectedRange.size() === _classPrivateFieldGet(_expectedLayersCount, this);
+    this.runLocalHooks('afterSetRangeEnd', coords, isLastLayer);
+  }
+
+  /**
+   * Applies and commits the selection to all layers (using the Walkontable Selection API) based on the selection (CellRanges)
+   * collected in the `selectedRange` module.
+   *
+   * @param {CellRange} [cellRange] The cell range to apply. If not provided, the current selection is used.
+   * @param {number} [layerLevel] The layer level to apply. If not provided, the current layer level is used.
+   */
+  applyAndCommit() {
+    let cellRange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectedRange.current();
+    let layerLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getLayerLevel();
+    const countRows = this.tableProps.countRows();
+    const countCols = this.tableProps.countCols();
 
     // If the next layer level is lower than previous then clear all area and header highlights. This is the
     // indication that the new selection is performing.
@@ -503,8 +520,6 @@ class Selection {
         activeCornerHeaderHighlight.add(this.tableProps.createCellCoords(-this.tableProps.countColHeaders(), -this.tableProps.countRowHeaders())).add(this.tableProps.createCellCoords(-1, -1)).commit();
       }
     }
-    const isLastLayer = _classPrivateFieldGet(_expectedLayersCount, this) === -1 || this.selectedRange.size() === _classPrivateFieldGet(_expectedLayersCount, this);
-    this.runLocalHooks('afterSetRangeEnd', coords, isLastLayer);
   }
 
   /**
@@ -601,6 +616,104 @@ class Selection {
     this.setRangeFocus(focusCoords.normalize());
   }
 
+  /**
+   * Transforms the last selection layer down or up by the index count.
+   *
+   * @param {number} visualRowIndex Visual row index from which the selection will be shifted.
+   * @param {number} amount The number of rows to shift the selection.
+   */
+  shiftRows(visualRowIndex, amount) {
+    if (!this.isSelected()) {
+      return;
+    }
+    const range = this.selectedRange.current();
+    if (this.isSelectedByCorner()) {
+      this.selectAll(true, true, {
+        disableHeadersHighlight: true
+      });
+    } else if (this.isSelectedByColumnHeader() || range.getOuterTopStartCorner().row >= visualRowIndex) {
+      const {
+        from,
+        to,
+        highlight
+      } = range;
+      const countRows = this.tableProps.countRows();
+      const isSelectedByRowHeader = this.isSelectedByRowHeader();
+      const isSelectedByColumnHeader = this.isSelectedByColumnHeader();
+      const minRow = isSelectedByColumnHeader ? -1 : 0;
+      const coordsStartAmount = isSelectedByColumnHeader ? 0 : amount;
+
+      // Remove from the stack the last added selection as that selection below will be
+      // replaced by new transformed selection.
+      this.getSelectedRange().pop();
+      const coordsStart = this.tableProps.createCellCoords(clamp(from.row + coordsStartAmount, minRow, countRows - 1), from.col);
+      const coordsEnd = this.tableProps.createCellCoords(clamp(to.row + amount, minRow, countRows - 1), to.col);
+      this.markSource('shift');
+      if (highlight.row >= visualRowIndex) {
+        this.setRangeStartOnly(coordsStart, true, this.tableProps.createCellCoords(clamp(highlight.row + amount, 0, countRows - 1), highlight.col));
+      } else {
+        this.setRangeStartOnly(coordsStart, true);
+      }
+      if (isSelectedByRowHeader) {
+        this.selectedByRowHeader.add(this.getLayerLevel());
+      }
+      if (isSelectedByColumnHeader) {
+        this.selectedByColumnHeader.add(this.getLayerLevel());
+      }
+      this.setRangeEnd(coordsEnd);
+      this.markEndSource();
+    }
+  }
+
+  /**
+   * Transforms the last selection layer left or right by the index count.
+   *
+   * @param {number} visualColumnIndex Visual column index from which the selection will be shifted.
+   * @param {number} amount The number of columns to shift the selection.
+   */
+  shiftColumns(visualColumnIndex, amount) {
+    if (!this.isSelected()) {
+      return;
+    }
+    const range = this.selectedRange.current();
+    if (this.isSelectedByCorner()) {
+      this.selectAll(true, true, {
+        disableHeadersHighlight: true
+      });
+    } else if (this.isSelectedByRowHeader() || range.getOuterTopStartCorner().col >= visualColumnIndex) {
+      const {
+        from,
+        to,
+        highlight
+      } = range;
+      const countCols = this.tableProps.countCols();
+      const isSelectedByRowHeader = this.isSelectedByRowHeader();
+      const isSelectedByColumnHeader = this.isSelectedByColumnHeader();
+      const minColumn = isSelectedByRowHeader ? -1 : 0;
+      const coordsStartAmount = isSelectedByRowHeader ? 0 : amount;
+
+      // Remove from the stack the last added selection as that selection below will be
+      // replaced by new transformed selection.
+      this.getSelectedRange().pop();
+      const coordsStart = this.tableProps.createCellCoords(from.row, clamp(from.col + coordsStartAmount, minColumn, countCols - 1));
+      const coordsEnd = this.tableProps.createCellCoords(to.row, clamp(to.col + amount, minColumn, countCols - 1));
+      this.markSource('shift');
+      if (highlight.col >= visualColumnIndex) {
+        this.setRangeStartOnly(coordsStart, true, this.tableProps.createCellCoords(highlight.row, clamp(highlight.col + amount, 0, countCols - 1)));
+      } else {
+        this.setRangeStartOnly(coordsStart, true);
+      }
+      if (isSelectedByRowHeader) {
+        this.selectedByRowHeader.add(this.getLayerLevel());
+      }
+      if (isSelectedByColumnHeader) {
+        this.selectedByColumnHeader.add(this.getLayerLevel());
+      }
+      this.setRangeEnd(coordsEnd);
+      this.markEndSource();
+    }
+  }
+
   /**
    * Returns currently used layer level.
    *
@@ -1033,9 +1146,48 @@ class Selection {
   }
 
   /**
-   * Rewrite the rendered state of the selection as visual selection may have a new representation in the DOM.
+   * Refreshes the whole selection by clearing, reapplying and committing the renderable selection (Walkontable Selection API)
+   * by using already added visual ranges.
    */
   refresh() {
+    if (!this.isSelected()) {
+      return;
+    }
+    const countRows = this.tableProps.countRows();
+    const countColumns = this.tableProps.countCols();
+    if (countRows === 0 || countColumns === 0) {
+      this.deselect();
+      return;
+    }
+    const range = this.selectedRange.peekByIndex(this.selectedRange.size() - 1);
+    const {
+      from,
+      to,
+      highlight
+    } = range;
+    this.clear();
+    highlight.assign({
+      row: clamp(highlight.row, -Infinity, countRows - 1),
+      col: clamp(highlight.col, -Infinity, countColumns - 1)
+    });
+    from.assign({
+      row: clamp(from.row, -Infinity, countRows - 1),
+      col: clamp(from.col, -Infinity, countColumns - 1)
+    });
+    to.assign({
+      row: clamp(to.row, 0, countRows - 1),
+      col: clamp(to.col, 0, countColumns - 1)
+    });
+    this.selectedRange.ranges.push(range);
+    this.highlight.getFocus().add(highlight).commit().syncWith(range);
+    this.applyAndCommit(range);
+  }
+
+  /**
+   * Refreshes the whole selection by recommitting (recalculating visual indexes to renderable ones) the renderable selection
+   * that was already added.
+   */
+  commit() {
     const customSelections = this.highlight.getCustomSelections();
     customSelections.forEach(customSelection => {
       customSelection.commit();

package/shortcutContexts/commands/editor/closeAndSave.js

@@ -3,9 +3,8 @@
 exports.__esModule = true;
 const command = exports.command = {
   name: 'editorCloseAndSave',
-  callback(hot, event) {
+  callback(hot) {
     const editorManager = hot._getEditorManager();
-    editorManager.closeEditorAndSaveChanges(event.ctrlKey || event.metaKey);
-    editorManager.moveSelectionAfterEnter(event);
+    editorManager.closeEditorAndSaveChanges();
   }
 };

package/shortcutContexts/commands/editor/closeAndSave.mjs

@@ -1,8 +1,7 @@
 export const command = {
   name: 'editorCloseAndSave',
-  callback(hot, event) {
+  callback(hot) {
     const editorManager = hot._getEditorManager();
-    editorManager.closeEditorAndSaveChanges(event.ctrlKey || event.metaKey);
-    editorManager.moveSelectionAfterEnter(event);
+    editorManager.closeEditorAndSaveChanges();
   }
 };

package/shortcutContexts/commands/editor/closeAndSaveByArrowKeys.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+var _baseEditor = require("../../../editors/baseEditor");
+const command = exports.command = {
+  name: 'editorCloseAndSaveByArrowKeys',
+  callback(hot, event, keys) {
+    const editorManager = hot._getEditorManager();
+    const activeEditor = editorManager.getActiveEditor();
+    if (activeEditor.isInFullEditMode() && activeEditor.state === _baseEditor.EDITOR_STATE.EDITING) {
+      return;
+    }
+    editorManager.closeEditorAndSaveChanges();
+    if (hot.getSelected()) {
+      if (keys.includes('arrowdown')) {
+        hot.selection.transformStart(1, 0);
+      } else if (keys.includes('arrowup')) {
+        hot.selection.transformStart(-1, 0);
+      } else if (keys.includes('arrowleft')) {
+        hot.selection.transformStart(0, -1 * hot.getDirectionFactor());
+      } else if (keys.includes('arrowright')) {
+        hot.selection.transformStart(0, hot.getDirectionFactor());
+      }
+    }
+    event.preventDefault();
+  }
+};

package/shortcutContexts/commands/editor/closeAndSaveByArrowKeys.mjs

@@ -0,0 +1,24 @@
+import { EDITOR_STATE } from "../../../editors/baseEditor/index.mjs";
+export const command = {
+  name: 'editorCloseAndSaveByArrowKeys',
+  callback(hot, event, keys) {
+    const editorManager = hot._getEditorManager();
+    const activeEditor = editorManager.getActiveEditor();
+    if (activeEditor.isInFullEditMode() && activeEditor.state === EDITOR_STATE.EDITING) {
+      return;
+    }
+    editorManager.closeEditorAndSaveChanges();
+    if (hot.getSelected()) {
+      if (keys.includes('arrowdown')) {
+        hot.selection.transformStart(1, 0);
+      } else if (keys.includes('arrowup')) {
+        hot.selection.transformStart(-1, 0);
+      } else if (keys.includes('arrowleft')) {
+        hot.selection.transformStart(0, -1 * hot.getDirectionFactor());
+      } else if (keys.includes('arrowright')) {
+        hot.selection.transformStart(0, hot.getDirectionFactor());
+      }
+    }
+    event.preventDefault();
+  }
+};

package/shortcutContexts/commands/editor/closeAndSaveByEnter.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+const command = exports.command = {
+  name: 'editorCloseAndSaveByEnter',
+  callback(hot, event) {
+    const editorManager = hot._getEditorManager();
+    editorManager.closeEditorAndSaveChanges(event.ctrlKey || event.metaKey);
+    editorManager.moveSelectionAfterEnter(event);
+  }
+};

package/shortcutContexts/commands/editor/closeAndSaveByEnter.mjs

@@ -0,0 +1,8 @@
+export const command = {
+  name: 'editorCloseAndSaveByEnter',
+  callback(hot, event) {
+    const editorManager = hot._getEditorManager();
+    editorManager.closeEditorAndSaveChanges(event.ctrlKey || event.metaKey);
+    editorManager.moveSelectionAfterEnter(event);
+  }
+};

package/shortcutContexts/commands/editor/index.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.getAllCommands = getAllCommands;
 var _closeAndSave = require("./closeAndSave");
+var _closeAndSaveByArrowKeys = require("./closeAndSaveByArrowKeys");
+var _closeAndSaveByEnter = require("./closeAndSaveByEnter");
 var _closeWithoutSaving = require("./closeWithoutSaving");
 var _fastOpen = require("./fastOpen");
 var _open = require("./open");
@@ -12,5 +14,5 @@ var _open = require("./open");
  * @returns {Function[]}
  */
 function getAllCommands() {
-  return [_closeAndSave.command, _closeWithoutSaving.command, _fastOpen.command, _open.command];
+  return [_closeAndSave.command, _closeAndSaveByArrowKeys.command, _closeAndSaveByEnter.command, _closeWithoutSaving.command, _fastOpen.command, _open.command];
 }

package/shortcutContexts/commands/editor/index.mjs

@@ -1,4 +1,6 @@
 import { command as closeAndSave } from "./closeAndSave.mjs";
+import { command as closeAndSaveByArrowKeys } from "./closeAndSaveByArrowKeys.mjs";
+import { command as closeAndSaveByEnter } from "./closeAndSaveByEnter.mjs";
 import { command as closeWithoutSaving } from "./closeWithoutSaving.mjs";
 import { command as fastOpen } from "./fastOpen.mjs";
 import { command as open } from "./open.mjs";
@@ -8,5 +10,5 @@ import { command as open } from "./open.mjs";
  * @returns {Function[]}
  */
 export function getAllCommands() {
-  return [closeAndSave, closeWithoutSaving, fastOpen, open];
+  return [closeAndSave, closeAndSaveByArrowKeys, closeAndSaveByEnter, closeWithoutSaving, fastOpen, open];
 }

package/shortcutContexts/editor.js

@@ -17,11 +17,19 @@ function shortcutsEditorContext(hot) {
   };
   context.addShortcuts([{
     keys: [['Enter'], ['Enter', 'Shift']],
-    callback: (event, keys) => commandsPool.editorCloseAndSave(event, keys)
+    callback: (event, keys) => commandsPool.editorCloseAndSaveByEnter(event, keys)
   }, {
     keys: [['Enter', 'Control/Meta'], ['Enter', 'Control/Meta', 'Shift']],
     captureCtrl: true,
+    callback: (event, keys) => commandsPool.editorCloseAndSaveByEnter(event, keys)
+  }, {
+    keys: [['Tab'], ['Tab', 'Shift'], ['PageDown'], ['PageUp']],
+    forwardToContext: hot.getShortcutManager().getContext('grid'),
     callback: (event, keys) => commandsPool.editorCloseAndSave(event, keys)
+  }, {
+    keys: [['ArrowDown'], ['ArrowUp'], ['ArrowLeft'], ['ArrowRight']],
+    preventDefault: false,
+    callback: (event, keys) => commandsPool.editorCloseAndSaveByArrowKeys(event, keys)
   }, {
     keys: [['Escape'], ['Escape', 'Control/Meta']],
     callback: () => commandsPool.editorCloseWithoutSaving()

package/shortcutContexts/editor.mjs

@@ -13,11 +13,19 @@ export function shortcutsEditorContext(hot) {
   };
   context.addShortcuts([{
     keys: [['Enter'], ['Enter', 'Shift']],
-    callback: (event, keys) => commandsPool.editorCloseAndSave(event, keys)
+    callback: (event, keys) => commandsPool.editorCloseAndSaveByEnter(event, keys)
   }, {
     keys: [['Enter', 'Control/Meta'], ['Enter', 'Control/Meta', 'Shift']],
     captureCtrl: true,
+    callback: (event, keys) => commandsPool.editorCloseAndSaveByEnter(event, keys)
+  }, {
+    keys: [['Tab'], ['Tab', 'Shift'], ['PageDown'], ['PageUp']],
+    forwardToContext: hot.getShortcutManager().getContext('grid'),
     callback: (event, keys) => commandsPool.editorCloseAndSave(event, keys)
+  }, {
+    keys: [['ArrowDown'], ['ArrowUp'], ['ArrowLeft'], ['ArrowRight']],
+    preventDefault: false,
+    callback: (event, keys) => commandsPool.editorCloseAndSaveByArrowKeys(event, keys)
   }, {
     keys: [['Escape'], ['Escape', 'Control/Meta']],
     callback: () => commandsPool.editorCloseWithoutSaving()

package/shortcutContexts/index.js

@@ -20,5 +20,5 @@ Object.keys(_constants).forEach(function (key) {
  * @param {Handsontable} hotInstance The Handsontable instance.
  */
 function registerAllShortcutContexts(hotInstance) {
-  [_editor.shortcutsEditorContext, _grid.shortcutsGridContext].forEach(context => context(hotInstance));
+  [_grid.shortcutsGridContext, _editor.shortcutsEditorContext].forEach(context => context(hotInstance));
 }

package/shortcutContexts/index.mjs

@@ -7,5 +7,5 @@ export * from "./constants.mjs";
  * @param {Handsontable} hotInstance The Handsontable instance.
  */
 export function registerAllShortcutContexts(hotInstance) {
-  [shortcutsEditorContext, shortcutsGridContext].forEach(context => context(hotInstance));
+  [shortcutsGridContext, shortcutsEditorContext].forEach(context => context(hotInstance));
 }