import { BasePlugin } from '../base';
import type { default as CellCoords } from '../../3rdparty/walkontable/src/cell/coords';
export declare const PLUGIN_KEY = "comments";
export declare const PLUGIN_PRIORITY = 60;
export declare const META_COMMENT = "comment";
export declare const META_COMMENT_VALUE = "value";
export declare const META_STYLE = "style";
export declare const META_READONLY = "readOnly";
/**
* Represents a comment's metadata stored in cell meta.
*/
interface CommentMeta {
[META_COMMENT_VALUE]?: string;
[META_STYLE]?: {
width: number;
height: number;
};
[META_READONLY]?: boolean;
}
export interface CommentObject extends CommentMeta {
}
/**
* Represents the range object used by the Comments plugin.
*/
interface CommentRange {
from?: CellCoords;
to?: CellCoords;
}
/**
* @plugin Comments
* @class Comments
*
* @description
* This plugin allows setting and managing cell comments by either an option in the context menu or with the use of
* the API.
*
* To enable the plugin, you'll need to set the comments property of the config object to `true`:
* ```js
* comments: true
* ```
*
* or an object with extra predefined plugin config:
*
* ```js
* comments: {
* displayDelay: 1000,
* readOnly: true,
* style: {
* width: 300,
* height: 100
* }
* }
* ```
*
* To add comments at the table initialization, define the `comment` property in the `cell` config array as in an example below.
*
* @example
* ::: only-for javascript
* ```js
* const hot = new Handsontable(document.getElementById('example'), {
* data: getData(),
* comments: true,
* cell: [
* {row: 1, col: 1, comment: {value: 'Foo'}},
* {row: 2, col: 2, comment: {value: 'Bar'}}
* ]
* });
*
* // Access to the Comments plugin instance:
* const commentsPlugin = hot.getPlugin('comments');
*
* // Manage comments programmatically:
* commentsPlugin.setCommentAtCell(1, 6, 'Comment contents');
* commentsPlugin.showAtCell(1, 6);
* commentsPlugin.removeCommentAtCell(1, 6);
*
* // You can also set range once and use proper methods:
* commentsPlugin.setRange({from: {row: 1, col: 6}});
* commentsPlugin.setComment('Comment contents');
* commentsPlugin.show();
* commentsPlugin.removeComment();
* ```
* :::
*
* ::: only-for react
* ```jsx
* const hotRef = useRef(null);
*
* ...
*
*
*
* // Access to the Comments plugin instance:
* const hot = hotRef.current.hotInstance;
* const commentsPlugin = hot.getPlugin('comments');
*
* // Manage comments programmatically:
* commentsPlugin.setCommentAtCell(1, 6, 'Comment contents');
* commentsPlugin.showAtCell(1, 6);
* commentsPlugin.removeCommentAtCell(1, 6);
*
* // You can also set range once and use proper methods:
* commentsPlugin.setRange({from: {row: 1, col: 6}});
* commentsPlugin.setComment('Comment contents');
* commentsPlugin.show();
* commentsPlugin.removeComment();
* ```
* :::
*
* ::: only-for angular
* ```ts
* import { AfterViewInit, Component, ViewChild } from "@angular/core";
* import {
* GridSettings,
* HotTableModule,
* HotTableComponent,
* } from "@handsontable/angular-wrapper";
*
* `@Component`({
* selector: "app-example",
* standalone: true,
* imports: [HotTableModule],
* template: `
*
*
`,
* })
* export class ExampleComponent implements AfterViewInit {
* `@ViewChild`(HotTableComponent, { static: false })
* readonly hotTable!: HotTableComponent;
*
* readonly gridSettings = {
* data: this.getData(),
* comments: true,
* cell: [
* { row: 1, col: 1, comment: { value: "Foo" } },
* { row: 2, col: 2, comment: { value: "Bar" } },
* ],
* };
*
* ngAfterViewInit(): void {
* // Access to plugin instance:
* const hot = this.hotTable.hotInstance;
* const commentsPlugin = hot.getPlugin("comments");
*
* // Manage comments programmatically:
* commentsPlugin.setCommentAtCell(1, 6, "Comment contents");
* commentsPlugin.showAtCell(1, 6);
* commentsPlugin.removeCommentAtCell(1, 6);
*
* // You can also set range once and use proper methods:
* commentsPlugin.setRange({ from: { row: 1, col: 6 } });
* commentsPlugin.setComment("Comment contents");
* commentsPlugin.show();
* }
*
* private getData(): Array<*> {
* // get some data
* }
* }
* ```
* :::
*/
export declare class Comments extends BasePlugin {
#private;
/**
* Returns the plugin key used to identify this plugin in Handsontable settings.
*/
static get PLUGIN_KEY(): string;
/**
* Returns the priority order used to determine the order in which plugins are initialized.
*/
static get PLUGIN_PRIORITY(): number;
/**
* Returns the default settings applied when the plugin is enabled without explicit configuration.
*/
static get DEFAULT_SETTINGS(): {
displayDelay: number;
};
/**
* Current cell range, an object with `from` property, with `row` and `col` properties (e.q. `{from: {row: 1, col: 6}}`).
*
* @type {object}
*/
range: CommentRange;
/**
* 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.
*
* @returns {boolean}
*/
isEnabled(): boolean;
/**
* Enables the plugin functionality for this Handsontable instance.
*/
enablePlugin(): void;
/**
* Updates the plugin's state.
*
* 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(): void;
/**
* Disables the plugin functionality for this Handsontable instance.
*/
disablePlugin(): void;
/**
* Register shortcuts responsible for toggling context menu.
*
* @private
*/
registerShortcuts(): void;
/**
* Unregister shortcuts responsible for toggling context menu.
*
* @private
*/
unregisterShortcuts(): void;
/**
* Registers all necessary DOM listeners.
*
* @private
*/
registerListeners(): void;
/**
* Sets the current cell range to be able to use general methods like {@link Comments#setComment}, {@link Comments#removeComment}, {@link Comments#show}.
*
* @param {object} range Object with `from` property, each with `row` and `col` properties.
*/
setRange(range: CommentRange): void;
/**
* Clears the currently selected cell.
*/
clearRange(): void;
/**
* Checks if the event target is a cell containing a comment.
*
* @private
* @param {Event} event DOM event.
* @returns {boolean}
*/
targetIsCellWithComment(event: Event): boolean;
/**
* Checks if the event target is a comment textarea.
*
* @private
* @param {Event} event DOM event.
* @returns {boolean}
*/
targetIsCommentTextArea(event: Event): boolean;
/**
* Sets a comment for a cell according to the previously set range (see {@link Comments#setRange}).
*
* @param {string} value Comment contents.
*/
setComment(value?: string): void;
/**
* Sets a comment for a specified cell.
*
* @param {number} row Visual row index.
* @param {number} column Visual column index.
* @param {string} value Comment contents.
*/
setCommentAtCell(row: number, column: number, value: string): void;
/**
* Removes a comment from a cell according to previously set range (see {@link Comments#setRange}).
*
* @param {boolean} [forceRender=true] If set to `true`, the table will be re-rendered at the end of the operation.
*/
removeComment(forceRender?: boolean): void;
/**
* Removes a comment from a specified cell.
*
* @param {number} row Visual row index.
* @param {number} column Visual column index.
* @param {boolean} [forceRender=true] If `true`, the table will be re-rendered at the end of the operation.
*/
removeCommentAtCell(row: number, column: number, forceRender?: boolean): void;
/**
* Gets comment from a cell according to previously set range (see {@link Comments#setRange}).
*
* @returns {string|undefined} Returns a content of the comment.
*/
getComment(): string | undefined;
/**
* Gets comment from a cell at the provided coordinates.
*
* @param {number} row Visual row index.
* @param {number} column Visual column index.
* @returns {string|undefined} Returns a content of the comment.
*/
getCommentAtCell(row: number, column: number): string | undefined;
/**
* Shows the comment editor accordingly to the previously set range (see {@link Comments#setRange}).
*
* @returns {boolean} Returns `true` if comment editor was shown.
*/
show(): boolean;
/**
* Shows comment editor according to cell coordinates.
*
* @param {number} row Visual row index.
* @param {number} column Visual column index.
* @returns {boolean} Returns `true` if comment editor was shown.
*/
showAtCell(row: number, column: number): boolean;
/**
* Hides the comment editor.
*/
hide(): void;
/**
* Refreshes comment editor position and styling.
*
* @param {boolean} [force=false] If `true` then recalculation will be forced.
*/
refreshEditor(force?: boolean): void;
/**
* Focuses the comments editor element.
*/
focusEditor(): void;
/**
* Sets or update the comment-related cell meta.
*
* @param {number} row Visual row index.
* @param {number} column Visual column index.
* @param {object} metaObject Object defining all the comment-related meta information.
*/
updateCommentMeta(row: number, column: number, metaObject: Record): void;
/**
* 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}
*/
/**
* @overload
*/
getCommentMeta(row: number, column: number, property: typeof META_COMMENT_VALUE): string | undefined;
/**
* @overload
*/
getCommentMeta(row: number, column: number, property: typeof META_READONLY): boolean | undefined;
/**
* @overload
*/
getCommentMeta(row: number, column: number, property: typeof META_STYLE): {
width: number;
height: number;
} | undefined;
/**
* @overload
*/
getCommentMeta(row: number, column: number, property: string): unknown;
/**
* Add Comments plugin options to the Context Menu.
*
* @private
* @param {object} options The menu options.
*/
addToContextMenu(options: Record): void;
/**
* Gets the editors input element.
*
* @private
* @returns {HTMLTextAreaElement}
*/
getEditorInputElement(): HTMLTextAreaElement | null;
/**
* Destroys the plugin instance.
*/
destroy(): void;
}
export {};