handsontable 0.0.0-next-010265d-20231005 → 0.0.0-next-9379dd1-20231020

package/plugins/comments/comments.js

@@ -4,25 +4,41 @@ exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
 var _element = require("../../helpers/dom/element");
+var _event = require("../../helpers/dom/event");
 var _object = require("../../helpers/object");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _base = require("../base");
 var _commentEditor = _interopRequireDefault(require("./commentEditor"));
-var _utils = require("../contextMenu/utils");
-var _displaySwitch = _interopRequireDefault(require("./displaySwitch"));
-var C = _interopRequireWildcard(require("../../i18n/constants"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _displaySwitch2 = _interopRequireDefault(require("./displaySwitch"));
+var _predefinedItems = require("../contextMenu/predefinedItems");
+var _addEditComment = _interopRequireDefault(require("./contextMenuItem/addEditComment"));
+var _removeComment = _interopRequireDefault(require("./contextMenuItem/removeComment"));
+var _readOnlyComment = _interopRequireDefault(require("./contextMenuItem/readOnlyComment"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _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; }
 const PLUGIN_KEY = 'comments';
 exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 60;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
-const privatePool = new WeakMap();
 const META_COMMENT = 'comment';
+exports.META_COMMENT = META_COMMENT;
 const META_COMMENT_VALUE = 'value';
+exports.META_COMMENT_VALUE = META_COMMENT_VALUE;
 const META_STYLE = 'style';
+exports.META_STYLE = META_STYLE;
 const META_READONLY = 'readOnly';
+exports.META_READONLY = META_READONLY;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
+const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -114,55 +130,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();
 class Comments extends _base.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.
@@ -180,22 +248,23 @@ class Comments extends _base.BasePlugin {
     if (this.enabled) {
       return;
     }
-    if (!this.editor) {
-      this.editor = new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl());
+    if (!_classPrivateFieldGet(this, _editor)) {
+      _classPrivateFieldSet(this, _editor, new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl()));
     }
     if (!this.eventManager) {
       this.eventManager = new _eventManager.default(this);
     }
-    if (!this.displaySwitch) {
-      this.displaySwitch = new _displaySwitch.default(this.getDisplayDelaySetting());
+    if (!_classPrivateFieldGet(this, _displaySwitch)) {
+      _classPrivateFieldSet(this, _displaySwitch, new _displaySwitch2.default(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();
   }
@@ -207,19 +276,85 @@ class Comments extends _base.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.
    *
@@ -229,12 +364,14 @@ class Comments extends _base.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));
   }
 
   /**
@@ -273,7 +410,7 @@ class Comments extends _base.BasePlugin {
    * @returns {boolean}
    */
   targetIsCommentTextArea(event) {
-    return this.editor.getInputElement() === event.target;
+    return this.getEditorInputElement() === event.target;
   }
 
   /**
@@ -285,7 +422,7 @@ class Comments extends _base.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;
@@ -374,6 +511,7 @@ class Comments extends _base.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())');
     }
@@ -387,8 +525,9 @@ class Comments extends _base.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;
   }
@@ -411,7 +550,7 @@ class Comments extends _base.BasePlugin {
    * Hides the comment editor.
    */
   hide() {
-    this.editor.hide();
+    _classPrivateFieldGet(this, _editor).hide();
   }
 
   /**
@@ -422,7 +561,7 @@ class Comments extends _base.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 {
@@ -440,7 +579,7 @@ class Comments extends _base.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));
     }
@@ -468,9 +607,9 @@ class Comments extends _base.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 ? (0, _element.outerHeight)(TD) : 0;
@@ -483,7 +622,7 @@ class Comments extends _base.BasePlugin {
     const {
       width: editorWidth,
       height: editorHeight
-    } = this.editor.getSize();
+    } = _classPrivateFieldGet(this, _editor).getSize();
     const {
       innerWidth,
       innerHeight
@@ -504,28 +643,15 @@ class Comments extends _base.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();
   }
 
   /**
@@ -573,7 +699,7 @@ class Comments extends _base.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 = (0, _element.closest)(event.target, 'TD', 'TBODY');
       let coordinates = null;
       if (eventCell) {
@@ -592,19 +718,18 @@ class Comments extends _base.BasePlugin {
    * @param {MouseEvent} event The `mouseover` event.
    */
   onMouseOver(event) {
-    const priv = privatePool.get(this);
     const {
       rootDocument
     } = this.hot;
-    if (this.preventEditorAutoSwitch || this.editor.isFocused() || (0, _element.hasClass)(event.target, 'wtBorder') || priv.cellBelowCursor === event.target || !this.editor) {
+    if (_classPrivateFieldGet(this, _preventEditorAutoSwitch) || _classPrivateFieldGet(this, _editor).isFocused() || (0, _element.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 ((0, _element.isChildOf)(event.target, rootDocument) && !this.targetIsCommentTextArea(event)) {
-      this.displaySwitch.hide();
+      _classPrivateFieldGet(this, _displaySwitch).hide();
     }
   }
 
@@ -614,7 +739,7 @@ class Comments extends _base.BasePlugin {
    * @private
    */
   onMouseUp() {
-    this.preventEditorAutoSwitch = false;
+    _classPrivateFieldSet(this, _preventEditorAutoSwitch, false);
   }
 
   /**
@@ -631,14 +756,29 @@ class Comments extends _base.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.
    *
@@ -646,11 +786,10 @@ class Comments extends _base.BasePlugin {
    * @param {MouseEvent} event The `mousedown` event.
    */
   onEditorMouseDown(event) {
-    const priv = privatePool.get(this);
-    priv.tempEditorDimensions = {
+    _classPrivateFieldSet(this, _tempEditorDimensions, {
       width: (0, _element.outerWidth)(event.target),
       height: (0, _element.outerHeight)(event.target)
-    };
+    });
   }
 
   /**
@@ -660,10 +799,9 @@ class Comments extends _base.BasePlugin {
    * @param {MouseEvent} event The `mouseup` event.
    */
   onEditorMouseUp(event) {
-    const priv = privatePool.get(this);
     const currentWidth = (0, _element.outerWidth)(event.target);
     const currentHeight = (0, _element.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,
@@ -674,121 +812,36 @@ class Comments extends _base.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()) {
+      (0, _event.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 = (0, _utils.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 = (0, _utils.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: _predefinedItems.SEPARATOR
+    }, (0, _addEditComment.default)(this), (0, _removeComment.default)(this), (0, _readOnlyComment.default)(this));
   }
 
   /**
@@ -804,15 +857,25 @@ class Comments extends _base.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();
   }