handsontable 0.0.0-next-9379dd1-20231020 → 0.0.0-next-9059914-20231025

package/plugins/copyPaste/copyPaste.mjs

@@ -6,9 +6,9 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 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; } }
@@ -17,17 +17,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 { removeContentEditableFromElementAndDeselect, runWithSelectedContendEditableElement, makeElementContentEditableAndSelectItsContent } from "../../helpers/dom/element.mjs";
-import { isSafari } from "../../helpers/browser.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');
@@ -83,21 +82,10 @@ var _copyMode = /*#__PURE__*/new WeakMap();
 var _isTriggeredByCopy = /*#__PURE__*/new WeakMap();
 var _isTriggeredByCut = /*#__PURE__*/new WeakMap();
 var _copyableRangesFactory = /*#__PURE__*/new WeakMap();
-var _ensureClipboardEventsGetTriggered = /*#__PURE__*/new WeakSet();
 var _countCopiedHeaders = /*#__PURE__*/new WeakSet();
-var _addContentEditableToHighlightedCell = /*#__PURE__*/new WeakSet();
-var _removeContentEditableFromHighlightedCell = /*#__PURE__*/new WeakSet();
 export class CopyPaste extends BasePlugin {
   constructor() {
     super(...arguments);
-    /**
-     * Remove the `contenteditable` attribute from the highlighted cell and deselect its content.
-     */
-    _classPrivateMethodInitSpec(this, _removeContentEditableFromHighlightedCell);
-    /**
-     * Add the `contenteditable` attribute to the highlighted cell and select its content.
-     */
-    _classPrivateMethodInitSpec(this, _addContentEditableToHighlightedCell);
     /**
      * Counts how many column headers will be copied based on the passed range.
      *
@@ -107,12 +95,6 @@ export class CopyPaste extends BasePlugin {
      *                                           information with the number of copied headers.
      */
     _classPrivateMethodInitSpec(this, _countCopiedHeaders);
-    /**
-     * Ensure that the `copy`/`cut` events get triggered properly in Safari.
-     *
-     * @param {string} eventName Name of the event to get triggered.
-     */
-    _classPrivateMethodInitSpec(this, _ensureClipboardEventsGetTriggered);
     /**
      * The maximum number of columns than can be copied to the clipboard.
      *
@@ -230,6 +212,13 @@ export class CopyPaste extends BasePlugin {
      * @type {Array<{startRow: number, startCol: number, endRow: number, endCol: number}>}
      */
     _defineProperty(this, "copyableRanges", []);
+    /**
+     * Provides focusable element to support IME and copy/paste/cut actions.
+     *
+     * @private
+     * @type {FocusableWrapper}
+     */
+    _defineProperty(this, "focusableElement", void 0);
   }
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
@@ -256,7 +245,6 @@ export class CopyPaste extends BasePlugin {
    * Enables the [`CopyPaste`](#copypaste) plugin for your Handsontable instance.
    */
   enablePlugin() {
-    var _this = this;
     if (this.enabled) {
       return;
     }
@@ -274,28 +262,11 @@ export class CopyPaste extends BasePlugin {
       this.uiContainer = (_settings$uiContainer = settings.uiContainer) !== null && _settings$uiContainer !== void 0 ? _settings$uiContainer : this.uiContainer;
     }
     this.addHook('afterContextMenuDefaultOptions', options => this.onAfterContextMenuDefaultOptions(options));
+    this.addHook('afterOnCellMouseUp', () => this.onAfterOnCellMouseUp());
     this.addHook('afterSelectionEnd', () => this.onAfterSelectionEnd());
-    this.eventManager = new EventManager(this);
-    this.eventManager.addEventListener(this.hot.rootDocument, 'copy', function () {
-      return _this.onCopy(...arguments);
-    });
-    this.eventManager.addEventListener(this.hot.rootDocument, 'cut', function () {
-      return _this.onCut(...arguments);
-    });
-    this.eventManager.addEventListener(this.hot.rootDocument, 'paste', function () {
-      return _this.onPaste(...arguments);
-    });
-
-    // Without this workaround Safari (tested on Safari@16.5.2) does allow copying/cutting from the browser menu.
-    if (isSafari()) {
-      this.eventManager.addEventListener(this.hot.rootDocument.body, 'mouseenter', function () {
-        return _this.onSafariMouseEnter(...arguments);
-      });
-      this.eventManager.addEventListener(this.hot.rootDocument.body, 'mouseleave', function () {
-        return _this.onSafariMouseLeave(...arguments);
-      });
-      this.addHook('afterSelection', () => this.onSafariAfterSelection());
-    }
+    this.addHook('beforeKeyDown', () => this.onBeforeKeyDown());
+    this.focusableElement = createElement(this.uiContainer);
+    this.focusableElement.addLocalHook('copy', event => this.onCopy(event)).addLocalHook('cut', event => this.onCut(event)).addLocalHook('paste', event => this.onPaste(event));
     super.enablePlugin();
   }
 
@@ -310,6 +281,7 @@ export class CopyPaste extends BasePlugin {
   updatePlugin() {
     this.disablePlugin();
     this.enablePlugin();
+    this.getOrCreateFocusableElement();
     super.updatePlugin();
   }
 
@@ -317,6 +289,9 @@ export class CopyPaste extends BasePlugin {
    * Disables the [`CopyPaste`](#copypaste) plugin for your Handsontable instance.
    */
   disablePlugin() {
+    if (this.focusableElement) {
+      destroyElement(this.focusableElement);
+    }
     super.disablePlugin();
   }
 
@@ -338,7 +313,9 @@ export class CopyPaste extends BasePlugin {
     let copyMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cells-only';
     _classPrivateFieldSet(this, _copyMode, copyMode);
     _classPrivateFieldSet(this, _isTriggeredByCopy, true);
-    _classPrivateMethodGet(this, _ensureClipboardEventsGetTriggered, _ensureClipboardEventsGetTriggered2).call(this, 'copy');
+    this.getOrCreateFocusableElement();
+    this.focusableElement.focus();
+    this.hot.rootDocument.execCommand('copy');
   }
 
   /**
@@ -371,7 +348,9 @@ export class CopyPaste extends BasePlugin {
    */
   cut() {
     _classPrivateFieldSet(this, _isTriggeredByCut, true);
-    _classPrivateMethodGet(this, _ensureClipboardEventsGetTriggered, _ensureClipboardEventsGetTriggered2).call(this, 'cut');
+    this.getOrCreateFocusableElement();
+    this.focusableElement.focus();
+    this.hot.rootDocument.execCommand('cut');
   }
 
   /**
@@ -434,6 +413,7 @@ export class CopyPaste extends BasePlugin {
     if (pastableHtml) {
       pasteData.clipboardData.setData('text/html', pastableHtml);
     }
+    this.getOrCreateFocusableElement();
     this.onPaste(pasteData);
   }
 
@@ -445,10 +425,6 @@ export class CopyPaste extends BasePlugin {
     if (!selectionRange) {
       return;
     }
-    if (selectionRange.isSingleHeader()) {
-      this.copyableRanges = [];
-      return;
-    }
     _classPrivateFieldGet(this, _copyableRangesFactory).setSelectedRange(selectionRange);
     const groupedRanges = new Map([['headers', null], ['cells', null]]);
     if (_classPrivateFieldGet(this, _copyMode) === 'column-headers-only') {
@@ -488,6 +464,21 @@ export class CopyPaste extends BasePlugin {
     }
   }
 
+  /**
+   * Force focus on editable element.
+   *
+   * @private
+   */
+  getOrCreateFocusableElement() {
+    var _this$hot$getActiveEd;
+    const 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.
    *
@@ -495,8 +486,8 @@ export class CopyPaste extends BasePlugin {
    * @returns {boolean}
    */
   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();
   }
   /**
    * Prepares new values to populate them into datasource.
@@ -563,6 +554,7 @@ export class CopyPaste extends BasePlugin {
     this.hot.populateFromArray(startRow, startColumn, newRows, void 0, void 0, 'CopyPaste.paste', this.pasteMode);
     return [startRow, startColumn, lastVisualRow, lastVisualColumn];
   }
+
   /**
    * `copy` event callback on textarea element.
    *
@@ -629,7 +621,7 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
+    if (!this.hot.isListening() || this.isEditorOpened()) {
       return;
     }
     if (event && event.preventDefault) {
@@ -654,7 +646,7 @@ export class CopyPaste extends BasePlugin {
     if (typeof pastedData === 'string') {
       pastedData = parse(pastedData);
     }
-    if (pastedData === void 0 || pastedData && pastedData.length === 0) {
+    if (pastedData && pastedData.length === 0) {
       return;
     }
     if (this.hot.runHooks('beforePaste', pastedData, this.copyableRanges) === false) {
@@ -688,74 +680,64 @@ export class CopyPaste extends BasePlugin {
   }
 
   /**
-   * Force focus on focusableElement after end of the selection.
+   * Force focus on focusableElement.
    *
    * @private
    */
-  onAfterSelectionEnd() {
-    if (this.isEditorOpened()) {
+  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;
     }
-    if (this.hot.getSettings().fragmentSelection) {
-      return;
-    }
-    this.setCopyableText();
-  }
-
-  /**
-   * `document.body` `mouseenter` callback used to work around a Safari's problem with copying/cutting from the
-   * browser's menu.
-   *
-   * @private
-   */
-  onSafariMouseEnter() {
-    _classPrivateMethodGet(this, _removeContentEditableFromHighlightedCell, _removeContentEditableFromHighlightedCell2).call(this);
+    this.getOrCreateFocusableElement();
+    this.focusableElement.focus();
   }
 
   /**
-   * `document.body` `mouseleave` callback used to work around a Safari's problem with copying/cutting from the
-   * browser's menu.
+   * Force focus on focusableElement after end of the selection.
    *
    * @private
    */
-  onSafariMouseLeave() {
-    _classPrivateMethodGet(this, _addContentEditableToHighlightedCell, _addContentEditableToHighlightedCell2).call(this);
+  onAfterSelectionEnd() {
+    if (this.isEditorOpened()) {
+      return;
+    }
+    this.getOrCreateFocusableElement();
+    if (this.hot.getSettings().fragmentSelection && this.focusableElement.getFocusableElement() !== this.hot.rootDocument.activeElement && getSelectionText()) {
+      return;
+    }
+    this.setCopyableText();
+    this.focusableElement.focus();
   }
 
   /**
-   * `afterSelection` hook callback triggered only on Safari.
+   * `beforeKeyDown` listener to force focus of focusableElement.
    *
    * @private
    */
-  onSafariAfterSelection() {
-    _classPrivateMethodGet(this, _removeContentEditableFromHighlightedCell, _removeContentEditableFromHighlightedCell2).call(this);
+  onBeforeKeyDown() {
+    if (!this.hot.isListening() || this.isEditorOpened()) {
+      return;
+    }
+    const activeElement = this.hot.rootDocument.activeElement;
+    const activeEditor = this.hot.getActiveEditor();
+    if (!activeEditor || activeElement !== this.focusableElement.getFocusableElement() && activeElement !== activeEditor.select) {
+      return;
+    }
+    this.getOrCreateFocusableElement();
+    this.focusableElement.focus();
   }
 
   /**
    * Destroys the `CopyPaste` plugin instance.
    */
   destroy() {
-    super.destroy();
-  }
-}
-function _ensureClipboardEventsGetTriggered2(eventName) {
-  // Without this workaround Safari (tested on Safari@16.5.2) does not trigger the 'copy' event.
-  if (isSafari()) {
-    const lastSelectedRange = this.hot.getSelectedRangeLast();
-    if (lastSelectedRange) {
-      const {
-        row: highlightRow,
-        col: highlightColumn
-      } = lastSelectedRange.highlight;
-      const currentlySelectedCell = this.hot.getCell(highlightRow, highlightColumn, true);
-      if (currentlySelectedCell) {
-        runWithSelectedContendEditableElement(currentlySelectedCell, () => {
-          this.hot.rootDocument.execCommand(eventName);
-        });
-      }
+    if (this.focusableElement) {
+      destroyElement(this.focusableElement);
+      this.focusableElement = null;
     }
-  } else {
-    this.hot.rootDocument.execCommand(eventName);
+    super.destroy();
   }
 }
 function _countCopiedHeaders2(ranges) {
@@ -772,35 +754,4 @@ function _countCopiedHeaders2(ranges) {
   return {
     columnHeadersCount
   };
-}
-function _addContentEditableToHighlightedCell2() {
-  if (this.hot.isListening()) {
-    const lastSelectedRange = this.hot.getSelectedRangeLast();
-    if (lastSelectedRange) {
-      const {
-        row: highlightRow,
-        col: highlightColumn
-      } = lastSelectedRange.highlight;
-      const currentlySelectedCell = this.hot.getCell(highlightRow, highlightColumn, true);
-      if (currentlySelectedCell) {
-        makeElementContentEditableAndSelectItsContent(currentlySelectedCell);
-      }
-    }
-  }
-}
-function _removeContentEditableFromHighlightedCell2() {
-  // If the instance is not listening, the workaround is not needed.
-  if (this.hot.isListening()) {
-    const lastSelectedRange = this.hot.getSelectedRangeLast();
-    if (lastSelectedRange) {
-      const {
-        row: highlightRow,
-        col: highlightColumn
-      } = lastSelectedRange.highlight;
-      const currentlySelectedCell = this.hot.getCell(highlightRow, highlightColumn, true);
-      if (currentlySelectedCell !== null && currentlySelectedCell !== void 0 && currentlySelectedCell.hasAttribute('contenteditable')) {
-        removeContentEditableFromElementAndDeselect(currentlySelectedCell);
-      }
-    }
-  }
 }

package/plugins/copyPaste/focusableElement.js

@@ -0,0 +1,186 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createElement = createElement;
+exports.deactivateElement = deactivateElement;
+exports.destroyElement = destroyElement;
+var _eventManager = _interopRequireDefault(require("../../eventManager"));
+var _localHooks = _interopRequireDefault(require("../../mixins/localHooks"));
+var _object = require("../../helpers/object");
+var _browser = require("../../helpers/browser");
+var _element = require("../../helpers/dom/element");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @private
+ * @class FocusableWrapper
+ */
+class FocusableWrapper {
+  constructor(container) {
+    this.rootDocument = container.defaultView ? container : container.ownerDocument;
+    /**
+     * The main/operational focusable element.
+     *
+     * @type {HTMLElement}
+     */
+    this.mainElement = null;
+    /**
+     * Instance of EventManager.
+     *
+     * @type {EventManager}
+     */
+    this.eventManager = new _eventManager.default(this);
+    /**
+     * An object for tracking information about event listeners attached to the focusable element.
+     *
+     * @type {WeakSet}
+     */
+    this.listenersCount = new WeakSet();
+    /**
+     * Parent for an focusable element.
+     *
+     * @type {HTMLElement}
+     */
+    this.container = container;
+  }
+
+  /**
+   * Switch to the secondary focusable element. Used when no any main focusable element is provided.
+   */
+  useSecondaryElement() {
+    const el = createOrGetSecondaryElement(this.container);
+    if (!this.listenersCount.has(el)) {
+      this.listenersCount.add(el);
+      forwardEventsToLocalHooks(this.eventManager, el, this);
+    }
+    this.mainElement = el;
+  }
+
+  /**
+   * Switch to the main focusable element.
+   *
+   * @param {HTMLElement} element The DOM element.
+   */
+  setFocusableElement(element) {
+    if (!this.listenersCount.has(element)) {
+      this.listenersCount.add(element);
+      forwardEventsToLocalHooks(this.eventManager, element, this);
+    }
+    this.mainElement = element;
+  }
+
+  /**
+   * Get currently set focusable element.
+   *
+   * @returns {HTMLElement}
+   */
+  getFocusableElement() {
+    return this.mainElement;
+  }
+
+  /**
+   * Set focus to the focusable element.
+   */
+  focus() {
+    // Add an empty space to texarea. It is necessary for safari to enable "copy" command from menu bar.
+    this.mainElement.value = ' ';
+    if (!(0, _browser.isMobileBrowser)()) {
+      (0, _element.selectElementIfAllowed)(this.mainElement);
+    }
+  }
+}
+(0, _object.mixin)(FocusableWrapper, _localHooks.default);
+const refCounter = new WeakMap();
+
+/**
+ * Create and return the FocusableWrapper instance.
+ *
+ * @param {HTMLElement} container The container element, holder for focusable elements.
+ * @returns {FocusableWrapper}
+ */
+function createElement(container) {
+  const focusableWrapper = new FocusableWrapper(container);
+  let counter = refCounter.get(container);
+  counter = isNaN(counter) ? 0 : counter;
+  refCounter.set(container, counter + 1);
+  return focusableWrapper;
+}
+
+/**
+ * Deactivate the FocusableWrapper instance.
+ *
+ * @param {FocusableWrapper} wrapper The instance of the FocusableWrapper class.
+ */
+function deactivateElement(wrapper) {
+  wrapper.eventManager.clear();
+}
+const runLocalHooks = (eventName, subject) => event => subject.runLocalHooks(eventName, event);
+
+/**
+ * Register copy/cut/paste events and forward their actions to the subject local hooks system.
+ *
+ * @param {EventManager} eventManager The instance of the EventManager class.
+ * @param {HTMLElement} element The element on which the listeners are mounted.
+ * @param {FocusableWrapper} subject The subject object for local hooks.
+ */
+function forwardEventsToLocalHooks(eventManager, element, subject) {
+  eventManager.addEventListener(element, 'copy', runLocalHooks('copy', subject));
+  eventManager.addEventListener(element, 'cut', runLocalHooks('cut', subject));
+  eventManager.addEventListener(element, 'paste', runLocalHooks('paste', subject));
+}
+const secondaryElements = new WeakMap();
+
+/**
+ * Create and attach newly created focusable element to the DOM.
+ *
+ * @param {HTMLElement} container The container element, holder for focusable elements.
+ * @returns {HTMLElement}
+ */
+function createOrGetSecondaryElement(container) {
+  const secondaryElement = secondaryElements.get(container);
+  if (secondaryElement) {
+    if (!secondaryElement.parentElement) {
+      container.appendChild(secondaryElement);
+    }
+    return secondaryElement;
+  }
+  const doc = container.defaultView ? container : container.ownerDocument;
+  const element = doc.createElement('textarea');
+  secondaryElements.set(container, element);
+  element.setAttribute('data-hot-input', ''); // Makes the element recognizable by Hot as its own component's element.
+  element.className = 'HandsontableCopyPaste';
+  element.tabIndex = -1;
+  element.autocomplete = 'off';
+  element.wrap = 'hard';
+  element.value = ' ';
+  container.appendChild(element);
+  return element;
+}
+
+/**
+ * Destroy the FocusableWrapper instance.
+ *
+ * @param {FocusableWrapper} wrapper The instance of the FocusableWrapper class.
+ */
+function destroyElement(wrapper) {
+  if (!(wrapper instanceof FocusableWrapper)) {
+    return;
+  }
+  let counter = refCounter.get(wrapper.container);
+  counter = isNaN(counter) ? 0 : counter;
+  if (counter > 0) {
+    counter -= 1;
+  }
+  deactivateElement(wrapper);
+  if (counter <= 0) {
+    counter = 0;
+
+    // Detach secondary element from the DOM.
+    const secondaryElement = secondaryElements.get(wrapper.container);
+    if (secondaryElement && secondaryElement.parentNode) {
+      secondaryElement.parentNode.removeChild(secondaryElement);
+      secondaryElements.delete(wrapper.container);
+    }
+    wrapper.mainElement = null;
+  }
+  refCounter.set(wrapper.container, counter);
+}