handsontable 13.1.0 → 14.0.0-next-e8f87aa-20231030

package/plugins/comments/comments.mjs

@@ -1,20 +1,34 @@
 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 * as C from "../../i18n/constants.mjs";
+import { SEPARATOR } from "../contextMenu/predefinedItems/index.mjs";
+import addEditCommentItem from "./contextMenuItem/addEditComment.mjs";
+import removeCommentItem from "./contextMenuItem/removeComment.mjs";
+import readOnlyCommentItem from "./contextMenuItem/readOnlyComment.mjs";
 export const PLUGIN_KEY = 'comments';
 export const PLUGIN_PRIORITY = 60;
-const privatePool = new WeakMap();
-const META_COMMENT = 'comment';
-const META_COMMENT_VALUE = 'value';
-const META_STYLE = 'style';
-const META_READONLY = 'readOnly';
+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}`;
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -106,55 +120,107 @@ const 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 class Comments extends BasePlugin {
-  static get PLUGIN_KEY() {
-    return PLUGIN_KEY;
-  }
-  static get PLUGIN_PRIORITY() {
-    return PLUGIN_PRIORITY;
-  }
-  constructor(hotInstance) {
-    super(hotInstance);
+  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);
     /**
      * Instance of {@link CommentEditor}.
      *
      * @private
      * @type {CommentEditor}
      */
-    this.editor = null;
+    _classPrivateFieldInitSpec(this, _editor, {
+      writable: true,
+      value: null
+    });
     /**
      * Instance of {@link DisplaySwitch}.
      *
      * @private
      * @type {DisplaySwitch}
      */
-    this.displaySwitch = null;
+    _classPrivateFieldInitSpec(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(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(this, _preventEditorHiding, {
+      writable: true,
+      value: false
+    });
+    /**
+     * The property for holding editor dimensions for further processing.
+     *
+     * @private
      * @type {object}
      */
-    this.range = {};
+    _classPrivateFieldInitSpec(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(this, {
-      tempEditorDimensions: {},
-      cellBelowCursor: null
+    _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: ''
     });
   }
-
+  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.
@@ -172,22 +238,23 @@ export class Comments extends 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', options => this.addToContextMenu(options));
     this.addHook('afterRenderer', (TD, row, col, prop, value, cellProperties) => this.onAfterRenderer(TD, cellProperties));
-    this.addHook('afterScrollHorizontally', () => this.hide());
-    this.addHook('afterScrollVertically', () => this.hide());
+    this.addHook('afterScroll', () => this.onAfterScroll());
     this.addHook('afterBeginEditing', () => this.hide());
-    this.displaySwitch.addLocalHook('hide', () => this.hide());
-    this.displaySwitch.addLocalHook('show', (row, col) => this.showAtCell(row, col));
+    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.registerListeners();
     super.enablePlugin();
   }
@@ -199,19 +266,85 @@ export class Comments extends BasePlugin {
    *   - [`comments`](@/api/options.md#comments)
    */
   updatePlugin() {
-    this.disablePlugin();
-    this.enablePlugin();
+    _classPrivateFieldGet(this, _displaySwitch).updateDelay(this.getDisplayDelaySetting());
     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.
    *
@@ -221,12 +354,14 @@ 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(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));
+    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));
   }
 
   /**
@@ -265,7 +400,7 @@ export class Comments extends BasePlugin {
    * @returns {boolean}
    */
   targetIsCommentTextArea(event) {
-    return this.editor.getInputElement() === event.target;
+    return this.getEditorInputElement() === event.target;
   }
 
   /**
@@ -277,7 +412,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 = this.editor.getValue();
+    const editorValue = _classPrivateFieldGet(this, _editor).getValue();
     let comment = '';
     if (value !== null && value !== void 0) {
       comment = value;
@@ -366,6 +501,7 @@ export class Comments extends BasePlugin {
    * @returns {boolean} Returns `true` if comment editor was shown.
    */
   show() {
+    var _ref;
     if (!this.range.from) {
       throw new Error('Before using this method, first set cell range (hot.getPlugin("comment").setRange())');
     }
@@ -379,8 +515,9 @@ export class Comments extends BasePlugin {
       return false;
     }
     const 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((_ref = meta[META_COMMENT] ? meta[META_COMMENT][META_COMMENT_VALUE] : null) !== null && _ref !== void 0 ? _ref : '');
+    _classPrivateFieldGet(this, _editor).show();
     this.refreshEditor(true);
     return true;
   }
@@ -403,7 +540,7 @@ export class Comments extends BasePlugin {
    * Hides the comment editor.
    */
   hide() {
-    this.editor.hide();
+    _classPrivateFieldGet(this, _editor).hide();
   }
 
   /**
@@ -414,7 +551,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 || !this.editor.isVisible())) {
+    if (!force && (!this.range.from || !_classPrivateFieldGet(this, _editor).isVisible())) {
       return;
     }
     const {
@@ -432,7 +569,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
-    this.editor.setPosition(0, 0);
+    _classPrivateFieldGet(this, _editor).setPosition(0, 0);
     if (renderableRow === null) {
       renderableRow = rowIndexMapper.getRenderableFromVisualIndex(rowIndexMapper.getNearestNotHiddenIndex(visualRow, -1));
     }
@@ -460,9 +597,9 @@ export class Comments extends BasePlugin {
     }, true);
     const 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();
     }
     const lastColWidth = isBeforeRenderedColumns ? 0 : wtTable.getStretchedColumnWidth(renderableColumn);
     const lastRowHeight = targetingPreviousRow && !isBeforeRenderedRows ? outerHeight(TD) : 0;
@@ -475,7 +612,7 @@ export class Comments extends BasePlugin {
     const {
       width: editorWidth,
       height: editorHeight
-    } = this.editor.getSize();
+    } = _classPrivateFieldGet(this, _editor).getSize();
     const {
       innerWidth,
       innerHeight
@@ -496,28 +633,15 @@ export class Comments extends 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.
    */
-  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;
+  focusEditor() {
+    _classPrivateFieldGet(this, _editor).focus();
   }
 
   /**
@@ -565,7 +689,7 @@ export class Comments extends BasePlugin {
     if (!this.hot.view || !this.hot.view._wt) {
       return;
     }
-    if (!this.preventEditorAutoSwitch && !this.targetIsCommentTextArea(event)) {
+    if (!_classPrivateFieldGet(this, _preventEditorAutoSwitch) && !this.targetIsCommentTextArea(event)) {
       const eventCell = closest(event.target, 'TD', 'TBODY');
       let coordinates = null;
       if (eventCell) {
@@ -584,19 +708,18 @@ export class Comments extends BasePlugin {
    * @param {MouseEvent} event The `mouseover` event.
    */
   onMouseOver(event) {
-    const priv = privatePool.get(this);
     const {
       rootDocument
     } = this.hot;
-    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)) {
       const 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();
     }
   }
 
@@ -606,7 +729,7 @@ export class Comments extends BasePlugin {
    * @private
    */
   onMouseUp() {
-    this.preventEditorAutoSwitch = false;
+    _classPrivateFieldSet(this, _preventEditorAutoSwitch, false);
   }
 
   /**
@@ -623,14 +746,29 @@ export class Comments extends 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
    */
   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.
    *
@@ -638,11 +776,10 @@ export class Comments extends BasePlugin {
    * @param {MouseEvent} event The `mousedown` event.
    */
   onEditorMouseDown(event) {
-    const priv = privatePool.get(this);
-    priv.tempEditorDimensions = {
+    _classPrivateFieldSet(this, _tempEditorDimensions, {
       width: outerWidth(event.target),
       height: outerHeight(event.target)
-    };
+    });
   }
 
   /**
@@ -652,10 +789,9 @@ 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 !== 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, {
         [META_STYLE]: {
           width: currentWidth,
@@ -666,121 +802,36 @@ export class Comments extends 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
-   */
-  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();
-  }
-
-  /**
-   * Context Menu's "remove comment" callback.
-   *
-   * @private
+   * @param {Event} event The keydown event.
    */
-  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();
+  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.
    */
-  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
-        });
-      }
-    });
+  onAfterScroll() {
+    if (!_classPrivateFieldGet(this, _preventEditorHiding)) {
+      this.hide();
+    }
   }
 
   /**
    * 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();
-      }
-    });
+   * @param {object} options The menu options.
+   */
+  addToContextMenu(options) {
+    options.items.push({
+      name: SEPARATOR
+    }, addEditCommentItem(this), removeCommentItem(this), readOnlyCommentItem(this));
   }
 
   /**
@@ -796,15 +847,25 @@ 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 (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();
     }
     super.destroy();
   }