handsontable 0.0.0-next-08765b9-20230809 → 0.0.0-next-7e1ba35-20230821

package/plugins/comments/comments.mjs

@@ -1,34 +1,20 @@
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.array.push.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 { 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 const PLUGIN_KEY = 'comments';
 export const PLUGIN_PRIORITY = 60;
-export const META_COMMENT = 'comment';
-export const META_COMMENT_VALUE = 'value';
-export const META_STYLE = 'style';
-export const META_READONLY = 'readOnly';
-const SHORTCUTS_GROUP = PLUGIN_KEY;
-const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
+const privatePool = new WeakMap();
+const META_COMMENT = 'comment';
+const META_COMMENT_VALUE = 'value';
+const META_STYLE = 'style';
+const META_READONLY = 'readOnly';
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -120,107 +106,55 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${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 class Comments extends BasePlugin {
-  constructor() {
-    super(...arguments);
-    /**
-     * Current cell range, an object with `from` property, with `row` and `col` properties (e.q. `{from: {row: 1, col: 6}}`).
-     *
-     * @type {object}
-     */
-    _defineProperty(this, "range", {});
-    /**
-     * Instance of {@link EventManager}.
-     *
-     * @protected
-     * @type {EventManager}
-     */
-    _defineProperty(this, "eventManager", null);
+  static get PLUGIN_KEY() {
+    return PLUGIN_KEY;
+  }
+  static get PLUGIN_PRIORITY() {
+    return PLUGIN_PRIORITY;
+  }
+  constructor(hotInstance) {
+    super(hotInstance);
     /**
      * Instance of {@link CommentEditor}.
      *
      * @private
      * @type {CommentEditor}
      */
-    _classPrivateFieldInitSpec(this, _editor, {
-      writable: true,
-      value: null
-    });
+    this.editor = null;
     /**
      * Instance of {@link DisplaySwitch}.
      *
      * @private
      * @type {DisplaySwitch}
      */
-    _classPrivateFieldInitSpec(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(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(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(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(this, _cellBelowCursor, {
-      writable: true,
-      value: null
-    });
-    /**
-     * Holds the comment value before it's actually saved to the cell meta.
-     *
-     * @private
-     * @type {string}
-     */
-    _classPrivateFieldInitSpec(this, _commentValueBeforeSave, {
-      writable: true,
-      value: ''
+    this.preventEditorAutoSwitch = false;
+    privatePool.set(this, {
+      tempEditorDimensions: {},
+      cellBelowCursor: null
     });
   }
-  static get PLUGIN_KEY() {
-    return PLUGIN_KEY;
-  }
-  static get PLUGIN_PRIORITY() {
-    return PLUGIN_PRIORITY;
-  }
+
   /**
    * 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.
@@ -238,23 +172,22 @@ export class Comments extends 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', options => this.addToContextMenu(options));
     this.addHook('afterRenderer', (TD, row, col, prop, value, cellProperties) => this.onAfterRenderer(TD, cellProperties));
-    this.addHook('afterScroll', () => this.onAfterScroll());
+    this.addHook('afterScrollHorizontally', () => this.hide());
+    this.addHook('afterScrollVertically', () => this.hide());
     this.addHook('afterBeginEditing', () => this.hide());
-    this.addHook('afterDocumentKeyDown', event => this.onAfterDocumentKeyDown(event));
-    _classPrivateFieldGet(this, _displaySwitch).addLocalHook('hide', () => this.hide());
-    _classPrivateFieldGet(this, _displaySwitch).addLocalHook('show', (row, col) => this.showAtCell(row, col));
-    this.registerShortcuts();
+    this.displaySwitch.addLocalHook('hide', () => this.hide());
+    this.displaySwitch.addLocalHook('show', (row, col) => this.showAtCell(row, col));
     this.registerListeners();
     super.enablePlugin();
   }
@@ -266,85 +199,19 @@ export class Comments extends BasePlugin {
    *   - [`comments`](@/api/options.md#comments)
    */
   updatePlugin() {
-    _classPrivateFieldGet(this, _displaySwitch).updateDelay(this.getDisplayDelaySetting());
+    this.disablePlugin();
+    this.enablePlugin();
     super.updatePlugin();
+    this.displaySwitch.updateDelay(this.getDisplayDelaySetting());
   }
 
   /**
    * Disables the plugin functionality for this Handsontable instance.
    */
   disablePlugin() {
-    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
-  /**
-   * Register shortcuts responsible for toggling context menu.
-   *
-   * @private
-   */
-  registerShortcuts() {
-    const manager = this.hot.getShortcutManager();
-    const gridContext = manager.getContext('grid');
-    const pluginContext = manager.addContext(SHORTCUTS_CONTEXT_NAME);
-    gridContext.addShortcut({
-      keys: [['Control', 'Alt', 'M']],
-      callback: () => {
-        const range = this.hot.getSelectedRangeLast();
-        _classPrivateFieldSet(this, _preventEditorHiding, true);
-        this.hot.scrollToFocusedCell(() => {
-          this.setRange(range);
-          this.show();
-          this.focusEditor();
-          manager.setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-          this.hot._registerTimeout(() => {
-            _classPrivateFieldSet(this, _preventEditorHiding, false);
-          });
-        });
-      },
-      stopPropagation: true,
-      runOnlyIf: () => {
-        var _this$hot$getSelected;
-        return ((_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isCell()) && !_classPrivateFieldGet(this, _editor).isVisible();
-      },
-      group: SHORTCUTS_GROUP
-    });
-    pluginContext.addShortcut({
-      keys: [['Escape']],
-      callback: () => {
-        _classPrivateFieldGet(this, _editor).setValue(_classPrivateFieldGet(this, _commentValueBeforeSave));
-        this.hide();
-        manager.setActiveContextName('grid');
-      },
-      runOnlyIf: () => {
-        var _this$hot$getSelected2;
-        return ((_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight.isCell()) && _classPrivateFieldGet(this, _editor).isVisible();
-      },
-      group: SHORTCUTS_GROUP
-    });
-    pluginContext.addShortcut({
-      keys: [['Control/Meta', 'Enter']],
-      callback: () => {
-        this.hide();
-        manager.setActiveContextName('grid');
-      },
-      runOnlyIf: () => {
-        var _this$hot$getSelected3;
-        return ((_this$hot$getSelected3 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected3 === void 0 ? void 0 : _this$hot$getSelected3.highlight.isCell()) && _classPrivateFieldGet(this, _editor).isVisible();
-      },
-      group: SHORTCUTS_GROUP
-    });
-  }
-
-  /**
-   * Unregister shortcuts responsible for toggling context menu.
-   *
-   * @private
-   */
-  unregisterShortcuts() {
-    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
-  }
-
   /**
    * Registers all necessary DOM listeners.
    *
@@ -354,14 +221,12 @@ export class Comments extends BasePlugin {
     const {
       rootDocument
     } = this.hot;
-    const editorElement = this.getEditorInputElement();
     this.eventManager.addEventListener(rootDocument, 'mouseover', event => this.onMouseOver(event));
     this.eventManager.addEventListener(rootDocument, 'mousedown', event => this.onMouseDown(event));
     this.eventManager.addEventListener(rootDocument, 'mouseup', () => this.onMouseUp());
-    this.eventManager.addEventListener(editorElement, 'focus', () => this.onEditorFocus());
-    this.eventManager.addEventListener(editorElement, 'blur', () => this.onEditorBlur());
-    this.eventManager.addEventListener(editorElement, 'mousedown', event => this.onEditorMouseDown(event));
-    this.eventManager.addEventListener(editorElement, 'mouseup', event => this.onEditorMouseUp(event));
+    this.eventManager.addEventListener(this.editor.getInputElement(), 'blur', () => this.onEditorBlur());
+    this.eventManager.addEventListener(this.editor.getInputElement(), 'mousedown', event => this.onEditorMouseDown(event));
+    this.eventManager.addEventListener(this.editor.getInputElement(), 'mouseup', event => this.onEditorMouseUp(event));
   }
 
   /**
@@ -400,7 +265,7 @@ export class Comments extends BasePlugin {
    * @returns {boolean}
    */
   targetIsCommentTextArea(event) {
-    return this.getEditorInputElement() === event.target;
+    return this.editor.getInputElement() === event.target;
   }
 
   /**
@@ -412,7 +277,7 @@ export class Comments extends BasePlugin {
     if (!this.range.from) {
       throw new Error('Before using this method, first set cell range (hot.getPlugin("comment").setRange())');
     }
-    const editorValue = _classPrivateFieldGet(this, _editor).getValue();
+    const editorValue = this.editor.getValue();
     let comment = '';
     if (value !== null && value !== void 0) {
       comment = value;
@@ -514,9 +379,8 @@ export class Comments extends BasePlugin {
       return false;
     }
     const 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;
   }
@@ -539,7 +403,7 @@ export class Comments extends BasePlugin {
    * Hides the comment editor.
    */
   hide() {
-    _classPrivateFieldGet(this, _editor).hide();
+    this.editor.hide();
   }
 
   /**
@@ -550,7 +414,7 @@ export class Comments extends BasePlugin {
   refreshEditor() {
     var _renderableRow, _renderableColumn;
     let 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;
     }
     const {
@@ -568,7 +432,7 @@ export class Comments extends 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));
     }
@@ -596,9 +460,9 @@ export class Comments extends BasePlugin {
     }, true);
     const 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();
     }
     const lastColWidth = isBeforeRenderedColumns ? 0 : wtTable.getStretchedColumnWidth(renderableColumn);
     const lastRowHeight = targetingPreviousRow && !isBeforeRenderedRows ? outerHeight(TD) : 0;
@@ -611,7 +475,7 @@ export class Comments extends BasePlugin {
     const {
       width: editorWidth,
       height: editorHeight
-    } = _classPrivateFieldGet(this, _editor).getSize();
+    } = this.editor.getSize();
     const {
       innerWidth,
       innerHeight
@@ -632,15 +496,28 @@ export class Comments extends 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}
    */
-  focusEditor() {
-    _classPrivateFieldGet(this, _editor).focus();
+  checkSelectionCommentsConsistency() {
+    const selected = this.hot.getSelectedRangeLast();
+    if (!selected) {
+      return false;
+    }
+    let hasComment = false;
+    const 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;
   }
 
   /**
@@ -688,7 +565,7 @@ export class Comments extends BasePlugin {
     if (!this.hot.view || !this.hot.view._wt) {
       return;
     }
-    if (!_classPrivateFieldGet(this, _preventEditorAutoSwitch) && !this.targetIsCommentTextArea(event)) {
+    if (!this.preventEditorAutoSwitch && !this.targetIsCommentTextArea(event)) {
       const eventCell = closest(event.target, 'TD', 'TBODY');
       let coordinates = null;
       if (eventCell) {
@@ -707,18 +584,19 @@ export class Comments extends BasePlugin {
    * @param {MouseEvent} event The `mouseover` event.
    */
   onMouseOver(event) {
+    const priv = privatePool.get(this);
     const {
       rootDocument
     } = this.hot;
-    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)) {
       const 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();
     }
   }
 
@@ -728,7 +606,7 @@ export class Comments extends BasePlugin {
    * @private
    */
   onMouseUp() {
-    _classPrivateFieldSet(this, _preventEditorAutoSwitch, false);
+    this.preventEditorAutoSwitch = false;
   }
 
   /**
@@ -745,29 +623,14 @@ export class Comments extends 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
    */
   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
-   */
-  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.
    *
@@ -775,10 +638,11 @@ export class Comments extends BasePlugin {
    * @param {MouseEvent} event The `mousedown` event.
    */
   onEditorMouseDown(event) {
-    _classPrivateFieldSet(this, _tempEditorDimensions, {
+    const priv = privatePool.get(this);
+    priv.tempEditorDimensions = {
       width: outerWidth(event.target),
       height: outerHeight(event.target)
-    });
+    };
   }
 
   /**
@@ -788,9 +652,10 @@ export class Comments extends BasePlugin {
    * @param {MouseEvent} event The `mouseup` event.
    */
   onEditorMouseUp(event) {
+    const priv = privatePool.get(this);
     const currentWidth = outerWidth(event.target);
     const 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, {
         [META_STYLE]: {
           width: currentWidth,
@@ -801,36 +666,121 @@ export class Comments extends 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.
    *
-   * @param {Event} event The keydown event.
+   * @private
    */
-  onAfterDocumentKeyDown(event) {
-    if (_classPrivateFieldGet(this, _editor).isVisible()) {
-      stopImmediatePropagation(event);
-    }
+  onContextMenuAddComment() {
+    const coords = this.hot.getSelectedRangeLast();
+    this.preventEditorAutoSwitch = true;
+    this.displaySwitch.cancelHiding();
+    this.setRange({
+      from: coords.highlight
+    });
+    this.show();
+    this.hot.deselectCell();
+    this.editor.focus();
   }
 
   /**
-   * Observes the changes in the scroll position if triggered it hides the comment editor.
+   * Context Menu's "remove comment" callback.
+   *
+   * @private
    */
-  onAfterScroll() {
-    if (!_classPrivateFieldGet(this, _preventEditorHiding)) {
-      this.hide();
-    }
+  onContextMenuRemoveComment() {
+    const coords = this.hot.getSelectedRangeLast();
+    this.preventEditorAutoSwitch = true;
+    coords.forAll((row, column) => {
+      if (row >= 0 && column >= 0) {
+        this.removeCommentAtCell(row, column, false);
+      }
+    });
+    this.hot.render();
   }
 
   /**
-   * Add Comments plugin options to the Context Menu.
+   * Context Menu's "make comment read-only" callback.
    *
    * @private
-   * @param {object} options The menu options.
    */
-  addToContextMenu(options) {
-    options.items.push({
-      name: SEPARATOR
-    }, addEditCommentItem(this), removeCommentItem(this), readOnlyCommentItem(this));
+  onContextMenuMakeReadOnly() {
+    const coords = this.hot.getSelectedRangeLast();
+    this.preventEditorAutoSwitch = true;
+    coords.forAll((row, column) => {
+      if (row >= 0 && column >= 0) {
+        const currentState = !!this.getCommentMeta(row, column, META_READONLY);
+        this.updateCommentMeta(row, column, {
+          [META_READONLY]: !currentState
+        });
+      }
+    });
+  }
+
+  /**
+   * Add Comments plugin options to the Context Menu.
+   *
+   * @private
+   * @param {object} defaultOptions The menu options.
+   */
+  addToContextMenu(defaultOptions) {
+    const isThereAnyCellRendered = () => {
+      return this.hot.rowIndexMapper.getRenderableIndexesLength() > 0 && this.hot.columnIndexMapper.getRenderableIndexesLength() > 0;
+    };
+    defaultOptions.items.push({
+      name: '---------'
+    }, {
+      key: 'commentsAddEdit',
+      name: () => {
+        if (this.checkSelectionCommentsConsistency()) {
+          return this.hot.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_EDIT_COMMENT);
+        }
+        return this.hot.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ADD_COMMENT);
+      },
+      callback: () => this.onContextMenuAddComment(),
+      disabled: () => {
+        if (!isThereAnyCellRendered()) {
+          return true;
+        }
+        return !(this.hot.getSelectedLast() && !this.hot.selection.isSelectedByCorner());
+      }
+    }, {
+      key: 'commentsRemove',
+      name() {
+        return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_REMOVE_COMMENT);
+      },
+      callback: () => this.onContextMenuRemoveComment(),
+      disabled: () => {
+        if (!isThereAnyCellRendered()) {
+          return true;
+        }
+        return !(this.hot.getSelectedLast() && !this.hot.selection.isSelectedByCorner());
+      }
+    }, {
+      key: 'commentsReadOnly',
+      name() {
+        let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY_COMMENT);
+        const hasProperty = checkSelectionConsistency(this.getSelectedRangeLast(), (row, col) => {
+          let readOnlyProperty = this.getCellMeta(row, col)[META_COMMENT];
+          if (readOnlyProperty) {
+            readOnlyProperty = readOnlyProperty[META_READONLY];
+          }
+          if (readOnlyProperty) {
+            return true;
+          }
+        });
+        if (hasProperty) {
+          label = markLabelAsSelected(label);
+        }
+        return label;
+      },
+      callback: () => this.onContextMenuMakeReadOnly(),
+      disabled: () => {
+        if (!isThereAnyCellRendered()) {
+          return true;
+        }
+        return !(this.hot.getSelectedLast() && !this.hot.selection.isSelectedByCorner()) || !this.checkSelectionCommentsConsistency();
+      }
+    });
   }
 
   /**
@@ -846,25 +796,15 @@ export class Comments extends BasePlugin {
     }
   }
 
-  /**
-   * Gets the editors input element.
-   *
-   * @private
-   * @returns {HTMLTextAreaElement}
-   */
-  getEditorInputElement() {
-    return _classPrivateFieldGet(this, _editor).getInputElement();
-  }
-
   /**
    * Destroys the plugin instance.
    */
   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();
     }
     super.destroy();
   }