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 {};