handsontable 12.1.2 → 12.2.0

package/editorManager.mjs

@@ -1,15 +1,9 @@
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.iterator.js";
@@ -24,13 +18,9 @@ import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 import { isFunctionKey, isCtrlMetaKey } from "./helpers/unicode.mjs";
 import { stopImmediatePropagation } from "./helpers/dom/event.mjs";
 import { getEditorInstance } from "./editors/registry.mjs";
@@ -38,7 +28,6 @@ import EventManager from "./eventManager.mjs";
 import { isDefined } from "./helpers/mixed.mjs";
 export var SHORTCUTS_GROUP_NAVIGATION = 'editorManager.navigation';
 export var SHORTCUTS_GROUP_EDITOR = 'editorManager.handlingEditor';
-
 var EditorManager = /*#__PURE__*/function () {
   /**
    * @param {Core} instance The Handsontable instance.
@@ -47,9 +36,7 @@ var EditorManager = /*#__PURE__*/function () {
    */
   function EditorManager(instance, tableMeta, selection) {
     var _this = this;
-
     _classCallCheck(this, EditorManager);
-
     /**
      * Instance of {@link Handsontable}.
      *
@@ -63,7 +50,6 @@ var EditorManager = /*#__PURE__*/function () {
      * @private
      * @type {GridSettings}
      */
-
     this.tableMeta = tableMeta;
     /**
      * Instance of {@link Selection}.
@@ -71,7 +57,6 @@ var EditorManager = /*#__PURE__*/function () {
      * @private
      * @type {Selection}
      */
-
     this.selection = selection;
     /**
      * Instance of {@link EventManager}.
@@ -79,7 +64,6 @@ var EditorManager = /*#__PURE__*/function () {
      * @private
      * @type {EventManager}
      */
-
     this.eventManager = new EventManager(instance);
     /**
      * Determines if EditorManager is destroyed.
@@ -87,7 +71,6 @@ var EditorManager = /*#__PURE__*/function () {
      * @private
      * @type {boolean}
      */
-
     this.destroyed = false;
     /**
      * Determines if EditorManager is locked.
@@ -95,7 +78,6 @@ var EditorManager = /*#__PURE__*/function () {
      * @private
      * @type {boolean}
      */
-
     this.lock = false;
     /**
      * A reference to an instance of the activeEditor.
@@ -103,44 +85,40 @@ var EditorManager = /*#__PURE__*/function () {
      * @private
      * @type {BaseEditor}
      */
-
     this.activeEditor = void 0;
     /**
      * Keeps a reference to the cell's properties object.
      *
      * @type {object}
      */
-
     this.cellProperties = void 0;
     var shortcutManager = this.instance.getShortcutManager();
     shortcutManager.addContext('editor');
     this.registerShortcuts();
     this.instance.addHook('afterDocumentKeyDown', function (event) {
       return _this.onAfterDocumentKeyDown(event);
-    }); // Open editor when text composition is started (IME editor)
+    });
 
+    // Open editor when text composition is started (IME editor)
     this.eventManager.addEventListener(this.instance.rootDocument.documentElement, 'compositionstart', function (event) {
-      if (!_this.destroyed && _this.activeEditor && !_this.activeEditor.isOpened() && _this.instance.isListening()) {
+      if (!_this.destroyed && _this.instance.isListening()) {
         _this.openEditor('', event);
       }
     });
-
     this.instance.view._wt.update('onCellDblClick', function (event, coords, elem) {
       return _this.onCellDblClick(event, coords, elem);
     });
   }
+
   /**
    * Register shortcuts responsible for handling some actions related to an editor.
    *
    * @private
    */
-
-
   _createClass(EditorManager, [{
     key: "registerShortcuts",
     value: function registerShortcuts() {
       var _this2 = this;
-
       var shortcutManager = this.instance.getShortcutManager();
       var gridContext = shortcutManager.getContext('grid');
       var editorContext = shortcutManager.getContext('editor');
@@ -151,31 +129,24 @@ var EditorManager = /*#__PURE__*/function () {
         keys: [['Enter'], ['Enter', 'Shift'], ['Enter', 'Control/Meta'], ['Enter', 'Control/Meta', 'Shift']],
         callback: function callback(event, keys) {
           _this2.closeEditorAndSaveChanges(shortcutManager.isCtrlPressed());
-
           _this2.moveSelectionAfterEnter(keys.includes('shift'));
         }
       }, {
         keys: [['Escape'], ['Escape', 'Control/Meta']],
         callback: function callback() {
           _this2.closeEditorAndRestoreOriginalValue(shortcutManager.isCtrlPressed());
-
           _this2.activeEditor.focus();
         }
       }], config);
       gridContext.addShortcuts([{
         keys: [['F2']],
         callback: function callback(event) {
-          if (_this2.activeEditor) {
-            _this2.activeEditor.enableFullEditMode();
-          }
-
-          _this2.openEditor(null, event);
+          _this2.openEditor(null, event, true);
         }
       }, {
         keys: [['Backspace'], ['Delete']],
         callback: function callback() {
           _this2.instance.emptySelectedCells();
-
           _this2.prepareEditor();
         }
       }, {
@@ -184,46 +155,43 @@ var EditorManager = /*#__PURE__*/function () {
           if (_this2.instance.getSettings().enterBeginsEditing) {
             if (_this2.cellProperties.readOnly) {
               _this2.moveSelectionAfterEnter();
-            } else if (_this2.activeEditor) {
-              _this2.activeEditor.enableFullEditMode();
-
-              _this2.openEditor(null, event);
+            } else {
+              _this2.openEditor(null, event, true);
             }
           } else {
             _this2.moveSelectionAfterEnter(keys.includes('shift'));
           }
-
           stopImmediatePropagation(event); // required by HandsontableEditor
         }
       }], config);
     }
+
     /**
      * Lock the editor from being prepared and closed. Locking the editor prevents its closing and
      * reinitialized after selecting the new cell. This feature is necessary for a mobile editor.
      */
-
   }, {
     key: "lockEditor",
     value: function lockEditor() {
       this.lock = true;
     }
+
     /**
      * Unlock the editor from being prepared and closed. This method restores the original behavior of
      * the editors where for every new selection its instances are closed.
      */
-
   }, {
     key: "unlockEditor",
     value: function unlockEditor() {
       this.lock = false;
     }
+
     /**
      * Destroy current editor, if exists.
      *
      * @param {boolean} revertOriginal If `false` and the cell using allowInvalid option,
      *                                 then an editor won't be closed until validation is passed.
      */
-
   }, {
     key: "destroyEditor",
     value: function destroyEditor(revertOriginal) {
@@ -231,30 +199,28 @@ var EditorManager = /*#__PURE__*/function () {
         this.closeEditor(revertOriginal);
       }
     }
+
     /**
      * Get active editor.
      *
      * @returns {BaseEditor}
      */
-
   }, {
     key: "getActiveEditor",
     value: function getActiveEditor() {
       return this.activeEditor;
     }
+
     /**
      * Prepare text input to be displayed at given grid cell.
      */
-
   }, {
     key: "prepareEditor",
     value: function prepareEditor() {
       var _this3 = this;
-
       if (this.lock) {
         return;
       }
-
       if (this.activeEditor && this.activeEditor.isWaiting()) {
         this.closeEditor(false, false, function (dataSaved) {
           if (dataSaved) {
@@ -263,79 +229,91 @@ var EditorManager = /*#__PURE__*/function () {
         });
         return;
       }
-
-      var _this$instance$select = this.instance.selection.selectedRange.current().highlight,
-          row = _this$instance$select.row,
-          col = _this$instance$select.col;
+      var _this$instance$getSel = this.instance.getSelectedRangeLast().highlight,
+        row = _this$instance$getSel.row,
+        col = _this$instance$getSel.col;
       var modifiedCellCoords = this.instance.runHooks('modifyGetCellCoords', row, col);
       var visualRowToCheck = row;
       var visualColumnToCheck = col;
-
       if (Array.isArray(modifiedCellCoords)) {
         var _modifiedCellCoords = _slicedToArray(modifiedCellCoords, 2);
-
         visualRowToCheck = _modifiedCellCoords[0];
         visualColumnToCheck = _modifiedCellCoords[1];
-      } // Getting values using the modified coordinates.
-
+      }
 
+      // Getting values using the modified coordinates.
       this.cellProperties = this.instance.getCellMeta(visualRowToCheck, visualColumnToCheck);
       var activeElement = this.instance.rootDocument.activeElement;
-
       if (activeElement) {
-        // Bluring the activeElement removes unwanted border around the focusable element
+        // Blurring the activeElement removes unwanted border around the focusable element
         // (and resets activeElement prop). Without blurring the activeElement points to the
         // previously focusable element after clicking onto the cell (#6877).
         activeElement.blur();
       }
-
-      if (this.cellProperties.readOnly) {
+      if (!this.isCellEditable()) {
         this.clearActiveEditor();
         return;
       }
-
-      var editorClass = this.instance.getCellEditor(this.cellProperties); // Getting element using coordinates from the selection.
-
       var td = this.instance.getCell(row, col, true);
 
-      if (editorClass && td) {
+      // Skip the preparation when the cell is not rendered in the DOM. The cell is scrolled out of
+      // the table's viewport.
+      if (td) {
+        var editorClass = this.instance.getCellEditor(this.cellProperties);
         var prop = this.instance.colToProp(visualColumnToCheck);
         var originalValue = this.instance.getSourceDataAtCell(this.instance.toPhysicalRow(visualRowToCheck), visualColumnToCheck);
-        this.activeEditor = getEditorInstance(editorClass, this.instance); // Using not modified coordinates, as we need to get the table element using selection coordinates.
+        this.activeEditor = getEditorInstance(editorClass, this.instance);
+        // Using not modified coordinates, as we need to get the table element using selection coordinates.
         // There is an extra translation in the editor for saving value.
-
         this.activeEditor.prepare(row, col, prop, td, originalValue, this.cellProperties);
-      } else {
-        this.clearActiveEditor();
       }
     }
+
     /**
      * Check is editor is opened/showed.
      *
      * @returns {boolean}
      */
-
   }, {
     key: "isEditorOpened",
     value: function isEditorOpened() {
       return this.activeEditor && this.activeEditor.isOpened();
     }
+
     /**
      * Open editor with initial value.
      *
      * @param {null|string} newInitialValue New value from which editor will start if handled property it's not the `null`.
      * @param {Event} event The event object.
+     * @param {boolean} [enableFullEditMode=false] When true, an editor works in full editing mode. Mode disallows closing an editor
+     *                                             when arrow keys are pressed.
      */
-
   }, {
     key: "openEditor",
     value: function openEditor(newInitialValue, event) {
-      if (!this.activeEditor) {
+      var enableFullEditMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (!this.isCellEditable()) {
+        this.clearActiveEditor();
         return;
       }
-
-      this.activeEditor.beginEditing(newInitialValue, event);
+      if (!this.activeEditor) {
+        var _this$instance$getSel2 = this.instance.getSelectedRangeLast().highlight,
+          row = _this$instance$getSel2.row,
+          col = _this$instance$getSel2.col;
+        var renderableRowIndex = this.instance.rowIndexMapper.getRenderableFromVisualIndex(row);
+        var renderableColumnIndex = this.instance.columnIndexMapper.getRenderableFromVisualIndex(col);
+        this.instance.view.scrollViewport(this.instance._createCellCoords(renderableRowIndex, renderableColumnIndex));
+        this.instance.view.render();
+        this.prepareEditor();
+      }
+      if (this.activeEditor) {
+        if (enableFullEditMode) {
+          this.activeEditor.enableFullEditMode();
+        }
+        this.activeEditor.beginEditing(newInitialValue, event);
+      }
     }
+
     /**
      * Close editor, finish editing cell.
      *
@@ -343,7 +321,6 @@ var EditorManager = /*#__PURE__*/function () {
      * @param {boolean} isCtrlPressed If `true`, then editor will save value to each cell in the last selected range.
      * @param {Function} callback The callback function, fired after editor closing.
      */
-
   }, {
     key: "closeEditor",
     value: function closeEditor(restoreOriginalValue, isCtrlPressed, callback) {
@@ -353,51 +330,77 @@ var EditorManager = /*#__PURE__*/function () {
         callback(false);
       }
     }
+
     /**
      * Close editor and save changes.
      *
      * @param {boolean} isCtrlPressed If `true`, then editor will save value to each cell in the last selected range.
      */
-
   }, {
     key: "closeEditorAndSaveChanges",
     value: function closeEditorAndSaveChanges(isCtrlPressed) {
       this.closeEditor(false, isCtrlPressed);
     }
+
     /**
      * Close editor and restore original value.
      *
      * @param {boolean} isCtrlPressed Indication of whether the CTRL button is pressed.
      */
-
   }, {
     key: "closeEditorAndRestoreOriginalValue",
     value: function closeEditorAndRestoreOriginalValue(isCtrlPressed) {
       this.closeEditor(true, isCtrlPressed);
     }
+
     /**
      * Clears reference to an instance of the active editor.
      *
      * @private
      */
-
   }, {
     key: "clearActiveEditor",
     value: function clearActiveEditor() {
       this.activeEditor = void 0;
     }
+
+    /**
+     * Checks if the currently selected cell (pointed by selection highlight coords) is editable.
+     * Editable cell is when:
+     *   - the cell has defined an editor type;
+     *   - the cell is not marked as read-only;
+     *   - the cell is not hidden.
+     *
+     * @private
+     * @returns {boolean}
+     */
+  }, {
+    key: "isCellEditable",
+    value: function isCellEditable() {
+      var editorClass = this.instance.getCellEditor(this.cellProperties);
+      var _this$instance$getSel3 = this.instance.getSelectedRangeLast().highlight,
+        row = _this$instance$getSel3.row,
+        col = _this$instance$getSel3.col;
+      var _this$instance = this.instance,
+        rowIndexMapper = _this$instance.rowIndexMapper,
+        columnIndexMapper = _this$instance.columnIndexMapper;
+      var isCellHidden = rowIndexMapper.isHidden(this.instance.toPhysicalRow(row)) || columnIndexMapper.isHidden(this.instance.toPhysicalColumn(col));
+      if (this.cellProperties.readOnly || !editorClass || isCellHidden) {
+        return false;
+      }
+      return true;
+    }
+
     /**
      * Controls selection's behaviour after clicking `Enter`.
      *
      * @private
      * @param {boolean} isShiftPressed If `true`, then the selection will move up after hit enter.
      */
-
   }, {
     key: "moveSelectionAfterEnter",
     value: function moveSelectionAfterEnter(isShiftPressed) {
       var enterMoves = typeof this.tableMeta.enterMoves === 'function' ? this.tableMeta.enterMoves(event) : this.tableMeta.enterMoves;
-
       if (isShiftPressed) {
         // move selection up
         this.selection.transformStart(-enterMoves.row, -enterMoves.col);
@@ -406,37 +409,28 @@ var EditorManager = /*#__PURE__*/function () {
         this.selection.transformStart(enterMoves.row, enterMoves.col, true);
       }
     }
+
     /**
      * OnAfterDocumentKeyDown callback.
      *
      * @private
      * @param {KeyboardEvent} event The keyboard event object.
      */
-
   }, {
     key: "onAfterDocumentKeyDown",
     value: function onAfterDocumentKeyDown(event) {
       var _this4 = this;
-
       if (!this.instance.isListening()) {
         return;
       }
-
-      var keyCode = event.keyCode; // keyCode 229 aka 'uninitialized' doesn't take into account with editors. This key code is produced when unfinished
-      // character is entering (using IME editor). It is fired mainly on linux (ubuntu) with installed ibus-pinyin package.
-
-      if (keyCode === 229) {
-        return;
-      }
-
+      var keyCode = event.keyCode;
       if (!this.selection.isSelected()) {
         return;
-      } // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
-
+      }
 
+      // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
       var isCtrlPressed = (event.ctrlKey || event.metaKey) && !event.altKey;
-
-      if (this.activeEditor && !this.activeEditor.isWaiting()) {
+      if (!this.activeEditor || this.activeEditor && !this.activeEditor.isWaiting()) {
         if (!isFunctionKey(keyCode) && !isCtrlMetaKey(keyCode) && !isCtrlPressed && !this.isEditorOpened()) {
           var shortcutManager = this.instance.getShortcutManager();
           var editorContext = shortcutManager.getContext('editor');
@@ -471,6 +465,7 @@ var EditorManager = /*#__PURE__*/function () {
         }
       }
     }
+
     /**
      * OnCellDblClick callback.
      *
@@ -479,23 +474,18 @@ var EditorManager = /*#__PURE__*/function () {
      * @param {object} coords The cell coordinates.
      * @param {HTMLTableCellElement|HTMLTableHeaderCellElement} elem The element which triggers the action.
      */
-
   }, {
     key: "onCellDblClick",
     value: function onCellDblClick(event, coords, elem) {
       // may be TD or TH
       if (elem.nodeName === 'TD') {
-        if (this.activeEditor) {
-          this.activeEditor.enableFullEditMode();
-        }
-
-        this.openEditor(null, event);
+        this.openEditor(null, event, true);
       }
     }
+
     /**
      * Destroy the instance.
      */
-
   }, {
     key: "destroy",
     value: function destroy() {
@@ -503,27 +493,22 @@ var EditorManager = /*#__PURE__*/function () {
       this.eventManager.destroy();
     }
   }]);
-
   return EditorManager;
 }();
-
 var instances = new WeakMap();
+
 /**
  * @param {Core} hotInstance The Handsontable instance.
  * @param {TableMeta} tableMeta The table meta class instance.
  * @param {Selection} selection The selection instance.
  * @returns {EditorManager}
  */
-
 EditorManager.getInstance = function (hotInstance, tableMeta, selection) {
   var editorManager = instances.get(hotInstance);
-
   if (!editorManager) {
     editorManager = new EditorManager(hotInstance, tableMeta, selection);
     instances.set(hotInstance, editorManager);
   }
-
   return editorManager;
 };
-
 export default EditorManager;