handsontable 0.0.0-next-3b33ccd-20230710 → 0.0.0-next-90e205d-20230711

package/plugins/comments/comments.mjs

@@ -1,24 +1,10 @@
 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); }
-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 _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 _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); }
@@ -28,35 +14,37 @@ 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); }
-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 "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";
 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 { SEPARATOR } from "../contextMenu/predefinedItems.mjs";
-import addEditCommentItem from "./contextMenuItem/addEditComment.mjs";
-import removeCommentItem from "./contextMenuItem/removeComment.mjs";
-import readOnlyCommentItem from "./contextMenuItem/readOnlyComment.mjs";
+import * as C from "../../i18n/constants.mjs";
 export var PLUGIN_KEY = 'comments';
 export var PLUGIN_PRIORITY = 60;
-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);
+var privatePool = new WeakMap();
+var META_COMMENT = 'comment';
+var META_COMMENT_VALUE = 'value';
+var META_STYLE = 'style';
+var META_READONLY = 'readOnly';
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -148,119 +136,63 @@ var SHORTCUTS_CONTEXT_NAME = "plugin:".concat(PLUGIN_KEY);
  * ```
  * :::
  */
-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() {
+  function Comments(hotInstance) {
     var _this;
     _classCallCheck(this, Comments);
-    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);
+    _this = _super.call(this, hotInstance);
     /**
      * Instance of {@link CommentEditor}.
      *
      * @private
      * @type {CommentEditor}
      */
-    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _editor, {
-      writable: true,
-      value: null
-    });
+    _this.editor = null;
     /**
      * Instance of {@link DisplaySwitch}.
      *
      * @private
      * @type {DisplaySwitch}
      */
-    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _displaySwitch, {
-      writable: true,
-      value: null
-    });
+    _this.displaySwitch = null;
     /**
-     * Prevents showing/hiding editor that reacts on the logic triggered by the "mouseover" events.
-     *
-     * @private
-     * @type {boolean}
-     */
-    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _preventEditorAutoSwitch, {
-      writable: true,
-      value: false
-    });
-    /**
-     * Prevents hiding editor when the table viewport is scrolled and that scroll is triggered by the
-     * keyboard shortcut that insert or edits the comment.
+     * Instance of {@link EventManager}.
      *
      * @private
-     * @type {boolean}
+     * @type {EventManager}
      */
-    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _preventEditorHiding, {
-      writable: true,
-      value: false
-    });
+    _this.eventManager = null;
     /**
-     * The property for holding editor dimensions for further processing.
+     * Current cell range, an object with `from` property, with `row` and `col` properties (e.q. `{from: {row: 1, col: 6}}`).
      *
-     * @private
      * @type {object}
      */
-    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _tempEditorDimensions, {
-      writable: true,
-      value: {}
-    });
+    _this.range = {};
     /**
-     * The flag that allows processing mousedown event correctly when comments editor is triggered.
+     * Prevents showing/hiding editor that reacts on the logic triggered by the "mouseover" events.
      *
      * @private
      * @type {boolean}
      */
-    _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: ''
+    _this.preventEditorAutoSwitch = false;
+    privatePool.set(_assertThisInitialized(_this), {
+      tempEditorDimensions: {},
+      cellBelowCursor: null
     });
     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:
-    /**
-     * 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() {
+    value: function isEnabled() {
       return !!this.hot.getSettings()[PLUGIN_KEY];
     }
 
@@ -274,14 +206,14 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (this.enabled) {
         return;
       }
-      if (!_classPrivateFieldGet(this, _editor)) {
-        _classPrivateFieldSet(this, _editor, new CommentEditor(this.hot.rootDocument, this.hot.isRtl()));
+      if (!this.editor) {
+        this.editor = new CommentEditor(this.hot.rootDocument, this.hot.isRtl());
       }
       if (!this.eventManager) {
         this.eventManager = new EventManager(this);
       }
-      if (!_classPrivateFieldGet(this, _displaySwitch)) {
-        _classPrivateFieldSet(this, _displaySwitch, new DisplaySwitch(this.getDisplayDelaySetting()));
+      if (!this.displaySwitch) {
+        this.displaySwitch = new DisplaySwitch(this.getDisplayDelaySetting());
       }
       this.addHook('afterContextMenuDefaultOptions', function (options) {
         return _this2.addToContextMenu(options);
@@ -289,22 +221,21 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       this.addHook('afterRenderer', function (TD, row, col, prop, value, cellProperties) {
         return _this2.onAfterRenderer(TD, cellProperties);
       });
-      this.addHook('afterScroll', function () {
-        return _this2.onAfterScroll();
+      this.addHook('afterScrollHorizontally', function () {
+        return _this2.hide();
       });
-      this.addHook('afterBeginEditing', function () {
+      this.addHook('afterScrollVertically', function () {
         return _this2.hide();
       });
-      this.addHook('afterDocumentKeyDown', function (event) {
-        return _this2.onAfterDocumentKeyDown(event);
+      this.addHook('afterBeginEditing', function () {
+        return _this2.hide();
       });
-      _classPrivateFieldGet(this, _displaySwitch).addLocalHook('hide', function () {
+      this.displaySwitch.addLocalHook('hide', function () {
         return _this2.hide();
       });
-      _classPrivateFieldGet(this, _displaySwitch).addLocalHook('show', function (row, col) {
+      this.displaySwitch.addLocalHook('show', function (row, col) {
         return _this2.showAtCell(row, col);
       });
-      this.registerShortcuts();
       this.registerListeners();
       _get(_getPrototypeOf(Comments.prototype), "enablePlugin", this).call(this);
     }
@@ -318,8 +249,10 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "updatePlugin",
     value: function updatePlugin() {
-      _classPrivateFieldGet(this, _displaySwitch).updateDelay(this.getDisplayDelaySetting());
+      this.disablePlugin();
+      this.enablePlugin();
       _get(_getPrototypeOf(Comments.prototype), "updatePlugin", this).call(this);
+      this.displaySwitch.updateDelay(this.getDisplayDelaySetting());
     }
 
     /**
@@ -328,82 +261,9 @@ 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.
      *
@@ -412,29 +272,25 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "registerListeners",
     value: function registerListeners() {
-      var _this4 = this;
+      var _this3 = this;
       var rootDocument = this.hot.rootDocument;
-      var editorElement = this.getEditorInputElement();
       this.eventManager.addEventListener(rootDocument, 'mouseover', function (event) {
-        return _this4.onMouseOver(event);
+        return _this3.onMouseOver(event);
       });
       this.eventManager.addEventListener(rootDocument, 'mousedown', function (event) {
-        return _this4.onMouseDown(event);
+        return _this3.onMouseDown(event);
       });
       this.eventManager.addEventListener(rootDocument, 'mouseup', function () {
-        return _this4.onMouseUp();
-      });
-      this.eventManager.addEventListener(editorElement, 'focus', function () {
-        return _this4.onEditorFocus();
+        return _this3.onMouseUp();
       });
-      this.eventManager.addEventListener(editorElement, 'blur', function () {
-        return _this4.onEditorBlur();
+      this.eventManager.addEventListener(this.editor.getInputElement(), 'blur', function () {
+        return _this3.onEditorBlur();
       });
-      this.eventManager.addEventListener(editorElement, 'mousedown', function (event) {
-        return _this4.onEditorMouseDown(event);
+      this.eventManager.addEventListener(this.editor.getInputElement(), 'mousedown', function (event) {
+        return _this3.onEditorMouseDown(event);
       });
-      this.eventManager.addEventListener(editorElement, 'mouseup', function (event) {
-        return _this4.onEditorMouseUp(event);
+      this.eventManager.addEventListener(this.editor.getInputElement(), 'mouseup', function (event) {
+        return _this3.onEditorMouseUp(event);
       });
     }
 
@@ -482,7 +338,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "targetIsCommentTextArea",
     value: function targetIsCommentTextArea(event) {
-      return this.getEditorInputElement() === event.target;
+      return this.editor.getInputElement() === event.target;
     }
 
     /**
@@ -496,7 +352,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 = _classPrivateFieldGet(this, _editor).getValue();
+      var editorValue = this.editor.getValue();
       var comment = '';
       if (value !== null && value !== void 0) {
         comment = value;
@@ -605,9 +461,8 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
         return false;
       }
       var meta = this.hot.getCellMeta(this.range.from.row, this.range.from.col);
-      _classPrivateFieldGet(this, _displaySwitch).cancelHiding();
-      _classPrivateFieldGet(this, _editor).setValue(meta[META_COMMENT] ? meta[META_COMMENT][META_COMMENT_VALUE] : null || '');
-      _classPrivateFieldGet(this, _editor).show();
+      this.editor.setValue(meta[META_COMMENT] ? meta[META_COMMENT][META_COMMENT_VALUE] : null || '');
+      this.editor.show();
       this.refreshEditor(true);
       return true;
     }
@@ -634,7 +489,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "hide",
     value: function hide() {
-      _classPrivateFieldGet(this, _editor).hide();
+      this.editor.hide();
     }
 
     /**
@@ -647,7 +502,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 || !_classPrivateFieldGet(this, _editor).isVisible())) {
+      if (!force && (!this.range.from || !this.editor.isVisible())) {
         return;
       }
       var _this$hot = this.hot,
@@ -663,7 +518,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
-      _classPrivateFieldGet(this, _editor).setPosition(0, 0);
+      this.editor.setPosition(0, 0);
       if (renderableRow === null) {
         renderableRow = rowIndexMapper.getRenderableFromVisualIndex(rowIndexMapper.getNearestNotHiddenIndex(visualRow, -1));
       }
@@ -686,9 +541,9 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       }, true);
       var commentStyle = this.getCommentMeta(visualRow, visualColumn, META_STYLE);
       if (commentStyle) {
-        _classPrivateFieldGet(this, _editor).setSize(commentStyle.width, commentStyle.height);
+        this.editor.setSize(commentStyle.width, commentStyle.height);
       } else {
-        _classPrivateFieldGet(this, _editor).resetSize();
+        this.editor.resetSize();
       }
       var lastColWidth = isBeforeRenderedColumns ? 0 : wtTable.getStretchedColumnWidth(renderableColumn);
       var lastRowHeight = targetingPreviousRow && !isBeforeRenderedRows ? outerHeight(TD) : 0;
@@ -697,9 +552,9 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
         top = _TD$getBoundingClient.top,
         cellWidth = _TD$getBoundingClient.width,
         cellHeight = _TD$getBoundingClient.height;
-      var _classPrivateFieldGet2 = _classPrivateFieldGet(this, _editor).getSize(),
-        editorWidth = _classPrivateFieldGet2.width,
-        editorHeight = _classPrivateFieldGet2.height;
+      var _this$editor$getSize = this.editor.getSize(),
+        editorWidth = _this$editor$getSize.width,
+        editorHeight = _this$editor$getSize.height;
       var _this$hot$rootWindow = this.hot.rootWindow,
         innerWidth = _this$hot$rootWindow.innerWidth,
         innerHeight = _this$hot$rootWindow.innerHeight;
@@ -719,17 +574,30 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (top + editorHeight > innerHeight) {
         y -= editorHeight - cellHeight + 1;
       }
-      _classPrivateFieldGet(this, _editor).setPosition(x, y);
-      _classPrivateFieldGet(this, _editor).setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY));
+      this.editor.setPosition(x, y);
+      this.editor.setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY));
     }
 
     /**
-     * Focuses the comments editor element.
+     * Checks if there is a comment for selected range.
+     *
+     * @private
+     * @returns {boolean}
      */
   }, {
-    key: "focusEditor",
-    value: function focusEditor() {
-      _classPrivateFieldGet(this, _editor).focus();
+    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;
     }
 
     /**
@@ -783,7 +651,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
       if (!this.hot.view || !this.hot.view._wt) {
         return;
       }
-      if (!_classPrivateFieldGet(this, _preventEditorAutoSwitch) && !this.targetIsCommentTextArea(event)) {
+      if (!this.preventEditorAutoSwitch && !this.targetIsCommentTextArea(event)) {
         var eventCell = closest(event.target, 'TD', 'TBODY');
         var coordinates = null;
         if (eventCell) {
@@ -804,16 +672,17 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onMouseOver",
     value: function onMouseOver(event) {
+      var priv = privatePool.get(this);
       var rootDocument = this.hot.rootDocument;
-      if (_classPrivateFieldGet(this, _preventEditorAutoSwitch) || _classPrivateFieldGet(this, _editor).isFocused() || hasClass(event.target, 'wtBorder') || _classPrivateFieldGet(this, _cellBelowCursor) === event.target || !_classPrivateFieldGet(this, _editor)) {
+      if (this.preventEditorAutoSwitch || this.editor.isFocused() || hasClass(event.target, 'wtBorder') || priv.cellBelowCursor === event.target || !this.editor) {
         return;
       }
-      _classPrivateFieldSet(this, _cellBelowCursor, rootDocument.elementFromPoint(event.clientX, event.clientY));
+      priv.cellBelowCursor = rootDocument.elementFromPoint(event.clientX, event.clientY);
       if (this.targetIsCellWithComment(event)) {
         var range = this.hot._createCellRange(this.hot.getCoords(event.target));
-        _classPrivateFieldGet(this, _displaySwitch).show(range);
+        this.displaySwitch.show(range);
       } else if (isChildOf(event.target, rootDocument) && !this.targetIsCommentTextArea(event)) {
-        _classPrivateFieldGet(this, _displaySwitch).hide();
+        this.displaySwitch.hide();
       }
     }
 
@@ -825,7 +694,7 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onMouseUp",
     value: function onMouseUp() {
-      _classPrivateFieldSet(this, _preventEditorAutoSwitch, false);
+      this.preventEditorAutoSwitch = false;
     }
 
     /**
@@ -844,33 +713,16 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
     }
 
     /**
-     * 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.
+     * `blur` event callback for the comment editor.
      *
      * @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.
      *
@@ -880,10 +732,11 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onEditorMouseDown",
     value: function onEditorMouseDown(event) {
-      _classPrivateFieldSet(this, _tempEditorDimensions, {
+      var priv = privatePool.get(this);
+      priv.tempEditorDimensions = {
         width: outerWidth(event.target),
         height: outerHeight(event.target)
-      });
+      };
     }
 
     /**
@@ -895,9 +748,10 @@ 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 !== _classPrivateFieldGet(this, _tempEditorDimensions).width + 1 || currentHeight !== _classPrivateFieldGet(this, _tempEditorDimensions).height + 2) {
+      if (currentWidth !== priv.tempEditorDimensions.width + 1 || currentHeight !== priv.tempEditorDimensions.height + 2) {
         this.updateCommentMeta(this.range.from.row, this.range.from.col, _defineProperty({}, META_STYLE, {
           width: currentWidth,
           height: currentHeight
@@ -906,42 +760,144 @@ export var Comments = /*#__PURE__*/function (_BasePlugin) {
     }
 
     /**
-     * Observes the pressed keys and if there is already opened the comment editor prevents open
-     * the table editor into the fast edit mode.
+     * Context Menu's "Add comment" callback. Results in showing the comment editor.
+     *
+     * @private
+     */
+  }, {
+    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.
      *
-     * @param {Event} event The keydown event.
+     * @private
      */
   }, {
-    key: "onAfterDocumentKeyDown",
-    value: function onAfterDocumentKeyDown(event) {
-      if (_classPrivateFieldGet(this, _editor).isVisible()) {
-        stopImmediatePropagation(event);
-      }
+    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();
     }
 
     /**
-     * Observes the changes in the scroll position if triggered it hides the comment editor.
+     * Context Menu's "make comment read-only" callback.
+     *
+     * @private
      */
   }, {
-    key: "onAfterScroll",
-    value: function onAfterScroll() {
-      if (!_classPrivateFieldGet(this, _preventEditorHiding)) {
-        this.hide();
-      }
+    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));
+        }
+      });
     }
 
     /**
      * Add Comments plugin options to the Context Menu.
      *
      * @private
-     * @param {object} options The menu options.
+     * @param {object} defaultOptions The menu options.
      */
   }, {
     key: "addToContextMenu",
-    value: function addToContextMenu(options) {
-      options.items.push({
-        name: SEPARATOR
-      }, addEditCommentItem(this), removeCommentItem(this), readOnlyCommentItem(this));
+    value: function addToContextMenu(defaultOptions) {
+      var _this6 = this;
+      var isThereAnySelectedCellToProcess = function isThereAnySelectedCellToProcess() {
+        var range = _this6.hot.getSelectedRangeLast();
+        if (!range) {
+          return false;
+        }
+        if (range.isSingleHeader() || range.highlight.isHeader()) {
+          return false;
+        }
+        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 (!isThereAnySelectedCellToProcess()) {
+            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 (!isThereAnySelectedCellToProcess()) {
+            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 (!isThereAnySelectedCellToProcess()) {
+            return true;
+          }
+          return !(_this6.hot.getSelectedLast() && !_this6.hot.selection.isSelectedByCorner()) || !_this6.checkSelectionCommentsConsistency();
+        }
+      });
     }
 
     /**
@@ -959,29 +915,17 @@ 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 (_classPrivateFieldGet(this, _editor)) {
-        _classPrivateFieldGet(this, _editor).destroy();
+      if (this.editor) {
+        this.editor.destroy();
       }
-      if (_classPrivateFieldGet(this, _displaySwitch)) {
-        _classPrivateFieldGet(this, _displaySwitch).destroy();
+      if (this.displaySwitch) {
+        this.displaySwitch.destroy();
       }
       _get(_getPrototypeOf(Comments.prototype), "destroy", this).call(this);
     }