handsontable 0.0.0-next-a1e4b4f-20230628 → 0.0.0-next-e697250-20230707

package/plugins/comments/comments.mjs

@@ -1,10 +1,24 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-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; }
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.weak-map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.symbol.to-primitive.js";
+import "core-js/modules/es.date.to-primitive.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.set-prototype-of.js";
+import "core-js/modules/es.object.get-prototype-of.js";
+import "core-js/modules/es.reflect.construct.js";
+import "core-js/modules/es.reflect.get.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.symbol.iterator.js";
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-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 _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -14,37 +28,35 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/es.weak-map.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.object.set-prototype-of.js";
-import "core-js/modules/es.object.get-prototype-of.js";
-import "core-js/modules/es.reflect.construct.js";
-import "core-js/modules/es.reflect.get.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/es.symbol.to-primitive.js";
-import "core-js/modules/es.date.to-primitive.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.number.constructor.js";
-import "core-js/modules/es.symbol.iterator.js";
+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 _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 _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+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; } }
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+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 _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 import { addClass, closest, isChildOf, hasClass, outerWidth, outerHeight } from "../../helpers/dom/element.mjs";
+import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
 import { deepClone, deepExtend, isObject } from "../../helpers/object.mjs";
 import EventManager from "../../eventManager.mjs";
 import { BasePlugin } from "../base/index.mjs";
 import CommentEditor from "./commentEditor.mjs";
-import { checkSelectionConsistency, markLabelAsSelected } from "../contextMenu/utils.mjs";
 import DisplaySwitch from "./displaySwitch.mjs";
-import * as C from "../../i18n/constants.mjs";
+import { SEPARATOR } from "../contextMenu/predefinedItems.mjs";
+import addEditCommentItem from "./contextMenuItem/addEditComment.mjs";
+import removeCommentItem from "./contextMenuItem/removeComment.mjs";
+import readOnlyCommentItem from "./contextMenuItem/readOnlyComment.mjs";
 export var PLUGIN_KEY = 'comments';
 export var PLUGIN_PRIORITY = 60;
-var privatePool = new WeakMap();
-var META_COMMENT = 'comment';
-var META_COMMENT_VALUE = 'value';
-var META_STYLE = 'style';
-var META_READONLY = 'readOnly';
+export var META_COMMENT = 'comment';
+export var META_COMMENT_VALUE = 'value';
+export var META_STYLE = 'style';
+export var META_READONLY = 'readOnly';
+var SHORTCUTS_GROUP = PLUGIN_KEY;
+var SHORTCUTS_CONTEXT_NAME = "plugin:".concat(PLUGIN_KEY);
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -136,63 +148,119 @@ var META_READONLY = 'readOnly';
  * ```
  * :::
  */
+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();
 export var Comments = /*#__PURE__*/function (_BasePlugin) {
   _inherits(Comments, _BasePlugin);
   var _super = _createSuper(Comments);
-  function Comments(hotInstance) {
+  function Comments() {
     var _this;
     _classCallCheck(this, Comments);
-    _this = _super.call(this, hotInstance);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    /**
+     * Current cell range, an object with `from` property, with `row` and `col` properties (e.q. `{from: {row: 1, col: 6}}`).
+     *
+     * @type {object}
+     */
+    _defineProperty(_assertThisInitialized(_this), "range", {});
+    /**
+     * Instance of {@link EventManager}.
+     *
+     * @protected
+     * @type {EventManager}
+     */
+    _defineProperty(_assertThisInitialized(_this), "eventManager", null);
     /**
      * Instance of {@link CommentEditor}.
      *
      * @private
      * @type {CommentEditor}
      */
-    _this.editor = null;
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _editor, {
+      writable: true,
+      value: null
+    });
     /**
      * Instance of {@link DisplaySwitch}.
      *
      * @private
      * @type {DisplaySwitch}
      */
-    _this.displaySwitch = null;
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _displaySwitch, {
+      writable: true,
+      value: null
+    });
     /**
-     * Instance of {@link EventManager}.
+     * Prevents showing/hiding editor that reacts on the logic triggered by the "mouseover" events.
      *
      * @private
-     * @type {EventManager}
+     * @type {boolean}
      */
-    _this.eventManager = null;
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _preventEditorAutoSwitch, {
+      writable: true,
+      value: false
+    });
     /**
-     * Current cell range, an object with `from` property, with `row` and `col` properties (e.q. `{from: {row: 1, col: 6}}`).
+     * Prevents hiding editor when the table viewport is scrolled and that scroll is triggered by the
+     * keyboard shortcut that insert or edits the comment.
+     *
+     * @private
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _preventEditorHiding, {
+      writable: true,
+      value: false
+    });
+    /**
+     * The property for holding editor dimensions for further processing.
      *
+     * @private
      * @type {object}
      */
-    _this.range = {};
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _tempEditorDimensions, {
+      writable: true,
+      value: {}
+    });
     /**
-     * Prevents showing/hiding editor that reacts on the logic triggered by the "mouseover" events.
+     * The flag that allows processing mousedown event correctly when comments editor is triggered.
      *
      * @private
      * @type {boolean}
      */
-    _this.preventEditorAutoSwitch = false;
-    privatePool.set(_assertThisInitialized(_this), {
-      tempEditorDimensions: {},
-      cellBelowCursor: null
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _cellBelowCursor, {
+      writable: true,
+      value: null
+    });
+    /**
+     * Holds the comment value before it's actually saved to the cell meta.
+     *
+     * @private
+     * @type {string}
+     */
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _commentValueBeforeSave, {
+      writable: true,
+      value: ''
     });
     return _this;
   }
-
-  /**
-   * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
-   * hook and if it returns `true` then the {@link Comments#enablePlugin} method is called.
-   *
-   * @returns {boolean}
-   */
   _createClass(Comments, [{
     key: "isEnabled",
-    value: function isEnabled() {
+    value:
+    /**
+     * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
+     * hook and if it returns `true` then the {@link Comments#enablePlugin} method is called.
+     *
+     * @returns {boolean}
+     */
+    function isEnabled() {
       return !!this.hot.getSettings()[PLUGIN_KEY];
     }
 
@@ -206,14 +274,14 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (this.enabled) {
         return;
       }
-      if (!this.editor) {
-        this.editor = new CommentEditor(this.hot.rootDocument, this.hot.isRtl());
+      if (!_classPrivateFieldGet(this, _editor)) {
+        _classPrivateFieldSet(this, _editor, new CommentEditor(this.hot.rootDocument, this.hot.isRtl()));
       }
       if (!this.eventManager) {
         this.eventManager = new EventManager(this);
       }
-      if (!this.displaySwitch) {
-        this.displaySwitch = new DisplaySwitch(this.getDisplayDelaySetting());
+      if (!_classPrivateFieldGet(this, _displaySwitch)) {
+        _classPrivateFieldSet(this, _displaySwitch, new DisplaySwitch(this.getDisplayDelaySetting()));
       }
       this.addHook('afterContextMenuDefaultOptions', function (options) {
         return _this2.addToContextMenu(options);
@@ -221,21 +289,22 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       this.addHook('afterRenderer', function (TD, row, col, prop, value, cellProperties) {
         return _this2.onAfterRenderer(TD, cellProperties);
       });
-      this.addHook('afterScrollHorizontally', function () {
-        return _this2.hide();
-      });
-      this.addHook('afterScrollVertically', function () {
-        return _this2.hide();
+      this.addHook('afterScroll', function () {
+        return _this2.onAfterScroll();
       });
       this.addHook('afterBeginEditing', function () {
         return _this2.hide();
       });
-      this.displaySwitch.addLocalHook('hide', function () {
+      this.addHook('afterDocumentKeyDown', function (event) {
+        return _this2.onAfterDocumentKeyDown(event);
+      });
+      _classPrivateFieldGet(this, _displaySwitch).addLocalHook('hide', function () {
         return _this2.hide();
       });
-      this.displaySwitch.addLocalHook('show', function (row, col) {
+      _classPrivateFieldGet(this, _displaySwitch).addLocalHook('show', function (row, col) {
         return _this2.showAtCell(row, col);
       });
+      this.registerShortcuts();
       this.registerListeners();
       _get(_getPrototypeOf(Comments.prototype), "enablePlugin", this).call(this);
     }
@@ -249,10 +318,8 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "updatePlugin",
     value: function updatePlugin() {
-      this.disablePlugin();
-      this.enablePlugin();
+      _classPrivateFieldGet(this, _displaySwitch).updateDelay(this.getDisplayDelaySetting());
       _get(_getPrototypeOf(Comments.prototype), "updatePlugin", this).call(this);
-      this.displaySwitch.updateDelay(this.getDisplayDelaySetting());
     }
 
     /**
@@ -261,9 +328,82 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "disablePlugin",
     value: function disablePlugin() {
+      this.unregisterShortcuts();
       _get(_getPrototypeOf(Comments.prototype), "disablePlugin", this).call(this);
     }
 
+    /**
+     * Register shortcuts responsible for toggling context menu.
+     *
+     * @private
+     */
+  }, {
+    key: "registerShortcuts",
+    value: function registerShortcuts() {
+      var _this3 = this;
+      var manager = this.hot.getShortcutManager();
+      var gridContext = manager.getContext('grid');
+      var pluginContext = manager.addContext(SHORTCUTS_CONTEXT_NAME);
+      gridContext.addShortcut({
+        keys: [['Control', 'Alt', 'M']],
+        callback: function callback() {
+          var range = _this3.hot.getSelectedRangeLast();
+          _classPrivateFieldSet(_this3, _preventEditorHiding, true);
+          _this3.hot.scrollToFocusedCell(function () {
+            _this3.setRange(range);
+            _this3.show();
+            _this3.focusEditor();
+            manager.setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+            _this3.hot._registerTimeout(function () {
+              _classPrivateFieldSet(_this3, _preventEditorHiding, false);
+            });
+          });
+        },
+        stopPropagation: true,
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte;
+          return ((_this3$hot$getSelecte = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte === void 0 ? void 0 : _this3$hot$getSelecte.highlight.isCell()) && !_classPrivateFieldGet(_this3, _editor).isVisible();
+        },
+        group: SHORTCUTS_GROUP
+      });
+      pluginContext.addShortcut({
+        keys: [['Escape']],
+        callback: function callback() {
+          _classPrivateFieldGet(_this3, _editor).setValue(_classPrivateFieldGet(_this3, _commentValueBeforeSave));
+          _this3.hide();
+          manager.setActiveContextName('grid');
+        },
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte2;
+          return ((_this3$hot$getSelecte2 = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte2 === void 0 ? void 0 : _this3$hot$getSelecte2.highlight.isCell()) && _classPrivateFieldGet(_this3, _editor).isVisible();
+        },
+        group: SHORTCUTS_GROUP
+      });
+      pluginContext.addShortcut({
+        keys: [['Control/Meta', 'Enter']],
+        callback: function callback() {
+          _this3.hide();
+          manager.setActiveContextName('grid');
+        },
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte3;
+          return ((_this3$hot$getSelecte3 = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte3 === void 0 ? void 0 : _this3$hot$getSelecte3.highlight.isCell()) && _classPrivateFieldGet(_this3, _editor).isVisible();
+        },
+        group: SHORTCUTS_GROUP
+      });
+    }
+
+    /**
+     * Unregister shortcuts responsible for toggling context menu.
+     *
+     * @private
+     */
+  }, {
+    key: "unregisterShortcuts",
+    value: function unregisterShortcuts() {
+      this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+    }
+
     /**
      * Registers all necessary DOM listeners.
      *
@@ -272,25 +412,29 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "registerListeners",
     value: function registerListeners() {
-      var _this3 = this;
+      var _this4 = this;
       var rootDocument = this.hot.rootDocument;
+      var editorElement = this.getEditorInputElement();
       this.eventManager.addEventListener(rootDocument, 'mouseover', function (event) {
-        return _this3.onMouseOver(event);
+        return _this4.onMouseOver(event);
       });
       this.eventManager.addEventListener(rootDocument, 'mousedown', function (event) {
-        return _this3.onMouseDown(event);
+        return _this4.onMouseDown(event);
       });
       this.eventManager.addEventListener(rootDocument, 'mouseup', function () {
-        return _this3.onMouseUp();
+        return _this4.onMouseUp();
+      });
+      this.eventManager.addEventListener(editorElement, 'focus', function () {
+        return _this4.onEditorFocus();
       });
-      this.eventManager.addEventListener(this.editor.getInputElement(), 'blur', function () {
-        return _this3.onEditorBlur();
+      this.eventManager.addEventListener(editorElement, 'blur', function () {
+        return _this4.onEditorBlur();
       });
-      this.eventManager.addEventListener(this.editor.getInputElement(), 'mousedown', function (event) {
-        return _this3.onEditorMouseDown(event);
+      this.eventManager.addEventListener(editorElement, 'mousedown', function (event) {
+        return _this4.onEditorMouseDown(event);
       });
-      this.eventManager.addEventListener(this.editor.getInputElement(), 'mouseup', function (event) {
-        return _this3.onEditorMouseUp(event);
+      this.eventManager.addEventListener(editorElement, 'mouseup', function (event) {
+        return _this4.onEditorMouseUp(event);
       });
     }
 
@@ -338,7 +482,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "targetIsCommentTextArea",
     value: function targetIsCommentTextArea(event) {
-      return this.editor.getInputElement() === event.target;
+      return this.getEditorInputElement() === event.target;
     }
 
     /**
@@ -352,7 +496,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (!this.range.from) {
         throw new Error('Before using this method, first set cell range (hot.getPlugin("comment").setRange())');
       }
-      var editorValue = this.editor.getValue();
+      var editorValue = _classPrivateFieldGet(this, _editor).getValue();
       var comment = '';
       if (value !== null && value !== void 0) {
         comment = value;
@@ -461,8 +605,9 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
         return false;
       }
       var meta = this.hot.getCellMeta(this.range.from.row, this.range.from.col);
-      this.editor.setValue(meta[META_COMMENT] ? meta[META_COMMENT][META_COMMENT_VALUE] : null || '');
-      this.editor.show();
+      _classPrivateFieldGet(this, _displaySwitch).cancelHiding();
+      _classPrivateFieldGet(this, _editor).setValue(meta[META_COMMENT] ? meta[META_COMMENT][META_COMMENT_VALUE] : null || '');
+      _classPrivateFieldGet(this, _editor).show();
       this.refreshEditor(true);
       return true;
     }
@@ -489,7 +634,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "hide",
     value: function hide() {
-      this.editor.hide();
+      _classPrivateFieldGet(this, _editor).hide();
     }
 
     /**
@@ -502,7 +647,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
     value: function refreshEditor() {
       var _renderableRow, _renderableColumn;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      if (!force && (!this.range.from || !this.editor.isVisible())) {
+      if (!force && (!this.range.from || !_classPrivateFieldGet(this, _editor).isVisible())) {
         return;
       }
       var _this$hot = this.hot,
@@ -518,7 +663,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
 
       // Reset the editor position to (0, 0) so the opening direction calculation wouldn't be influenced by its
       // previous position
-      this.editor.setPosition(0, 0);
+      _classPrivateFieldGet(this, _editor).setPosition(0, 0);
       if (renderableRow === null) {
         renderableRow = rowIndexMapper.getRenderableFromVisualIndex(rowIndexMapper.getNearestNotHiddenIndex(visualRow, -1));
       }
@@ -541,9 +686,9 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       }, true);
       var commentStyle = this.getCommentMeta(visualRow, visualColumn, META_STYLE);
       if (commentStyle) {
-        this.editor.setSize(commentStyle.width, commentStyle.height);
+        _classPrivateFieldGet(this, _editor).setSize(commentStyle.width, commentStyle.height);
       } else {
-        this.editor.resetSize();
+        _classPrivateFieldGet(this, _editor).resetSize();
       }
       var lastColWidth = isBeforeRenderedColumns ? 0 : wtTable.getStretchedColumnWidth(renderableColumn);
       var lastRowHeight = targetingPreviousRow && !isBeforeRenderedRows ? outerHeight(TD) : 0;
@@ -552,9 +697,9 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
         top = _TD$getBoundingClient.top,
         cellWidth = _TD$getBoundingClient.width,
         cellHeight = _TD$getBoundingClient.height;
-      var _this$editor$getSize = this.editor.getSize(),
-        editorWidth = _this$editor$getSize.width,
-        editorHeight = _this$editor$getSize.height;
+      var _classPrivateFieldGet2 = _classPrivateFieldGet(this, _editor).getSize(),
+        editorWidth = _classPrivateFieldGet2.width,
+        editorHeight = _classPrivateFieldGet2.height;
       var _this$hot$rootWindow = this.hot.rootWindow,
         innerWidth = _this$hot$rootWindow.innerWidth,
         innerHeight = _this$hot$rootWindow.innerHeight;
@@ -574,30 +719,17 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (top + editorHeight > innerHeight) {
         y -= editorHeight - cellHeight + 1;
       }
-      this.editor.setPosition(x, y);
-      this.editor.setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY));
+      _classPrivateFieldGet(this, _editor).setPosition(x, y);
+      _classPrivateFieldGet(this, _editor).setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY));
     }
 
     /**
-     * Checks if there is a comment for selected range.
-     *
-     * @private
-     * @returns {boolean}
+     * Focuses the comments editor element.
      */
   }, {
-    key: "checkSelectionCommentsConsistency",
-    value: function checkSelectionCommentsConsistency() {
-      var selected = this.hot.getSelectedRangeLast();
-      if (!selected) {
-        return false;
-      }
-      var hasComment = false;
-      var cell = selected.getTopStartCorner(); // IN EXCEL THERE IS COMMENT ONLY FOR TOP LEFT CELL IN SELECTION
-
-      if (this.getCommentMeta(cell.row, cell.col, META_COMMENT_VALUE)) {
-        hasComment = true;
-      }
-      return hasComment;
+    key: "focusEditor",
+    value: function focusEditor() {
+      _classPrivateFieldGet(this, _editor).focus();
     }
 
     /**
@@ -651,7 +783,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (!this.hot.view || !this.hot.view._wt) {
         return;
       }
-      if (!this.preventEditorAutoSwitch && !this.targetIsCommentTextArea(event)) {
+      if (!_classPrivateFieldGet(this, _preventEditorAutoSwitch) && !this.targetIsCommentTextArea(event)) {
         var eventCell = closest(event.target, 'TD', 'TBODY');
         var coordinates = null;
         if (eventCell) {
@@ -672,17 +804,16 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onMouseOver",
     value: function onMouseOver(event) {
-      var priv = privatePool.get(this);
       var rootDocument = this.hot.rootDocument;
-      if (this.preventEditorAutoSwitch || this.editor.isFocused() || hasClass(event.target, 'wtBorder') || priv.cellBelowCursor === event.target || !this.editor) {
+      if (_classPrivateFieldGet(this, _preventEditorAutoSwitch) || _classPrivateFieldGet(this, _editor).isFocused() || hasClass(event.target, 'wtBorder') || _classPrivateFieldGet(this, _cellBelowCursor) === event.target || !_classPrivateFieldGet(this, _editor)) {
         return;
       }
-      priv.cellBelowCursor = rootDocument.elementFromPoint(event.clientX, event.clientY);
+      _classPrivateFieldSet(this, _cellBelowCursor, rootDocument.elementFromPoint(event.clientX, event.clientY));
       if (this.targetIsCellWithComment(event)) {
         var range = this.hot._createCellRange(this.hot.getCoords(event.target));
-        this.displaySwitch.show(range);
+        _classPrivateFieldGet(this, _displaySwitch).show(range);
       } else if (isChildOf(event.target, rootDocument) && !this.targetIsCommentTextArea(event)) {
-        this.displaySwitch.hide();
+        _classPrivateFieldGet(this, _displaySwitch).hide();
       }
     }
 
@@ -694,7 +825,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onMouseUp",
     value: function onMouseUp() {
-      this.preventEditorAutoSwitch = false;
+      _classPrivateFieldSet(this, _preventEditorAutoSwitch, false);
     }
 
     /**
@@ -713,16 +844,33 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
     }
 
     /**
-     * `blur` event callback for the comment editor.
+     * Hook observer the "blur" event from the comments editor element. The hook clears the
+     * editor content and gives back the keyboard shortcuts control by switching to the "grid" context.
      *
      * @private
      */
   }, {
     key: "onEditorBlur",
     value: function onEditorBlur() {
+      _classPrivateFieldSet(this, _commentValueBeforeSave, '');
+      this.hot.getShortcutManager().setActiveContextName('grid');
       this.setComment();
     }
 
+    /**
+     * Hook observer the "focus" event from the comments editor element. The hook takes the control of
+     * the keyboard shortcuts by switching the context to plugins one.
+     *
+     * @private
+     */
+  }, {
+    key: "onEditorFocus",
+    value: function onEditorFocus() {
+      _classPrivateFieldSet(this, _commentValueBeforeSave, this.getComment());
+      this.hot.listen();
+      this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+    }
+
     /**
      * `mousedown` hook. Along with `onEditorMouseUp` used to simulate the textarea resizing event.
      *
@@ -732,11 +880,10 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onEditorMouseDown",
     value: function onEditorMouseDown(event) {
-      var priv = privatePool.get(this);
-      priv.tempEditorDimensions = {
+      _classPrivateFieldSet(this, _tempEditorDimensions, {
         width: outerWidth(event.target),
         height: outerHeight(event.target)
-      };
+      });
     }
 
     /**
@@ -748,10 +895,9 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onEditorMouseUp",
     value: function onEditorMouseUp(event) {
-      var priv = privatePool.get(this);
       var currentWidth = outerWidth(event.target);
       var currentHeight = outerHeight(event.target);
-      if (currentWidth !== priv.tempEditorDimensions.width + 1 || currentHeight !== priv.tempEditorDimensions.height + 2) {
+      if (currentWidth !== _classPrivateFieldGet(this, _tempEditorDimensions).width + 1 || currentHeight !== _classPrivateFieldGet(this, _tempEditorDimensions).height + 2) {
         this.updateCommentMeta(this.range.from.row, this.range.from.col, _defineProperty({}, META_STYLE, {
           width: currentWidth,
           height: currentHeight
@@ -760,137 +906,42 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
     }
 
     /**
-     * Context Menu's "Add comment" callback. Results in showing the comment editor.
+     * Observes the pressed keys and if there is already opened the comment editor prevents open
+     * the table editor into the fast edit mode.
      *
-     * @private
+     * @param {Event} event The keydown event.
      */
   }, {
-    key: "onContextMenuAddComment",
-    value: function onContextMenuAddComment() {
-      var coords = this.hot.getSelectedRangeLast();
-      this.preventEditorAutoSwitch = true;
-      this.displaySwitch.cancelHiding();
-      this.setRange({
-        from: coords.highlight
-      });
-      this.show();
-      this.hot.deselectCell();
-      this.editor.focus();
-    }
-
-    /**
-     * Context Menu's "remove comment" callback.
-     *
-     * @private
-     */
-  }, {
-    key: "onContextMenuRemoveComment",
-    value: function onContextMenuRemoveComment() {
-      var _this4 = this;
-      var coords = this.hot.getSelectedRangeLast();
-      this.preventEditorAutoSwitch = true;
-      coords.forAll(function (row, column) {
-        if (row >= 0 && column >= 0) {
-          _this4.removeCommentAtCell(row, column, false);
-        }
-      });
-      this.hot.render();
+    key: "onAfterDocumentKeyDown",
+    value: function onAfterDocumentKeyDown(event) {
+      if (_classPrivateFieldGet(this, _editor).isVisible()) {
+        stopImmediatePropagation(event);
+      }
     }
 
     /**
-     * Context Menu's "make comment read-only" callback.
-     *
-     * @private
+     * Observes the changes in the scroll position if triggered it hides the comment editor.
      */
   }, {
-    key: "onContextMenuMakeReadOnly",
-    value: function onContextMenuMakeReadOnly() {
-      var _this5 = this;
-      var coords = this.hot.getSelectedRangeLast();
-      this.preventEditorAutoSwitch = true;
-      coords.forAll(function (row, column) {
-        if (row >= 0 && column >= 0) {
-          var currentState = !!_this5.getCommentMeta(row, column, META_READONLY);
-          _this5.updateCommentMeta(row, column, _defineProperty({}, META_READONLY, !currentState));
-        }
-      });
+    key: "onAfterScroll",
+    value: function onAfterScroll() {
+      if (!_classPrivateFieldGet(this, _preventEditorHiding)) {
+        this.hide();
+      }
     }
 
     /**
      * Add Comments plugin options to the Context Menu.
      *
      * @private
-     * @param {object} defaultOptions The menu options.
+     * @param {object} options The menu options.
      */
   }, {
     key: "addToContextMenu",
-    value: function addToContextMenu(defaultOptions) {
-      var _this6 = this;
-      var isThereAnyCellRendered = function isThereAnyCellRendered() {
-        return _this6.hot.rowIndexMapper.getRenderableIndexesLength() > 0 && _this6.hot.columnIndexMapper.getRenderableIndexesLength() > 0;
-      };
-      defaultOptions.items.push({
-        name: '---------'
-      }, {
-        key: 'commentsAddEdit',
-        name: function name() {
-          if (_this6.checkSelectionCommentsConsistency()) {
-            return _this6.hot.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_EDIT_COMMENT);
-          }
-          return _this6.hot.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ADD_COMMENT);
-        },
-        callback: function callback() {
-          return _this6.onContextMenuAddComment();
-        },
-        disabled: function disabled() {
-          if (!isThereAnyCellRendered()) {
-            return true;
-          }
-          return !(_this6.hot.getSelectedLast() && !_this6.hot.selection.isSelectedByCorner());
-        }
-      }, {
-        key: 'commentsRemove',
-        name: function name() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_REMOVE_COMMENT);
-        },
-        callback: function callback() {
-          return _this6.onContextMenuRemoveComment();
-        },
-        disabled: function disabled() {
-          if (!isThereAnyCellRendered()) {
-            return true;
-          }
-          return !(_this6.hot.getSelectedLast() && !_this6.hot.selection.isSelectedByCorner());
-        }
-      }, {
-        key: 'commentsReadOnly',
-        name: function name() {
-          var _this7 = this;
-          var label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY_COMMENT);
-          var hasProperty = checkSelectionConsistency(this.getSelectedRangeLast(), function (row, col) {
-            var readOnlyProperty = _this7.getCellMeta(row, col)[META_COMMENT];
-            if (readOnlyProperty) {
-              readOnlyProperty = readOnlyProperty[META_READONLY];
-            }
-            if (readOnlyProperty) {
-              return true;
-            }
-          });
-          if (hasProperty) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
-        },
-        callback: function callback() {
-          return _this6.onContextMenuMakeReadOnly();
-        },
-        disabled: function disabled() {
-          if (!isThereAnyCellRendered()) {
-            return true;
-          }
-          return !(_this6.hot.getSelectedLast() && !_this6.hot.selection.isSelectedByCorner()) || !_this6.checkSelectionCommentsConsistency();
-        }
-      });
+    value: function addToContextMenu(options) {
+      options.items.push({
+        name: SEPARATOR
+      }, addEditCommentItem(this), removeCommentItem(this), readOnlyCommentItem(this));
     }
 
     /**
@@ -908,17 +959,29 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       }
     }
 
+    /**
+     * Gets the editors input element.
+     *
+     * @private
+     * @returns {HTMLTextAreaElement}
+     */
+  }, {
+    key: "getEditorInputElement",
+    value: function getEditorInputElement() {
+      return _classPrivateFieldGet(this, _editor).getInputElement();
+    }
+
     /**
      * Destroys the plugin instance.
      */
   }, {
     key: "destroy",
     value: function destroy() {
-      if (this.editor) {
-        this.editor.destroy();
+      if (_classPrivateFieldGet(this, _editor)) {
+        _classPrivateFieldGet(this, _editor).destroy();
       }
-      if (this.displaySwitch) {
-        this.displaySwitch.destroy();
+      if (_classPrivateFieldGet(this, _displaySwitch)) {
+        _classPrivateFieldGet(this, _displaySwitch).destroy();
       }
       _get(_getPrototypeOf(Comments.prototype), "destroy", this).call(this);
     }