handsontable 0.0.0-next-48677e7-20230509 → 0.0.0-next-834f47e-20230509

package/plugins/copyPaste/copyPaste.js

@@ -33,15 +33,16 @@ var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
 var _SheetClip = require("../../3rdparty/SheetClip");
 var _array = require("../../helpers/array");
 var _string = require("../../helpers/string");
+var _element = require("../../helpers/dom/element");
 var _copy = _interopRequireDefault(require("./contextMenuItem/copy"));
 var _copyColumnHeadersOnly = _interopRequireDefault(require("./contextMenuItem/copyColumnHeadersOnly"));
 var _copyWithColumnGroupHeaders = _interopRequireDefault(require("./contextMenuItem/copyWithColumnGroupHeaders"));
 var _copyWithColumnHeaders = _interopRequireDefault(require("./contextMenuItem/copyWithColumnHeaders"));
 var _cut = _interopRequireDefault(require("./contextMenuItem/cut"));
 var _pasteEvent = _interopRequireDefault(require("./pasteEvent"));
+var _focusableElement = require("./focusableElement");
 var _copyableRanges = require("./copyableRanges");
 var _parseTable = require("../../utils/parseTable");
-var _eventManager = _interopRequireDefault(require("../../eventManager"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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."); }
@@ -278,6 +279,13 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
      * @type {Array<{startRow: number, startCol: number, endRow: number, endCol: number}>}
      */
     _defineProperty(_assertThisInitialized(_this), "copyableRanges", []);
+    /**
+     * Provides focusable element to support IME and copy/paste/cut actions.
+     *
+     * @private
+     * @type {FocusableWrapper}
+     */
+    _defineProperty(_assertThisInitialized(_this), "focusableElement", void 0);
     return _this;
   }
   _createClass(CopyPaste, [{
@@ -320,18 +328,22 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       this.addHook('afterContextMenuDefaultOptions', function (options) {
         return _this2.onAfterContextMenuDefaultOptions(options);
       });
+      this.addHook('afterOnCellMouseUp', function () {
+        return _this2.onAfterOnCellMouseUp();
+      });
       this.addHook('afterSelectionEnd', function () {
         return _this2.onAfterSelectionEnd();
       });
-      this.eventManager = new _eventManager.default(this);
-      this.eventManager.addEventListener(this.hot.rootDocument, 'copy', function () {
-        return _this2.onCopy.apply(_this2, arguments);
+      this.addHook('beforeKeyDown', function () {
+        return _this2.onBeforeKeyDown();
       });
-      this.eventManager.addEventListener(this.hot.rootDocument, 'cut', function () {
-        return _this2.onCut.apply(_this2, arguments);
-      });
-      this.eventManager.addEventListener(this.hot.rootDocument, 'paste', function () {
-        return _this2.onPaste.apply(_this2, arguments);
+      this.focusableElement = (0, _focusableElement.createElement)(this.uiContainer);
+      this.focusableElement.addLocalHook('copy', function (event) {
+        return _this2.onCopy(event);
+      }).addLocalHook('cut', function (event) {
+        return _this2.onCut(event);
+      }).addLocalHook('paste', function (event) {
+        return _this2.onPaste(event);
       });
       _get(_getPrototypeOf(CopyPaste.prototype), "enablePlugin", this).call(this);
     }
@@ -349,6 +361,7 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
     value: function updatePlugin() {
       this.disablePlugin();
       this.enablePlugin();
+      this.getOrCreateFocusableElement();
       _get(_getPrototypeOf(CopyPaste.prototype), "updatePlugin", this).call(this);
     }
 
@@ -358,6 +371,9 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "disablePlugin",
     value: function disablePlugin() {
+      if (this.focusableElement) {
+        (0, _focusableElement.destroyElement)(this.focusableElement);
+      }
       _get(_getPrototypeOf(CopyPaste.prototype), "disablePlugin", this).call(this);
     }
 
@@ -381,6 +397,8 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       var copyMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cells-only';
       _classPrivateFieldSet(this, _copyMode, copyMode);
       _classPrivateFieldSet(this, _isTriggeredByCopy, true);
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
       this.hot.rootDocument.execCommand('copy');
     }
 
@@ -424,6 +442,8 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
     key: "cut",
     value: function cut() {
       _classPrivateFieldSet(this, _isTriggeredByCut, true);
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
       this.hot.rootDocument.execCommand('cut');
     }
 
@@ -493,6 +513,7 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       if (pastableHtml) {
         pasteData.clipboardData.setData('text/html', pastableHtml);
       }
+      this.getOrCreateFocusableElement();
       this.onPaste(pasteData);
     }
 
@@ -543,6 +564,23 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       }
     }
 
+    /**
+     * Force focus on editable element.
+     *
+     * @private
+     */
+  }, {
+    key: "getOrCreateFocusableElement",
+    value: function getOrCreateFocusableElement() {
+      var _this$hot$getActiveEd;
+      var editableElement = (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.TEXTAREA;
+      if (editableElement) {
+        this.focusableElement.setFocusableElement(editableElement);
+      } else {
+        this.focusableElement.useSecondaryElement();
+      }
+    }
+
     /**
      * Verifies if editor exists and is open.
      *
@@ -552,8 +590,8 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "isEditorOpened",
     value: function isEditorOpened() {
-      var _this$hot$getActiveEd;
-      return (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.isOpened();
+      var _this$hot$getActiveEd2;
+      return (_this$hot$getActiveEd2 = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd2 === void 0 ? void 0 : _this$hot$getActiveEd2.isOpened();
     }
   }, {
     key: "populateValues",
@@ -757,6 +795,23 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       options.items.push((0, _cut.default)(this));
     }
 
+    /**
+     * Force focus on focusableElement.
+     *
+     * @private
+     */
+  }, {
+    key: "onAfterOnCellMouseUp",
+    value: function onAfterOnCellMouseUp() {
+      // Changing focused element will remove current selection. It's unnecessary in case when we give possibility
+      // for fragment selection
+      if (!this.hot.isListening() || this.isEditorOpened() || this.hot.getSettings().fragmentSelection) {
+        return;
+      }
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
+    }
+
     /**
      * Force focus on focusableElement after end of the selection.
      *
@@ -768,10 +823,32 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       if (this.isEditorOpened()) {
         return;
       }
-      if (this.hot.getSettings().fragmentSelection) {
+      this.getOrCreateFocusableElement();
+      if (this.hot.getSettings().fragmentSelection && this.focusableElement.getFocusableElement() !== this.hot.rootDocument.activeElement && (0, _element.getSelectionText)()) {
         return;
       }
       this.setCopyableText();
+      this.focusableElement.focus();
+    }
+
+    /**
+     * `beforeKeyDown` listener to force focus of focusableElement.
+     *
+     * @private
+     */
+  }, {
+    key: "onBeforeKeyDown",
+    value: function onBeforeKeyDown() {
+      if (!this.hot.isListening() || this.isEditorOpened()) {
+        return;
+      }
+      var activeElement = this.hot.rootDocument.activeElement;
+      var activeEditor = this.hot.getActiveEditor();
+      if (!activeEditor || activeElement !== this.focusableElement.getFocusableElement() && activeElement !== activeEditor.select) {
+        return;
+      }
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
     }
 
     /**
@@ -780,6 +857,10 @@ var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "destroy",
     value: function destroy() {
+      if (this.focusableElement) {
+        (0, _focusableElement.destroyElement)(this.focusableElement);
+        this.focusableElement = null;
+      }
       _get(_getPrototypeOf(CopyPaste.prototype), "destroy", this).call(this);
     }
   }], [{

package/plugins/copyPaste/copyPaste.mjs

@@ -60,15 +60,16 @@ import Hooks from "../../pluginHooks.mjs";
 import { stringify, parse } from "../../3rdparty/SheetClip/index.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { sanitize } from "../../helpers/string.mjs";
+import { getSelectionText } from "../../helpers/dom/element.mjs";
 import copyItem from "./contextMenuItem/copy.mjs";
 import copyColumnHeadersOnlyItem from "./contextMenuItem/copyColumnHeadersOnly.mjs";
 import copyWithColumnGroupHeadersItem from "./contextMenuItem/copyWithColumnGroupHeaders.mjs";
 import copyWithColumnHeadersItem from "./contextMenuItem/copyWithColumnHeaders.mjs";
 import cutItem from "./contextMenuItem/cut.mjs";
 import PasteEvent from "./pasteEvent.mjs";
+import { createElement, destroyElement } from "./focusableElement.mjs";
 import { CopyableRangesFactory, normalizeRanges } from "./copyableRanges.mjs";
 import { _dataToHTML, htmlToGridSettings } from "../../utils/parseTable.mjs";
-import EventManager from "../../eventManager.mjs";
 Hooks.getSingleton().register('afterCopyLimit');
 Hooks.getSingleton().register('modifyCopyableRange');
 Hooks.getSingleton().register('beforeCut');
@@ -271,6 +272,13 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
      * @type {Array<{startRow: number, startCol: number, endRow: number, endCol: number}>}
      */
     _defineProperty(_assertThisInitialized(_this), "copyableRanges", []);
+    /**
+     * Provides focusable element to support IME and copy/paste/cut actions.
+     *
+     * @private
+     * @type {FocusableWrapper}
+     */
+    _defineProperty(_assertThisInitialized(_this), "focusableElement", void 0);
     return _this;
   }
   _createClass(CopyPaste, [{
@@ -313,18 +321,22 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       this.addHook('afterContextMenuDefaultOptions', function (options) {
         return _this2.onAfterContextMenuDefaultOptions(options);
       });
+      this.addHook('afterOnCellMouseUp', function () {
+        return _this2.onAfterOnCellMouseUp();
+      });
       this.addHook('afterSelectionEnd', function () {
         return _this2.onAfterSelectionEnd();
       });
-      this.eventManager = new EventManager(this);
-      this.eventManager.addEventListener(this.hot.rootDocument, 'copy', function () {
-        return _this2.onCopy.apply(_this2, arguments);
+      this.addHook('beforeKeyDown', function () {
+        return _this2.onBeforeKeyDown();
       });
-      this.eventManager.addEventListener(this.hot.rootDocument, 'cut', function () {
-        return _this2.onCut.apply(_this2, arguments);
-      });
-      this.eventManager.addEventListener(this.hot.rootDocument, 'paste', function () {
-        return _this2.onPaste.apply(_this2, arguments);
+      this.focusableElement = createElement(this.uiContainer);
+      this.focusableElement.addLocalHook('copy', function (event) {
+        return _this2.onCopy(event);
+      }).addLocalHook('cut', function (event) {
+        return _this2.onCut(event);
+      }).addLocalHook('paste', function (event) {
+        return _this2.onPaste(event);
       });
       _get(_getPrototypeOf(CopyPaste.prototype), "enablePlugin", this).call(this);
     }
@@ -342,6 +354,7 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
     value: function updatePlugin() {
       this.disablePlugin();
       this.enablePlugin();
+      this.getOrCreateFocusableElement();
       _get(_getPrototypeOf(CopyPaste.prototype), "updatePlugin", this).call(this);
     }
 
@@ -351,6 +364,9 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "disablePlugin",
     value: function disablePlugin() {
+      if (this.focusableElement) {
+        destroyElement(this.focusableElement);
+      }
       _get(_getPrototypeOf(CopyPaste.prototype), "disablePlugin", this).call(this);
     }
 
@@ -374,6 +390,8 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       var copyMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cells-only';
       _classPrivateFieldSet(this, _copyMode, copyMode);
       _classPrivateFieldSet(this, _isTriggeredByCopy, true);
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
       this.hot.rootDocument.execCommand('copy');
     }
 
@@ -417,6 +435,8 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
     key: "cut",
     value: function cut() {
       _classPrivateFieldSet(this, _isTriggeredByCut, true);
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
       this.hot.rootDocument.execCommand('cut');
     }
 
@@ -486,6 +506,7 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       if (pastableHtml) {
         pasteData.clipboardData.setData('text/html', pastableHtml);
       }
+      this.getOrCreateFocusableElement();
       this.onPaste(pasteData);
     }
 
@@ -536,6 +557,23 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       }
     }
 
+    /**
+     * Force focus on editable element.
+     *
+     * @private
+     */
+  }, {
+    key: "getOrCreateFocusableElement",
+    value: function getOrCreateFocusableElement() {
+      var _this$hot$getActiveEd;
+      var editableElement = (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.TEXTAREA;
+      if (editableElement) {
+        this.focusableElement.setFocusableElement(editableElement);
+      } else {
+        this.focusableElement.useSecondaryElement();
+      }
+    }
+
     /**
      * Verifies if editor exists and is open.
      *
@@ -545,8 +583,8 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "isEditorOpened",
     value: function isEditorOpened() {
-      var _this$hot$getActiveEd;
-      return (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.isOpened();
+      var _this$hot$getActiveEd2;
+      return (_this$hot$getActiveEd2 = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd2 === void 0 ? void 0 : _this$hot$getActiveEd2.isOpened();
     }
   }, {
     key: "populateValues",
@@ -750,6 +788,23 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       options.items.push(cutItem(this));
     }
 
+    /**
+     * Force focus on focusableElement.
+     *
+     * @private
+     */
+  }, {
+    key: "onAfterOnCellMouseUp",
+    value: function onAfterOnCellMouseUp() {
+      // Changing focused element will remove current selection. It's unnecessary in case when we give possibility
+      // for fragment selection
+      if (!this.hot.isListening() || this.isEditorOpened() || this.hot.getSettings().fragmentSelection) {
+        return;
+      }
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
+    }
+
     /**
      * Force focus on focusableElement after end of the selection.
      *
@@ -761,10 +816,32 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
       if (this.isEditorOpened()) {
         return;
       }
-      if (this.hot.getSettings().fragmentSelection) {
+      this.getOrCreateFocusableElement();
+      if (this.hot.getSettings().fragmentSelection && this.focusableElement.getFocusableElement() !== this.hot.rootDocument.activeElement && getSelectionText()) {
         return;
       }
       this.setCopyableText();
+      this.focusableElement.focus();
+    }
+
+    /**
+     * `beforeKeyDown` listener to force focus of focusableElement.
+     *
+     * @private
+     */
+  }, {
+    key: "onBeforeKeyDown",
+    value: function onBeforeKeyDown() {
+      if (!this.hot.isListening() || this.isEditorOpened()) {
+        return;
+      }
+      var activeElement = this.hot.rootDocument.activeElement;
+      var activeEditor = this.hot.getActiveEditor();
+      if (!activeEditor || activeElement !== this.focusableElement.getFocusableElement() && activeElement !== activeEditor.select) {
+        return;
+      }
+      this.getOrCreateFocusableElement();
+      this.focusableElement.focus();
     }
 
     /**
@@ -773,6 +850,10 @@ export var CopyPaste = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "destroy",
     value: function destroy() {
+      if (this.focusableElement) {
+        destroyElement(this.focusableElement);
+        this.focusableElement = null;
+      }
       _get(_getPrototypeOf(CopyPaste.prototype), "destroy", this).call(this);
     }
   }], [{

package/plugins/copyPaste/copyableRanges.js

@@ -33,6 +33,13 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+/**
+ * The utils class produces the selection ranges in the `{startRow, startCol, endRow, endCol}` format
+ * based on the current table selection. The CopyPaste plugin consumes that ranges to generate
+ * appropriate data ready to copy to the clipboard.
+ *
+ * @private
+ */
 var _selectedRange = /*#__PURE__*/new WeakMap();
 var _countRows = /*#__PURE__*/new WeakMap();
 var _countColumns = /*#__PURE__*/new WeakMap();
@@ -41,38 +48,7 @@ var _columnsLimit = /*#__PURE__*/new WeakMap();
 var _countColumnHeaders = /*#__PURE__*/new WeakMap();
 var _trimColumnsRange = /*#__PURE__*/new WeakSet();
 var _trimRowsRange = /*#__PURE__*/new WeakSet();
-/**
- * The utils class produces the selection ranges in the `{startRow, startCol, endRow, endCol}` format
- * based on the current table selection. The CopyPaste plugin consumes that ranges to generate
- * appropriate data ready to copy to the clipboard.
- *
- * @private
- */
 var CopyableRangesFactory = /*#__PURE__*/function () {
-  /**
-   * @type {CellRange}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
   /* eslint-disable jsdoc/require-description-complete-sentence */
   /**
    * @param {{
@@ -106,26 +82,44 @@ var CopyableRangesFactory = /*#__PURE__*/function () {
      * @returns {number} Returns trimmed column index if it exceeds the limit.
      */
     _classPrivateMethodInitSpec(this, _trimColumnsRange);
+    /**
+     * @type {CellRange}
+     */
     _classPrivateFieldInitSpec(this, _selectedRange, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _countRows, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _countColumns, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _rowsLimit, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _columnsLimit, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _countColumnHeaders, {
       writable: true,
       value: void 0

package/plugins/copyPaste/copyableRanges.mjs

@@ -44,30 +44,6 @@ var _countColumnHeaders = /*#__PURE__*/new WeakMap();
 var _trimColumnsRange = /*#__PURE__*/new WeakSet();
 var _trimRowsRange = /*#__PURE__*/new WeakSet();
 export var CopyableRangesFactory = /*#__PURE__*/function () {
-  /**
-   * @type {CellRange}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
-  /**
-   * @type {function(): number}
-   */
-
   /* eslint-disable jsdoc/require-description-complete-sentence */
   /**
    * @param {{
@@ -101,26 +77,44 @@ export var CopyableRangesFactory = /*#__PURE__*/function () {
      * @returns {number} Returns trimmed column index if it exceeds the limit.
      */
     _classPrivateMethodInitSpec(this, _trimColumnsRange);
+    /**
+     * @type {CellRange}
+     */
     _classPrivateFieldInitSpec(this, _selectedRange, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _countRows, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _countColumns, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _rowsLimit, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _columnsLimit, {
       writable: true,
       value: void 0
     });
+    /**
+     * @type {function(): number}
+     */
     _classPrivateFieldInitSpec(this, _countColumnHeaders, {
       writable: true,
       value: void 0