Editor Textarea

TextAreaEditor

The TextAreaEditor is a custom external editor for RevoGrid that enables multi-line text editing directly within grid cells using a <textarea> element. This editor is particularly useful for scenarios where users need to input or edit larger text content that spans multiple lines, such as comments, descriptions, or notes.

Features:

• Multi-line Text Support: Renders a <textarea> element for multi-line input, allowing users to input detailed text content.
• Automatic Focus & Selection: Automatically focuses and selects the text content when the editor is rendered, ensuring a seamless user experience.
• Keyboard Navigation: Listens for Enter and Tab key events to save changes and move to the next cell, supporting efficient keyboard-based navigation.
• Save on Blur: Automatically saves the content and closes the editor when the user clicks outside the editor (blur event).
• Scroll Glitch Prevention: Ensures smooth user interaction by blurring the input before disconnecting the editor, preventing scroll glitches.

Usage:

• Import TextAreaEditor and assign it as an editor for specific columns in the RevoGrid instance.
• Ideal for columns that require detailed multi-line text input.

Example

import { TextAreaEditor } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'comments',
    name: 'Comments',
    editor: 'textarea',
  },
];

grid.editors = {
  textarea: TextAreaEditor,
};

This editor enhances RevoGrid by providing a user-friendly and efficient way to handle multi-line text input, making it suitable for applications requiring rich text editing capabilities within grid cells.

class TextAreaEditor {
  /**
     * Lifecycle method triggered after the editor is rendered.
     * Automatically focuses the textarea.
     */
  async componentDidRender(): Promise<void>;

  onKeyDown(e: KeyboardEvent);

  /**
     * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
     */
  beforeDisconnect();

  getValue();

  /**
     * Render method for the TextAreaEditor.
     * Creates a textarea element with initial cell value, handles input events, and saves changes on blur.
     */
  render(h: HyperFunc<VNode>);
}