handsontable 17.1.0 → 18.0.0-rc2

package/plugins/comments/comments.js

@@ -40,6 +40,7 @@ const _errors = require("../../helpers/errors");
 const _commentEditor = /*#__PURE__*/ _interop_require_default(require("./commentEditor"));
 const _displaySwitch = /*#__PURE__*/ _interop_require_default(require("./displaySwitch"));
 const _utils = require("./utils");
+const _viewport = require("./viewport");
 const _predefinedItems = require("../contextMenu/predefinedItems");
 const _addEditComment = /*#__PURE__*/ _interop_require_default(require("./contextMenuItem/addEditComment"));
 const _removeComment = /*#__PURE__*/ _interop_require_default(require("./contextMenuItem/removeComment"));
@@ -105,6 +106,14 @@ const META_COMMENT = 'comment';
 const META_COMMENT_VALUE = 'value';
 const META_STYLE = 'style';
 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 /**
@@ -139,16 +148,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.
@@ -167,8 +176,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.
@@ -178,21 +187,27 @@ 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();
 class Comments extends _base.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
         };
@@ -213,7 +228,7 @@ class Comments extends _base.BasePlugin {
         }
         if (!_class_private_field_get(this, _editor)) {
             _class_private_field_set(this, _editor, new _commentEditor.default(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();
@@ -225,12 +240,12 @@ class Comments extends _base.BasePlugin {
         }
         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, _displaySwitch1).addLocalHook('hide', ()=>this.hide());
-        _class_private_field_get(this, _displaySwitch1).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, _displaySwitch1)?.addLocalHook('hide', ()=>this.hide());
+        _class_private_field_get(this, _displaySwitch1)?.addLocalHook('show', (row, col)=>this.showAtCell(row, col));
         this.registerShortcuts();
         this.registerListeners();
         super.enablePlugin();
@@ -241,7 +256,7 @@ class Comments extends _base.BasePlugin {
    * 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, _displaySwitch1).updateDelay(this.getSetting('displayDelay'));
+        _class_private_field_get(this, _displaySwitch1)?.updateDelay(this.getSetting('displayDelay'));
         super.updatePlugin();
     }
     /**
@@ -258,7 +273,7 @@ class Comments extends _base.BasePlugin {
         const manager = this.hot.getShortcutManager();
         const gridContext = manager.getContext('grid');
         const pluginContext = manager.addContext(SHORTCUTS_CONTEXT_NAME);
-        gridContext.addShortcut({
+        gridContext?.addShortcut({
             keys: [
                 [
                     'Control',
@@ -270,7 +285,9 @@ class Comments extends _base.BasePlugin {
                 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);
@@ -280,7 +297,7 @@ class Comments extends _base.BasePlugin {
                 });
             },
             stopPropagation: true,
-            runOnlyIf: ()=>this.hot.getSelectedRangeActive()?.highlight.isCell(),
+            runOnlyIf: ()=>!!this.hot.getSelectedRangeActive()?.highlight.isCell(),
             group: SHORTCUTS_GROUP
         });
         pluginContext.addShortcut({
@@ -290,11 +307,11 @@ class Comments extends _base.BasePlugin {
                 ]
             ],
             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({
@@ -308,7 +325,7 @@ class Comments extends _base.BasePlugin {
                 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({
@@ -324,7 +341,7 @@ class Comments extends _base.BasePlugin {
             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');
@@ -337,7 +354,7 @@ class Comments extends _base.BasePlugin {
    *
    * @private
    */ unregisterShortcuts() {
-        this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+        this.hot.getShortcutManager().getContext('grid')?.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
     /**
    * Registers all necessary DOM listeners.
@@ -346,13 +363,18 @@ class Comments extends _base.BasePlugin {
    */ 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}.
@@ -373,7 +395,9 @@ class Comments extends _base.BasePlugin {
    * @param {Event} event DOM event.
    * @returns {boolean}
    */ targetIsCellWithComment(event) {
-        const closestCell = (0, _element.closest)(event.target, 'TD', 'TBODY');
+        const closestCell = (0, _element.closest)((0, _element.eventTargetEl)(event), [
+            'TD'
+        ]);
         return !!(closestCell && (0, _element.hasClass)(closestCell, 'htCommentCell') && (0, _element.closest)(closestCell, [
             this.hot.rootElement
         ]));
@@ -395,7 +419,7 @@ class Comments extends _base.BasePlugin {
         if (!this.range.from) {
             (0, _errors.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;
@@ -429,7 +453,7 @@ class Comments extends _base.BasePlugin {
             (0, _errors.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();
         }
@@ -473,13 +497,14 @@ class Comments extends _base.BasePlugin {
             (0, _errors.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, _displaySwitch1).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, _displaySwitch1)?.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;
     }
@@ -498,14 +523,17 @@ class Comments extends _base.BasePlugin {
     /**
    * 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;
@@ -518,10 +546,12 @@ class Comments extends _base.BasePlugin {
         // 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;
@@ -567,14 +597,43 @@ class Comments extends _base.BasePlugin {
         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 = (0, _viewport.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 = (0, _viewport.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.
@@ -594,18 +653,14 @@ class Comments extends _base.BasePlugin {
         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.
@@ -623,7 +678,7 @@ class Comments extends _base.BasePlugin {
    * @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.
@@ -633,7 +688,7 @@ class Comments extends _base.BasePlugin {
         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, _displaySwitch1, {
@@ -654,50 +709,90 @@ class Comments extends _base.BasePlugin {
         }), _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, _displaySwitch1, 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 = (0, _element.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() || (0, _element.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, _displaySwitch1).show(range);
-    } else if ((0, _element.isChildOf)(event.target, rootDocument) && !this.targetIsCommentTextArea(event)) {
-        _class_private_field_get(this, _displaySwitch1).hide();
+   */ this.range = {}, _class_private_field_set(this, _editor, null), _class_private_field_set(this, _displaySwitch1, 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 = (0, _element.closest)((0, _element.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 = (0, _element.eventTargetEl)(event);
+            if (_class_private_field_get(this, _preventEditorAutoSwitch) || _class_private_field_get(this, _editor)?.isFocused() || (0, _element.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, _displaySwitch1)?.show(range);
+                }
+            } else if ((0, _element.isChildOf)(target, rootDocument) && !this.targetIsCommentTextArea(event)) {
+                _class_private_field_get(this, _displaySwitch1)?.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()) {
+                (0, _event.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]) {
-        (0, _element.addClass)(TD, cellProperties.commentedCellClassName);
+    const rawComment = cellProperties[META_COMMENT];
+    if (isCommentMeta(rawComment) && rawComment[META_COMMENT_VALUE]) {
+        const className = cellProperties.commentedCellClassName;
+        if (typeof className === 'string') {
+            (0, _element.addClass)(TD, className);
+        }
     }
 }
 function onEditorBlur() {
@@ -710,18 +805,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, {
@@ -731,19 +818,16 @@ function onEditorResize(width, height) {
         }
     });
 }
-function onAfterDocumentKeyDown(event) {
-    if (_class_private_field_get(this, _editor).isFocused()) {
-        (0, _event.stopImmediatePropagation)(event);
-    }
-}
-function onAfterScroll() {
-    if (!_class_private_field_get(this, _preventEditorHiding)) {
-        this.hide();
-    }
-}
 function getRangeCoords() {
     if (this.range instanceof _src.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
+    };
 }