handsontable 17.1.0 → 18.0.0-rc2

package/plugins/comments/comments.mjs

@@ -48,7 +48,7 @@ function _class_private_method_init(obj, privateSet) {
     _check_private_redeclaration(obj, privateSet);
     privateSet.add(obj);
 }
-import { addClass, closest, getScrollbarWidth, hasClass, hasVerticalScrollbar, hasHorizontalScrollbar, isChildOf, outerHeight } from '../../helpers/dom/element.mjs';
+import { addClass, closest, eventTargetEl, getScrollbarWidth, hasClass, hasVerticalScrollbar, hasHorizontalScrollbar, isChildOf, outerHeight } from '../../helpers/dom/element.mjs';
 import { stopImmediatePropagation } from '../../helpers/dom/event.mjs';
 import { deepClone, deepExtend } from '../../helpers/object.mjs';
 import { CellRange } from '../../3rdparty/walkontable/src/index.mjs';
@@ -57,6 +57,7 @@ import { throwWithCause } from '../../helpers/errors.mjs';
 import CommentEditor from './commentEditor.mjs';
 import DisplaySwitch from './displaySwitch.mjs';
 import { getEditorAnchorWidth } from './utils.mjs';
+import { shrinkSizeToViewport, clampPositionToViewport } from './viewport.mjs';
 import { SEPARATOR } from '../contextMenu/predefinedItems/index.mjs';
 import addEditCommentItem from './contextMenuItem/addEditComment.mjs';
 import removeCommentItem from './contextMenuItem/removeComment.mjs';
@@ -67,6 +68,14 @@ export const META_COMMENT = 'comment';
 export const META_COMMENT_VALUE = 'value';
 export const META_STYLE = 'style';
 export const META_READONLY = 'readOnly';
+/**
+ * Checks if a value is a CommentMeta object.
+ *
+ * @param {unknown} value The value to check.
+ * @returns {boolean}
+ */ function isCommentMeta(value) {
+    return value !== null && typeof value === 'object';
+}
 const SHORTCUTS_GROUP = PLUGIN_KEY;
 const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
 var /**
@@ -101,16 +110,16 @@ var /**
    */ _commentValueBeforeSave = /*#__PURE__*/ new WeakMap(), /**
    * `mousedown` event callback.
    *
-   * @param {MouseEvent} event The `mousedown` event.
-   */ _onMouseDown = /*#__PURE__*/ new WeakSet(), /**
+   * @param {Event} event The `mousedown` event.
+   */ _onMouseDown = /*#__PURE__*/ new WeakMap(), /**
    * Prevent recognizing clicking on the comment editor as clicking outside of table.
    *
-   * @param {MouseEvent} event The `mousedown` event.
-   */ _onInputElementMouseDown = /*#__PURE__*/ new WeakSet(), /**
+   * @param {Event} event The `mousedown` event.
+   */ _onInputElementMouseDown = /*#__PURE__*/ new WeakMap(), /**
    * `mouseover` event callback.
    *
-   * @param {MouseEvent} event The `mouseover` event.
-   */ _onMouseOver = /*#__PURE__*/ new WeakSet(), /**
+   * @param {Event} event The `mouseover` event.
+   */ _onMouseOver = /*#__PURE__*/ new WeakMap(), /**
    * `mouseup` event callback.
    */ _onMouseUp = /*#__PURE__*/ new WeakSet(), /**
    * The `afterRenderer` hook callback.
@@ -129,8 +138,8 @@ var /**
    * "select all cells") instead of native textarea behavior. Events matching shortcuts
    * registered in the `plugin:comments` context are allowed through.
    *
-   * @param {KeyboardEvent} event The keydown event from the comment textarea.
-   */ _onEditorKeyDown = /*#__PURE__*/ new WeakSet(), /**
+   * @param {Event} event The keydown event from the comment textarea.
+   */ _onEditorKeyDown = /*#__PURE__*/ new WeakMap(), /**
    * Saves the comments editor size to the cell meta.
    *
    * @param {number} width The new width of the editor.
@@ -140,14 +149,14 @@ var /**
    * the table editor into the fast edit mode.
    *
    * @param {Event} event The keydown event.
-   */ _onAfterDocumentKeyDown = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterDocumentKeyDown = /*#__PURE__*/ new WeakMap(), /**
    * Observes the changes in the scroll position if triggered it hides the comment editor.
-   */ _onAfterScroll = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterScroll = /*#__PURE__*/ new WeakMap(), /**
    * Gets the coords object from the range object.
    *
    * @returns {CellCoords} The coords object.
    */ _getRangeCoords = /*#__PURE__*/ new WeakSet();
-/* eslint-disable jsdoc/require-description-complete-sentence */ /**
+/**
  * @plugin Comments
  * @class Comments
  *
@@ -282,20 +291,26 @@ var /**
  *     commentsPlugin.show();
  *   }
  *
- *   private getData(): any[] {
+ *   private getData(): Array<*> {
  *     // get some data
  *   }
  * }
  * ```
  * :::
  */ export class Comments extends BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
-    static get DEFAULT_SETTINGS() {
+    /**
+   * Returns the default settings applied when the plugin is enabled without explicit configuration.
+   */ static get DEFAULT_SETTINGS() {
         return {
             displayDelay: 250
         };
@@ -316,7 +331,7 @@ var /**
         }
         if (!_class_private_field_get(this, _editor)) {
             _class_private_field_set(this, _editor, new CommentEditor(this.hot.rootDocument, this.hot.isRtl(), this.hot.rootPortalElement));
-            _class_private_field_get(this, _editor).addLocalHook('resize', (...args)=>_class_private_method_get(this, _onEditorResize, onEditorResize).call(this, ...args));
+            _class_private_field_get(this, _editor)?.addLocalHook('resize', (width, height)=>_class_private_method_get(this, _onEditorResize, onEditorResize).call(this, width, height));
             this.hot.addHook('afterSetTheme', (themeName, firstRun)=>{
                 if (!firstRun) {
                     this.hide();
@@ -328,12 +343,12 @@ var /**
         }
         this.addHook('afterContextMenuDefaultOptions', (options)=>this.addToContextMenu(options));
         this.addHook('afterRenderer', (TD, row, col, prop, value, cellProperties)=>_class_private_method_get(this, _onAfterRenderer, onAfterRenderer).call(this, TD, cellProperties));
-        this.addHook('afterScroll', ()=>_class_private_method_get(this, _onAfterScroll, onAfterScroll).call(this));
+        this.addHook('afterScroll', _class_private_field_get(this, _onAfterScroll));
         this.addHook('afterBeginEditing', ()=>this.hide());
-        this.addHook('afterDocumentKeyDown', (event)=>_class_private_method_get(this, _onAfterDocumentKeyDown, onAfterDocumentKeyDown).call(this, event));
-        this.addHook('beforeCompositionStart', (event)=>_class_private_method_get(this, _onAfterDocumentKeyDown, onAfterDocumentKeyDown).call(this, event));
-        _class_private_field_get(this, _displaySwitch).addLocalHook('hide', ()=>this.hide());
-        _class_private_field_get(this, _displaySwitch).addLocalHook('show', (row, col)=>this.showAtCell(row, col));
+        this.addHook('afterDocumentKeyDown', _class_private_field_get(this, _onAfterDocumentKeyDown));
+        this.addHook('beforeCompositionStart', _class_private_field_get(this, _onAfterDocumentKeyDown));
+        _class_private_field_get(this, _displaySwitch)?.addLocalHook('hide', ()=>this.hide());
+        _class_private_field_get(this, _displaySwitch)?.addLocalHook('show', (row, col)=>this.showAtCell(row, col));
         this.registerShortcuts();
         this.registerListeners();
         super.enablePlugin();
@@ -344,7 +359,7 @@ var /**
    * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
    *   - [`comments`](@/api/options.md#comments)
    */ updatePlugin() {
-        _class_private_field_get(this, _displaySwitch).updateDelay(this.getSetting('displayDelay'));
+        _class_private_field_get(this, _displaySwitch)?.updateDelay(this.getSetting('displayDelay'));
         super.updatePlugin();
     }
     /**
@@ -361,7 +376,7 @@ var /**
         const manager = this.hot.getShortcutManager();
         const gridContext = manager.getContext('grid');
         const pluginContext = manager.addContext(SHORTCUTS_CONTEXT_NAME);
-        gridContext.addShortcut({
+        gridContext?.addShortcut({
             keys: [
                 [
                     'Control',
@@ -373,7 +388,9 @@ var /**
                 const range = this.hot.getSelectedRangeActive();
                 _class_private_field_set(this, _preventEditorHiding, true);
                 this.hot.scrollToFocusedCell(()=>{
-                    this.setRange(range);
+                    if (range) {
+                        this.setRange(range);
+                    }
                     this.show();
                     this.focusEditor();
                     manager.setActiveContextName(SHORTCUTS_CONTEXT_NAME);
@@ -383,7 +400,7 @@ var /**
                 });
             },
             stopPropagation: true,
-            runOnlyIf: ()=>this.hot.getSelectedRangeActive()?.highlight.isCell(),
+            runOnlyIf: ()=>!!this.hot.getSelectedRangeActive()?.highlight.isCell(),
             group: SHORTCUTS_GROUP
         });
         pluginContext.addShortcut({
@@ -393,11 +410,11 @@ var /**
                 ]
             ],
             callback: ()=>{
-                _class_private_field_get(this, _editor).setValue(_class_private_field_get(this, _commentValueBeforeSave));
+                _class_private_field_get(this, _editor)?.setValue(_class_private_field_get(this, _commentValueBeforeSave));
                 this.hide();
                 manager.setActiveContextName('grid');
             },
-            runOnlyIf: ()=>_class_private_field_get(this, _editor).isVisible() && _class_private_field_get(this, _editor).isFocused(),
+            runOnlyIf: ()=>!!(_class_private_field_get(this, _editor)?.isVisible() && _class_private_field_get(this, _editor)?.isFocused()),
             group: SHORTCUTS_GROUP
         });
         pluginContext.addShortcut({
@@ -411,7 +428,7 @@ var /**
                 this.hide();
                 manager.setActiveContextName('grid');
             },
-            runOnlyIf: ()=>_class_private_field_get(this, _editor).isVisible() && _class_private_field_get(this, _editor).isFocused(),
+            runOnlyIf: ()=>!!(_class_private_field_get(this, _editor)?.isVisible() && _class_private_field_get(this, _editor)?.isFocused()),
             group: SHORTCUTS_GROUP
         });
         pluginContext.addShortcut({
@@ -427,7 +444,7 @@ var /**
             forwardToContext: manager.getContext('grid'),
             callback: ()=>{
                 _class_private_field_set(this, _preventEditorSaveOnBlur, true);
-                _class_private_field_get(this, _editor).setValue(_class_private_field_get(this, _editor).getValue());
+                _class_private_field_get(this, _editor)?.setValue(_class_private_field_get(this, _editor)?.getValue());
                 this.setComment();
                 this.hide();
                 manager.setActiveContextName('grid');
@@ -440,7 +457,7 @@ var /**
    *
    * @private
    */ unregisterShortcuts() {
-        this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+        this.hot.getShortcutManager().getContext('grid')?.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
     /**
    * Registers all necessary DOM listeners.
@@ -449,13 +466,18 @@ var /**
    */ registerListeners() {
         const { rootDocument } = this.hot;
         const editorElement = this.getEditorInputElement();
-        this.eventManager.addEventListener(rootDocument, 'mouseover', (event)=>_class_private_method_get(this, _onMouseOver, onMouseOver).call(this, event));
-        this.eventManager.addEventListener(rootDocument, 'mousedown', (event)=>_class_private_method_get(this, _onMouseDown, onMouseDown).call(this, event));
+        this.eventManager.addEventListener(rootDocument, 'mouseover', _class_private_field_get(this, _onMouseOver));
+        this.eventManager.addEventListener(rootDocument, 'mousedown', _class_private_field_get(this, _onMouseDown));
         this.eventManager.addEventListener(rootDocument, 'mouseup', ()=>_class_private_method_get(this, _onMouseUp, onMouseUp).call(this));
-        this.eventManager.addEventListener(editorElement, 'focus', ()=>_class_private_method_get(this, _onEditorFocus, onEditorFocus).call(this));
-        this.eventManager.addEventListener(editorElement, 'blur', ()=>_class_private_method_get(this, _onEditorBlur, onEditorBlur).call(this));
-        this.eventManager.addEventListener(editorElement, 'keydown', (event)=>_class_private_method_get(this, _onEditorKeyDown, onEditorKeyDown).call(this, event));
-        this.eventManager.addEventListener(this.getEditorInputElement(), 'mousedown', (event)=>_class_private_method_get(this, _onInputElementMouseDown, onInputElementMouseDown).call(this, event));
+        if (editorElement) {
+            this.eventManager.addEventListener(editorElement, 'focus', ()=>_class_private_method_get(this, _onEditorFocus, onEditorFocus).call(this));
+            this.eventManager.addEventListener(editorElement, 'blur', ()=>_class_private_method_get(this, _onEditorBlur, onEditorBlur).call(this));
+            this.eventManager.addEventListener(editorElement, 'keydown', _class_private_field_get(this, _onEditorKeyDown));
+        }
+        const inputElement = this.getEditorInputElement();
+        if (inputElement) {
+            this.eventManager.addEventListener(inputElement, 'mousedown', _class_private_field_get(this, _onInputElementMouseDown));
+        }
     }
     /**
    * Sets the current cell range to be able to use general methods like {@link Comments#setComment}, {@link Comments#removeComment}, {@link Comments#show}.
@@ -476,7 +498,9 @@ var /**
    * @param {Event} event DOM event.
    * @returns {boolean}
    */ targetIsCellWithComment(event) {
-        const closestCell = closest(event.target, 'TD', 'TBODY');
+        const closestCell = closest(eventTargetEl(event), [
+            'TD'
+        ]);
         return !!(closestCell && hasClass(closestCell, 'htCommentCell') && closest(closestCell, [
             this.hot.rootElement
         ]));
@@ -498,7 +522,7 @@ var /**
         if (!this.range.from) {
             throwWithCause('Before using this method, first set cell range (hot.getPlugin("comment").setRange())');
         }
-        const editorValue = _class_private_field_get(this, _editor).getValue();
+        const editorValue = _class_private_field_get(this, _editor)?.getValue();
         let comment = '';
         if (value !== null && value !== undefined) {
             comment = value;
@@ -532,7 +556,7 @@ var /**
             throwWithCause('Before using this method, first set cell range (hot.getPlugin("comment").setRange())');
         }
         const { row, col } = _class_private_method_get(this, _getRangeCoords, getRangeCoords).call(this);
-        this.hot.setCellMeta(row, col, META_COMMENT);
+        this.hot.setCellMeta(row, col, META_COMMENT, undefined);
         if (forceRender) {
             this.hot.render();
         }
@@ -576,13 +600,14 @@ var /**
             throwWithCause('Before using this method, first set cell range (hot.getPlugin("comment").setRange())');
         }
         const { row, col } = _class_private_method_get(this, _getRangeCoords, getRangeCoords).call(this);
-        if (row < 0 || row > this.hot.countSourceRows() - 1 || col < 0 || col > this.hot.countSourceCols() - 1) {
+        if (row < 0 || row > this.hot.countRows() - 1 || col < 0 || col > this.hot.countCols() - 1) {
             return false;
         }
         const meta = this.hot.getCellMeta(row, col);
-        _class_private_field_get(this, _displaySwitch).cancelHiding();
-        _class_private_field_get(this, _editor).setValue((meta[META_COMMENT] ? meta[META_COMMENT][META_COMMENT_VALUE] : null) ?? '');
-        _class_private_field_get(this, _editor).show();
+        _class_private_field_get(this, _displaySwitch)?.cancelHiding();
+        const commentMeta = meta[META_COMMENT];
+        _class_private_field_get(this, _editor)?.setValue((commentMeta ? commentMeta[META_COMMENT_VALUE] : null) ?? '');
+        _class_private_field_get(this, _editor)?.show();
         this.refreshEditor(true);
         return true;
     }
@@ -601,14 +626,17 @@ var /**
     /**
    * Hides the comment editor.
    */ hide() {
-        _class_private_field_get(this, _editor).hide();
+        _class_private_field_get(this, _editor)?.hide();
     }
     /**
    * Refreshes comment editor position and styling.
    *
    * @param {boolean} [force=false] If `true` then recalculation will be forced.
    */ refreshEditor(force = false) {
-        if (!force && (!this.range.from || !_class_private_field_get(this, _editor).isVisible())) {
+        if (!force && (!this.range.from || !_class_private_field_get(this, _editor)?.isVisible())) {
+            return;
+        }
+        if (!_class_private_field_get(this, _editor)) {
             return;
         }
         const { rowIndexMapper, columnIndexMapper } = this.hot;
@@ -621,10 +649,12 @@ var /**
         // previous position
         _class_private_field_get(this, _editor).setPosition(0, 0);
         if (renderableRow === null) {
-            renderableRow = rowIndexMapper.getRenderableFromVisualIndex(rowIndexMapper.getNearestNotHiddenIndex(visualRow, -1));
+            const nearestRow = rowIndexMapper.getNearestNotHiddenIndex(visualRow, -1);
+            renderableRow = nearestRow !== null ? rowIndexMapper.getRenderableFromVisualIndex(nearestRow) : null;
         }
         if (renderableColumn === null) {
-            renderableColumn = columnIndexMapper.getRenderableFromVisualIndex(columnIndexMapper.getNearestNotHiddenIndex(visualColumn, -1));
+            const nearestCol = columnIndexMapper.getNearestNotHiddenIndex(visualColumn, -1);
+            renderableColumn = nearestCol !== null ? columnIndexMapper.getRenderableFromVisualIndex(nearestCol) : null;
         }
         const isBeforeRenderedRows = renderableRow === null;
         const isBeforeRenderedColumns = renderableColumn === null;
@@ -670,14 +700,43 @@ var /**
         if (top + editorHeight > innerHeight - horizontalScrollbarWidth) {
             y -= editorHeight - cellHeight + 1;
         }
-        _class_private_field_get(this, _editor).setPosition(x, y);
-        _class_private_field_get(this, _editor).setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY));
+        // Cap the display size to the viewport. This setSize MUST happen before
+        // observeSize() below so the resize observer's #ignoreInitialCall guard
+        // swallows the resulting resize event - otherwise the clamped size would
+        // be persisted to the cell meta and overwrite the user's intent.
+        const shrunk = shrinkSizeToViewport({
+            width: editorWidth,
+            height: editorHeight
+        }, {
+            innerWidth,
+            innerHeight,
+            verticalScrollbarWidth,
+            horizontalScrollbarWidth
+        });
+        if (shrunk.width !== editorWidth || shrunk.height !== editorHeight) {
+            _class_private_field_get(this, _editor).setSize(shrunk.width, shrunk.height);
+        }
+        const clamped = clampPositionToViewport({
+            x,
+            y,
+            width: shrunk.width,
+            height: shrunk.height
+        }, {
+            innerWidth,
+            innerHeight,
+            scrollX: rootWindow.scrollX,
+            scrollY: rootWindow.scrollY,
+            verticalScrollbarWidth,
+            horizontalScrollbarWidth
+        });
+        _class_private_field_get(this, _editor).setPosition(clamped.x, clamped.y);
+        _class_private_field_get(this, _editor).setReadOnlyState(this.getCommentMeta(visualRow, visualColumn, META_READONLY) ?? false);
         _class_private_field_get(this, _editor).observeSize();
     }
     /**
    * Focuses the comments editor element.
    */ focusEditor() {
-        _class_private_field_get(this, _editor).focus();
+        _class_private_field_get(this, _editor)?.focus();
     }
     /**
    * Sets or update the comment-related cell meta.
@@ -697,18 +756,14 @@ var /**
         this.hot.setCellMeta(row, column, META_COMMENT, newComment);
     }
     /**
-   * Gets the comment related meta information.
-   *
-   * @param {number} row Visual row index.
-   * @param {number} column Visual column index.
-   * @param {string} property Cell meta property.
-   * @returns {Mixed}
+   * Returns the value of a specific meta property from the comment attached to the given cell.
    */ getCommentMeta(row, column, property) {
         const cellMeta = this.hot.getCellMeta(row, column);
-        if (!cellMeta[META_COMMENT]) {
+        const comment = cellMeta[META_COMMENT];
+        if (!comment) {
             return undefined;
         }
-        return cellMeta[META_COMMENT][property];
+        return comment[property];
     }
     /**
    * Add Comments plugin options to the Context Menu.
@@ -726,7 +781,7 @@ var /**
    * @private
    * @returns {HTMLTextAreaElement}
    */ getEditorInputElement() {
-        return _class_private_field_get(this, _editor).getInputElement();
+        return _class_private_field_get(this, _editor)?.getInputElement() ?? null;
     }
     /**
    * Destroys the plugin instance.
@@ -736,7 +791,7 @@ var /**
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _onMouseDown), _class_private_method_init(this, _onInputElementMouseDown), _class_private_method_init(this, _onMouseOver), _class_private_method_init(this, _onMouseUp), _class_private_method_init(this, _onAfterRenderer), _class_private_method_init(this, _onEditorBlur), _class_private_method_init(this, _onEditorFocus), _class_private_method_init(this, _onEditorKeyDown), _class_private_method_init(this, _onEditorResize), _class_private_method_init(this, _onAfterDocumentKeyDown), _class_private_method_init(this, _onAfterScroll), _class_private_method_init(this, _getRangeCoords), _class_private_field_init(this, _editor, {
+        super(...args), _class_private_method_init(this, _onMouseUp), _class_private_method_init(this, _onAfterRenderer), _class_private_method_init(this, _onEditorBlur), _class_private_method_init(this, _onEditorFocus), _class_private_method_init(this, _onEditorResize), _class_private_method_init(this, _getRangeCoords), _class_private_field_init(this, _editor, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _displaySwitch, {
@@ -757,50 +812,90 @@ var /**
         }), _class_private_field_init(this, _commentValueBeforeSave, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _onMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onInputElementMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onMouseOver, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onEditorKeyDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterDocumentKeyDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterScroll, {
+            writable: true,
+            value: void 0
         }), /**
    * Current cell range, an object with `from` property, with `row` and `col` properties (e.q. `{from: {row: 1, col: 6}}`).
    *
    * @type {object}
-   */ this.range = {}, _class_private_field_set(this, _editor, null), _class_private_field_set(this, _displaySwitch, null), _class_private_field_set(this, _preventEditorAutoSwitch, false), _class_private_field_set(this, _preventEditorHiding, false), _class_private_field_set(this, _preventEditorSaveOnBlur, false), _class_private_field_set(this, _cellBelowCursor, null), _class_private_field_set(this, _commentValueBeforeSave, '');
-    }
-}
-function onMouseDown(event) {
-    if (!this.hot.view || !this.hot.view._wt) {
-        return;
-    }
-    if (!_class_private_field_get(this, _preventEditorAutoSwitch) && !this.targetIsCommentTextArea(event)) {
-        const eventCell = closest(event.target, 'TD', 'TBODY');
-        let coordinates = null;
-        if (eventCell) {
-            coordinates = this.hot.getCoords(eventCell);
-        }
-        if (!eventCell || this.range.from && coordinates && (this.range.from.row !== coordinates.row || this.range.from.col !== coordinates.col)) {
-            this.hide();
-        }
-    }
-}
-function onInputElementMouseDown(event) {
-    event.stopPropagation();
-}
-function onMouseOver(event) {
-    const { rootDocument } = this.hot;
-    if (_class_private_field_get(this, _preventEditorAutoSwitch) || _class_private_field_get(this, _editor).isFocused() || hasClass(event.target, 'wtBorder') || _class_private_field_get(this, _cellBelowCursor) === event.target || !_class_private_field_get(this, _editor)) {
-        return;
-    }
-    _class_private_field_set(this, _cellBelowCursor, rootDocument.elementFromPoint(event.clientX, event.clientY));
-    if (this.targetIsCellWithComment(event)) {
-        const range = this.hot._createCellRange(this.hot.getCoords(event.target));
-        _class_private_field_get(this, _displaySwitch).show(range);
-    } else if (isChildOf(event.target, rootDocument) && !this.targetIsCommentTextArea(event)) {
-        _class_private_field_get(this, _displaySwitch).hide();
+   */ this.range = {}, _class_private_field_set(this, _editor, null), _class_private_field_set(this, _displaySwitch, null), _class_private_field_set(this, _preventEditorAutoSwitch, false), _class_private_field_set(this, _preventEditorHiding, false), _class_private_field_set(this, _preventEditorSaveOnBlur, false), _class_private_field_set(this, _cellBelowCursor, null), _class_private_field_set(this, _commentValueBeforeSave, ''), _class_private_field_set(this, _onMouseDown, (event)=>{
+            if (!this.hot.view || !this.hot.view._wt) {
+                return;
+            }
+            if (!_class_private_field_get(this, _preventEditorAutoSwitch) && !this.targetIsCommentTextArea(event)) {
+                const eventCell = closest(eventTargetEl(event), [
+                    'TD'
+                ]);
+                let coordinates = null;
+                if (eventCell) {
+                    coordinates = this.hot.getCoords(eventCell);
+                }
+                if (!eventCell || this.range.from && coordinates && (this.range.from.row !== coordinates.row || this.range.from.col !== coordinates.col)) {
+                    this.hide();
+                }
+            }
+        }), _class_private_field_set(this, _onInputElementMouseDown, (event)=>{
+            event.stopPropagation();
+        }), _class_private_field_set(this, _onMouseOver, (event)=>{
+            const { rootDocument } = this.hot;
+            const target = eventTargetEl(event);
+            if (_class_private_field_get(this, _preventEditorAutoSwitch) || _class_private_field_get(this, _editor)?.isFocused() || hasClass(target, 'wtBorder') || _class_private_field_get(this, _cellBelowCursor) === target || !_class_private_field_get(this, _editor)) {
+                return;
+            }
+            _class_private_field_set(this, _cellBelowCursor, rootDocument.elementFromPoint(event.clientX, event.clientY));
+            if (this.targetIsCellWithComment(event)) {
+                const coords = this.hot.getCoords(target);
+                if (coords) {
+                    const range = this.hot._createCellRange(coords);
+                    _class_private_field_get(this, _displaySwitch)?.show(range);
+                }
+            } else if (isChildOf(target, rootDocument) && !this.targetIsCommentTextArea(event)) {
+                _class_private_field_get(this, _displaySwitch)?.hide();
+            }
+        }), _class_private_field_set(this, _onEditorKeyDown, (event)=>{
+            if (!_class_private_field_get(this, _editor)?.isVisible()) {
+                return;
+            }
+            if (!this.hot.getShortcutManager().hasEventShortcut(SHORTCUTS_CONTEXT_NAME, event)) {
+                event.stopPropagation();
+            }
+        }), _class_private_field_set(this, _onAfterDocumentKeyDown, (event)=>{
+            if (_class_private_field_get(this, _editor)?.isFocused()) {
+                stopImmediatePropagation(event);
+            }
+        }), _class_private_field_set(this, _onAfterScroll, ()=>{
+            if (!_class_private_field_get(this, _preventEditorHiding)) {
+                this.hide();
+            }
+        });
     }
 }
 function onMouseUp() {
     _class_private_field_set(this, _preventEditorAutoSwitch, false);
 }
 function onAfterRenderer(TD, cellProperties) {
-    if (cellProperties[META_COMMENT] && cellProperties[META_COMMENT][META_COMMENT_VALUE]) {
-        addClass(TD, cellProperties.commentedCellClassName);
+    const rawComment = cellProperties[META_COMMENT];
+    if (isCommentMeta(rawComment) && rawComment[META_COMMENT_VALUE]) {
+        const className = cellProperties.commentedCellClassName;
+        if (typeof className === 'string') {
+            addClass(TD, className);
+        }
     }
 }
 function onEditorBlur() {
@@ -813,18 +908,10 @@ function onEditorBlur() {
     this.setComment();
 }
 function onEditorFocus() {
-    _class_private_field_set(this, _commentValueBeforeSave, this.getComment());
+    _class_private_field_set(this, _commentValueBeforeSave, this.getComment() ?? '');
     this.hot.listen();
     this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
 }
-function onEditorKeyDown(event) {
-    if (!_class_private_field_get(this, _editor).isVisible()) {
-        return;
-    }
-    if (!this.hot.getShortcutManager().hasEventShortcut(SHORTCUTS_CONTEXT_NAME, event)) {
-        event.stopPropagation();
-    }
-}
 function onEditorResize(width, height) {
     const { row, col } = _class_private_method_get(this, _getRangeCoords, getRangeCoords).call(this);
     this.updateCommentMeta(row, col, {
@@ -834,19 +921,16 @@ function onEditorResize(width, height) {
         }
     });
 }
-function onAfterDocumentKeyDown(event) {
-    if (_class_private_field_get(this, _editor).isFocused()) {
-        stopImmediatePropagation(event);
-    }
-}
-function onAfterScroll() {
-    if (!_class_private_field_get(this, _preventEditorHiding)) {
-        this.hide();
-    }
-}
 function getRangeCoords() {
     if (this.range instanceof CellRange) {
-        return this.range.highlight;
+        const { row, col } = this.range.highlight;
+        return {
+            row: row ?? 0,
+            col: col ?? 0
+        };
     }
-    return this.hot._createCellCoords(this.range.from.row, this.range.from.col);
+    return {
+        row: this.range.from.row ?? 0,
+        col: this.range.from.col ?? 0
+    };
 }

package/plugins/comments/contextMenuItem/addEditComment.d.mts

@@ -0,0 +1,2 @@
+export * from './addEditComment.js';
+export { default } from './addEditComment.js';

package/plugins/comments/contextMenuItem/addEditComment.d.ts

@@ -0,0 +1,12 @@
+import type { HotInstance } from '../../../core/types';
+import type { Comments } from '../comments';
+/**
+ * @param {Comments} plugin The Comments plugin instance.
+ * @returns {object}
+ */
+export default function addEditCommentItem(plugin: Comments): {
+    key: string;
+    name(this: HotInstance): string;
+    callback(this: HotInstance): void;
+    disabled(this: HotInstance): boolean;
+};

package/plugins/comments/contextMenuItem/addEditComment.js

@@ -58,14 +58,19 @@ function addEditCommentItem(plugin) {
         key: 'commentsAddEdit',
         name () {
             const highlight = this.getSelectedRangeActive()?.highlight;
-            if (highlight?.isCell() && plugin.getCommentAtCell(highlight.row, highlight.col)) {
+            if (highlight?.isCell() && highlight.row !== null && highlight.col !== null && plugin.getCommentAtCell(highlight.row, highlight.col)) {
                 return this.getTranslatedPhrase(_constants.CONTEXTMENU_ITEMS_EDIT_COMMENT);
             }
             return this.getTranslatedPhrase(_constants.CONTEXTMENU_ITEMS_ADD_COMMENT);
         },
         callback () {
             const range = this.getSelectedRangeActive();
-            plugin.setRange(range);
+            if (range) {
+                plugin.setRange({
+                    from: range.from,
+                    to: range.to
+                });
+            }
             plugin.show();
             plugin.focusEditor();
         },

package/plugins/comments/contextMenuItem/addEditComment.mjs

@@ -7,14 +7,19 @@ import * as C from '../../../i18n/constants.mjs';
         key: 'commentsAddEdit',
         name () {
             const highlight = this.getSelectedRangeActive()?.highlight;
-            if (highlight?.isCell() && plugin.getCommentAtCell(highlight.row, highlight.col)) {
+            if (highlight?.isCell() && highlight.row !== null && highlight.col !== null && plugin.getCommentAtCell(highlight.row, highlight.col)) {
                 return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_EDIT_COMMENT);
             }
             return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ADD_COMMENT);
         },
         callback () {
             const range = this.getSelectedRangeActive();
-            plugin.setRange(range);
+            if (range) {
+                plugin.setRange({
+                    from: range.from,
+                    to: range.to
+                });
+            }
             plugin.show();
             plugin.focusEditor();
         },

package/plugins/comments/contextMenuItem/readOnlyComment.d.mts

@@ -0,0 +1,2 @@
+export * from './readOnlyComment.js';
+export { default } from './readOnlyComment.js';