handsontable 0.0.0-next-deccb4d-20240618 → 0.0.0-next-3c01700-20240619

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-deccb4d-20240618";
+  const hotVersion = "0.0.0-next-3c01700-20240619";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-deccb4d-20240618";
+  const hotVersion = "0.0.0-next-3c01700-20240619";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-deccb4d-20240618",
+  "version": "0.0.0-next-3c01700-20240619",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/plugins/columnSorting/columnSorting.js

@@ -199,6 +199,7 @@ class ColumnSorting extends _base.BasePlugin {
       if (this.indexesSequenceCache !== null) {
         this.hot.rowIndexMapper.setIndexesSequence(this.indexesSequenceCache.getValues());
         this.hot.rowIndexMapper.unregisterMap(this.pluginKey);
+        this.indexesSequenceCache = null;
       }
     }, true);
     this.hot.columnIndexMapper.unregisterMap(`${this.pluginKey}.columnMeta`);
@@ -586,8 +587,8 @@ class ColumnSorting extends _base.BasePlugin {
    * @private
    */
   sortByPresetSortStates(sortConfigs) {
+    this.hot.rowIndexMapper.setIndexesSequence(this.indexesSequenceCache.getValues());
     if (sortConfigs.length === 0) {
-      this.hot.rowIndexMapper.setIndexesSequence(this.indexesSequenceCache.getValues());
       return;
     }
     const indexesWithData = [];

package/plugins/columnSorting/columnSorting.mjs

@@ -195,6 +195,7 @@ export class ColumnSorting extends BasePlugin {
       if (this.indexesSequenceCache !== null) {
         this.hot.rowIndexMapper.setIndexesSequence(this.indexesSequenceCache.getValues());
         this.hot.rowIndexMapper.unregisterMap(this.pluginKey);
+        this.indexesSequenceCache = null;
       }
     }, true);
     this.hot.columnIndexMapper.unregisterMap(`${this.pluginKey}.columnMeta`);
@@ -582,8 +583,8 @@ export class ColumnSorting extends BasePlugin {
    * @private
    */
   sortByPresetSortStates(sortConfigs) {
+    this.hot.rowIndexMapper.setIndexesSequence(this.indexesSequenceCache.getValues());
     if (sortConfigs.length === 0) {
-      this.hot.rowIndexMapper.setIndexesSequence(this.indexesSequenceCache.getValues());
       return;
     }
     const indexesWithData = [];

package/plugins/comments/commentEditor.js

@@ -3,15 +3,28 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 var _element = require("../../helpers/dom/element");
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _object = require("../../helpers/object");
+var _localHooks = _interopRequireDefault(require("../../mixins/localHooks"));
+var _editorResizeObserver = require("./editorResizeObserver");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 /**
  * Comment editor for the Comments plugin.
  *
  * @private
  * @class CommentEditor
  */
+var _rootDocument = /*#__PURE__*/new WeakMap();
+var _isRtl = /*#__PURE__*/new WeakMap();
+var _container = /*#__PURE__*/new WeakMap();
+var _editor = /*#__PURE__*/new WeakMap();
+var _editorStyle = /*#__PURE__*/new WeakMap();
+var _hidden = /*#__PURE__*/new WeakMap();
+var _resizeObserver = /*#__PURE__*/new WeakMap();
 class CommentEditor {
   static get CLASS_EDITOR_CONTAINER() {
     return 'htCommentsContainer';
@@ -27,35 +40,47 @@ class CommentEditor {
   }
 
   /**
-   * @type {HTMLDocument}
+   * @type {Document}
    */
 
   constructor(rootDocument, isRtl) {
-    _defineProperty(this, "rootDocument", void 0);
+    var _this = this;
+    _classPrivateFieldInitSpec(this, _rootDocument, void 0);
     /**
      * @type {boolean}
      */
-    _defineProperty(this, "isRtl", false);
+    _classPrivateFieldInitSpec(this, _isRtl, false);
     /**
      * @type {HTMLElement}
      */
-    _defineProperty(this, "container", null);
+    _classPrivateFieldInitSpec(this, _container, null);
     /**
      * @type {HTMLElement}
      */
-    _defineProperty(this, "editor", void 0);
+    _classPrivateFieldInitSpec(this, _editor, void 0);
     /**
      * @type {CSSStyleDeclaration}
      */
-    _defineProperty(this, "editorStyle", void 0);
+    _classPrivateFieldInitSpec(this, _editorStyle, void 0);
     /**
      * @type {boolean}
      */
-    _defineProperty(this, "hidden", true);
-    this.rootDocument = rootDocument;
-    this.isRtl = isRtl;
-    this.editor = this.createEditor();
-    this.editorStyle = this.editor.style;
+    _classPrivateFieldInitSpec(this, _hidden, true);
+    /**
+     * @type {EditorResizeObserver}
+     */
+    _classPrivateFieldInitSpec(this, _resizeObserver, new _editorResizeObserver.EditorResizeObserver());
+    _classPrivateFieldSet(_rootDocument, this, rootDocument);
+    _classPrivateFieldSet(_isRtl, this, isRtl);
+    _classPrivateFieldSet(_editor, this, this.createEditor());
+    _classPrivateFieldSet(_editorStyle, this, _classPrivateFieldGet(_editor, this).style);
+    _classPrivateFieldGet(_resizeObserver, this).setObservedElement(this.getInputElement());
+    _classPrivateFieldGet(_resizeObserver, this).addLocalHook('resize', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _this.runLocalHooks('resize', ...args);
+    });
     this.hide();
   }
 
@@ -66,8 +91,8 @@ class CommentEditor {
    * @param {number} y Y position (in pixels).
    */
   setPosition(x, y) {
-    this.editorStyle.left = `${x}px`;
-    this.editorStyle.top = `${y}px`;
+    _classPrivateFieldGet(_editorStyle, this).left = `${x}px`;
+    _classPrivateFieldGet(_editorStyle, this).top = `${y}px`;
   }
 
   /**
@@ -96,6 +121,13 @@ class CommentEditor {
     };
   }
 
+  /**
+   * Starts observing the editor size.
+   */
+  observeSize() {
+    _classPrivateFieldGet(_resizeObserver, this).observe();
+  }
+
   /**
    * Reset the editor size to its initial state.
    */
@@ -119,18 +151,19 @@ class CommentEditor {
    * Show the comments editor.
    */
   show() {
-    this.editorStyle.display = 'block';
-    this.hidden = false;
+    _classPrivateFieldGet(_editorStyle, this).display = 'block';
+    _classPrivateFieldSet(_hidden, this, false);
   }
 
   /**
    * Hide the comments editor.
    */
   hide() {
-    if (!this.hidden) {
-      this.editorStyle.display = 'none';
+    _classPrivateFieldGet(_resizeObserver, this).unobserve();
+    if (!_classPrivateFieldGet(_hidden, this)) {
+      _classPrivateFieldGet(_editorStyle, this).display = 'none';
     }
-    this.hidden = true;
+    _classPrivateFieldSet(_hidden, this, true);
   }
 
   /**
@@ -139,7 +172,7 @@ class CommentEditor {
    * @returns {boolean}
    */
   isVisible() {
-    return this.editorStyle.display === 'block';
+    return _classPrivateFieldGet(_editorStyle, this).display === 'block';
   }
 
   /**
@@ -168,7 +201,7 @@ class CommentEditor {
    * @returns {boolean}
    */
   isFocused() {
-    return this.rootDocument.activeElement === this.getInputElement();
+    return _classPrivateFieldGet(_rootDocument, this).activeElement === this.getInputElement();
   }
 
   /**
@@ -184,18 +217,18 @@ class CommentEditor {
    * @returns {HTMLElement}
    */
   createEditor() {
-    const editor = this.rootDocument.createElement('div');
-    const textArea = this.rootDocument.createElement('textarea');
+    const editor = _classPrivateFieldGet(_rootDocument, this).createElement('div');
+    const textarea = _classPrivateFieldGet(_rootDocument, this).createElement('textarea');
     editor.style.display = 'none';
-    this.container = this.rootDocument.createElement('div');
-    this.container.setAttribute('dir', this.isRtl ? 'rtl' : 'ltr');
-    (0, _element.addClass)(this.container, CommentEditor.CLASS_EDITOR_CONTAINER);
-    this.rootDocument.body.appendChild(this.container);
+    _classPrivateFieldSet(_container, this, _classPrivateFieldGet(_rootDocument, this).createElement('div'));
+    _classPrivateFieldGet(_container, this).setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
+    (0, _element.addClass)(_classPrivateFieldGet(_container, this), CommentEditor.CLASS_EDITOR_CONTAINER);
+    _classPrivateFieldGet(_rootDocument, this).body.appendChild(_classPrivateFieldGet(_container, this));
     (0, _element.addClass)(editor, CommentEditor.CLASS_EDITOR);
-    (0, _element.addClass)(textArea, CommentEditor.CLASS_INPUT);
-    textArea.setAttribute('data-hot-input', true);
-    editor.appendChild(textArea);
-    this.container.appendChild(editor);
+    (0, _element.addClass)(textarea, CommentEditor.CLASS_INPUT);
+    textarea.setAttribute('data-hot-input', true);
+    editor.appendChild(textarea);
+    _classPrivateFieldGet(_container, this).appendChild(editor);
     return editor;
   }
 
@@ -205,20 +238,22 @@ class CommentEditor {
    * @returns {HTMLElement}
    */
   getInputElement() {
-    return this.editor.querySelector(`.${CommentEditor.CLASS_INPUT}`);
+    return _classPrivateFieldGet(_editor, this).querySelector(`.${CommentEditor.CLASS_INPUT}`);
   }
 
   /**
    * Destroy the comments editor.
    */
   destroy() {
-    const containerParentElement = this.container ? this.container.parentNode : null;
-    this.editor.parentNode.removeChild(this.editor);
-    this.editor = null;
-    this.editorStyle = null;
+    const containerParentElement = _classPrivateFieldGet(_container, this) ? _classPrivateFieldGet(_container, this).parentNode : null;
+    _classPrivateFieldGet(_editor, this).parentNode.removeChild(_classPrivateFieldGet(_editor, this));
+    _classPrivateFieldSet(_editor, this, null);
+    _classPrivateFieldSet(_editorStyle, this, null);
+    _classPrivateFieldGet(_resizeObserver, this).destroy();
     if (containerParentElement) {
-      containerParentElement.removeChild(this.container);
+      containerParentElement.removeChild(_classPrivateFieldGet(_container, this));
     }
   }
 }
+(0, _object.mixin)(CommentEditor, _localHooks.default);
 var _default = exports.default = CommentEditor;

package/plugins/comments/commentEditor.mjs

@@ -1,14 +1,26 @@
 import "core-js/modules/es.error.cause.js";
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 import { addClass, outerWidth, outerHeight } from "../../helpers/dom/element.mjs";
+import { mixin } from "../../helpers/object.mjs";
+import localHooks from "../../mixins/localHooks.mjs";
+import { EditorResizeObserver } from "./editorResizeObserver.mjs";
 /**
  * Comment editor for the Comments plugin.
  *
  * @private
  * @class CommentEditor
  */
+var _rootDocument = /*#__PURE__*/new WeakMap();
+var _isRtl = /*#__PURE__*/new WeakMap();
+var _container = /*#__PURE__*/new WeakMap();
+var _editor = /*#__PURE__*/new WeakMap();
+var _editorStyle = /*#__PURE__*/new WeakMap();
+var _hidden = /*#__PURE__*/new WeakMap();
+var _resizeObserver = /*#__PURE__*/new WeakMap();
 class CommentEditor {
   static get CLASS_EDITOR_CONTAINER() {
     return 'htCommentsContainer';
@@ -24,35 +36,47 @@ class CommentEditor {
   }
 
   /**
-   * @type {HTMLDocument}
+   * @type {Document}
    */
 
   constructor(rootDocument, isRtl) {
-    _defineProperty(this, "rootDocument", void 0);
+    var _this = this;
+    _classPrivateFieldInitSpec(this, _rootDocument, void 0);
     /**
      * @type {boolean}
      */
-    _defineProperty(this, "isRtl", false);
+    _classPrivateFieldInitSpec(this, _isRtl, false);
     /**
      * @type {HTMLElement}
      */
-    _defineProperty(this, "container", null);
+    _classPrivateFieldInitSpec(this, _container, null);
     /**
      * @type {HTMLElement}
      */
-    _defineProperty(this, "editor", void 0);
+    _classPrivateFieldInitSpec(this, _editor, void 0);
     /**
      * @type {CSSStyleDeclaration}
      */
-    _defineProperty(this, "editorStyle", void 0);
+    _classPrivateFieldInitSpec(this, _editorStyle, void 0);
     /**
      * @type {boolean}
      */
-    _defineProperty(this, "hidden", true);
-    this.rootDocument = rootDocument;
-    this.isRtl = isRtl;
-    this.editor = this.createEditor();
-    this.editorStyle = this.editor.style;
+    _classPrivateFieldInitSpec(this, _hidden, true);
+    /**
+     * @type {EditorResizeObserver}
+     */
+    _classPrivateFieldInitSpec(this, _resizeObserver, new EditorResizeObserver());
+    _classPrivateFieldSet(_rootDocument, this, rootDocument);
+    _classPrivateFieldSet(_isRtl, this, isRtl);
+    _classPrivateFieldSet(_editor, this, this.createEditor());
+    _classPrivateFieldSet(_editorStyle, this, _classPrivateFieldGet(_editor, this).style);
+    _classPrivateFieldGet(_resizeObserver, this).setObservedElement(this.getInputElement());
+    _classPrivateFieldGet(_resizeObserver, this).addLocalHook('resize', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _this.runLocalHooks('resize', ...args);
+    });
     this.hide();
   }
 
@@ -63,8 +87,8 @@ class CommentEditor {
    * @param {number} y Y position (in pixels).
    */
   setPosition(x, y) {
-    this.editorStyle.left = `${x}px`;
-    this.editorStyle.top = `${y}px`;
+    _classPrivateFieldGet(_editorStyle, this).left = `${x}px`;
+    _classPrivateFieldGet(_editorStyle, this).top = `${y}px`;
   }
 
   /**
@@ -93,6 +117,13 @@ class CommentEditor {
     };
   }
 
+  /**
+   * Starts observing the editor size.
+   */
+  observeSize() {
+    _classPrivateFieldGet(_resizeObserver, this).observe();
+  }
+
   /**
    * Reset the editor size to its initial state.
    */
@@ -116,18 +147,19 @@ class CommentEditor {
    * Show the comments editor.
    */
   show() {
-    this.editorStyle.display = 'block';
-    this.hidden = false;
+    _classPrivateFieldGet(_editorStyle, this).display = 'block';
+    _classPrivateFieldSet(_hidden, this, false);
   }
 
   /**
    * Hide the comments editor.
    */
   hide() {
-    if (!this.hidden) {
-      this.editorStyle.display = 'none';
+    _classPrivateFieldGet(_resizeObserver, this).unobserve();
+    if (!_classPrivateFieldGet(_hidden, this)) {
+      _classPrivateFieldGet(_editorStyle, this).display = 'none';
     }
-    this.hidden = true;
+    _classPrivateFieldSet(_hidden, this, true);
   }
 
   /**
@@ -136,7 +168,7 @@ class CommentEditor {
    * @returns {boolean}
    */
   isVisible() {
-    return this.editorStyle.display === 'block';
+    return _classPrivateFieldGet(_editorStyle, this).display === 'block';
   }
 
   /**
@@ -165,7 +197,7 @@ class CommentEditor {
    * @returns {boolean}
    */
   isFocused() {
-    return this.rootDocument.activeElement === this.getInputElement();
+    return _classPrivateFieldGet(_rootDocument, this).activeElement === this.getInputElement();
   }
 
   /**
@@ -181,18 +213,18 @@ class CommentEditor {
    * @returns {HTMLElement}
    */
   createEditor() {
-    const editor = this.rootDocument.createElement('div');
-    const textArea = this.rootDocument.createElement('textarea');
+    const editor = _classPrivateFieldGet(_rootDocument, this).createElement('div');
+    const textarea = _classPrivateFieldGet(_rootDocument, this).createElement('textarea');
     editor.style.display = 'none';
-    this.container = this.rootDocument.createElement('div');
-    this.container.setAttribute('dir', this.isRtl ? 'rtl' : 'ltr');
-    addClass(this.container, CommentEditor.CLASS_EDITOR_CONTAINER);
-    this.rootDocument.body.appendChild(this.container);
+    _classPrivateFieldSet(_container, this, _classPrivateFieldGet(_rootDocument, this).createElement('div'));
+    _classPrivateFieldGet(_container, this).setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
+    addClass(_classPrivateFieldGet(_container, this), CommentEditor.CLASS_EDITOR_CONTAINER);
+    _classPrivateFieldGet(_rootDocument, this).body.appendChild(_classPrivateFieldGet(_container, this));
     addClass(editor, CommentEditor.CLASS_EDITOR);
-    addClass(textArea, CommentEditor.CLASS_INPUT);
-    textArea.setAttribute('data-hot-input', true);
-    editor.appendChild(textArea);
-    this.container.appendChild(editor);
+    addClass(textarea, CommentEditor.CLASS_INPUT);
+    textarea.setAttribute('data-hot-input', true);
+    editor.appendChild(textarea);
+    _classPrivateFieldGet(_container, this).appendChild(editor);
     return editor;
   }
 
@@ -202,20 +234,22 @@ class CommentEditor {
    * @returns {HTMLElement}
    */
   getInputElement() {
-    return this.editor.querySelector(`.${CommentEditor.CLASS_INPUT}`);
+    return _classPrivateFieldGet(_editor, this).querySelector(`.${CommentEditor.CLASS_INPUT}`);
   }
 
   /**
    * Destroy the comments editor.
    */
   destroy() {
-    const containerParentElement = this.container ? this.container.parentNode : null;
-    this.editor.parentNode.removeChild(this.editor);
-    this.editor = null;
-    this.editorStyle = null;
+    const containerParentElement = _classPrivateFieldGet(_container, this) ? _classPrivateFieldGet(_container, this).parentNode : null;
+    _classPrivateFieldGet(_editor, this).parentNode.removeChild(_classPrivateFieldGet(_editor, this));
+    _classPrivateFieldSet(_editor, this, null);
+    _classPrivateFieldSet(_editorStyle, this, null);
+    _classPrivateFieldGet(_resizeObserver, this).destroy();
     if (containerParentElement) {
-      containerParentElement.removeChild(this.container);
+      containerParentElement.removeChild(_classPrivateFieldGet(_container, this));
     }
   }
 }
+mixin(CommentEditor, localHooks);
 export default CommentEditor;

package/plugins/comments/comments.js

@@ -126,7 +126,6 @@ var _editor = /*#__PURE__*/new WeakMap();
 var _displaySwitch = /*#__PURE__*/new WeakMap();
 var _preventEditorAutoSwitch = /*#__PURE__*/new WeakMap();
 var _preventEditorHiding = /*#__PURE__*/new WeakMap();
-var _tempEditorDimensions = /*#__PURE__*/new WeakMap();
 var _cellBelowCursor = /*#__PURE__*/new WeakMap();
 var _commentValueBeforeSave = /*#__PURE__*/new WeakMap();
 var _Comments_brand = /*#__PURE__*/new WeakSet();
@@ -174,13 +173,6 @@ class Comments extends _base.BasePlugin {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _preventEditorHiding, false);
-    /**
-     * The property for holding editor dimensions for further processing.
-     *
-     * @private
-     * @type {object}
-     */
-    _classPrivateFieldInitSpec(this, _tempEditorDimensions, {});
     /**
      * The flag that allows processing mousedown event correctly when comments editor is triggered.
      *
@@ -216,11 +208,18 @@ class Comments extends _base.BasePlugin {
    * Enables the plugin functionality for this Handsontable instance.
    */
   enablePlugin() {
+    var _this = this;
     if (this.enabled) {
       return;
     }
     if (!_classPrivateFieldGet(_editor, this)) {
       _classPrivateFieldSet(_editor, this, new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl()));
+      _classPrivateFieldGet(_editor, this).addLocalHook('resize', function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return _assertClassBrand(_Comments_brand, _this, _onEditorResize).call(_this, ...args);
+      });
     }
     if (!_classPrivateFieldGet(_displaySwitch, this)) {
       _classPrivateFieldSet(_displaySwitch, this, new _displaySwitch2.default(this.getDisplayDelaySetting()));
@@ -332,8 +331,6 @@ class Comments extends _base.BasePlugin {
     this.eventManager.addEventListener(rootDocument, 'mouseup', () => _assertClassBrand(_Comments_brand, this, _onMouseUp).call(this));
     this.eventManager.addEventListener(editorElement, 'focus', () => _assertClassBrand(_Comments_brand, this, _onEditorFocus).call(this));
     this.eventManager.addEventListener(editorElement, 'blur', () => _assertClassBrand(_Comments_brand, this, _onEditorBlur).call(this));
-    this.eventManager.addEventListener(editorElement, 'mousedown', event => _assertClassBrand(_Comments_brand, this, _onEditorMouseDown).call(this, event));
-    this.eventManager.addEventListener(editorElement, 'mouseup', event => _assertClassBrand(_Comments_brand, this, _onEditorMouseUp).call(this, event));
   }
 
   /**
@@ -607,6 +604,7 @@ class Comments extends _base.BasePlugin {
     }
     _classPrivateFieldGet(_editor, this).setPosition(x, y);
     _classPrivateFieldGet(_editor, this).setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY));
+    _classPrivateFieldGet(_editor, this).observeSize();
   }
 
   /**
@@ -689,12 +687,9 @@ class Comments extends _base.BasePlugin {
    * Destroys the plugin instance.
    */
   destroy() {
-    if (_classPrivateFieldGet(_editor, this)) {
-      _classPrivateFieldGet(_editor, this).destroy();
-    }
-    if (_classPrivateFieldGet(_displaySwitch, this)) {
-      _classPrivateFieldGet(_displaySwitch, this).destroy();
-    }
+    var _classPrivateFieldGet2, _classPrivateFieldGet3;
+    (_classPrivateFieldGet2 = _classPrivateFieldGet(_editor, this)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.destroy();
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_displaySwitch, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
     super.destroy();
   }
 }
@@ -770,33 +765,19 @@ function _onEditorFocus() {
   this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
 }
 /**
- * `mousedown` hook. Along with `onEditorMouseUp` used to simulate the textarea resizing event.
+ * Saves the comments editor size to the cell meta.
  *
- * @param {MouseEvent} event The `mousedown` event.
+ * @param {number} width The new width of the editor.
+ * @param {number} height The new height of the editor.
  */
-function _onEditorMouseDown(event) {
-  _classPrivateFieldSet(_tempEditorDimensions, this, {
-    width: (0, _element.outerWidth)(event.target),
-    height: (0, _element.outerHeight)(event.target)
+function _onEditorResize(width, height) {
+  this.updateCommentMeta(this.range.from.row, this.range.from.col, {
+    [META_STYLE]: {
+      width,
+      height
+    }
   });
 }
-/**
- * `mouseup` hook. Along with `onEditorMouseDown` used to simulate the textarea resizing event.
- *
- * @param {MouseEvent} event The `mouseup` event.
- */
-function _onEditorMouseUp(event) {
-  const currentWidth = (0, _element.outerWidth)(event.target);
-  const currentHeight = (0, _element.outerHeight)(event.target);
-  if (currentWidth !== _classPrivateFieldGet(_tempEditorDimensions, this).width + 1 || currentHeight !== _classPrivateFieldGet(_tempEditorDimensions, this).height + 2) {
-    this.updateCommentMeta(this.range.from.row, this.range.from.col, {
-      [META_STYLE]: {
-        width: currentWidth,
-        height: currentHeight
-      }
-    });
-  }
-}
 /**
  * Observes the pressed keys and if there is already opened the comment editor prevents open
  * the table editor into the fast edit mode.