handsontable 11.1.0 → 12.1.0

package/editors/selectEditor/selectEditor.js

@@ -31,12 +31,8 @@ var _baseEditor = require("../baseEditor");
 
 var _element = require("../../helpers/dom/element");
 
-var _event = require("../../helpers/dom/event");
-
 var _object = require("../../helpers/object");
 
-var _unicode = require("../../helpers/unicode");
-
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -45,13 +41,13 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -61,9 +57,10 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
+var SHORTCUTS_GROUP = 'selectEditor';
 var EDITOR_TYPE = 'select';
 /**
  * @private
@@ -125,14 +122,12 @@ var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
   }, {
     key: "open",
     value: function open() {
-      var _this = this;
-
       this._opened = true;
       this.refreshDimensions();
       this.select.style.display = '';
-      this.addHook('beforeKeyDown', function () {
-        return _this.onBeforeKeyDown();
-      });
+      var shortcutManager = this.hot.getShortcutManager();
+      shortcutManager.setActiveContextName('editor');
+      this.registerShortcuts();
     }
     /**
      * Closes the editor.
@@ -148,6 +143,7 @@ var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
         (0, _element.removeClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
       }
 
+      this.unregisterShortcuts();
       this.clearHooks();
     }
     /**
@@ -168,19 +164,19 @@ var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
   }, {
     key: "registerHooks",
     value: function registerHooks() {
-      var _this2 = this;
+      var _this = this;
 
       this.addHook('afterScrollHorizontally', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
       this.addHook('afterScrollVertically', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
       this.addHook('afterColumnResize', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
       this.addHook('afterRowResize', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
     }
     /**
@@ -197,7 +193,7 @@ var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
   }, {
     key: "prepare",
     value: function prepare(row, col, prop, td, value, cellProperties) {
-      var _this3 = this;
+      var _this2 = this;
 
       _get(_getPrototypeOf(SelectEditor.prototype), "prepare", this).call(this, row, col, prop, td, value, cellProperties);
 
@@ -212,12 +208,12 @@ var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
 
       (0, _element.empty)(this.select);
       (0, _object.objectEach)(options, function (optionValue, key) {
-        var optionElement = _this3.hot.rootDocument.createElement('OPTION');
+        var optionElement = _this2.hot.rootDocument.createElement('OPTION');
 
         optionElement.value = key;
         (0, _element.fastInnerHTML)(optionElement, optionValue);
 
-        _this3.select.appendChild(optionElement);
+        _this2.select.appendChild(optionElement);
       });
     }
     /**
@@ -277,114 +273,73 @@ var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
         return;
       }
 
-      var wtOverlays = this.hot.view.wt.wtOverlays;
-      var currentOffset = (0, _element.offset)(this.TD);
-      var containerOffset = (0, _element.offset)(this.hot.rootElement);
-      var scrollableContainer = wtOverlays.scrollableElement;
-      var editorSection = this.checkEditorSection();
-      var width = (0, _element.outerWidth)(this.TD) + 1;
-      var height = (0, _element.outerHeight)(this.TD) + 1;
-      var editTop = currentOffset.top - containerOffset.top - 1 - (scrollableContainer.scrollTop || 0);
-      var editLeft = currentOffset.left - containerOffset.left - 1 - (scrollableContainer.scrollLeft || 0);
-      var cssTransformOffset;
-
-      switch (editorSection) {
-        case 'top':
-          cssTransformOffset = (0, _element.getCssTransform)(wtOverlays.topOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'left':
-          cssTransformOffset = (0, _element.getCssTransform)(wtOverlays.leftOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'top-left-corner':
-          cssTransformOffset = (0, _element.getCssTransform)(wtOverlays.topLeftCornerOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'bottom-left-corner':
-          cssTransformOffset = (0, _element.getCssTransform)(wtOverlays.bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'bottom':
-          cssTransformOffset = (0, _element.getCssTransform)(wtOverlays.bottomOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        default:
-          break;
-      }
-
-      var renderableRow = this.hot.rowIndexMapper.getRenderableFromVisualIndex(this.row);
-      var renderableColumn = this.hot.columnIndexMapper.getRenderableFromVisualIndex(this.col);
-      var nrOfRenderableRowIndexes = this.hot.rowIndexMapper.getRenderableIndexesLength();
-      var firstRowIndexOfTheBottomOverlay = nrOfRenderableRowIndexes - this.hot.view.wt.getSetting('fixedRowsBottom');
-
-      if (renderableRow <= 0 || renderableRow === firstRowIndexOfTheBottomOverlay) {
-        editTop += 1;
-      }
-
-      if (renderableColumn <= 0) {
-        editLeft += 1;
-      }
+      var _this$getEditedCellRe = this.getEditedCellRect(),
+          top = _this$getEditedCellRe.top,
+          start = _this$getEditedCellRe.start,
+          width = _this$getEditedCellRe.width,
+          height = _this$getEditedCellRe.height;
 
       var selectStyle = this.select.style;
-
-      if (cssTransformOffset && cssTransformOffset !== -1) {
-        selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
-      } else {
-        (0, _element.resetCssTransform)(this.select);
-      }
-
-      var cellComputedStyle = (0, _element.getComputedStyle)(this.TD, this.hot.rootWindow);
-
-      if (parseInt(cellComputedStyle.borderTopWidth, 10) > 0) {
-        height -= 1;
-      }
-
-      if (parseInt(cellComputedStyle.borderLeftWidth, 10) > 0) {
-        width -= 1;
-      }
-
       selectStyle.height = "".concat(height, "px");
-      selectStyle.minWidth = "".concat(width, "px");
-      selectStyle.top = "".concat(editTop, "px");
-      selectStyle.left = "".concat(editLeft, "px");
+      selectStyle.width = "".concat(width, "px");
+      selectStyle.top = "".concat(top, "px");
+      selectStyle[this.hot.isRtl() ? 'right' : 'left'] = "".concat(start, "px");
       selectStyle.margin = '0px';
       (0, _element.addClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
     }
     /**
-     * OnBeforeKeyDown callback.
+     * Register shortcuts responsible for handling editor.
      *
      * @private
      */
 
   }, {
-    key: "onBeforeKeyDown",
-    value: function onBeforeKeyDown() {
-      var previousOptionIndex = this.select.selectedIndex - 1;
-      var nextOptionIndex = this.select.selectedIndex + 1;
+    key: "registerShortcuts",
+    value: function registerShortcuts() {
+      var _this3 = this;
 
-      switch (event.keyCode) {
-        case _unicode.KEY_CODES.ARROW_UP:
-          if (previousOptionIndex >= 0) {
-            this.select[previousOptionIndex].selected = true;
-          }
+      var shortcutManager = this.hot.getShortcutManager();
+      var editorContext = shortcutManager.getContext('editor');
+      var contextConfig = {
+        group: SHORTCUTS_GROUP
+      }; // Actions from fast edit works.
 
-          (0, _event.stopImmediatePropagation)(event);
-          event.preventDefault();
-          break;
+      if (this.isInFullEditMode() === false) {
+        return;
+      }
 
-        case _unicode.KEY_CODES.ARROW_DOWN:
-          if (nextOptionIndex <= this.select.length - 1) {
-            this.select[nextOptionIndex].selected = true;
+      editorContext.addShortcuts([{
+        keys: [['ArrowUp']],
+        callback: function callback() {
+          var previousOptionIndex = _this3.select.selectedIndex - 1;
+
+          if (previousOptionIndex >= 0) {
+            _this3.select[previousOptionIndex].selected = true;
           }
+        }
+      }, {
+        keys: [['ArrowDown']],
+        callback: function callback() {
+          var nextOptionIndex = _this3.select.selectedIndex + 1;
 
-          (0, _event.stopImmediatePropagation)(event);
-          event.preventDefault();
-          break;
+          if (nextOptionIndex <= _this3.select.length - 1) {
+            _this3.select[nextOptionIndex].selected = true;
+          }
+        }
+      }], contextConfig);
+    }
+    /**
+     * Unregister shortcuts responsible for handling editor.
+     *
+     * @private
+     */
 
-        default:
-          break;
-      }
+  }, {
+    key: "unregisterShortcuts",
+    value: function unregisterShortcuts() {
+      var shortcutManager = this.hot.getShortcutManager();
+      var editorContext = shortcutManager.getContext('editor');
+      editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
   }], [{
     key: "EDITOR_TYPE",

package/editors/selectEditor/selectEditor.mjs

@@ -19,13 +19,13 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -35,14 +35,13 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
-import { addClass, empty, fastInnerHTML, getComputedStyle, getCssTransform, hasClass, offset, outerHeight, outerWidth, removeClass, resetCssTransform } from "../../helpers/dom/element.mjs";
-import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
+import { addClass, empty, fastInnerHTML, hasClass, removeClass } from "../../helpers/dom/element.mjs";
 import { objectEach } from "../../helpers/object.mjs";
-import { KEY_CODES } from "../../helpers/unicode.mjs";
 var EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
+var SHORTCUTS_GROUP = 'selectEditor';
 export var EDITOR_TYPE = 'select';
 /**
  * @private
@@ -102,14 +101,12 @@ export var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
   }, {
     key: "open",
     value: function open() {
-      var _this = this;
-
       this._opened = true;
       this.refreshDimensions();
       this.select.style.display = '';
-      this.addHook('beforeKeyDown', function () {
-        return _this.onBeforeKeyDown();
-      });
+      var shortcutManager = this.hot.getShortcutManager();
+      shortcutManager.setActiveContextName('editor');
+      this.registerShortcuts();
     }
     /**
      * Closes the editor.
@@ -125,6 +122,7 @@ export var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
         removeClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
       }
 
+      this.unregisterShortcuts();
       this.clearHooks();
     }
     /**
@@ -145,19 +143,19 @@ export var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
   }, {
     key: "registerHooks",
     value: function registerHooks() {
-      var _this2 = this;
+      var _this = this;
 
       this.addHook('afterScrollHorizontally', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
       this.addHook('afterScrollVertically', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
       this.addHook('afterColumnResize', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
       this.addHook('afterRowResize', function () {
-        return _this2.refreshDimensions();
+        return _this.refreshDimensions();
       });
     }
     /**
@@ -174,7 +172,7 @@ export var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
   }, {
     key: "prepare",
     value: function prepare(row, col, prop, td, value, cellProperties) {
-      var _this3 = this;
+      var _this2 = this;
 
       _get(_getPrototypeOf(SelectEditor.prototype), "prepare", this).call(this, row, col, prop, td, value, cellProperties);
 
@@ -189,12 +187,12 @@ export var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
 
       empty(this.select);
       objectEach(options, function (optionValue, key) {
-        var optionElement = _this3.hot.rootDocument.createElement('OPTION');
+        var optionElement = _this2.hot.rootDocument.createElement('OPTION');
 
         optionElement.value = key;
         fastInnerHTML(optionElement, optionValue);
 
-        _this3.select.appendChild(optionElement);
+        _this2.select.appendChild(optionElement);
       });
     }
     /**
@@ -254,114 +252,73 @@ export var SelectEditor = /*#__PURE__*/function (_BaseEditor) {
         return;
       }
 
-      var wtOverlays = this.hot.view.wt.wtOverlays;
-      var currentOffset = offset(this.TD);
-      var containerOffset = offset(this.hot.rootElement);
-      var scrollableContainer = wtOverlays.scrollableElement;
-      var editorSection = this.checkEditorSection();
-      var width = outerWidth(this.TD) + 1;
-      var height = outerHeight(this.TD) + 1;
-      var editTop = currentOffset.top - containerOffset.top - 1 - (scrollableContainer.scrollTop || 0);
-      var editLeft = currentOffset.left - containerOffset.left - 1 - (scrollableContainer.scrollLeft || 0);
-      var cssTransformOffset;
-
-      switch (editorSection) {
-        case 'top':
-          cssTransformOffset = getCssTransform(wtOverlays.topOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'left':
-          cssTransformOffset = getCssTransform(wtOverlays.leftOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'top-left-corner':
-          cssTransformOffset = getCssTransform(wtOverlays.topLeftCornerOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'bottom-left-corner':
-          cssTransformOffset = getCssTransform(wtOverlays.bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        case 'bottom':
-          cssTransformOffset = getCssTransform(wtOverlays.bottomOverlay.clone.wtTable.holder.parentNode);
-          break;
-
-        default:
-          break;
-      }
-
-      var renderableRow = this.hot.rowIndexMapper.getRenderableFromVisualIndex(this.row);
-      var renderableColumn = this.hot.columnIndexMapper.getRenderableFromVisualIndex(this.col);
-      var nrOfRenderableRowIndexes = this.hot.rowIndexMapper.getRenderableIndexesLength();
-      var firstRowIndexOfTheBottomOverlay = nrOfRenderableRowIndexes - this.hot.view.wt.getSetting('fixedRowsBottom');
-
-      if (renderableRow <= 0 || renderableRow === firstRowIndexOfTheBottomOverlay) {
-        editTop += 1;
-      }
-
-      if (renderableColumn <= 0) {
-        editLeft += 1;
-      }
+      var _this$getEditedCellRe = this.getEditedCellRect(),
+          top = _this$getEditedCellRe.top,
+          start = _this$getEditedCellRe.start,
+          width = _this$getEditedCellRe.width,
+          height = _this$getEditedCellRe.height;
 
       var selectStyle = this.select.style;
-
-      if (cssTransformOffset && cssTransformOffset !== -1) {
-        selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
-      } else {
-        resetCssTransform(this.select);
-      }
-
-      var cellComputedStyle = getComputedStyle(this.TD, this.hot.rootWindow);
-
-      if (parseInt(cellComputedStyle.borderTopWidth, 10) > 0) {
-        height -= 1;
-      }
-
-      if (parseInt(cellComputedStyle.borderLeftWidth, 10) > 0) {
-        width -= 1;
-      }
-
       selectStyle.height = "".concat(height, "px");
-      selectStyle.minWidth = "".concat(width, "px");
-      selectStyle.top = "".concat(editTop, "px");
-      selectStyle.left = "".concat(editLeft, "px");
+      selectStyle.width = "".concat(width, "px");
+      selectStyle.top = "".concat(top, "px");
+      selectStyle[this.hot.isRtl() ? 'right' : 'left'] = "".concat(start, "px");
       selectStyle.margin = '0px';
       addClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
     }
     /**
-     * OnBeforeKeyDown callback.
+     * Register shortcuts responsible for handling editor.
      *
      * @private
      */
 
   }, {
-    key: "onBeforeKeyDown",
-    value: function onBeforeKeyDown() {
-      var previousOptionIndex = this.select.selectedIndex - 1;
-      var nextOptionIndex = this.select.selectedIndex + 1;
+    key: "registerShortcuts",
+    value: function registerShortcuts() {
+      var _this3 = this;
 
-      switch (event.keyCode) {
-        case KEY_CODES.ARROW_UP:
-          if (previousOptionIndex >= 0) {
-            this.select[previousOptionIndex].selected = true;
-          }
+      var shortcutManager = this.hot.getShortcutManager();
+      var editorContext = shortcutManager.getContext('editor');
+      var contextConfig = {
+        group: SHORTCUTS_GROUP
+      }; // Actions from fast edit works.
 
-          stopImmediatePropagation(event);
-          event.preventDefault();
-          break;
+      if (this.isInFullEditMode() === false) {
+        return;
+      }
+
+      editorContext.addShortcuts([{
+        keys: [['ArrowUp']],
+        callback: function callback() {
+          var previousOptionIndex = _this3.select.selectedIndex - 1;
 
-        case KEY_CODES.ARROW_DOWN:
-          if (nextOptionIndex <= this.select.length - 1) {
-            this.select[nextOptionIndex].selected = true;
+          if (previousOptionIndex >= 0) {
+            _this3.select[previousOptionIndex].selected = true;
           }
+        }
+      }, {
+        keys: [['ArrowDown']],
+        callback: function callback() {
+          var nextOptionIndex = _this3.select.selectedIndex + 1;
 
-          stopImmediatePropagation(event);
-          event.preventDefault();
-          break;
+          if (nextOptionIndex <= _this3.select.length - 1) {
+            _this3.select[nextOptionIndex].selected = true;
+          }
+        }
+      }], contextConfig);
+    }
+    /**
+     * Unregister shortcuts responsible for handling editor.
+     *
+     * @private
+     */
 
-        default:
-          break;
-      }
+  }, {
+    key: "unregisterShortcuts",
+    value: function unregisterShortcuts() {
+      var shortcutManager = this.hot.getShortcutManager();
+      var editorContext = shortcutManager.getContext('editor');
+      editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
   }], [{
     key: "EDITOR_TYPE",

package/editors/textEditor/caretPositioner.js

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports.updateCaretPosition = updateCaretPosition;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
+var _element = require("../../helpers/dom/element");
+
+/**
+ * Updates the textarea caret position depends on the action executed on that element.
+ *
+ * The following actions are supported:
+ *  - 'home': Move the caret to the beginning of the current line;
+ *  - 'end': Move the caret to the end of the current line.
+ *
+ * @param {'home'|'end'} actionName The action to perform that modifies the caret behavior.
+ * @param {HTMLTextAreaElement} textareaElement The textarea element where the action is supposed to happen.
+ */
+function updateCaretPosition(actionName, textareaElement) {
+  var caretPosition = (0, _element.getCaretPosition)(textareaElement);
+  var textLines = textareaElement.value.split('\n');
+  var newCaretPosition = caretPosition;
+  var lineStartIndex = 0;
+
+  for (var i = 0; i < textLines.length; i++) {
+    var textLine = textLines[i];
+
+    if (i !== 0) {
+      lineStartIndex += textLines[i - 1].length + 1;
+    }
+
+    var lineEndIndex = lineStartIndex + textLine.length;
+
+    if (actionName === 'home') {
+      newCaretPosition = lineStartIndex;
+    } else if (actionName === 'end') {
+      newCaretPosition = lineEndIndex;
+    }
+
+    if (caretPosition <= lineEndIndex) {
+      break;
+    }
+  }
+
+  (0, _element.setCaretPosition)(textareaElement, newCaretPosition);
+}

package/editors/textEditor/caretPositioner.mjs

@@ -0,0 +1,42 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import { getCaretPosition, setCaretPosition } from "../../helpers/dom/element.mjs";
+/**
+ * Updates the textarea caret position depends on the action executed on that element.
+ *
+ * The following actions are supported:
+ *  - 'home': Move the caret to the beginning of the current line;
+ *  - 'end': Move the caret to the end of the current line.
+ *
+ * @param {'home'|'end'} actionName The action to perform that modifies the caret behavior.
+ * @param {HTMLTextAreaElement} textareaElement The textarea element where the action is supposed to happen.
+ */
+
+export function updateCaretPosition(actionName, textareaElement) {
+  var caretPosition = getCaretPosition(textareaElement);
+  var textLines = textareaElement.value.split('\n');
+  var newCaretPosition = caretPosition;
+  var lineStartIndex = 0;
+
+  for (var i = 0; i < textLines.length; i++) {
+    var textLine = textLines[i];
+
+    if (i !== 0) {
+      lineStartIndex += textLines[i - 1].length + 1;
+    }
+
+    var lineEndIndex = lineStartIndex + textLine.length;
+
+    if (actionName === 'home') {
+      newCaretPosition = lineStartIndex;
+    } else if (actionName === 'end') {
+      newCaretPosition = lineEndIndex;
+    }
+
+    if (caretPosition <= lineEndIndex) {
+      break;
+    }
+  }
+
+  setCaretPosition(textareaElement, newCaretPosition);
+}