handsontable 0.34.1 → 0.34.5

package/src/core.js

@@ -1049,7 +1049,7 @@ export default function Core(rootElement, userSettings, rootInstanceSymbol = fal
               if (result === false && cellProperties.allowInvalid === false) {
                 changes.splice(i, 1); // cancel the change
                 cellProperties.valid = true; // we cancelled the change, so cell value is still valid
-                const cell = instance.getCell(cellProperties.row, cellProperties.col);
+                const cell = instance.getCell(cellProperties.visualRow, cellProperties.visualCol);
                 removeClass(cell, instance.getSettings().invalidCellClassName);
                 --i;
               }
@@ -1305,7 +1305,10 @@ export default function Core(rootElement, userSettings, rootInstanceSymbol = fal
       document.body.focus();
     }
 
-    activeGuid = instance.guid;
+    if (instance && !instance.isListening()) {
+      activeGuid = instance.guid;
+      instance.runHooks('afterListen');
+    }
   };
 
   /**
@@ -1318,6 +1321,7 @@ export default function Core(rootElement, userSettings, rootInstanceSymbol = fal
   this.unlisten = function() {
     if (this.isListening()) {
       activeGuid = null;
+      instance.runHooks('afterUnlisten');
     }
   };
 
@@ -3058,7 +3062,6 @@ export default function Core(rootElement, userSettings, rootInstanceSymbol = fal
       selection.setRangeEnd(new CellCoords(endRow, endCol), scrollToCell);
     }
     instance.selection.finish();
-
     return true;
   };
 
@@ -3155,10 +3158,12 @@ export default function Core(rootElement, userSettings, rootInstanceSymbol = fal
     }
     dataSource = null;
 
-    const nextSibling = instance.rootElement.nextSibling;
+    if (process.env.HOT_PACKAGE_TYPE !== '\x63\x65' && isRootInstance(instance)) {
+      const licenseInfo = document.querySelector('#hot-display-license-info');
 
-    if (isRootInstance(instance) && nextSibling) {
-      instance.rootElement.parentNode.removeChild(nextSibling);
+      if (licenseInfo) {
+        licenseInfo.parentNode.removeChild(licenseInfo);
+      }
     }
     empty(instance.rootElement);
     eventManager.destroy();

package/src/css/handsontable.css

@@ -174,8 +174,7 @@
   color: #000;
 }
 
-.handsontable + .display-license-info {
-  background-color: rgba(255, 255, 255, 0.8);
+#hot-display-license-info {
   font-size: 9px;
   color: #323232 ;
   padding: 5px 0 3px 0;

package/src/helpers/dom/element.js

@@ -287,7 +287,7 @@ if (classListSupport) {
 
   _hasClass = function _hasClass(element, className) {
     // http://snipplr.com/view/3561/addclass-removeclass-hasclass/
-    return element.className !== void 0 && element.className.test(createClassNameRegExp(className));
+    return element.className !== void 0 && createClassNameRegExp(className).test(element.className);
   };
 
   _addClass = function _addClass(element, className) {
@@ -613,11 +613,12 @@ export function getScrollableElement(element) {
       }
     }
 
-    if (el.clientHeight <= el.scrollHeight && (props.indexOf(overflowY) !== -1 || props.indexOf(overflow) !== -1 ||
+    // The '+ 1' after the scrollHeight/scrollWidth is to prevent problems with zoomed out Chrome.
+    if (el.clientHeight <= el.scrollHeight + 1 && (props.indexOf(overflowY) !== -1 || props.indexOf(overflow) !== -1 ||
         props.indexOf(computedOverflow) !== -1 || props.indexOf(computedOverflowY) !== -1)) {
       return el;
     }
-    if (el.clientWidth <= el.scrollWidth && (props.indexOf(overflowX) !== -1 || props.indexOf(overflow) !== -1 ||
+    if (el.clientWidth <= el.scrollWidth + 1 && (props.indexOf(overflowX) !== -1 || props.indexOf(overflow) !== -1 ||
         props.indexOf(computedOverflow) !== -1 || props.indexOf(computedOverflowX) !== -1)) {
       return el;
     }

package/src/helpers/mixed.js

@@ -1,4 +1,4 @@
-import {addClass} from './dom/element';
+import moment from 'moment';
 import {toSingleLine} from './templateLiteralTag';
 
 /**
@@ -76,7 +76,7 @@ const _hd = (v) => parseInt(v, 16);
 const _pi = (v) => parseInt(v, 10);
 const _ss = (v, s, l) => v['\x73\x75\x62\x73\x74\x72'](s, l);
 const _cp = (v) => v['\x63\x6F\x64\x65\x50\x6F\x69\x6E\x74\x41\x74'](0) - 65;
-const _norm = (v) => v.replace(/\-/g, '');
+const _norm = (v) => `${v}`.replace(/\-/g, '');
 const _extractTime = (v) => _hd(_ss(_norm(v), _hd('12'), _cp('\x46'))) / (_hd(_ss(_norm(v), _cp('\x42'), ~~![][_m])) || 9);
 const _ignored = () => typeof location !== 'undefined' && /^([a-z0-9\-]+\.)?\x68\x61\x6E\x64\x73\x6F\x6E\x74\x61\x62\x6C\x65\x2E\x63\x6F\x6D$/i.test(location.host);
 let _notified = false;
@@ -128,7 +128,7 @@ export function _injectProductInfo(key, element) {
   if (showDomMessage && element.parentNode) {
     const message = document.createElement('div');
 
-    addClass(message, 'display-license-info');
+    message.id = 'hot-display-license-info';
     message.appendChild(document.createTextNode('Evaluation version of Handsontable Pro.'));
     message.appendChild(document.createElement('br'));
     message.appendChild(document.createTextNode('Not licensed for production use.'));

package/src/index.js

@@ -166,5 +166,4 @@ arrayHelpers.arrayEach(Object.getOwnPropertyNames(plugins), (pluginName) => {
 
 Handsontable.plugins.registerPlugin = registerPlugin;
 
-// Export Handsontable
-module.exports = Handsontable;
+export default Handsontable;

package/src/pluginHooks.js

@@ -1107,7 +1107,7 @@ const REGISTERED_HOOKS = [
   /**
    * Fired after values are pasted into table.
    *
-   * @event Hooks#afterePaste
+   * @event Hooks#afterPaste
    * @since 0.31.1
    * @param {Array} data An array of arrays which contains the pasted data.
    * @param {Array} coords An array of objects with ranges of the visual indexes (`startRow`, `startCol`, `endRow`, `endCol`)
@@ -1484,7 +1484,23 @@ const REGISTERED_HOOKS = [
    * @param {Number} row Row index of the edited cell.
    * @param {Number} column Column index of the edited cell.
    */
-  'afterBeginEditing'
+  'afterBeginEditing',
+
+  /**
+   * Fired after the listening is turned on.
+   *
+   * @event Hooks#afterListen
+   * @since 0.34.5
+   */
+  'afterListen',
+
+  /**
+   * Fired after the listening is turned off.
+   *
+   * @event Hooks#afterUnlisten
+   * @since 0.34.5
+   */
+  'afterUnlisten',
 ];
 
 class Hooks {

package/src/plugins/copyPaste/clipboardData.js

@@ -0,0 +1,11 @@
+export default class ClipboardData {
+  constructor() {
+    this.data = {};
+  }
+  setData(type, value) {
+    this.data[type] = value;
+  }
+  getData(type) {
+    return this.data[type] || void 0;
+  }
+}

package/src/plugins/copyPaste/contextMenuItem/copy.js

@@ -3,8 +3,7 @@ export default function copyItem(copyPastePlugin) {
     key: 'copy',
     name: 'Copy',
     callback() {
-      copyPastePlugin.setCopyableText();
-      copyPastePlugin.copy(true);
+      copyPastePlugin.copy();
     },
     disabled() {
       return !copyPastePlugin.hot.getSelected();

package/src/plugins/copyPaste/contextMenuItem/cut.js

@@ -3,8 +3,7 @@ export default function cutItem(copyPastePlugin) {
     key: 'cut',
     name: 'Cut',
     callback() {
-      copyPastePlugin.setCopyableText();
-      copyPastePlugin.cut(true);
+      copyPastePlugin.cut();
     },
     disabled() {
       return !copyPastePlugin.hot.getSelected();

package/src/plugins/copyPaste/copyPaste.css

@@ -1,6 +1,8 @@
 textarea#HandsontableCopyPaste {
   position: fixed !important;
-  bottom: 100% !important;
+  top: 0 !important;
   right: 100% !important;
+  overflow: hidden;
+  opacity: 0;
   outline: 0 none !important;
 }

package/src/plugins/copyPaste/copyPaste.js

@@ -2,16 +2,15 @@ import BasePlugin from './../_base.js';
 import Hooks from './../../pluginHooks';
 import SheetClip from './../../../lib/SheetClip/SheetClip';
 import {CellCoords, CellRange} from './../../3rdparty/walkontable/src';
-import {KEY_CODES, isCtrlKey} from './../../helpers/unicode';
 import {getSelectionText} from './../../helpers/dom/element';
 import {arrayEach} from './../../helpers/array';
 import {rangeEach} from './../../helpers/number';
-import {stopImmediatePropagation, stopPropagation, isImmediatePropagationStopped} from './../../helpers/dom/event';
 import {registerPlugin} from './../../plugins';
 import Textarea from './textarea';
 import copyItem from './contextMenuItem/copy';
 import cutItem from './contextMenuItem/cut';
 import EventManager from './../../eventManager';
+import PasteEvent from './pasteEvent';
 
 import './copyPaste.css';
 
@@ -94,7 +93,10 @@ class CopyPaste extends BasePlugin {
     this.textarea = void 0;
 
     privatePool.set(this, {
-      isTriggeredByPaste: false,
+      isTriggeredByCopy: false,
+      isTriggeredByCut: false,
+      isBeginEditing: false,
+      isFragmentSelectionEnabled: false,
     });
   }
 
@@ -114,10 +116,11 @@ class CopyPaste extends BasePlugin {
     if (this.enabled) {
       return;
     }
-
     const settings = this.hot.getSettings();
+    const priv = privatePool.get(this);
 
     this.textarea = Textarea.getSingleton();
+    priv.isFragmentSelectionEnabled = settings.fragmentSelection;
 
     if (typeof settings.copyPaste === 'object') {
       this.pasteMode = settings.copyPaste.pasteMode || this.pasteMode;
@@ -126,12 +129,13 @@ class CopyPaste extends BasePlugin {
     }
 
     this.addHook('afterContextMenuDefaultOptions', (options) => this.onAfterContextMenuDefaultOptions(options));
-    this.addHook('beforeKeyDown', (event) => this.onBeforeKeyDown(event));
+    this.addHook('afterSelectionEnd', () => this.onAfterSelectionEnd());
 
     this.registerEvents();
 
     super.enablePlugin();
   }
+
   /**
    * Updates the plugin to use the latest options you have specified.
    */
@@ -186,10 +190,6 @@ class CopyPaste extends BasePlugin {
 
     this.copyableRanges = this.hot.runHooks('modifyCopyableRange', this.copyableRanges);
 
-    let copyableData = this.getRangedCopyableData(this.copyableRanges);
-
-    this.textarea.setValue(copyableData);
-
     if (endRow !== finalEndRow || endCol !== finalEndCol) {
       this.hot.runHooks('afterCopyLimit', endRow - startRow + 1, endCol - startCol + 1, this.rowsLimit, this.columnsLimit);
     }
@@ -275,53 +275,26 @@ class CopyPaste extends BasePlugin {
 
   /**
    * Copy action.
-   *
-   * @param {Boolean} isTriggeredByClick Flag to determine that copy action was executed by the mouse click.
    */
-  copy(isTriggeredByClick) {
-    let rangedData = this.getRangedData(this.copyableRanges);
-
-    let allowCopying = !!this.hot.runHooks('beforeCopy', rangedData, this.copyableRanges);
-
-    if (allowCopying) {
-      this.textarea.setValue(SheetClip.stringify(rangedData));
-      this.textarea.select();
-
-      if (isTriggeredByClick) {
-        document.execCommand('copy');
-      }
+  copy() {
+    const priv = privatePool.get(this);
 
-      this.hot.runHooks('afterCopy', rangedData, this.copyableRanges);
+    priv.isTriggeredByCopy = true;
 
-    } else {
-      this.textarea.setValue('');
-    }
+    this.textarea.select();
+    document.execCommand('copy');
   }
 
   /**
    * Cut action.
-   *
-   * @param {Boolean} isTriggeredByClick Flag to determine that cut action was executed by the mouse click.
    */
-  cut(isTriggeredByClick) {
-    let rangedData = this.getRangedData(this.copyableRanges);
-
-    let allowCuttingOut = !!this.hot.runHooks('beforeCut', rangedData, this.copyableRanges);
-
-    if (allowCuttingOut) {
-      this.textarea.setValue(SheetClip.stringify(rangedData));
-      this.hot.selection.empty();
-      this.textarea.select();
-
-      if (isTriggeredByClick) {
-        document.execCommand('cut');
-      }
+  cut() {
+    const priv = privatePool.get(this);
 
-      this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
+    priv.isTriggeredByCut = true;
 
-    } else {
-      this.textarea.setValue('');
-    }
+    this.textarea.select();
+    document.execCommand('cut');
   }
 
   /**
@@ -330,10 +303,10 @@ class CopyPaste extends BasePlugin {
    * @param {String} [value=''] New value, which should be `pasted`.
    */
   paste(value = '') {
-    this.textarea.setValue(value);
+    let pasteData = new PasteEvent();
+    pasteData.clipboardData.setData('text/plain', value);
 
-    this.onPaste();
-    this.onInput();
+    this.onPaste(pasteData);
   }
 
   /**
@@ -343,58 +316,112 @@ class CopyPaste extends BasePlugin {
    */
   registerEvents() {
     this.eventManager.addEventListener(this.textarea.element, 'paste', (event) => this.onPaste(event));
-    this.eventManager.addEventListener(this.textarea.element, 'input', (event) => this.onInput(event));
+    this.eventManager.addEventListener(this.textarea.element, 'cut', (event) => this.onCut(event));
+    this.eventManager.addEventListener(this.textarea.element, 'copy', (event) => this.onCopy(event));
   }
 
   /**
-   * Trigger to make possible observe `onInput` in textarea.
+   * `copy` event callback on textarea element.
    *
+   * @param {Event} event ClipboardEvent.
    * @private
    */
-  triggerPaste() {
-    this.textarea.select();
+  onCopy(event) {
+    const priv = privatePool.get(this);
+
+    if (!this.hot.isListening() && !priv.isTriggeredByCopy) {
+      return;
+    }
+
+    this.setCopyableText();
+    priv.isTriggeredByCopy = false;
+
+    let rangedData = this.getRangedData(this.copyableRanges);
+    let allowCopying = !!this.hot.runHooks('beforeCopy', rangedData, this.copyableRanges);
+    let value = '';
+
+    if (allowCopying) {
+      value = SheetClip.stringify(rangedData);
+
+      if (event && event.clipboardData) {
+        event.clipboardData.setData('text/plain', value);
+
+      } else if (typeof ClipboardEvent === 'undefined') {
+        window.clipboardData.setData('Text', value);
+      }
+
+      this.hot.runHooks('afterCopy', rangedData, this.copyableRanges);
+    }
 
-    this.onPaste();
+    event.preventDefault();
   }
 
   /**
-   * `paste` event callback on textarea element.
+   * `cut` event callback on textarea element.
    *
+   * @param {Event} event ClipboardEvent.
    * @private
    */
-  onPaste() {
+  onCut(event) {
     const priv = privatePool.get(this);
 
-    priv.isTriggeredByPaste = true;
+    if (!this.hot.isListening() && !priv.isTriggeredByCut) {
+      return;
+    }
+
+    this.setCopyableText();
+    priv.isTriggeredByCut = false;
+
+    let rangedData = this.getRangedData(this.copyableRanges);
+    let allowCuttingOut = !!this.hot.runHooks('beforeCut', rangedData, this.copyableRanges);
+    let value;
+
+    if (allowCuttingOut) {
+      value = SheetClip.stringify(rangedData);
+
+      if (event && event.clipboardData) {
+        event.clipboardData.setData('text/plain', value);
+
+      } else if (typeof ClipboardEvent === 'undefined') {
+        window.clipboardData.setData('Text', value);
+      }
+
+      this.hot.selection.empty();
+      this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
+    }
+
+    event.preventDefault();
   }
 
   /**
-   * `input` event callback is called after `paste` event callback.
+   * `paste` event callback on textarea element.
    *
+   * @param {Event} event ClipboardEvent or pseudo ClipboardEvent, if paste was called manually.
    * @private
    */
-  onInput() {
-    const priv = privatePool.get(this);
-
-    if (!this.hot.isListening() || !priv.isTriggeredByPaste) {
+  onPaste(event) {
+    if (!this.hot.isListening()) {
       return;
     }
+    if (event && event.preventDefault) {
+      event.preventDefault();
+    }
+
+    let inputArray;
 
-    priv.isTriggeredByPaste = false;
+    if (event && typeof event.clipboardData !== 'undefined') {
+      this.textarea.setValue(event.clipboardData.getData('text/plain'));
 
-    let input,
-      inputArray,
-      selected,
-      coordsFrom,
-      coordsTo,
-      cellRange,
-      topLeftCorner,
-      bottomRightCorner,
-      areaStart,
-      areaEnd;
+    } else if (typeof ClipboardEvent === 'undefined' && typeof window.clipboardData !== 'undefined') {
+      this.textarea.setValue(window.clipboardData.getData('Text'));
+    }
+
+    inputArray = SheetClip.parse(this.textarea.getValue());
+    this.textarea.setValue(' ');
 
-    input = this.textarea.getValue();
-    inputArray = SheetClip.parse(input);
+    if (inputArray.length === 0) {
+      return;
+    }
 
     let allowPasting = !!this.hot.runHooks('beforePaste', inputArray, this.copyableRanges);
 
@@ -402,21 +429,21 @@ class CopyPaste extends BasePlugin {
       return;
     }
 
-    selected = this.hot.getSelected();
-    coordsFrom = new CellCoords(selected[0], selected[1]);
-    coordsTo = new CellCoords(selected[2], selected[3]);
-    cellRange = new CellRange(coordsFrom, coordsFrom, coordsTo);
-    topLeftCorner = cellRange.getTopLeftCorner();
-    bottomRightCorner = cellRange.getBottomRightCorner();
-    areaStart = topLeftCorner;
-    areaEnd = new CellCoords(
+    let selected = this.hot.getSelected();
+    let coordsFrom = new CellCoords(selected[0], selected[1]);
+    let coordsTo = new CellCoords(selected[2], selected[3]);
+    let cellRange = new CellRange(coordsFrom, coordsFrom, coordsTo);
+    let topLeftCorner = cellRange.getTopLeftCorner();
+    let bottomRightCorner = cellRange.getBottomRightCorner();
+    let areaStart = topLeftCorner;
+    let areaEnd = new CellCoords(
       Math.max(bottomRightCorner.row, inputArray.length - 1 + topLeftCorner.row),
       Math.max(bottomRightCorner.col, inputArray[0].length - 1 + topLeftCorner.col));
 
     let isSelRowAreaCoverInputValue = coordsTo.row - coordsFrom.row >= inputArray.length - 1;
     let isSelColAreaCoverInputValue = coordsTo.col - coordsFrom.col >= inputArray[0].length - 1;
 
-    this.hot.addHookOnce('afterChange', (changes, source) => {
+    this.hot.addHookOnce('afterChange', (changes) => {
       let changesLength = changes ? changes.length : 0;
 
       if (changesLength) {
@@ -461,57 +488,23 @@ class CopyPaste extends BasePlugin {
   }
 
   /**
-   * beforeKeyDown callback.
+   * We have to keep focus on textarea element, to make possible use of the browser tools (copy, cut, paste).
    *
    * @private
-   * @param {Event} event
    */
-  onBeforeKeyDown(event) {
-    if (!this.hot.getSelected()) {
-      return;
-    }
-    if (this.hot.getActiveEditor() && this.hot.getActiveEditor().isOpened()) {
-      return;
-    }
-    if (isImmediatePropagationStopped(event)) {
+  onAfterSelectionEnd() {
+    const priv = privatePool.get(this);
+    const editor = this.hot.getActiveEditor();
+
+    if (editor && typeof editor.isOpened !== 'undefined' && editor.isOpened()) {
       return;
     }
-    if (!this.textarea.isActive() && getSelectionText()) {
+    if (priv.isFragmentSelectionEnabled && !this.textarea.isActive() && getSelectionText()) {
       return;
     }
 
-    if (isCtrlKey(event.keyCode)) {
-      // When fragmentSelection is enabled and some text is selected then don't blur selection calling 'setCopyableText'
-      if (this.hot.getSettings().fragmentSelection && getSelectionText()) {
-        return;
-      }
-
-      // when CTRL is pressed, prepare selectable text in textarea
-      this.setCopyableText();
-      stopImmediatePropagation(event);
-
-      return;
-    }
-
-    // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
-    let ctrlDown = (event.ctrlKey || event.metaKey) && !event.altKey;
-
-    if (ctrlDown) {
-      if (event.keyCode == KEY_CODES.A) {
-        setTimeout(() => {
-          this.setCopyableText();
-        }, 0);
-      }
-      if (event.keyCode == KEY_CODES.X) {
-        this.cut();
-      }
-      if (event.keyCode == KEY_CODES.C) {
-        this.copy();
-      }
-      if (event.keyCode == KEY_CODES.V) {
-        this.triggerPaste();
-      }
-    }
+    this.setCopyableText();
+    this.textarea.select();
   }
 
   /**

package/src/plugins/copyPaste/pasteEvent.js

@@ -0,0 +1,7 @@
+import ClipboardData from './clipboardData';
+
+export default class PasteEvent {
+  constructor() {
+    this.clipboardData = new ClipboardData();
+  }
+}