Handle SHIFT key when moving cell reference range

If the user is editing a cell reference range within a formula and is holding
the shift key while using the direction arrows to move the range, the start
of the range will be fixed.

This mirrors the behavior of Excel when editing a cell reference range.

Author: Jared Kirschner

src/component/formula.js

@@ -98,43 +98,47 @@ export default class Formula {
 
     this.el.addEventListener("keydown", (e) => {
       const keyCode = e.keyCode || e.which;
+
       if ([37, 38, 39, 40].indexOf(keyCode) == -1) return;
 
       if (!this.cell || this.cell.from == this.cell.to) return;
 
       e.preventDefault();
       e.stopPropagation();
 
-      // Get values before merge cells applied
-      const cellRangeArgs = this.getCellRangeArgsFromSelectStartEnd();
-
-      // Account for merge cells
-      let cellRange = new CellRange(...cellRangeArgs);
+      let rowShift = 0;
+      let colShift = 0;
 
       // Left
       if (keyCode == 37) {
-        cellRange.translate(0, -1);
-        this.cellSelectStartRowCol[1] = Math.max(0, this.cellSelectStartRowCol[1] - 1);
-        this.cellSelectEndRowCol[1] = Math.max(0, this.cellSelectEndRowCol[1] - 1);
+        colShift = -1;
       }
       // Up
       else if (keyCode == 38) {
-        cellRange.translate(-1, 0);
-        this.cellSelectStartRowCol[0] = Math.max(0, this.cellSelectStartRowCol[0] - 1);
-        this.cellSelectEndRowCol[0] = Math.max(0, this.cellSelectEndRowCol[0] - 1);
+        rowShift = -1;
       }
       // Right
       else if (keyCode == 39) {
-        cellRange.translate(0, 1);
-        this.cellSelectStartRowCol[1] = this.cellSelectStartRowCol[1] + 1;
-        this.cellSelectEndRowCol[1] = this.cellSelectEndRowCol[1] + 1;
+        colShift = 1;
       }
       // Down
       else if (keyCode == 40) {
-        cellRange.translate(1, 0);
-        this.cellSelectStartRowCol[0] = this.cellSelectStartRowCol[0] + 1;
-        this.cellSelectEndRowCol[0] = this.cellSelectEndRowCol[0] + 1;
+        rowShift = 1;
+      }
+
+      // If the shift key is applied, hold the start position fixed
+      if (!e.shiftKey) {
+        this.cellSelectStartRowCol[0] = Math.max(0, this.cellSelectStartRowCol[0] + rowShift);
+        this.cellSelectStartRowCol[1] = Math.max(0, this.cellSelectStartRowCol[1] + colShift);
       }
+      this.cellSelectEndRowCol[0]   = Math.max(0, this.cellSelectEndRowCol[0]   + rowShift);
+      this.cellSelectEndRowCol[1]   = Math.max(0, this.cellSelectEndRowCol[1]   + colShift);
+
+      // Get values before merge cells applied
+      const cellRangeArgs = this.getCellRangeArgsFromSelectStartEnd();
+
+      // Account for merge cells
+      let cellRange = new CellRange(...cellRangeArgs);
 
       // Reapply merge cells after translation
       cellRange = this.editor.data.merges.union(cellRange)