handsontable 13.1.0-next-e1a7d2c-20230831 → 14.0.0-next-d97b156-20231027

package/plugins/copyPaste/copyPaste.mjs

@@ -6,27 +6,27 @@ 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; } }
 import { BasePlugin } from "../base/index.mjs";
 import Hooks from "../../pluginHooks.mjs";
-import { stringify, parse } from "../../3rdparty/SheetClip/index.mjs";
-import { arrayEach } from "../../helpers/array.mjs";
+import { stringify } from "../../3rdparty/SheetClip/index.mjs";
 import { sanitize } from "../../helpers/string.mjs";
-import { getSelectionText } from "../../helpers/dom/element.mjs";
+import { removeContentEditableFromElementAndDeselect, runWithSelectedContendEditableElement, makeElementContentEditableAndSelectItsContent } from "../../helpers/dom/element.mjs";
+import { isSafari } from "../../helpers/browser.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 { getDataByCoords, getHTMLFromConfig } from "../../utils/parseTable.mjs";
+import EventManager from "../../eventManager.mjs";
+import { CopyClipboardData, PasteClipboardData, META_HEAD } from "./clipboardData/index.mjs";
 Hooks.getSingleton().register('afterCopyLimit');
 Hooks.getSingleton().register('modifyCopyableRange');
 Hooks.getSingleton().register('beforeCut');
@@ -38,7 +38,6 @@ Hooks.getSingleton().register('afterCopy');
 export const PLUGIN_KEY = 'copyPaste';
 export const PLUGIN_PRIORITY = 80;
 const SETTING_KEYS = ['fragmentSelection'];
-const META_HEAD = ['<meta name="generator" content="Handsontable"/>', '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'].join('');
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -82,19 +81,26 @@ var _copyMode = /*#__PURE__*/new WeakMap();
 var _isTriggeredByCopy = /*#__PURE__*/new WeakMap();
 var _isTriggeredByCut = /*#__PURE__*/new WeakMap();
 var _copyableRangesFactory = /*#__PURE__*/new WeakMap();
-var _countCopiedHeaders = /*#__PURE__*/new WeakSet();
+var _ensureClipboardEventsGetTriggered = /*#__PURE__*/new WeakSet();
+var _addContentEditableToHighlightedCell = /*#__PURE__*/new WeakSet();
+var _removeContentEditableFromHighlightedCell = /*#__PURE__*/new WeakSet();
 export class CopyPaste extends BasePlugin {
   constructor() {
     super(...arguments);
     /**
-     * Counts how many column headers will be copied based on the passed range.
+     * 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);
+    /**
+     * Ensure that the `copy`/`cut` events get triggered properly in Safari.
      *
-     * @private
-     * @param {Array<{startRow: number, startCol: number, endRow: number, endCol: number}>} ranges Array of objects with properties `startRow`, `startCol`, `endRow` and `endCol`.
-     * @returns {{ columnHeadersCount: number }} Returns an object with keys that holds
-     *                                           information with the number of copied headers.
+     * @param {string} eventName Name of the event to get triggered.
      */
-    _classPrivateMethodInitSpec(this, _countCopiedHeaders);
+    _classPrivateMethodInitSpec(this, _ensureClipboardEventsGetTriggered);
     /**
      * The maximum number of columns than can be copied to the clipboard.
      *
@@ -212,13 +218,6 @@ 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;
@@ -245,6 +244,7 @@ export class CopyPaste extends BasePlugin {
    * Enables the [`CopyPaste`](#copypaste) plugin for your Handsontable instance.
    */
   enablePlugin() {
+    var _this = this;
     if (this.enabled) {
       return;
     }
@@ -262,11 +262,28 @@ 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.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));
+    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());
+    }
     super.enablePlugin();
   }
 
@@ -281,7 +298,6 @@ export class CopyPaste extends BasePlugin {
   updatePlugin() {
     this.disablePlugin();
     this.enablePlugin();
-    this.getOrCreateFocusableElement();
     super.updatePlugin();
   }
 
@@ -289,9 +305,6 @@ export class CopyPaste extends BasePlugin {
    * Disables the [`CopyPaste`](#copypaste) plugin for your Handsontable instance.
    */
   disablePlugin() {
-    if (this.focusableElement) {
-      destroyElement(this.focusableElement);
-    }
     super.disablePlugin();
   }
 
@@ -313,9 +326,7 @@ 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);
-    this.getOrCreateFocusableElement();
-    this.focusableElement.focus();
-    this.hot.rootDocument.execCommand('copy');
+    _classPrivateMethodGet(this, _ensureClipboardEventsGetTriggered, _ensureClipboardEventsGetTriggered2).call(this, 'copy');
   }
 
   /**
@@ -348,9 +359,7 @@ export class CopyPaste extends BasePlugin {
    */
   cut() {
     _classPrivateFieldSet(this, _isTriggeredByCut, true);
-    this.getOrCreateFocusableElement();
-    this.focusableElement.focus();
-    this.hot.rootDocument.execCommand('cut');
+    _classPrivateMethodGet(this, _ensureClipboardEventsGetTriggered, _ensureClipboardEventsGetTriggered2).call(this, 'cut');
   }
 
   /**
@@ -370,26 +379,14 @@ export class CopyPaste extends BasePlugin {
    * @returns {Array[]} An array of arrays that will be copied to the clipboard.
    */
   getRangedData(ranges) {
-    const data = [];
     const {
       rows,
       columns
     } = normalizeRanges(ranges);
-
-    // concatenate all rows and columns data defined in ranges into one copyable string
-    arrayEach(rows, row => {
-      const rowSet = [];
-      arrayEach(columns, column => {
-        if (row < 0) {
-          // `row` as the second argument acts here as the `headerLevel` argument
-          rowSet.push(this.hot.getColHeader(column, row));
-        } else {
-          rowSet.push(this.hot.getCopyableData(row, column));
-        }
-      });
-      data.push(rowSet);
+    return getDataByCoords(this.hot, {
+      rows,
+      columns
     });
-    return data;
   }
 
   /**
@@ -406,14 +403,23 @@ export class CopyPaste extends BasePlugin {
     if (!pastableText && !pastableHtml) {
       return;
     }
-    const pasteData = new PasteEvent();
+    const pasteData = {
+      clipboardData: {
+        data: {},
+        setData(type, value) {
+          this.data[type] = value;
+        },
+        getData(type) {
+          return this.data[type];
+        }
+      }
+    };
     if (pastableText) {
       pasteData.clipboardData.setData('text/plain', pastableText);
     }
     if (pastableHtml) {
       pasteData.clipboardData.setData('text/html', pastableHtml);
     }
-    this.getOrCreateFocusableElement();
     this.onPaste(pasteData);
   }
 
@@ -425,6 +431,10 @@ 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') {
@@ -464,21 +474,6 @@ 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.
    *
@@ -486,8 +481,8 @@ export class CopyPaste extends BasePlugin {
    * @returns {boolean}
    */
   isEditorOpened() {
-    var _this$hot$getActiveEd2;
-    return (_this$hot$getActiveEd2 = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd2 === void 0 ? void 0 : _this$hot$getActiveEd2.isOpened();
+    var _this$hot$getActiveEd;
+    return (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.isOpened();
   }
   /**
    * Prepares new values to populate them into datasource.
@@ -554,11 +549,10 @@ 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.
    *
-   * @param {Event} event ClipboardEvent.
+   * @param {ClipboardEvent} event ClipboardEvent.
    * @private
    */
   onCopy(event) {
@@ -567,19 +561,12 @@ export class CopyPaste extends BasePlugin {
     }
     this.setCopyableText();
     _classPrivateFieldSet(this, _isTriggeredByCopy, false);
-    const data = this.getRangedData(this.copyableRanges);
-    const copiedHeadersCount = _classPrivateMethodGet(this, _countCopiedHeaders, _countCopiedHeaders2).call(this, this.copyableRanges);
-    const allowCopying = !!this.hot.runHooks('beforeCopy', data, this.copyableRanges, copiedHeadersCount);
+    const copyClipboardData = new CopyClipboardData(this.hot, this.copyableRanges);
+    const allowCopying = !!this.hot.runHooks('beforeCopy', copyClipboardData);
     if (allowCopying) {
-      const textPlain = stringify(data);
-      if (event && event.clipboardData) {
-        const textHTML = _dataToHTML(data, this.hot.rootDocument);
-        event.clipboardData.setData('text/plain', textPlain);
-        event.clipboardData.setData('text/html', [META_HEAD, textHTML].join(''));
-      } else if (typeof ClipboardEvent === 'undefined') {
-        this.hot.rootWindow.clipboardData.setData('Text', textPlain);
-      }
-      this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
+      event.clipboardData.setData('text/plain', stringify(copyClipboardData.getData()));
+      event.clipboardData.setData('text/html', [copyClipboardData.getType() === 'handsontable' ? META_HEAD : '', getHTMLFromConfig(copyClipboardData.getMetaInfo())].join(''));
+      this.hot.runHooks('afterCopy', copyClipboardData);
     }
     _classPrivateFieldSet(this, _copyMode, 'cells-only');
     event.preventDefault();
@@ -588,7 +575,7 @@ export class CopyPaste extends BasePlugin {
   /**
    * `cut` event callback on textarea element.
    *
-   * @param {Event} event ClipboardEvent.
+   * @param {ClipboardEvent} event ClipboardEvent.
    * @private
    */
   onCut(event) {
@@ -597,19 +584,13 @@ export class CopyPaste extends BasePlugin {
     }
     this.setCopyableText();
     _classPrivateFieldSet(this, _isTriggeredByCut, false);
-    const rangedData = this.getRangedData(this.copyableRanges);
-    const allowCuttingOut = !!this.hot.runHooks('beforeCut', rangedData, this.copyableRanges);
+    const copyClipboardData = new CopyClipboardData(this.hot, this.copyableRanges);
+    const allowCuttingOut = !!this.hot.runHooks('beforeCut', copyClipboardData);
     if (allowCuttingOut) {
-      const textPlain = stringify(rangedData);
-      if (event && event.clipboardData) {
-        const textHTML = _dataToHTML(rangedData, this.hot.rootDocument);
-        event.clipboardData.setData('text/plain', textPlain);
-        event.clipboardData.setData('text/html', [META_HEAD, textHTML].join(''));
-      } else if (typeof ClipboardEvent === 'undefined') {
-        this.hot.rootWindow.clipboardData.setData('Text', textPlain);
-      }
+      event.clipboardData.setData('text/plain', stringify(copyClipboardData.getData()));
+      event.clipboardData.setData('text/html', [copyClipboardData.getType() === 'handsontable' ? META_HEAD : '', getHTMLFromConfig(copyClipboardData.getMetaInfo())].join(''));
       this.hot.emptySelectedCells('CopyPaste.cut');
-      this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
+      this.hot.runHooks('afterCut', copyClipboardData);
     }
     event.preventDefault();
   }
@@ -621,40 +602,28 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened()) {
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
       return;
     }
     if (event && event.preventDefault) {
       event.preventDefault();
     }
-    let pastedData;
-    if (event && typeof event.clipboardData !== 'undefined') {
-      const textHTML = sanitize(event.clipboardData.getData('text/html'), {
-        ADD_TAGS: ['meta'],
-        ADD_ATTR: ['content'],
-        FORCE_BODY: true
-      });
-      if (textHTML && /(<table)|(<TABLE)/g.test(textHTML)) {
-        const parsedConfig = htmlToGridSettings(textHTML, this.hot.rootDocument);
-        pastedData = parsedConfig.data;
-      } else {
-        pastedData = event.clipboardData.getData('text/plain');
-      }
-    } else if (typeof ClipboardEvent === 'undefined' && typeof this.hot.rootWindow.clipboardData !== 'undefined') {
-      pastedData = this.hot.rootWindow.clipboardData.getData('Text');
-    }
-    if (typeof pastedData === 'string') {
-      pastedData = parse(pastedData);
-    }
-    if (pastedData && pastedData.length === 0) {
+    const html = sanitize(event.clipboardData.getData('text/html'), {
+      ADD_TAGS: ['meta'],
+      ADD_ATTR: ['content'],
+      FORCE_BODY: true
+    });
+    const pasteClipboardData = new PasteClipboardData(event.clipboardData.getData('text/plain'), html);
+    if (this.hot.runHooks('beforePaste', pasteClipboardData) === false) {
       return;
     }
-    if (this.hot.runHooks('beforePaste', pastedData, this.copyableRanges) === false) {
+    const pastedTable = pasteClipboardData.getData();
+    if (pastedTable.length === 0) {
       return;
     }
-    const [startRow, startColumn, endRow, endColumn] = this.populateValues(pastedData);
+    const [startRow, startColumn, endRow, endColumn] = this.populateValues(pastedTable);
     this.hot.selectCell(startRow, startColumn, Math.min(this.hot.countRows() - 1, endRow), Math.min(this.hot.countCols() - 1, endColumn));
-    this.hot.runHooks('afterPaste', pastedData, this.copyableRanges);
+    this.hot.runHooks('afterPaste', pasteClipboardData);
   }
 
   /**
@@ -679,21 +648,6 @@ export class CopyPaste extends BasePlugin {
     options.items.push(cutItem(this));
   }
 
-  /**
-   * Force focus on focusableElement.
-   *
-   * @private
-   */
-  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.
    *
@@ -703,55 +657,96 @@ export class CopyPaste extends BasePlugin {
     if (this.isEditorOpened()) {
       return;
     }
-    this.getOrCreateFocusableElement();
-    if (this.hot.getSettings().fragmentSelection && this.focusableElement.getFocusableElement() !== this.hot.rootDocument.activeElement && getSelectionText()) {
+    if (this.hot.getSettings().fragmentSelection) {
       return;
     }
     this.setCopyableText();
-    this.focusableElement.focus();
   }
 
   /**
-   * `beforeKeyDown` listener to force focus of focusableElement.
+   * `document.body` `mouseenter` callback used to work around a Safari's problem with copying/cutting from the
+   * browser's menu.
    *
    * @private
    */
-  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();
+  onSafariMouseEnter() {
+    _classPrivateMethodGet(this, _removeContentEditableFromHighlightedCell, _removeContentEditableFromHighlightedCell2).call(this);
+  }
+
+  /**
+   * `document.body` `mouseleave` callback used to work around a Safari's problem with copying/cutting from the
+   * browser's menu.
+   *
+   * @private
+   */
+  onSafariMouseLeave() {
+    _classPrivateMethodGet(this, _addContentEditableToHighlightedCell, _addContentEditableToHighlightedCell2).call(this);
+  }
+
+  /**
+   * `afterSelection` hook callback triggered only on Safari.
+   *
+   * @private
+   */
+  onSafariAfterSelection() {
+    _classPrivateMethodGet(this, _removeContentEditableFromHighlightedCell, _removeContentEditableFromHighlightedCell2).call(this);
   }
 
   /**
    * Destroys the `CopyPaste` plugin instance.
    */
   destroy() {
-    if (this.focusableElement) {
-      destroyElement(this.focusableElement);
-      this.focusableElement = null;
-    }
     super.destroy();
   }
 }
-function _countCopiedHeaders2(ranges) {
-  const {
-    rows
-  } = normalizeRanges(ranges);
-  let columnHeadersCount = 0;
-  for (let row = 0; row < rows.length; row++) {
-    if (rows[row] >= 0) {
-      break;
+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);
+        });
+      }
+    }
+  } else {
+    this.hot.rootDocument.execCommand(eventName);
+  }
+}
+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);
+      }
     }
-    columnHeadersCount += 1;
   }
-  return {
-    columnHeadersCount
-  };
 }

package/plugins/customBorders/contextMenuItem/bottom.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports.default = bottom;
 var C = _interopRequireWildcard(require("../../../i18n/constants"));
 var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @param {CustomBorders} customBordersPlugin The plugin instance.
  * @returns {object}

package/plugins/customBorders/contextMenuItem/left.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports.default = left;
 var C = _interopRequireWildcard(require("../../../i18n/constants"));
 var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @param {CustomBorders} customBordersPlugin The plugin instance.
  * @returns {object}

package/plugins/customBorders/contextMenuItem/noBorders.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports.default = noBorders;
 var C = _interopRequireWildcard(require("../../../i18n/constants"));
 var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @param {CustomBorders} customBordersPlugin The plugin instance.
  * @returns {object}

package/plugins/customBorders/contextMenuItem/right.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports.default = right;
 var C = _interopRequireWildcard(require("../../../i18n/constants"));
 var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @param {CustomBorders} customBordersPlugin The plugin instance.
  * @returns {object}

package/plugins/customBorders/contextMenuItem/top.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports.default = top;
 var C = _interopRequireWildcard(require("../../../i18n/constants"));
 var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @param {CustomBorders} customBordersPlugin The plugin instance.
  * @returns {object}